Функції JavaScript ES6: хороші частини

ES6 пропонує кілька цікавих нових функціональних функцій, які роблять програмування на JavaScript набагато гнучкішим. Поговоримо про деякі з них - зокрема, про параметри за замовчуванням, параметри відпочинку та функції стрілок.

Цікава порада : ви можете скопіювати та вставити будь-який із цих прикладів / коду в Babel REPLі ви можете побачити, як код ES6 транспілюється до ES5.

Значення параметра за замовчуванням

Функції JavaScript мають унікальну функцію, яка дозволяє передавати будь-яку кількість параметрів під час виклику функції (фактичні параметри) незалежно від кількості параметрів, присутніх у визначенні функції (формальні параметри). Тож вам потрібно включити параметри за замовчуванням на випадок, якщо хтось забуде передати один із параметрів.

Як параметри за замовчуванням будуть реалізовані в ES5

Вищезазначене здається чудовим, коли ми запускаємо його. number2не було передано, і ми перевірили це за допомогою ||оператора ' ', щоб повернути другий операнд, якщо перший помилковий. Таким чином, значення '10' було призначено за замовчуванням, оскільки number2не визначено.

Однак є лише одна проблема. Що робити, якщо хтось передає "0" як другий аргумент? ⚠

Вищевказаний підхід зазнав би невдачі, оскільки замість переданого значення, наприклад „0”, буде призначено наше значення за замовчуванням „10” Чому? Тому що «0» оцінюється як хибність!

Давайте вдосконалимо наведений вище код, чи не так?

Ага! Це занадто багато коду. Зовсім не круто. Давайте подивимося, як це робить ES6.

Параметри за замовчуванням у ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1і number2їм присвоюються значення за замовчуванням '5' та '10' відповідно.

Ну так, це майже все. Короткий і солодкий. Немає додаткового коду для перевірки відсутності параметра. Це робить тіло функції гарним і коротким. ?

ПРИМІТКА: Коли undefinedдля параметра з аргументом за замовчуванням передається значення, як і очікувалося, передане значення є недійсним, і присвоюється значення параметра за замовчуванням . Але якщо nullйого передано, він вважається дійсним, а параметр за замовчуванням не використовується, і цьому параметру присвоюється null.

Приємною особливістю параметрів за замовчуванням є те, що параметр за замовчуванням не обов'язково повинен бути примітивним значенням, і ми також можемо виконати функцію для отримання значення параметра за замовчуванням. Ось приклад:

Попередні параметри також можуть бути типовими параметрами для параметрів, що йдуть після них, приблизно так:

function multiply(first, second = first) { // do something here}

Але зворотне викине помилку. Тобто, якщо другий параметр призначений як значення за замовчуванням для першого параметра, це призводить до помилки, оскільки другий параметр ще не визначений під час присвоєння першому параметру.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Параметри відпочинку

Решта параметр просто названий параметр , який передує три точки (...). Цей іменований параметр стає масивом, що містить решту параметрів (тобто крім названих параметрів), переданих під час виклику функції.

Тільки майте на увазі, що може бути лише один параметр спокою , і це повинен бути останній параметр. Ми не можемо мати іменований параметр після параметра відпочинку.

Ось приклад:

Як ви можете бачити, ми використовували параметр rest, щоб отримати всі ключі / властивості, які потрібно витягти з переданого об'єкта, який є першим параметром.

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

Функції стрілок ➡

Функції зі стрілками, або “функції жирових стрілок”, вводять новий синтаксис для визначення функцій, який є дуже стислим. Ми можемо уникати введення ключових слів, таких як function, returnі навіть фігурних дужок { }та дужок ().

Синтаксис

Синтаксис має різні варіанти, залежно від нашого використання. Всі варіанти мають одне спільне , , тобто вони починають з аргументами , а потім по стрілці ( =&Гт), а потім т він діяв б оди.

Аргументи та зміст можуть мати різну форму. Ось найосновніший приклад:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

У наведеному вище прикладі береться один аргумент “value” (перед стрілкою) і просто повертається цей аргумент ( => value;). Як бачите , є лише значення повернення, тому немає необхідності в ключовому слові return або фігурних бюстгальтерах, щоб обернути тіло функції.

Оскільки аргумент лише один , то дужки “()” також не потрібні .

Ось приклад із декількома аргументами, які допоможуть вам зрозуміти це:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Якщо аргументів взагалі немає, ви повинні включити порожні дужки, як показано нижче:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

Для тіла функції із лише оператором return фігурні дужки необов’язкові .

Щоб тіло функції мало більше, ніж просто оператор return, потрібно обернути тіло фігурними дужками, як традиційні функції.

Ось проста функція обчислення з двома операціями - додавання і віднімання. Його тіло повинно бути загорнуте в фігурні дужки:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

А що, якщо ми хочемо функцію, яка просто повертає об’єкт? Компілятор заплутається у фігурних дужках об’єкта ( er}) чи фігурних дужках тіла функції.()=>{id: numb

Рішення - обернути об’єкт у дужках. Ось як:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"Функції стрілок були як ракетне паливо для вибуху функціонального програмування в JavaScript". - Ерік Елліот

Ну ось і ви! Можливо, вам пора почати користуватися цими функціями.

Такі функції ES6 - це ковток свіжого повітря, і розробники просто люблять їх використовувати.

Ось посилання на моє попереднє повідомлення про оголошення змінних та підняття!

Сподіваюся, це мотивує вас взяти ES6, якщо ви ще цього не зробили!

Мир ✌️️