22 KiB

Raw Blame History Unescape Escape

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

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

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

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

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

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

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

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

Функции

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

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

Очень важно давать функциям понятные названия. Хорошо названная функция четко передает свою цель — когда вы видите cancelTimer(), сразу понятно, что она делает, так же как четко обозначенная кнопка говорит вам, что произойдет при нажатии.

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

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

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

Разберем это:

Ключевое слово function говорит JavaScript: "Эй, я создаю функцию!"
nameOfFunction — это место, где вы даете своей функции описательное название
Круглые скобки () — это место, где вы можете добавить параметры (об этом мы поговорим позже)
Фигурные скобки {} содержат фактический код, который выполняется при вызове функции

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

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

Эта функция выводит "Hello, world!" в консоль. После того как вы ее определили, вы можете использовать ее столько раз, сколько потребуется.

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

// calling our function
displayGreeting();

Когда вы выполните эту строку, она выполнит весь код внутри вашей функции displayGreeting, выводя "Hello, world!" в консоль вашего браузера. Вы можете вызывать эту функцию многократно.

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

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

Вот несколько советов, которые помогут вам писать хорошие функции:

Давайте вашим функциям четкие, описательные названия — ваш будущий "я" скажет вам спасибо!
Используйте camelCasing для названий из нескольких слов (например, calculateTotal вместо calculate_total)
Сосредоточьтесь на том, чтобы каждая функция выполняла одну задачу хорошо

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

Наша функция displayGreeting ограничена — она может отображать только "Hello, world!" для всех. Параметры позволяют сделать функции более гибкими и полезными.

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

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

function name(param, param2, param3) {

}

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

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

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

Обратите внимание, как мы используем обратные кавычки (`) и ${}, чтобы вставить имя прямо в сообщение — это называется шаблонной строкой, и это очень удобный способ создания строк с переменными.

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

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

JavaScript берет строку 'Christopher', присваивает ее параметру name и создает персонализированное сообщение "Hello, Christopher!"

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

Что, если мы хотим сделать некоторые параметры необязательными? Вот тут-то и пригодятся значения по умолчанию!

Предположим, мы хотим, чтобы люди могли настроить слово приветствия, но если они его не укажут, мы просто используем "Hello" как запасной вариант. Вы можете установить значения по умолчанию, используя знак равенства, как при установке переменной:

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

Здесь name все еще обязателен, но у salutation есть резервное значение 'Hello', если никто не укажет другое приветствие.

Теперь мы можем вызвать эту функцию двумя разными способами:

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

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

В первом вызове JavaScript использует значение по умолчанию "Hello", так как мы не указали приветствие. Во втором вызове используется наше собственное "Hi". Такая гибкость делает функции адаптивными к различным сценариям.

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

Наши функции до сих пор просто выводили сообщения в консоль, но что, если вы хотите, чтобы функция что-то вычисляла и возвращала результат?

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

Чтобы вернуть значение, используйте ключевое слово return, за которым следует то, что вы хотите вернуть:

return myVariable;

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

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

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

Теперь вместо вывода приветствия эта функция создает сообщение и возвращает его нам.

Чтобы использовать возвращенное значение, мы можем сохранить его в переменной, как любое другое значение:

const greetingMessage = createGreetingMessage('Christopher');

Теперь переменная greetingMessage содержит "Hello, Christopher", и мы можем использовать ее где угодно в нашем коде — для отображения на веб-странице, включения в электронное письмо или передачи другой функции.

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

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

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

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

Попробуйте этот код — через 3 секунды вы увидите сообщение:

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

Обратите внимание, как мы передаем displayDone (без круглых скобок) в setTimeout. Мы не вызываем функцию сами — мы передаем ее в setTimeout и говорим: "вызови это через 3 секунды".

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

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

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

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

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

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

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

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

Функции-стрелки позволяют пропустить ключевое слово function и писать более лаконичный код.

Вот наш пример с таймером, используя функцию-стрелку:

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

() — это место для параметров (в данном случае пустое), затем идет стрелка =>, и, наконец, тело функции в фигурных скобках. Это обеспечивает ту же функциональность с более лаконичным синтаксисом.

Когда использовать каждый подход

Когда следует использовать каждый подход? Практическое правило: если вы будете использовать функцию несколько раз, дайте ей имя и определите отдельно. Если она предназначена для одного конкретного использования, рассмотрите возможность использования анонимной функции. Оба варианта — функции-стрелки и традиционный синтаксис — являются допустимыми, хотя функции-стрелки широко распространены в современных кодовых базах JavaScript.

🚀 Задание

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

Задание GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующее задание:

Описание: Создайте библиотеку утилит для математических функций, демонстрирующую различные концепции функций, рассмотренные в этом уроке, включая параметры, значения по умолчанию, возвращаемые значения и функции-стрелки.

Задание: Создайте JavaScript-файл под названием mathUtils.js, который содержит следующие функции:

Функция add, принимающая два параметра и возвращающая их сумму
Функция multiply с параметрами по умолчанию (второй параметр по умолчанию равен 1)
Функция-стрелка square, принимающая число и возвращающая его квадрат
Функция calculate, принимающая другую функцию в качестве параметра и два числа, затем применяющая эту функцию к этим числам
Продемонстрируйте вызов каждой функции с соответствующими тестовыми случаями

Узнайте больше о режиме Agent здесь.

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

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

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

Задание

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

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

22 KiB Raw Blame History Unescape Escape