Learn JavaScript

function - ключевое слово для объявления функций в JavaScript

function - это ключевое слово JavaScript для объявления функций.

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

Важно: function - это не встроенная функция и не метод, а часть синтаксиса языка.

Синтаксис

Базовый вариант выглядит так:

function name(param1, param2) {
  // код функции
}

Пример:

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

Здесь:

  • greet - имя функции
  • name - параметр
  • код внутри {} - тело функции

Что делает function

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

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

console.log(sum(2, 3)); // 5
console.log(sum(10, 5)); // 15

Это удобнее, чем каждый раз заново писать одинаковый код.

Имя функции

После function обычно указывают имя функции.

function showMessage() {
  console.log("Сообщение");
}

Имя помогает понять, что делает функция, и делает код заметно понятнее.

Обычно имя выбирают как действие:

  • getUser()
  • calculateTotal()
  • showModal()
  • createCard()

Параметры и аргументы

Параметры записывают при объявлении функции. Аргументы передают при вызове.

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

greet("Анна", "Москва");

Здесь:

  • name и city - параметры
  • "Анна" и "Москва" - аргументы

Параметры работают как локальные переменные внутри функции.

function multiply(a, b) {
  const result = a * b;
  return result;
}

Если аргументов не хватает

Если вызвать функцию без нужного аргумента, соответствующий параметр получит undefined.

function greet(name) {
  console.log(name);
}

greet(); // undefined

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

Если аргументов больше, чем параметров

Лишние аргументы не мешают обычному вызову: функция просто использует те параметры, которые объявлены.

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

console.log(sum(1, 2, 3)); // 3

Третий аргумент здесь передан, но в самой функции он не используется.

Как вызвать функцию

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

function greet() {
  console.log("Привет!");
}

greet();

Если написать только имя без скобок, это будет ссылка на саму функцию, а не её выполнение.

function greet() {
  return "Привет!";
}

const fn = greet;

console.log(fn()); // "Привет!"

Что возвращает функция

Если внутри есть return, функция возвращает указанное значение.

function square(number) {
  return number * number;
}

console.log(square(4)); // 16

Если return нет, функция всё равно что-то возвращает, но это будет undefined.

function showMessage(text) {
  console.log(text);
}

const result = showMessage("JavaScript");

console.log(result); // undefined

Это важный момент: функция может что-то делать, но не обязана возвращать результат.

function declaration

Самый привычный вариант - объявление функции через function declaration.

function sayHi() {
  console.log("Hi");
}

Такую функцию можно вызвать даже раньше её места в коде.

sayHi(); // "Hi"

function sayHi() {
  console.log("Hi");
}

Так работает hoisting: объявление функции поднимается вверх в своей области видимости.

function expression

function можно использовать и как выражение, если присвоить функцию в переменную.

const sayHi = function () {
  console.log("Hi");
};

Это уже function expression.

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

// sayHi(); // ReferenceError

const sayHi = function () {
  console.log("Hi");
};

Оба варианта полезны, но для простого объявления функции часто начинают именно с function declaration.

Зачем вообще выносить код в функции

Функции особенно полезны, когда:

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

Пример:

function formatPrice(price) {
  return `${price} ₽`;
}

console.log(formatPrice(100));
console.log(formatPrice(250));
console.log(formatPrice(999));

Когда это полезно

Даже в маленьких проектах функции быстро делают код аккуратнее.

function isAdult(age) {
  return age >= 18;
}

function showAccessMessage(age) {
  if (isAdult(age)) {
    console.log("Доступ разрешён");
    return;
  }

  console.log("Доступ запрещён");
}

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

Частые ошибки

Думать, что function - это обычная функция

function greet() {
  console.log("Привет");
}

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

Забывать скобки при вызове

function greet() {
  return "Привет";
}

console.log(greet);   // сама функция
console.log(greet()); // "Привет"

Без () функция не выполняется.

Ожидать результат от функции без return

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

console.log(sum(2, 3)); // undefined

Если результат нужен снаружи, его нужно явно вернуть.

Забывать, что пропущенный аргумент станет undefined

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

greet(); // "Привет, undefined"

Если параметр обязателен, это стоит учитывать в коде.

Пытаться вызвать function expression раньше объявления

// sayHi(); // ReferenceError

const sayHi = function () {
  console.log("Hi");
};

Для такого варианта сначала должна выполниться строка с присваиванием.

Быстрая памятка

  • function - это ключевое слово JavaScript, а не встроенная функция
  • функция может принимать параметры и возвращать результат
  • параметры пишут в объявлении, аргументы передают при вызове
  • если return нет, функция возвращает undefined
  • function declaration можно вызвать раньше места объявления
  • function expression обычно используют после присваивания в переменную

Коротко

function - это базовый способ объявлять функции в JavaScript. Главное, что стоит запомнить: функция помогает переиспользовать код, может принимать аргументы, может возвращать результат, а function declaration и function expression похожи по смыслу, но ведут себя по-разному в момент объявления и вызова.