16 KiB

Raw Permalink Blame History Unescape Escape

Основы JavaScript: Методы и функции

Скетчноут от Tomomi Imura

Викторина перед лекцией

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

🎥 Нажмите на изображение выше, чтобы посмотреть видео о методах и функциях.

Вы можете пройти этот урок на Microsoft Learn!

Функции

В своей основе функция — это блок кода, который мы можем выполнить по запросу. Это идеально подходит для ситуаций, когда нужно выполнить одну и ту же задачу несколько раз; вместо того чтобы дублировать логику в разных местах (что усложнит обновление в будущем), мы можем централизовать её в одном месте и вызывать, когда потребуется выполнить операцию — функции можно даже вызывать из других функций!

Не менее важно дать функции имя. Хотя это может показаться незначительным, имя предоставляет быстрый способ документирования участка кода. Это можно сравнить с ярлыком на кнопке. Если я нажимаю на кнопку с надписью "Отменить таймер", я сразу понимаю, что она остановит таймер.

Создание и вызов функции

Синтаксис функции выглядит следующим образом:

function nameOfFunction() { // function definition
 // function definition/body
}

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

function displayGreeting() {
  console.log('Hello, world!');
}

Когда мы хотим вызвать (или выполнить) нашу функцию, мы используем её имя, за которым следует (). Стоит отметить, что функцию можно определить как до, так и после её вызова; компилятор JavaScript найдёт её за вас.

// calling our function
displayGreeting();

NOTE: Существует особый тип функции, известный как метод, который вы уже использовали! На самом деле, мы видели это в нашем примере выше, когда использовали console.log. Основное отличие метода от функции заключается в том, что метод привязан к объекту (в нашем примере — console), тогда как функция является независимой. Многие разработчики используют эти термины взаимозаменяемо.

Лучшие практики для функций

Есть несколько рекомендаций, которые стоит учитывать при создании функций:

Как всегда, используйте описательные имена, чтобы было понятно, что делает функция.
Используйте camelCasing для объединения слов.
Сосредоточьтесь на выполнении одной конкретной задачи.

Передача информации в функцию

Чтобы сделать функцию более универсальной, часто требуется передавать в неё информацию. Если рассмотреть наш пример displayGreeting, он будет отображать только Hello, world!. Это не самая полезная функция, которую можно создать. Если мы хотим сделать её немного более гибкой, например, позволить указать имя человека, которого нужно поприветствовать, мы можем добавить параметр. Параметр (иногда называемый аргументом) — это дополнительная информация, передаваемая функции.

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

function name(param, param2, param3) {

}

Мы можем обновить наш displayGreeting, чтобы он принимал имя и отображал его.

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

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

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

Значения по умолчанию

Мы можем сделать нашу функцию ещё более гибкой, добавив больше параметров. Но что, если мы не хотим, чтобы каждый параметр был обязательным? Возвращаясь к примеру с приветствием, мы можем оставить имя обязательным (нам нужно знать, кого приветствовать), но позволить настроить само приветствие. Если кто-то не хочет его настраивать, мы предоставляем значение по умолчанию. Чтобы задать значение по умолчанию для параметра, мы устанавливаем его так же, как задаём значение для переменной — parameterName = 'defaultValue'. Полный пример:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Когда мы вызываем функцию, мы можем решить, хотим ли мы задать значение для salutation.

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Возвращаемые значения

До сих пор созданная нами функция всегда выводила результат в консоль. Иногда это именно то, что нам нужно, особенно если мы создаём функции, которые будут вызывать другие сервисы. Но что, если я хочу создать вспомогательную функцию для выполнения вычислений и получить результат, чтобы использовать его в другом месте?

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

Если функция возвращает что-то, используется ключевое слово return. Ключевое слово return ожидает значение или ссылку на то, что возвращается, например:

return myVariable;

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

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

При вызове этой функции мы сохраним значение в переменной. Это аналогично тому, как мы задаём переменной статическое значение (например, const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

Функции как параметры для функций

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

Например, рассмотрим setTimeout, который запускает таймер и выполняет код после его завершения. Нам нужно указать, какой код мы хотим выполнить. Звучит как идеальная задача для функции!

Если вы выполните код ниже, через 3 секунды вы увидите сообщение 3 секунды прошли.

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Анонимные функции

Давайте ещё раз посмотрим на то, что мы создали. Мы создаём функцию с именем, которая будет использоваться только один раз. По мере усложнения нашего приложения мы можем заметить, что создаём много функций, которые будут вызываться только один раз. Это не идеально. Как оказалось, нам не всегда нужно давать имя функции!

Когда мы передаём функцию в качестве параметра, мы можем обойтись без её предварительного создания и вместо этого создать её прямо в параметре. Мы используем то же ключевое слово function, но создаём её как часть параметра.

Давайте перепишем код выше, используя анонимную функцию:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Если вы выполните наш новый код, вы заметите, что результат тот же. Мы создали функцию, но не дали ей имя!

Функции стрелки

Одним из удобных сокращений, распространённых во многих языках программирования (включая JavaScript), является возможность использовать так называемую стрелочную или жирную стрелочную функцию. Она использует специальный символ =>, который выглядит как стрелка — отсюда и название! Используя =>, мы можем пропустить ключевое слово function.

Давайте ещё раз перепишем наш код, используя функцию стрелки:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

Когда использовать каждую стратегию

Теперь вы видели три способа передачи функции в качестве параметра и, возможно, задаётесь вопросом, когда использовать каждый из них. Если вы знаете, что будете использовать функцию более одного раза, создайте её обычным способом. Если она будет использоваться только в одном месте, обычно лучше использовать анонимную функцию. Использовать ли функцию стрелки или более традиционный синтаксис function — это ваш выбор, но вы заметите, что большинство современных разработчиков предпочитают =>.

🚀 Задание

Можете ли вы сформулировать в одном предложении разницу между функциями и методами? Попробуйте!

Викторина после лекции

Обзор и самостоятельное изучение

Стоит почитать немного больше о функциях стрелки, так как они всё чаще используются в коде. Попрактикуйтесь в написании функции, а затем перепишите её с использованием этого синтаксиса.

Задание

Веселье с функциями

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.

16 KiB Raw Permalink Blame History Unescape Escape