Функции, которые присваиваются как значения переменным, называются функциональными выражениями. Если вы еще не читали о функциях в JavaScript, я бы порекомендовал вам прочитать this, прежде чем продолжить. Попробуем понять выражение функции на примере.

var counter = 0
var incrementCounterAndPrint = function () {
  counter++;
  console.log("Incremented Counter", counter);
}
incrementCounterAndPrint()

Когда JS-движок встречает этот код, он сначала создает глобальный контекст выполнения и инициирует этап создания. На этапе создания он просматривает все операторы объявления и помещает их в память. В этом случае переменные counter и incrementCounterAndPrint будут сохранены в памяти с присвоенным им значением по умолчанию undefined.

Поскольку больше нет операторов объявления, он перейдет ко второй фазе, которая является фазой выполнения. Фаза выполнения - это фаза, на которой код выполняется построчно. В этом случае сначала `counter` будет присвоено значение `0`, а `incrementCounterAndPrint` будет присвоено всей функции в качестве значения. Когда движок JS встречает оператор «incrementCounterAndPrint ()», он сначала проверяет память, присутствует ли эта конкретная переменная или нет. Поскольку он присутствует, он получит значение из памяти и выполнит его. При выполнении функции функция incrementCounterAndPrint будет помещена в стек вызовов, и будет создан новый контекст выполнения функции. Как только контекст выполнения будет создан, начнется этап создания. Поскольку операторов объявления как таковых нет, он перейдет ко второй фазе, называемой фазой выполнения. На этом этапе сначала JS-движок выполнит инструкцию counter ++. Во время выполнения он проверит, присутствует ли переменная в локальной памяти, поскольку ее нет, он перейдет в глобальный контекст выполнения и проверит его память. Как только он найдет переменную, он выполнит операцию и перейдет к следующей строке. При выполнении оператора console.log («Увеличенный счетчик», счетчик) на консоль выводится значение «1».

Возникает очевидный вопрос: поднимаются ли функциональные выражения? Что ж, давайте проверим это, настроив приведенный выше код.

var counter = 0
incrementCounterAndPrint() // TypeError: incrementCounterAndPrint is not a function
var incrementCounterAndPrint = function () {
 counter++;
 console.log(“Incremented Counter”, counter);
}

Когда JS-движок запускает приведенный выше код, он выдаст ошибку типа. Вы можете мне сказать, почему это происходит? Что ж, если мы попытаемся понаблюдать за кодом, мы увидим, что функция присваивается как значение переменной `incrementCounterAndPrint`. На этапе создания в соответствии с функцией подъема все объявления переменных будут перемещены наверх, а присвоенные им значения останутся позади. В этом случае «incrementCounterAndPrint« будет перемещен наверх, оставляя код функции позади, и будет установлен со значением «undefined« по умолчанию, как оно было объявлено. используя `var`. Когда JS-движок обнаруживает оператор incrementCounterAndPrint (), сначала проверяет память на наличие переменной. Как только он присутствует, он получит сохраненное значение, которое является `undefined`. Поскольку undefined не относится к типу функция, это приведет к ошибке типа. Это подводит нас к выводу, что выражения функций не поднимаются. Функциональные выражения имеют свою область видимости. Функциональные выражения обычно анонимны, но мы могли бы также дать им имя, что очень помогает при отладке.

Так что насчет стрелочных функций ???. Что ж, я скоро расскажу об этом подробно в своем следующем блоге, держитесь крепче. А пока, если вы считаете, что эта статья была полезной, пожалуйста, проявите свою любовь и поделитесь этим со своими собратьями в социальных сетях, которые могли бы максимально использовать это. Всегда свободно связывайтесь со мной в Twitter, LinkedIn или по электронной почте.

Пока мы не встретимся снова, The Mallu Dev подписывает контракт 👋 Ура! 🥂

Больше контента на plainenglish.io