StudyCode
Объявление, параметры, return, Function Expression и стрелочные функции.
function greet(name) {
return "Привет, " + name + "!";
}
// Вызов
greet("Иван"); // "Привет, Иван!"Hoisting: Function Declaration доступна в ЛЮБОМ месте файла, даже до объявления:
sayHello(); // работает!
function sayHello() {
console.log("Привет!");
}function add(a, b) { // a, b — параметры
return a + b;
}
add(3, 5); // 3, 5 — аргументы, результат: 8
// Лишние аргументы игнорируются, недостающие = undefined
add(3, 5, 7); // 8 (7 проигнорировано)
add(3); // NaN (b = undefined, 3 + undefined = NaN)
// Значения по умолчанию (ES6)
function greet(name = "Гость", formal = false) {
return formal ? `Здравствуйте, ${name}` : `Привет, ${name}!`;
}
greet(); // "Привет, Гость!"
greet("Иван"); // "Привет, Иван!"
greet("Иван", true); // "Здравствуйте, Иван"
// Дефолт может быть выражением:
function createId(prefix = "user", n = Date.now()) {
return `${prefix}_${n}`;
}function max(a, b) {
if (a > b) return a; // ранний выход
return b;
}
// Без return или пустой return — возвращает undefined
function doNothing() {}
doNothing(); // undefined
// return с переносом строки — ОСТОРОЖНО!
function broken() {
return // автоматически подставляется ; → return undefined!
"значение";
}
// Правильно:
function correct() {
return (
"значение"
);
}// Function Expression и стрелочные функции
// Function Expression — функция как значение
const double = function(n) {
return n * 2;
};
// Arrow Function — короткий синтаксис
const double2 = n => n * 2;
const add = (a, b) => a + b;
// Многострочная arrow function
const processUser = (user) => {
if (!user) return null;
return {
...user,
displayName: user.name.toUpperCase(),
};
};
// Вернуть объект — скобки!
const makePoint = (x, y) => ({ x, y });
// Функции как аргументы (callback)
// Функцию можно передать другой функции как значение:
const numbers = [5, 3, 1, 4, 2];
numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5] — передали правило сортировки
// Вызвать что-то через время:
setTimeout(() => {
console.log("через секунду");
}, 1000);
// Запустить при клике на кнопку (браузер):
button.addEventListener("click", () => {
console.log("кнопка нажата");
});В чём главное отличие Function Declaration от Function Expression?
Что вернёт функция если нет `return`?
Function Declaration
function greet(name) {
return "Привет, " + name;
}Когда использовать: Основные функции-«действия»
Function Expression
const greet = function(name) {
return "Привет, " + name;
};Когда использовать: Колбэки, условное создание функции
Arrow Function
const greet = (name) => {
return "Привет, " + name;
};
// Или коротко:
const greet = name => "Привет, " + name;Когда использовать: Колбэки, методы классов (React), короткие выражения