---
description: JavaScript простым языком
---

# Методы массивов: map, sort

[![Generic badge](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)

![](https://3367117456-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8VRUyYIp5X-d6oGwV2%2F-M8WL3DXsgMqsMbrU04s%2F-M8WLOavW3maQ0db3V6-%2Fimg-28.png?alt=media\&token=b9e06cdc-a0a0-47b1-9f87-84e2eeaf022e)

#### **Метод map** <a href="#toc_1" id="toc_1"></a>

Метод `map` создает новый массив из элементов, которые будут являться результатами выполнения **callback-функции**.

У метода `map` имеется только один аргумент, который является **callback-функцией**. У этой функции имеется `3 аргумента`, по аналогии с методами описанными ранее:

**Первый аргумент** – текущей элемент (элемент на текущей итерации).

**Второй аргумент** – индекс этого элемента в массиве.

**Третий аргумент** – сам массив.

Повторюсь, **callback-функция** может быть как **обычной** (`function declaration`), так и **стрелочной** (`arrow function`).

Пример использования:

```javascript
const numbers = [2, 5, 7, 9];
const results = numbers.map(n => n ** 5);

results; // [32, 3125, 16807, 59049]
```

Из исходного массива `numbers`, с помощью метода `map` мы создали новый массив, в котором каждое число было возведено в `5-ю степень`.

#### **Метод sort** <a href="#toc_2" id="toc_2"></a>

Метод `sort`, как несложно догадаться по названию – **сортирует массив**. При этом, сортирует он его **на месте**, что означает изменение исходного массива. Плюсом к этому, данный метод еще и возвращает тот же самый массив, т.е. результат выполнения данного метода можно ещё и в другую переменную запихнуть (но это делается крайне редко).

Самый простой пример, который можно придумать, отсортировать числа, например, по возрастанию, но мы начнем не с них, а с буковок:

```javascript
const characters = ['d', 'z', 'a', 'c', 'y'];
characters.sort();

characters; // ['a', 'c', 'd', 'y', 'z']
```

Как видишь, метод расположил буквы в соответствии с их расположением в латинском алфавите. Но что же будет, если применить метод `sort` к массиву с числами? Глянем:

```javascript
const numbers = [45, 4, 2, 1, -50, 300, 0];
numbers.sort();

numbers; // [-50, 0, 1, 2, 300, 4, 45]
```

И казалось бы, что может пойти не так?! Но, всмотрись внимательно и увидишь, что значение `300` заняло далеко не своё место в этом танце =) Почему так? ПотомуШТА =). А если серьезно, то случилось это по той причине, что метод `sort` по умолчанию при работе с элементами массива преобразует их (элементы) к `строковому типу` и для сортировки применяется **лексикографический порядок**. А если сравнивать строки, то строка `300` будет больше чем строка `4`. Чтобы такой чепухи не было, нам нужно задать свой порядок сортировки.

Ты же заметил, что мы не передавали никакого аргумента в метод `sort`, а они у него есть. И да, это снова **callback-функция**. Если ты ее передашь, то она будет (**должна**) задавать правила сортировки для массива.

Главное правило **callback-функции** для данного метода – для пары значений она должна возвращать:

* `1` (или любое положительное число) – если первое значение больше второго;
* `0` – если значения равны;
* `-1` (или любое отрицательное число) – если первое значение меньше второго.

Теперь подкрепим понимание кодом:

```javascript
const numbers = [45, 4, 2, 1, -50, 300, 0];

function compare(a, b) {
   if (a > b) return 1;
   if (a === b) return 0;
   if (a < b) return - 1;
};

numbers.sort(compare);

numbers; // [-50, 0, 1, 2, 4, 45, 300]
```

Вот оно, чудо из всех чудес! Теперь сортировка отработала совершенно правильно.

Что же мы поменяли? Да в целом, ничего. Мы создали функцию, в которой описали при каких условиях и что возвращать, используя правило выше. И эту функцию мы передали в аргумент метода. И все заработало как часы.

Конкретно данный случай можно еще и упростить, если использовать `стрелочную функцию` и немного включить логику. Смотри:

```javascript
const numbers = [45, 4, 2, 1, -50, 300, 0];

numbers.sort((a, b) => a - b);

numbers; // [-50, 0, 1, 2, 4, 45, 300]
```

Воу! Код колоссально сократился, но чего же мы такого тут поменяли?

**Во-первых**, мы ввели `стрелочную функцию`, что автоматически в львиной доле случаев делает код короче.

**Во-вторых**, посмотри на эту функцию: `(a, b) => a - b`. Здесь так же фигурируют `a` и `b`, как и в примере выше и мы возвращаем их разницу. Зачем?

Ты не забыл о главном правиле? Функция должна вернуть `1` (или любое положительное число), `0` или `-1` (или любое отрицательное число).

Именно это здесь и вернется. Если числа будут равны, то результат `a - b` даст нам значение `0`. Если `a > b`, то нам вернется положительное число, если `a < b`, то вернётся отрицательное число. Таким образом, правило у нас исполнится и метод отработает как нужно.
