Функция - это блок в котором мы можем написать нужный код и использовать его в программе когда нам удобно. Если нам нужно написать одинаковый код, в нескольких местах,
то создается функция и в ней пишется код, далее функция вызывается в нужных местах. Функция как кирпич из которых строится программа.
Имя функции желательно писать глаголом с припиской действия. В примере ниже это глагол показать (Показать какое-то сообщение)
// для создания функции пишем ключевое слово function и задаем ей имя. Далее открываем сокби(аргументы) и {блок кода}
function showMessage(/* тут аргументы(параметры)*/) {
// тело что-то выполняет.
console.log('hello 42');
}
showMessage(); // вызываем функцию. Вызов всегда сопровождается скобками.
Когда функция вызывается, мы можем дать ей данные которые она будет использовать внутри себя:
function showText(text) { // задаем аргумент.
console.log(text); // тут мы его используем
showText('Привет анимешникам'); // эту строку мы передали в параметр(аргумент) text. Аргументов передать можно сколько угодно, через запятую.
}
Функции имеют доступ к глобальным переменным и могут их менять. Если мы указали переменную внутри и функция ее не нашла, она будет ее искать выше(Это там где мы ее вызвали) в глобальном окружении
let numTwo = 22; // глобальные переменные
let x = 14;
function showVariables () {
let num = 20; // это локальная переменная использовать можем только внутри функции
numTwo = 10; // тут мы используем глобальную переменную, перезаписываем ее.
let x = 12; // создаем переменную с именем как у глобальной. Но эту не видно! она локальная в функции.
console.log(x); // мы можем здесь ее посмотреть, тут уже будет 12. Но если мы удалим переменную x в функции, то функция будет искать такую переменную выше, и выдаст нам 14
/*
Функция выполняет все поэтапно. Сначала мы создаем num, потом находим numTwo и функция начинает ее искать внутри, она не находит
и начинает искать выше, находит ее там, и перезаписывает, потом мы создаем x и обращаемся к ней в console.log, и вот если x она
не найдет внутри, она начнет искать выше, и тогда у нас покажет 14.
*/
}
showVariables(); // вызываем функцию. С места вызова она ищет переменные над собой.
console.log(numTwo); // 10
console.log(x); // 14,
Любая функция нам может вернуть какое-то значение.
Для этого используется return
- этот оператор останавливает работу функции и возвращает что-то нам наружу, в то место где мы вызвали функцию(Это может быть и другая функция)
function f1(a,b) {
return a * b; // Это функция нам будет возвращать значение получившееся в результате a * b
}
// что бы увидеть результат вызываем внутри console.log()
// Это хорошая демонстрация работы return, он вернул значение внутрь console.log(), так как в нем мы вызвали нашу функцию
console.log(f1(10,2)); // здесь мы передали 10 в a и 2 в b.
Функция decloration
- это обычная функция которая создается с телом и идентификатором. Можно вызвать перед объявлением(написанием самой функции). Немного о том, как это работает:
html
страница загружается, грузит все по порядку, потом доходит до скрипта. Начинают загружаться скрипты и первым делом браузер находит все переменные var
, если они там есть и все функции decloration
. Скрипт их объявляет и после этого наш код начинает выполняться по порядку.
Это нам позволяет использовать функцию вот так:
console.log(foo(1,3)); // мы вызвали функцию и задали ей аргументы
function foo (a,b) { // И только теперь мы ее создали(объявили)
return (a + b);
} // у функции decloration не нужно ставить ;
Функция exspression
- создается лишь тогда, когда до нее доходит поток кода. Можно вызвать только после объявления. По сути работает как просто переменная, поток ее создает когда встречает.
let fooo = function () {
console.log('hello');
}; // Здесь нужно ставить ; так как она в переменной, наша функция это внутреннее состояние нашей переменной.
fooo();
// если мы попробуем ее вызвать до объявления будет ошибка.
Стрелочная функция выглядит как () => {}
- Это более краткий синтаксис функции expression
.
let sum = (a,b) => {
return a + b;
}
console.log(sum(1,2)) // 3
Если функция в одну строчку, то можно опускать скобки.
let sum = (a,b) => a + b; // Если будет один аргумент, то можно скобки убрать. a => a + b;
console.log(sum(2,2)) // 4
Анонимная функция - это функция без имени и которая объявляется на месте.
// Передаем анонимную функцию как аргумент.
function f1(anonim) {
console.log(`Это что ${anonim()}`); // вызываем анонимную функцию
}
f1(function () { // вызываем функцию f1 и внутри создаем нашу анонимную функцию.
// Тут мы ее создали и все, она используется один лишь раз. У нее нет идентификатора для дальнейшего использования
return 'анонимная функция';
});
Если после ключевого слова function
есть идентификатор, другими словами имя, тогда функция именованная, во всех остальных случаях анонимная.
Любая стрелочная функция или функция exspression
- это анонимная функция. Такие функции мы можем использовать в дальнейшем, но они все равно считаются анонимными. Все это называется функциональное выражение, создание обычных именованных функций - объявление функции. То есть exspression
и declaration
.
let fun = () => { // Имя у нее есть, но имя это у переменной. Сама же фукнция без имени.
return 'ANONYMOUS';
};
Это обычная функция exspression, но которая вызывается внутри скобок ()
поэтому она вызывается сразу и на месте.
(function () { // это анонимная функция внутри скобок
console.log('hi');
})(); // и здесь еще скобки для мгновенного выполнения функции
// Такую функцию мы можем поместить в переменную и тогда, переменная будет содержать лишь результат работы функции, но сама функция умрет.
let myName = (function () {
let name = "Dima";
return name;
})();
console.log(myName); // Dima
Часто это называют IIFE - immediately invoked function expression
- что не очень верно, если хотите поумничать говорите лучше так: function expression
которая является частью CallExpression
.