Когда мы передаём аргумент при вызове функции, его значение присваивается параметру функции. Это неявное автоматическое присваивание, потому что в коде этой операции "не видно".
const func = (x) => {
// параметру x будет присвоено
// значение аргумента при вызове функции
console.log(x);
};
func(1); // => 1
// Это можно представить так, что
// внутри функции создаётся параметр x,
// которому присваивается значение аргумента:
// {
// let x = 1;
// console.log(x);
// };
func([1, 2]); // => [1, 2]
// Пример с передачей массива:
// {
// let x = [1, 2];
// console.log(x);
// };
Передача аргумента ничем не отличается от обыкновенного присвоения значения переменной. Это значит, что нам доступна деструктуризация прямо в определении функции.
Напишем функцию, которая принимает на вход массив из двух элементов и печатает их в терминал. Рассмотрим разные способы реализации работы с параметрами.
Не самый выразительный вариант — прямое обращение к элементам массива по индексам:
const func = (elements) => {
console.log(elements[0]);
console.log(elements[1]);
};
// let elements = [1, 2];
func([1, 2]);
// => 1
// => 2
Более интересный вариант — деструктуризация массива в теле функции:
const func = (elements) => {
const [first, second] = elements;
console.log(first);
console.log(second);
};
// let elements = [1, 2];
func([1, 2]);
// => 1
// => 2
https://repl.it/@hexlet/js-functions-params-destructuring-in-function-body
Но можно пойти еще дальше и добавить деструктуризацию прямо в определение:
const func = ([first, second]) => {
console.log(first);
console.log(second);
};
// let [first, second] = [1, 2];
func([1, 2]);
// => 1
// => 2
https://repl.it/@hexlet/js-functions-params-destructuring-input-argument
При этом действуют все стандартные правила деструктуризации массива:
const elements = [1, 2];
// let [first, second] = elements;
func(elements);
// => 1
// => 2
// let [first, second] = [1];
func([1]);
// => 1
// => undefined
// let [first, second] = [];
func([]);
// => undefined
// => undefined
Если в передаваемом массиве меньше двух элементов, параметры, которым "не хватило" соответствующих значений, будут содержать undefined
. Для таких случаев можно подстраховаться и задать значение по умолчанию:
const func = ([first = 666, second = 777]) => {
console.log(first);
console.log(second);
};
// [first = 666, second = 777] = [1];
func([1]);
// => 1
// => 777
// [first = 666, second = 777] = [];
func([])
// => 666
// => 777
https://repl.it/@hexlet/js-functions-params-destructuring-default-value
Напишем функцию, которая принимает на вход объект с информацией об имени и фамилии пользователя и выводит их в терминал. Сразу реализуем вариант с деструктуризацией объекта для параметров:
const func = ({ name, surname }) => {
console.log(name);
console.log(surname);
};
// let { name, surname } = { name: 'John', surname: 'Doe' };
func({ name: 'John', surname: 'Doe' });
// => John
// => Doe
https://repl.it/@hexlet/js-functions-params-destructuring-object
Типичная ситуация на практике, когда на вход функции приходит объект с большим количеством свойств, но фактически нужны значения не всех свойств, а всего нескольких. Например, это бывает при обработке HTTP-ответа (response) от сервера или конфигурации для программы. В таких случаях мы забираем только нужные значения — ведь при деструктуризации необязательно указывать все свойства объекта:
const func = ({ surname }) => {
// берём только значения surname
console.log(surname);
};
const obj = { name: 'John', surname: 'Doe' };
// let { surname } = { name: 'John', surname: 'Doe' };
func(obj); // => Doe
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт