Κατάλογος καθαρών συναρτήσεων στη JavaScript

Καθαρές συναρτήσεις

Τα τελευταία χρόνια, με την αύξηση του λειτουργικού στυλ προγραμματισμού στη JavaScript, ήρθε η διαπίστωση ότι οι συναρτήσεις γενικά και ειδικά οι καθαρές συναρτήσεις είναι ευκολότερο να συλλογιστεί κανείς σε σχέση με το παράδειγμα του αντικειμενοστραφούς προγραμματισμού (OOP).

Ως εκ τούτου, το γενικό λειτουργικό στυλ προγραμματισμού έχει γίνει όλο και πιο διαδεδομένο στην κοινότητα της JavaScript. Για παράδειγμα, το React προχώρησε σε στοιχεία συναρτήσεων από στοιχεία κλάσεων. Στον προγραμματισμό υπολογιστών, μια καθαρή συνάρτηση είναι μια συνάρτηση που επιστρέφει για πανομοιότυπες παραμέτρους πανομοιότυπη έξοδο. Επίσης, μια καθαρή συνάρτηση δεν έχει παρενέργειες όπως η μετάλλαξη των μεταβλητών ή τα μεταβλητά ορίσματα.

Στο πλαίσιο του προγραμματισμού συναρτησιακού στυλ, οι καθαρές συναρτήσεις κατέχουν επομένως μια ξεχωριστή θέση. Από ορισμένους υποστηρικτές αποτελούν τον προτιμώμενο τρόπο προγραμματισμού στη JavaScript, αν είναι δυνατόν (βλέπε για παράδειγμα Dmitri Pavlutin).

Καθαρές συναρτήσεις στη JavaScript

Η JavaScript όπως ορίζεται στις προδιαγραφές ECMAScript έρχεται με έναν μεγάλο αριθμό προκαθορισμένων αντικειμένων και συναρτήσεων. Πολλές από τις συναρτήσεις δεν είναι καθαρές, αλλά ένας αριθμός από αυτές είναι καθαρές συναρτήσεις που μπορούμε να χρησιμοποιήσουμε κατά προτίμηση. Αυτές είναι οι καθαρές συναρτήσεις που είναι διαθέσιμες στη JavaScript από προεπιλογή (μη εξαντλητική λίστα):

Γενικά

• parseInt():

Αναλύει το όρισμα string και επιστρέφει έναν ακέραιο.

console.log(parseInt('123456'));
// 123456

• parseFloat():

Αναλύει μια συμβολοσειρά και επιστρέφει έναν αριθμό κινητής υποδιαστολής.

console.log(parseFloat("3.14"));
// 3.14

String

• String.slice():

Η συνάρτηση αυτή εξάγει ένα τμήμα μιας συμβολοσειράς και επιστρέφει μια νέα συμβολοσειρά.

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(4, 19));
// "quick brown fox"

• String.trim():

Η συνάρτηση αυτή αφαιρεί τα κενά από τα δύο άκρα της συμβολοσειράς και επιστρέφει μια νέα συμβολοσειρά, χωρίς να τροποποιεί την αρχική συμβολοσειρά.

const greeting = "   Hello developers!   ";

console.log(greeting.trim());
// Expected output: "Hello developers!";

• String.toUpperCase(), String.toLowerCase():

Η συνάρτηση επιστρέφει τη συμβολοσειρά που έχει μετατραπεί σε κεφαλαία ή πεζά γράμματα.

const sentence = 'Hello developers!';

console.log(sentence.toUpperCase());
// Expected output: "HELLO DEVELOPERS!"

• String.substring():

Αυτή η συνάρτηση επιστρέφει το τμήμα αυτής της συμβολοσειράς από τον δείκτη έναρξης μέχρι και τον δείκτη τέλους, ή μέχρι το τέλος της συμβολοσειράς αν δεν παρέχεται δείκτης τέλους.

const str = 'Ríoverse';

console.log(str.substring(1, 3));
// Expected output: "ío"

console.log(str.substring(2));
// Expected output: "overse"

• String.charAt():

Αυτή η μέθοδος επιστρέφει μια νέα συμβολοσειρά που αποτελείται από τη μοναδική μονάδα κώδικα UTF-16 στο δεδομένο δείκτη.

const sentence = 'I like learning languages with Ríoverse.';

const index = 2;

console.log(`The character at index ${index} is ${sentence.charAt(index)}`);
// Expected output: "The character at index 2 is l"

• String.replace():

Αυτή η μέθοδος επιστρέφει ένα νέο αλφαριθμητικό με ένα, μερικά ή όλα τα ταίριασμα ενός προτύπου που έχει αντικατασταθεί από μια αντικατάσταση.

const paragraph = "I think Tania's cat is cuter than your cat!";

console.log(paragraph.replace("Tania's", 'my'));
// Expected output: "I think my cat is cuter than your cat!"

Math

• Math.sqrt():

Αυτή η μέθοδος επιστρέφει την τετραγωνική ρίζα ενός αριθμού.

console.log(Math.sqrt(16));
// Expected output: 4

Υπάρχουν πολλές άλλες συναρτήσεις Math που είναι καθαρές συναρτήσεις. Θα το αφήσω σε μια σελίδα όπως το MDN να τις απαριθμήσει όλες.

Array

Αυτές οι συναρτήσεις array δεν τροποποιούν τον αρχικό πίνακα, αλλά επιστρέφουν έναν νέο πίνακα ή μια τιμή με βάση τον πίνακα εισόδου.

• Array.concat():

Αυτή η συνάρτηση χρησιμοποιείται για τη συγχώνευση δύο ή περισσότερων πινάκων. Αυτή η μέθοδος δεν αλλάζει τους υπάρχοντες πίνακες, αλλά αντίθετα επιστρέφει έναν νέο πίνακα.

const array1 = ['α', 'β', 'γ'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["α", "β", "γ", "d", "e", "f"]

• Array.map(): Αυτή η συνάρτηση δημιουργεί έναν νέο πίνακα που γεμίζει με τα αποτελέσματα της κλήσης μιας παρεχόμενης συνάρτησης σε κάθε στοιχείο του πίνακα κλήσης.

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

• Array.reduce():

Αυτή η μέθοδος των περιπτώσεων Array εκτελεί μια συνάρτηση επανάκλησης "reducer" που παρέχει ο χρήστης σε κάθε στοιχείο του πίνακα, με τη σειρά, περνώντας την τιμή επιστροφής από τον υπολογισμό στο προηγούμενο στοιχείο. Το τελικό αποτέλεσμα της εκτέλεσης του reducer σε όλα τα στοιχεία του πίνακα είναι μια ενιαία τιμή.

const array1 = [1, 2, 3, 4, 5];

// 0 + 1 + 2 + 3 + 4 + 5
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 15

• Array.every():

Αυτή η μέθοδος ελέγχει αν όλα τα στοιχεία του πίνακα περνούν τον έλεγχο που υλοποιείται από την παρεχόμενη συνάρτηση. Επιστρέφει μια τιμή Boolean.

const isBelowThreshold = (currentValue) => currentValue < 50;

const array1 = [1, 30, 39, 29, 10, 13, 48];

console.log(array1.every(isBelowThreshold));
// Expected output: true

• Array.some():

Αυτή η μέθοδος ελέγχει αν τουλάχιστον ένα στοιχείο του πίνακα περνάει το τεστ που υλοποιείται από την παρεχόμενη συνάρτηση. Επιστρέφει true αν, στον πίνακα, βρει ένα στοιχείο για το οποίο η παρεχόμενη συνάρτηση επιστρέφει true- διαφορετικά επιστρέφει false. Δεν τροποποιεί τον πίνακα.

const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true

• Array.slice():

Η μέθοδος επιστρέφει ένα ρηχό αντίγραφο ενός τμήματος ενός πίνακα σε ένα νέο αντικείμενο πίνακα που επιλέγεται από την αρχή έως το τέλος (το τέλος δεν περιλαμβάνεται), όπου η αρχή και το τέλος αντιπροσωπεύουν το δείκτη των στοιχείων του εν λόγω πίνακα. Ο αρχικός πίνακας δεν θα τροποποιηθεί.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

Προσοχή, υπάρχει μια παρόμοια μη καθαρή συνάρτηση που ονομάζεται Array.splice().

• Array.toReversed():

Αυτή η μέθοδος είναι το αντίστοιχο αντίγραφο της μεθόδου reverse(). Επιστρέφει έναν νέο πίνακα με τα στοιχεία σε αντίστροφη σειρά.

const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

Σημειώστε ότι η Array.reverse() μέθοδος είναι το μη καθαρό αντίστοιχο της Array.toReversed().

Object

• Object.keys():

Αυτή η μέθοδος επιστρέφει έναν πίνακα από τα ίδια τα απαριθμήσιμα ονόματα ιδιοτήτων ενός συγκεκριμένου αντικειμένου με συμβολοσειρά-κλειδιά.

const object1 = {
  a: 'astring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]

Συμπέρασμα

Αν προτιμάτε το στυλ προγραμματισμού με συναρτήσεις στη JavaScript, είμαι σίγουρος ότι αυτές οι καθαρές συναρτήσεις θα σας φανούν χρήσιμες στα έργα σας. Μειώνουν την πολυπλοκότητα και σας επιτρέπουν να αιτιολογείτε τον κώδικά σας πιο εύκολα. Έτσι, αυτό βοηθά στη μείωση των σφαλμάτων. Αν έχετε άλλα παραδείγματα καθαρών συναρτήσεων που θα θέλατε να αναφερθούν, ενημερώστε με και κάντε κλικ στο κουμπί επικοινωνίας παρακάτω.

Αναφορές

• MDN: https://developer.mozilla.org/en-US
• Blog by Dmitri Pavlutin: https://dmitripavlutin.com/javascript-pure-function

Cover Image: Photo by James Ahlberg on Unsplash