Функция

Типичными случаями для использования анонимных функций в JavaScript являются замыкания, обработчики событий, таймеры и callback-и для методов и других функций. Приведу несколько примеров:

1. Callback метода массива:

        
          
          const numbers = [1, 2, 3, 4, 5];const squared = numbers.map(num => num * num);console.log(squared); // [1, 4, 9, 16, 25]
          const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);

console.log(squared); // [1, 4, 9, 16, 25]

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

1. Обработчик события для HTML элемента. Стоит обратить внимание, что в таком случае не получится удалить его через removeEventListener.

        
          
          document.getElementById('buttonId').addEventListener('click', () => {  console.log('Кнопка была нажата!');});
          document.getElementById('buttonId').addEventListener('click', () => {
  console.log('Кнопка была нажата!');
});

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

3. Замыкания:

        
          
          function createCounter() {  let count = 0;  return function () {    return ++count;  };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2
          function createCounter() {
  let count = 0;

  return function () {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

4. Таймер:

        
          
          setTimeout(() => {  console.log('Я сработал через 10 секунд!');}, 10000);
          setTimeout(() => {
  console.log('Я сработал через 10 секунд!');
}, 10000);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В чём плюс использования стрелочных функций для методов в конструкторе?

Основным плюсом использования стрелочных функций для методов в конструкторе является то, что this будет установлено во время создания функции и this не будет изменяться. Cледовательно, когда конструктор используется для создания нового объекта, this всегда будет ссылаться на этот объект.

        
          
          const Person = function (firstName) {  this.firstName = firstName  this.sayName1 = function () {    console.log(this.firstName)  }  this.sayName2 = () => {    console.log(this.firstName)  }}const ivan = new Person('Иван')const petr = new Person('Пётр')ivan.sayName1.call(petr) // Пётр, т.к call позволяет нам указать, что this будет 'petr' и  this сейчас ссылается на объект petr.ivan.sayName2.call(petr) // Иван, так как стрелочная функция не меняет контекст.
          const Person = function (firstName) {
  this.firstName = firstName

  this.sayName1 = function () {
    console.log(this.firstName)
  }

  this.sayName2 = () => {
    console.log(this.firstName)
  }
}

const ivan = new Person('Иван')
const petr = new Person('Пётр')

ivan.sayName1.call(petr) // Пётр, т.к call позволяет нам указать, что this будет 'petr' и  this сейчас ссылается на объект petr.
ivan.sayName2.call(petr) // Иван, так как стрелочная функция не меняет контекст.

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Любая функци выполняется и создается в рамках контекста выполнения. Внутри этого контекста может или не может быть привязки this.
Когда функция вызывается с указанием перед ней new, также известный как вызов конструктора, привязка this есть. Создается новый объект, объект связывается с [[Прототипом]], this внутри функции связывается с this из текущего (лексического) контекста выполнения.
Мы можем воспользоваться явной привязкой посредством вызова call(..), котроый позволяет нам указать this.
Стрелочные функций заимствуют привязку this из окружающей (функции или глобальной) области видимости и лексическая привязка не может быть изменена.
В стрелочной функции, созданной в Person, привязка не динамическая, а лексическая, поэтому контекст изменить нельзя и this всегда будет ссылаться на этот объект.

В первом случае просто была вызвана функция, которая ничего не возвращает. Значение переменной будет равно undefined

        
          
          const animal = Animal() // ❌console.log(animal) // undefined
          const animal = Animal() // ❌
console.log(animal) // undefined

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Во втором случае перед функцией Animal стоит оператор new. Функция Animal становится конструктором. Она выполняется, но так как this внутри функции не используется, и сама функция ничего не возвращает, то ничего не происходит. Результатом операции становится новый объект, который ссылается на функцию Animal как на конструктор. Этот объект присваивается переменной animal

        
          
          const animal = new Animal() // ✅
          const animal = new Animal() // ✅

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если Animal имеет вид:

        
          
          function Animal() {  this.name = 'Cat'}
          function Animal() {
  this.name = 'Cat'
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

То переменная animal, созданная с помощью new, будет иметь доступ к полю name:

        
          
          console.log(animal)// Animal { name: 'Cat' }// Если мы явно не возвращаем ничего из конструктора,// то получаем сам объект в качестве результата.
          console.log(animal)
// Animal { name: 'Cat' }
// Если мы явно не возвращаем ничего из конструктора,
// то получаем сам объект в качестве результата.

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обычно в функции-конструкторе не используется оператор return. Если return используется срабатывают два правила:

1. При вызове return с объектом, вместо this вернётся этот объект.
2. При вызове return с пустым или с примитивным значением, оно будет проигнорировано.

return с объектом возвращает этот объект, во всех остальных случаях возвращается this

        
          
          function Animal() {  this.foo = 'BARBARBAR'  return {    foo: 'bar' // ⬅️ возвращает этот объект  }}const animal = new Animal()console.log(animal.foo)// Вернет `bar`
          function Animal() {
  this.foo = 'BARBARBAR'
  return {
    foo: 'bar' // ⬅️ возвращает этот объект
  }
}

const animal = new Animal()
console.log(animal.foo)
// Вернет `bar`

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А вот пример с примитивом после return:

        
          
          function Animal() {  this.foo = 'BARBARBAR'  return 'bar' // ⬅️ возвращает this}const animal = new Animal()console.log(animal.foo)// Вернет BARBARBAR
          function Animal() {
  this.foo = 'BARBARBAR'
  return 'bar' // ⬅️ возвращает this
}

const animal = new Animal()
console.log(animal.foo)
// Вернет BARBARBAR

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Объект первого класса (first class object или first class citizen) это объект, который может быть передан как аргумент функции, возвращён из функции или присвоен переменной.

Функции в JavaScript полностью соответствуют этому определению.

Функцию можно присвоить переменной:

        
          
          const multipleTwo = (n) => n * 2;
          const multipleTwo = (n) => n * 2;

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция может быть передаваемым аргументом другой функции:

        
          
          async function loadData(func) {  loading = true;  // другой код относящийся к инициализации статусов загрузки  await func();  loading = false;  // другой код относящийся к обработке статуса загрузки}function getData() {  // код получения данных с сервера}loadData(getData);
          async function loadData(func) {
  loading = true;
  // другой код относящийся к инициализации статусов загрузки

  await func();

  loading = false;
  // другой код относящийся к обработке статуса загрузки
}

function getData() {
  // код получения данных с сервера
}

loadData(getData);

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функции могут быть возвращаемым значением другой функции:

        
          
          function makeAdder(x) {  return function(y) {    return x + y;  };};
          function makeAdder(x) {
  return function(y) {
    return x + y;
  };
};

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

IIFE (Immediately Invoked Function Expression) – это функция, которая выполняется сразу же после того, как была определена.

Записывается так:

        
          
          (function () {    // какие-то действия})();
          (function () {
    // какие-то действия
})();

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

IIFE состоит из двух частей:

• Функция с лексической областью видимости, заключённая в круглые скобки
• Мгновенно выполняющееся функциональное выражение ()

Функция внутри скобок создаёт внутри себя область видимости, доступ к которой есть только у неё. Всё, что внутри функции, остаётся только внутри.

Используя IIFE, можно не бояться конфликтов имён переменных.

        
          
          (function () {    let name = "Дока Дог";    console.log(name);})();(function () {    let name = "Гав-Гав";    alert(name);})();// Никаких конфликтов
          (function () {
    let name = "Дока Дог";
    console.log(name);
})();

(function () {
    let name = "Гав-Гав";
    alert(name);
})();

// Никаких конфликтов


        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также переменная, которой присвоено значение IIFE, хранит в себе результат выполнения функции, но не саму функцию.

        
          
          let result = (function () {    let name = "Дока Дог";    return name;})();console.log(result); //Дока Дог
          let result = (function () {
    let name = "Дока Дог";
    return name;
})();

console.log(result); //Дока Дог

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Является ли это IIFE?

        
          
          function(){}();
          function(){}();

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Ответ: нет, не является.
Результатом парсинга такого выражения будет function declaration и отдельно стоящий ()