ES6: Параметры функции (VI).

Параметры функции

Все материалы по ES6

В JavaScript работа с параметрами функции очень гибкая. Например: Ничто не помешает отправить в функцию больше, или меньше аргументов, чем нужно. Но "Большая сила несет за собой большую ответсвенность!"

И в больших приложениях на JavaScript такая гибкость может создать проблемы. В ES6 есть два нововведения, касающихся параметров функции, которые могут сделать работу с ними более удобной и понятной.

• Параметры по умолчанию (default parameters).
• Оставшиеся параметры (rest parameters).

Параметры по умолчанию (default parameters).

Первое что мы сделаем это запустим скрипт Babel, который будет следить за файлами и при их изменении создавать свежие версии.

Откроем папку проекта в командной строке (КС). Вводим команду:

npm run watch

И нажать Enter

Последние версии браузеров поддержвают параметры по умолчанию без транспиляции. Изменнеый код нас будет интересовать в порядке ознакомления.

В папке src создадим файл parameters.js и сразу укажу его в файле index.html

<script src="src/parameters.js"></script>

Лучше всего понять это на примере:

Создадим функцию greet(), которая будет принимать два параметра greeting, name, а в консоле выводить сообщение приветствия.

console.log(`${greeting} ${name}`);

Здесь мы воспользовались шаблонной строкой.

Теперь можно вызвать функцию со следующими аргументами:

greet("Hi", "Bill"); parameters.js

function greet(greeting, name) {
 console.log(`${greeting} ${name}`);
};
greet("Hi", "Bill");

Результат будет вывод в консоль сообщения Hi Bill, как на фото ниже.

Теперь попробуем опустить один из парамеров.

greet("Hi");

В консоле мы увидим Hi undefined.

Так произошло, потому что мы не отправили параметр и ему присвоено значение undefined.

Мы можем отправить значение undefined сами.

greet(undefined, "Bill");

Результат:

И как можно предположить, если вызвать эту функцию вообще без аргументов, то в консоле получим undefined undefined.

Для того, чтобы функция работала правильно, нам следует проверить значения параметров перед тем, как мы ее используем.

Это можно сделать несколькими способами. Для того, чтобы лучше понять - воспользуемся самым объемным и запутанным. :-)

function greet(greeting, name) {
    if (greeting !== undefined && name !== undefined) {
        console.log(`${greeting} ${name}`);
    } else if (greeting === undefined && name !== undefined) {
        console.log(`Hello ${name}`);
    } else if (greeting !== undefined && name === undefined) {
        console.log(`${greeting} friend`);
    } else {
        console.log('Hello friend');
    }
}

Я думаю, что здесь все понятно, не смотря на относительно большой блок кода. Здесь идет обычная проверка переданных в функцию аргументов в блоках if, и если один из параметров undefined, то тогда ему назначаем новый параметр.

Запустим, чтобы убедиться и увидим в консоле:

Это значит, что функция работает правильно!

Но данный алгоритм ужастен и так писать код в JavaScript ненужно!

Очень много кода ушло только на то, чтобы проверить значения двух параметров.

А если их много? Пять! Десять!

Мы можем намного упростить код используя параметры по умолчанию!

Это можно сделать очень просто!

function greet(greeting = "Hello", name = "friend") {
 console.log(`${greeting} ${name}`);
};

greet("Hi", "Bill");
greet("Hi");
greet(undefined, "Bill");

В результате мы увидим в консоле:

Теперь можно посотреть на транспилированный код - dist/parameters.js

"use strict";

// function greet(greeting, name) {
//  console.log(`${greeting} ${name}`);
// };
// greet("Hi", "Bill");
// greet("Hi");
// greet(undefined, "Bill");


// function greet(greeting, name) {
//     if (greeting !== undefined && name !== undefined) {
//         console.log(`${greeting} ${name}`);
//     } else if (greeting === undefined && name !== undefined) {
//         console.log(`Hello ${name}`);
//     } else if (greeting !== undefined && name === undefined) {
//         console.log(`${greeting} friend`);
//     } else {
//         console.log('Hello friend');
//     }
// }

function greet() {
 var greeting = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Hello";
 var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "friend";

 console.log(greeting + " " + name);
};

greet("Hi", "Bill");
greet("Hi");
greet(undefined, "Bill");

Babel сделал то, что мы сделали бы и сами. Использовал переменные, оператор "или" - || и тернарный оператор - ?.

Теперь перейдем к оставшимся параметрам.

Шпаргалка по ES6

Оставшиеся параметры (rest parameters)

Предположим, что требуется написать функцию, которая складывает числа. Заранее мы не знаем сколько будет параметров. Поэтому вызов функции может выглядт следующим образом:

sum(5, 7, 2, 10);

Теперь напишем саму функцию. Но, что нам делать с параметрами, если мы не знаем сколько их будет?

До ES6 мы использовали объект arguments. Данный объект не указывается в списке параметров и доступен в любой функции.

function sum(){
 console.log(arguments);
};
sum(5, 7, 2, 10);

Давайте посмотрим на этот объект в консоле.

С первого взгляда может показаться, что это массив, но это не так.

Это объект названия свойств которого представляют числа.

В этом можно убедиться используя оператор instanceof

function sum(){
 console.log(arguments instanceof Array);
};
sum(5, 7, 2, 10);

В консоле мы увидим false - подтверждение того, что arguments не является массивом.

Для того, чтобы итерировать arguments мы мжем использовать цикл for, но мне кажется, что намного проще использовать метод forEach, который доступен всем массивам. Пробелам лишь в том, что arguments не массив. У него нет этого метода.

Мы можем сделать следующее:

Используя проттип объекта Array - Array.prototype мы можем использовать метод call() метода forEach forEach.call(). Туда передадим объект arguments и функцию обратного вызова, которая примет параметры value (index и array но они нам не нужны).

Нам потребуется переменная. И так как мы пишем в ES5, то мы объявим ее через var.

function sum(){
 console.log(arguments instanceof Array);

 var sum = 0;
 Array.prototype.forEach.call(arguments, function(value){
  sum += value;
 });
 console.log(sum);
};
sum(5, 7, 2, 10); //24

Эта функция выведет в консоль 24.

В ES6 в таком написании нет необходимости, но знать, как работает эта функция нужно!

Если мы пишем код на ES6, то мы можем воспользоваться оставшимися параметрами.

Синтаксис очень простой и выглядит следующим образом.

function sum(...values){
    console.log(values);
}

Очень похоже на оператор разворота, но работает по другому.

Если оператор разворота разворачивает массив и представляет аргументы по отдельности, то синтаксис оставшихся параметров наоборот - превращает отдельные элементы в массив.

Таким образом values будет полноценным массивом.

Мы можем посмотреть на него в консоле и увидет значения массива.

Для того, чтобы убедиться в том, что это массив, мы можем воспользоваться оператором instanceof

function sum(...values){
 console.log(values instanceof Array); //true
}

В коносле мы увидим true.

Тепер мы перепишем нашу функцию используя ES6.

Так как это массив мы можем использовать метод forEach сразу на values.

function sum(...values){
 console.log(values instanceof Array);
 let sum = 0;
 values.forEach(function(value){
  sum += value;
 });
 console.log(sum); //24
}

В консоль выведет снова - 24!

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

Функция обратного вызова в качестве первого параметра принимает предыдущее значение - prevValue, currentValue

function sum(...values) {
    console.log(values.reduce(function(prevValue, currentValue) {
        return prevValue + currentValue;
    }));
}


sum(5, 7, 2, 10);

Данный код выведет -24.

Шпаргалка по ES6