36 KiB

Raw Permalink Blame History Unescape Escape

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

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

journey
    title Your JavaScript Functions Adventure
    section Foundation
      Function Syntax: 5: You
      Calling Functions: 4: You
      Parameters & Arguments: 5: You
    section Advanced Concepts
      Return Values: 4: You
      Default Parameters: 5: You
      Function Composition: 4: You
    section Modern JavaScript
      Arrow Functions: 5: You
      Anonymous Functions: 4: You
      Higher-Order Functions: 5: You

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

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

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

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

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

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

mindmap
  root((JavaScript Functions))
    Basic Concepts
      Declaration
        Traditional syntax
        Arrow function syntax
      Calling
        Using parentheses
        Parentheses required
    Parameters
      Input Values
        Multiple parameters
        Default values
      Arguments
        Values passed in
        Can be any type
    Return Values
      Output Data
        return statement
        Exit function
      Use Results
        Store in variables
        Chain functions
    Advanced Patterns
      Higher-Order
        Functions as parameters
        Callbacks
      Anonymous
        No name needed
        Inline definition

Функции

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

Вместо того чтобы писать один и тот же код несколько раз в программе, вы можете упаковать его в функцию и вызывать эту функцию по мере необходимости. Такой подход упрощает код и делает его обновление гораздо проще. Представьте себе сложность обслуживания, если вам нужно изменить логику, разбросанную по 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!" в консоли вашего браузера. Вы можете вызывать эту функцию многократно.

🧠 Проверка основ функций: создание первых функций

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

Можете ли вы объяснить, почему мы используем фигурные скобки {} в определении функций?
Что произойдет, если вы напишете displayGreeting без круглых скобок?
Почему может быть полезно вызывать одну и ту же функцию несколько раз?

flowchart TD
    A["✏️ Define Function"] --> B["📦 Package Code"]
    B --> C["🏷️ Give it a Name"]
    C --> D["📞 Call When Needed"]
    D --> E["🔄 Reuse Anywhere"]
    
    F["💡 Benefits"] --> F1["No code repetition"]
    F --> F2["Easy to maintain"]
    F --> F3["Clear organization"]
    F --> F4["Easier testing"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

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

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

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

Давайте вашим функциям четкие, описательные названия — ваш будущий "я" скажет вам спасибо!
Используйте camelCase для названий из нескольких слов (например, 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!"

flowchart LR
    A["🎯 Function Call"] --> B["📥 Parameters"]
    B --> C["⚙️ Function Body"]
    C --> D["📤 Result"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["Template literal\n\`Hello, \${name}!\`"] --> C
    D1["'Hello, Alice!'"] --> D
    
    E["🔄 Parameter Types"] --> E1["Strings"]
    E --> E2["Numbers"]
    E --> E3["Booleans"]
    E --> E4["Objects"]
    E --> E5["Functions"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

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

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

Предположим, мы хотим, чтобы люди могли настроить слово приветствия, но если они его не укажут, мы просто используем "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". Эта гибкость делает функции адаптируемыми к различным сценариям.

🎛️ Проверка параметров: делаем функции гибкими

Проверьте ваше понимание параметров:

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

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: Same output always
    WithParams --> Dynamic: Changes with input
    WithDefaults --> Flexible: Optional customization
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        Most flexible approach
        Backwards compatible
    end note

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

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

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

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

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

return myVariable;

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

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

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

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

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

const greetingMessage = createGreetingMessage('Christopher');

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

flowchart TD
    A["🔧 Function Processing"] --> B{"return statement?"}
    B -->|Yes| C["📤 Return Value"]
    B -->|No| D["📭 Return undefined"]
    
    C --> E["💾 Store in Variable"]
    C --> F["🔗 Use in Expression"]
    C --> G["📞 Pass to Function"]
    
    D --> H["⚠️ Usually not useful"]
    
    I["📋 Return Value Uses"] --> I1["Calculate results"]
    I --> I2["Validate input"]
    I --> I3["Transform data"]
    I --> I4["Create objects"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 Проверка возвращаемых значений: получаем результаты

Оцените ваше понимание возвращаемых значений:

Что происходит с кодом после оператора return в функции?
Почему возвращение значений часто лучше, чем просто вывод в консоль?
Может ли функция возвращать разные типы значений (строка, число, логическое значение)?

pie title "Common Return Value Types"
    "Strings" : 30
    "Numbers" : 25
    "Objects" : 20
    "Booleans" : 15
    "Arrays" : 10

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

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

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

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

Давайте рассмотрим 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);

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

flowchart LR
    A["📝 Function Styles"] --> B["Traditional"]
    A --> C["Arrow"]
    A --> D["Anonymous"]
    
    B --> B1["function name() {}"]
    B --> B2["Hoisted"]
    B --> B3["Named"]
    
    C --> C1["const name = () => {}"]
    C --> C2["Concise syntax"]
    C --> C3["Modern style"]
    
    D --> D1["function() {}"]
    D --> D2["No name"]
    D --> D3["One-time use"]
    
    E["⏰ When to Use"] --> E1["Traditional: Reusable functions"]
    E --> E2["Arrow: Short callbacks"]
    E --> E3["Anonymous: Event handlers"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

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

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

🎨 Проверка стилей функций: выбор подходящего синтаксиса

Проверьте ваше понимание синтаксиса:

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

quadrantChart
    title Function Choice Decision Matrix
    x-axis Simple --> Complex
    y-axis One-time use --> Reusable
    quadrant-1 Arrow Functions
    quadrant-2 Named Functions
    quadrant-3 Anonymous Functions
    quadrant-4 Traditional Functions
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

Современная тенденция: Функции-стрелки становятся стандартным выбором для многих разработчиков благодаря их лаконичному синтаксису, но традиционные функции все еще находят свое место!

🚀 Задание

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

Задание GitHub Copilot Agent 🚀

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

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

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

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

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

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

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

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

Задание

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

🧰 Резюме вашего инструментария функций JavaScript

graph TD
    A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"]
    A --> C["📥 Parameters"]
    A --> D["📤 Return Values"]
    A --> E["🎨 Modern Syntax"]
    
    B --> B1["function name() {}"]
    B --> B2["Descriptive naming"]
    B --> B3["Reusable code blocks"]
    
    C --> C1["Input data"]
    C --> C2["Default values"]
    C --> C3["Multiple parameters"]
    
    D --> D1["return statement"]
    D --> D2["Exit function"]
    D --> D3["Pass data back"]
    
    E --> E1["Arrow functions: () =>"]
    E --> E2["Anonymous functions"]
    E --> E3["Higher-order functions"]
    
    F["⚡ Key Benefits"] --> F1["Code reusability"]
    F --> F2["Better organization"]
    F --> F3["Easier testing"]
    F --> F4["Modular design"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 Ваш таймлайн освоения функций JavaScript

⚡ Что вы можете сделать за следующие 5 минут

Напишите простую функцию, которая возвращает ваше любимое число
Создайте функцию с двумя параметрами, которая складывает их вместе
Попробуйте преобразовать традиционную функцию в синтаксис стрелочной функции
Практикуйте задачу: объясните разницу между функциями и методами

🎯 Что можно успеть за этот час

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

📅 Ваш недельный путь к мастерству функций

Выполнить задание "Веселье с функциями" творчески
Оптимизировать повторяющийся код, преобразовав его в переиспользуемые функции
Создать небольшой калькулятор, используя только функции (без глобальных переменных)
Практиковать стрелочные функции с методами массива, такими как map() и filter()
Создать коллекцию утилитарных функций для выполнения общих задач
Изучить функции высшего порядка и концепции функционального программирования

🌟 Ваш месячный путь к трансформации

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

🏆 Итоговая проверка мастерства функций

Отпразднуйте свое мастерство в функциях:

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

journey
    title Your Function Confidence Evolution
    section Today
      Confused by Syntax: 3: You
      Understanding Basics: 4: You
      Writing Simple Functions: 5: You
    section This Week
      Using Parameters: 4: You
      Returning Values: 5: You
      Modern Syntax: 5: You
    section Next Month
      Function Composition: 5: You
      Advanced Patterns: 5: You
      Teaching Others: 5: You

🎉 Вы освоили одну из самых мощных концепций программирования! Функции — это строительные блоки больших программ. Каждое приложение, которое вы когда-либо создадите, будет использовать функции для организации, повторного использования и структурирования кода. Теперь вы понимаете, как упаковывать логику в переиспользуемые компоненты, что делает вас более эффективным и продуктивным программистом. Добро пожаловать в мир модульного программирования! 🚀

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

36 KiB Raw Permalink Blame History Unescape Escape