Функции

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

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

// для создания функции пишем ключевое слово 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

Любая функция нам может вернуть какое-то значение. Для этого используется return - этот оператор останавливает работу функции и возвращает что-то нам наружу, в то место где мы вызвали функцию(Это может быть и другая функция)

function f1(a,b) { 
    return a * b; // Это функция нам будет возвращать значение получившееся в результате a * b
}
// что бы увидеть результат вызываем внутри console.log()
// Это хорошая демонстрация работы return, он вернул значение внутрь console.log(), так как в нем мы вызвали нашу функцию
console.log(f1(10,2)); // здесь мы передали 10 в a и 2 в b.

Функция declaration (Объявление функции)

Функция decloration - это обычная функция которая создается с телом и идентификатором. Можно вызвать перед объявлением(написанием самой функции). Немного о том, как это работает:
html страница загружается, грузит все по порядку, потом доходит до скрипта. Начинают загружаться скрипты и первым делом браузер находит все переменные var, если они там есть и все функции decloration. Скрипт их объявляет и после этого наш код начинает выполняться по порядку.
Это нам позволяет использовать функцию вот так:

console.log(foo(1,3));  // мы вызвали функцию и задали ей аргументы
function foo (a,b) {     //  И только теперь мы ее создали(объявили)   
    return (a + b);
} // у функции decloration не нужно ставить ;

Функция exspression (Функциональное выражение)

Функция 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.