Топ-11 (і більше!) функцій JavaScript, які потрібно знати

Ключові функції JavaScript для продуктивної розробки

JavaScript – це мова, яка панує в сучасному світі розробки, від серверних рішень до інтерактивних веб-інтерфейсів і навіть технологій космічних кораблів. Її гнучкість дозволяє використовувати як функціональне програмування, так і об’єктно-орієнтований підхід. Завдяки синтаксичній схожості з іншими “С-подібними” мовами, розробникам легко переходити між ними.

Щоб стати майстром JavaScript, необхідно освоїти ряд фундаментальних функцій. Вони не завжди є абсолютно необхідними для вирішення проблем, але значно полегшують роботу, спрощують код та підвищують його ефективність. Давайте розглянемо найважливіші з них.

map()

Розмова про важливі функції JavaScript неможлива без map(). Ця функція, разом з filter() і reduce(), є “святою трійцею” функціонального програмування, яку ви будете використовувати постійно.

map() часто викликає труднощі у новачків через її функціональний підхід. Вона працює з масивами, перетворюючи кожен елемент у щось нове і створюючи на основі цього новий масив. Логіка перетворення визначається іншою функцією, яка зазвичай є анонімною.

Іншими словами, map() застосовує функцію до кожного елемента масиву, створюючи новий масив з результатами. Ось приклад:

const weeklyTemperatures = [20, 22, 20.5, 19, 21, 21.5, 23];
const correctedTemperatures = weeklyTemperatures.map(temp => temp + 1.5);
console.log(correctedTemperatures);

У цьому прикладі ми коригуємо температуру, додаючи 1,5 градуса до кожного значення. Інший приклад використання map() – створення HTML-списку з масиву, як це часто робиться в React:

export default ({ products }) => {
    return products.map(product => {
        return (
            <div class="product" key={product.id}>
                <div class="p-name">{product.name}</div>
                <div class="p-desc">{product.description}</div>
            </div>
        );
    });
};

Хоча map() може здаватися аналогом циклу for, вона є втіленням функціонального підходу, де цінуються стислість та елегантність.

filter()

filter() – це функція, яка дозволяє фільтрувати масив на основі заданих критеріїв. Вона повертає новий масив, що містить лише ті елементи, які відповідають цим критеріям.

Наприклад, якщо ми хочемо знайти всі дні, коли температура була нижче 20 градусів, ми можемо використовувати filter():

const weeklyTemperatures = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyTemperatures.filter(temp => temp < 20);
console.log("Кількість днів з нижчою температурою: " + colderDays.length);

Функція, передана filter(), повинна повертати булеве значення (true або false), визначаючи, чи слід включати елемент до відфільтрованого масиву.

Важливо зазначити: filter() завжди повертає масив, навіть якщо він порожній. Тому не перевіряйте просто `if(colderDays)`, а використовуйте `if(colderDays.length > 0)`.

reduce()

reduce() є однією з найскладніших, але при цьому найпотужніших функцій JavaScript. Вона зводить масив до одного значення. Це значення може бути числом, рядком, об’єктом або будь-чим іншим.

reduce() приймає два аргументи: функцію-редуктор і початкове значення. Функція-редуктор приймає два параметри: акумулятор та поточне значення. Акумулятор зберігає результат обчислення на кожному кроці, а поточне значення – це елемент масиву, який обробляється.

Ось приклад знаходження факторіалу за допомогою reduce():

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial);

У цьому випадку ми починаємо з початкового значення 1, а потім множимо акумулятор на кожен елемент масиву. Хоча reduce() може бути складним для розуміння, вона надає велику гнучкість та можливості для створення стислого та елегантного коду.

Все, що робить reduce(), можна виконати і за допомогою циклів for або forEach(). Однак reduce() дозволяє писати код, який легше читати і підтримувати, а також гарантує незмінність вихідних даних.

some()

some() перевіряє, чи є хоча б один елемент масиву, який відповідає заданому критерію. Вона повертає булеве значення: true, якщо знайдено хоча б один елемент, і false, якщо жоден елемент не відповідає критерію.

Приклад використання some() для перевірки, чи є в масиві люди старше 35 років:

const persons = [
    { name: 'Person 1', age: 32 },    
    { name: 'Person 2', age: 40 }
];

if(persons.some(person => person.age > 35)) {
    console.log("Знайдено людей старше 35 років!");
}

some() значно спрощує код, дозволяючи уникнути використання циклів і змінних-прапорів.

every()

every() перевіряє, чи всі елементи масиву відповідають заданому критерію. Вона повертає true, якщо всі елементи відповідають критерію, і false в іншому випадку.

Приклад використання every() для перевірки, чи всі елементи мають валідний ідентифікатор:

const entries = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
];
if(entries.every(entry => Number.isInteger(entry.id) && entry.id > 0)) {
    console.log("Всі елементи мають валідний ID");
}

Як і some(), every() робить код простішим для розуміння і читання.

includes()

includes() – це простий і зручний метод для перевірки, чи містить масив певний елемент, або рядок певний підрядок. Він повертає true, якщо елемент/підрядок знайдено, і false, якщо ні.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4)); // true
const name = "Ankush";
console.log(name.includes('ank')); // false
console.log(name.includes('Ank')); // true

Важливо пам’ятати, що includes() чутливий до регістру і не працює з об’єктами безпосередньо.

slice()

slice() створює новий масив або рядок, що є частиною вихідного. Вона приймає два аргументи: початковий індекс та кінцевий індекс (кінцевий індекс не включається).

const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // "guest we've all been"

slice() не змінює вихідний масив або рядок і часто використовується для створення поверхневих копій.

splice()

splice() змінює вихідний масив, видаляючи, замінюючи або додаючи елементи. Вона повертає масив видалених елементів.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]

splice() є потужним, але її використання вимагає обережності через модифікацію вихідного масиву.

shift()

shift() видаляє перший елемент з масиву і повертає його.

const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift();
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]

unshift()

unshift() додає один або кілька елементів на початок масиву і повертає нову довжину масиву.

const items = ['eggs', 'milk'];
items.unshift('bread');
console.log(items); // [ 'bread', 'eggs', 'milk' ]

Важливо пам’ятати, що shift() і unshift() є неефективними для великих масивів.

fill()

fill() змінює всі або частину елементів масиву на статичне значення.

const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]

const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]

fill() дозволяє швидко “скинути” або оновити масив.

Інші корисні функції

Існує ще багато інших корисних методів JavaScript, які варто вивчити:

reverse()
sort()
entries()
find()
flat()

Висновок

JavaScript – це потужна мова з великою кількістю вбудованих функцій. Освоєння цих методів дозволить вам писати чистіший, ефективніший та компактніший код. Не варто недооцінювати можливості базової мови, а також корисність таких бібліотек як Lodash. Завжди є щось нове для вивчення, тому не зупиняйтеся на досягнутому!