Функции в JavaScript — подробное введение для начинающих

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

Функции включают в себя следующие характеристики:

  • Может принимать ни одного или несколько параметров
  • Может возвращать указанное значение в конце вызова функции
  • Может производить побочный эффект в других частях программы без возврата значения

Как создать функцию

Функции можно создавать несколькими способами. Чаще всего они создаются либо как объявление функции, либо как функциональное выражение.

Объявления функций

Объявление функции (также известное как оператор функции) — это один из способов создания функции. Чтобы создать функцию таким образом, функция должна иметь имя, необязательные параметры и инструкцию, которая выполняется внутри функционального блока.

function sayHello(name) {
  return `hello, ${name}`;
}

В приведенном выше примере имя функции — sayHello, необязательный параметр — name, а оператор — return `hello, ${name}`;. В этом примере оператор использует оператор return для явного возврата значения из функции. Однако, если оператор return опущен, функция вернет undefined.

Уникальная характеристика объявлений функций заключается в том, что при запуске программы объявления функций поднимаются в верхнюю часть объемлющей области функций или глобальной области до выполнения кода. Это позволяет вызывать объявления функций до того, как они будут определены в необработанном коде.

greeting('melvin');
function greeting(name) {
  return `Howdy, ${name}!`;
}
// Even though the function declaration comes after the function call, hoisting moves the function declaration to the top of the global scope
// 'Howdy, melvin!'

Выражение функции

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

// named function expression
const welcomeMessage = function hello(name) {
  return `hello, welcome ${name}.`;
};
// anonymous function expression
const assignedTask = function (task) {
  return `your task is: ${task}.`;
};
welcomeMessage('ned');
// 'hello, welcome ned.'
assignedTask('front-end development');
// 'your task is: front-end development.'

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

sayHello(); // Uncaught ReferenceError: sayHello is not defined
const sayHello = function () {
  return 'hello...';
};

Закрытия

Важной особенностью javascript-функций является понятие замыкание. При создании функций функция может включать в себя одну или несколько дополнительных функций. Каждая функция может иметь свои собственные переменные и функции, специфичные для ее области. Функции, заключенные в другие функции, имеют доступ к своим собственным переменным и функциям области видимости, а также ко всем переменным и функциям функций, в которые они заключены. Однако объемлющая функция не имеет доступа к переменным и функциям, которые определены внутри нее.

Еще одна особенность замыканий — возможность сохранять переменные и функции внутренних функций даже после выполнения внешней функции. JavaScript сохранит эти переменные и функции, к которым можно будет получить доступ позже во время выполнения внутренних функций объемлющей функции.

const welcomeMessage = function (name) {
  let employeeName = name;
  const greeting = function (message) {
    return `${message}, ${employeeName}.`;
  };
  return greeting;
};
let myGreeting = welcomeMessage('kalvin');
myGreeting('hello'); // 'hello, kalvin.'
myGreeting('welcome'); // 'welcome, kalvin'

В приведенном здесь примере объявлено функциональное выражение welcomeMessage, которое принимает параметр name. Переменная employeeName объявляется в рамках выражения функции. Другое функциональное выражение greeting, которое принимает параметр message, объявлено в пределах welcomeMessage. Функция greeting имеет доступ к переменным, объявленным включающей ее функцией, и возвращает строку, используя переменную employeeName и значение собственного параметра message.

Как видно, функция вызывается путем присвоения ее переменной myGreeting и передачи значения параметра name. Функция сохраняет эту переменную и делает ее доступной, когда myGreeting вызывает внутреннюю функцию greeting. Эта конструкция позволяет многократно вызывать внешнюю функцию с разными значениями параметра message, но первоначально объявленное значение переменной employeeName сохраняется и возвращается при вызове функции.

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

Начиная с ES2015, есть два новых типа параметров в дополнение к традиционному типу параметров, которые уже были показаны выше. Этими новыми типами параметров являются default parameters и rest parameters.

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

function sendGreeting(message, name = 'Anonymous') {
  return `${message}, ${name}.`;
}
sendGreeting('Welcome to the chatroom');
// 'Welcome to the chatroom, Anonymous.'

Остальные параметры полезны в тех случаях, когда функция ожидает неопределенное количество параметров. Остальные параметры позволяют функции принимать xколичество параметров с использованием оператора спреда. Элементы будут приняты в функцию без возникновения ошибки.

function customerList(name, ...cart) {
  return `customer: ${name}, ordered the following items:${cart.map(
    (item) => ` ${item}`
  )}`;
}
customerList('kal', 'book', 'hat', 'pencil', 'computer');

Стрелочные функции

Еще одна новая функция, появившаяся в ES2015, — стрелочные функции. Это функции, которые могут быть написаны с использованием сокращенного синтаксиса и имеют несколько других важных особенностей. Стрелочные функции также отличаются тем, как они обрабатывают this, по сравнению с традиционными функциями.

const sayHi = (name) => {
  return `hi, ${name}.`;
};
sayHi('jim');
// hi, jim.

Вывод

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

Дополнительные материалы на plainenglish.io