# Πώς να χρησιμοποιήσετε τη μέθοδο .map() της JavaScript

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

## Τι είναι το JavaScript `.map()`;

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

Η μέθοδος `.map()` χρησιμοποιείται συχνά για **τη μετατροπή όλων των στοιχείων ενός πίνακα**. Για παράδειγμα, μπορεί να τετραγωνίσει στοιχεία, να μορφοποιήσει κείμενο, να φιλτράρει αντικείμενα και να κάνει μια ποικιλία άλλων τροποποιήσεων. Αυτό καθιστά `.map()` πρακτική για την πραγματοποίηση μη καταστροφικών αλλαγών στα δεδομένα, με αποτέλεσμα καθαρό και συνεκτικό κώδικα.

## Ποια είναι η σύνταξη για το JavaScript `.map()`;

Η σύνταξη για το JS `.map()` αποτελείται από μια συνάρτηση callback σε έναν πίνακα:

```javascript
const newArr = originalArr.map(function(element, index, array) {
    // Code
});
```

- **`originalArr`**: Ο πίνακας στον οποίο θα εφαρμοστεί `.map()`
- **`element`**: Το τρέχον στοιχείο που υποβάλλεται σε επεξεργασία
- **`index (optional)`**: Ο δείκτης του τρέχοντος στοιχείου στον πίνακα
- **`array (optional)`**: Ο αρχικός πίνακας

Ας δούμε ένα παράδειγμα.

```javascript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
```

Η συνάρτηση callback που εισάγεται ως όρισμα στο `.map()` παίρνει κάθε στοιχείο από τον αρχικό πίνακα `number` και το τετραγωνίζει. Στη συνέχεια, λαμβάνουμε έναν νέο πίνακα με τα τετράγωνα κάθε στοιχείου από τον αρχικό πίνακα.

## Παραδείγματα του JavaScript `.map()`

Το JavaScript `.map()` μπορεί να χρησιμοποιηθεί για την εκτέλεση διαφόρων λειτουργιών στα στοιχεία ενός πίνακα. Ακολουθούν μερικές από τις πιο συνηθισμένες περιπτώσεις χρήσης του.

### Φιλτράρισμα δεδομένων

Αν συνδυάσετε `.map()` με `.filter()`, θα λάβετε έναν πίνακα που περιέχει μόνο τιμές που ισχύουν για την επιλεγμένη συνθήκη.

```javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0) .map(num => num * 2);
// Output: [4, 8]
```

Σε αυτό το παράδειγμα, ο πίνακας `numbers` περιέχει τις τιμές 1-5. Στη συνέχεια, εφαρμόζουμε τη μέθοδο `.filter()`. Η συνθήκη φιλτραρίσματος ορίζει ότι ο αριθμός modulo 2 πρέπει να είναι μηδέν, κάτι που ισχύει μόνο για τους ζυγούς αριθμούς. Αυτό έχει ως αποτέλεσμα έναν νέο πίνακα, ο οποίος περιέχει μόνο στοιχεία που διαιρούνται με το 2, δίνοντάς μας τον πίνακα `[2,4]`. Στη συνέχεια, χρησιμοποιούμε τη μέθοδο `.map()` για να διπλασιάσουμε κάθε στοιχείο του πίνακα. Ως αποτέλεσμα, `[2,4]` γίνεται `[4,8]`.

### Απόδοση λιστών σε βιβλιοθήκες JavaScript

Το React είναι ένα από τα πιο δημοφιλή frameworks και βιβλιοθήκες JavaScript, και `.map()`χρήσιμο για την απόδοση λιστών σε αυτό. Σημειώστε ότι το React χρησιμοποιεί **σύνταξη JSX**.

```javascript
import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);
```

Πάνω, εισήγαμε τα μοντέλα `React` και `ReactDOM` και δημιουργήσαμε έναν πίνακα με το όνομα `colors` με διάφορα ονόματα χρωμάτων. Το **λειτουργικό στοιχείο React** `ColorList` χρησιμοποιεί `.map()` για να δημιουργήσει ένα στοιχείο `<li>` για κάθε χρώμα. Το χαρακτηριστικό `key` επιτρέπει αποτελεσματικές ενημερώσεις με το React. Στο τελικό βήμα, το `ColorsList`αποδίδεται στο DOM με `ReactDOM.render` και η έξοδος προστίθεται στο στοιχείο DOM με το ID `root`.

### Στοιχεία μορφοποίησης ενός πίνακα

Η μέθοδος `.map()` της JavaScript είναι ένας απλός τρόπος για να μορφοποιήσετε στοιχεία όπως συμβολοσειρές.

```javascript
const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]
```

Σε αυτό το παράδειγμα, συνδυάζουμε `.map()` με τη μέθοδο `toLowerCase()` για να μετατρέψουμε κάθε όνομα σε πεζά. Το αποτέλεσμα είναι ένας νέος πίνακας που ονομάζεται `formattedNames`, ο οποίος περιέχει τα ονόματα σε πεζά. Ο αρχικός πίνακας `names` παραμένει αμετάβλητος.


This is a markdown version of: [https://www.ionos.com/el-gr/digitalguide/istoselides/anaptyxi-istoselidon/chartis-javascript/](https://www.ionos.com/el-gr/digitalguide/istoselides/anaptyxi-istoselidon/chartis-javascript/) for AI/LLM consumption.