Работа с функциями в JavaScript

2.1 Объявление и вызов функций

Что такое функция? 🤔

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

Способы объявления функций:

• Функциональное объявление (Function Declaration):

function имяФункции() {
  // тело функции
}

Пример:

function greet() {
  console.log('Добро пожаловать!');
}
greet();

function greet(name) {
    return `Привет, ${name}!`;
}
console.log(greet("Анна")); // Привет, Анна!

• Функциональное выражение (Function Expression):

const имяФункции = function() {
  // тело функции
};

Пример:

const greet = function() {
  console.log('Добро пожаловать!');
};
greet();

const greet = function(name) {
    return `Привет, ${name}!`;
};

console.log(greet("Боб")); // Привет, Боб!
console.log(sayHello("Клара")); // Ошибка, так как sayHello ещё не определена
const sayHello = function(name) {
    return `Привет, ${name}!`;
};

• Стрелочные функции (Arrow Functions): Упрощённый синтаксис для функций.

const имяФункции = () => {
  // тело функции
};

Пример:

const greet = () => {
  console.log('Добро пожаловать!');
};
greet();

const greet = (name) => `Привет, ${name}!`;
console.log(greet("Клара")); // Привет, Клара!

2.2 Параметры и возвращаемые значения

Передача параметров

Функции могут принимать данные (параметры) и использовать их внутри своего тела.

function greet(name) {
  console.log(`Привет, ${name}!`);
}

greet('Анна'); // Вывод: Привет, Анна!

Ты можешь передавать несколько параметров:

function sum(a, b) {
  console.log(a + b);
}

sum(5, 10); // Вывод: 15

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

Если параметр не передан, можно указать значение по умолчанию:

function greet(name = 'гость') {
  console.log(`Привет, ${name}!`);
}

greet(); // Вывод: Привет, гость!

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

Функции могут возвращать результат с помощью ключевого слова return:

function sum(a, b) {
  return a + b;
}

const result = sum(3, 7);
console.log(result); // Вывод: 10

2.3 Контекст вызова (this)

Что такое this? 🤔

this — это объект, который связан с текущим контекстом выполнения функции. Он зависит от того, как функция была вызвана.

В глобальной области видимости

В браузере this ссылается на window:

console.log(this); // window

В методах объектов

Если функция вызвана как метод объекта, this ссылается на этот объект:

const user = {
  name: 'Анна',
  greet() {
    console.log(`Привет, я ${this.name}`);
  }
};

user.greet(); // Вывод: Привет, я Анна

В стрелочных функциях

Стрелочные функции не имеют собственного this. Они берут его из внешнего контекста:

const user = {
  name: 'Анна',
  greet: () => {
    console.log(`Привет, я ${this.name}`);
  }
};

user.greet(); // Вывод: Привет, я undefined

2.4 Замыкания

Что такое замыкание? 🤔

Замыкание — это функция, которая «запоминает» свои переменные из внешнего окружения, даже после того, как это окружение перестало существовать.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Вывод: 1
console.log(counter()); // Вывод: 2
console.log(counter()); // Вывод: 3

Почему это важно?

Замыкания позволяют создавать приватные данные, к которым нет доступа извне.

function createSecret(secret) {
  return function() {
    return secret;
  };
}

const getSecret = createSecret('Мой секрет');
console.log(getSecret()); // Вывод: Мой секрет