Введение

Уильям Шекспир однажды сказал, что «Что в имени?», но как разработчик, мы можем с этим не согласиться. Нам приходится давать имена переменным, классам, функциям, конструкторам и т.д. Управление всеми именами и их областью применения в коде может быть суматошным и может создать дополнительную сложность в коде.

Проблема именования функции может быть решена с помощью анонимной функции в JavaScript (в других языках также есть анонимные функции). Анонимный означает объект, не имеющий имени или идентичности. Анонимная функция — это функция, которая не имеет имени и может выполняться сразу после определения.

В этой статье мы рассмотрим следующие темы:

• Именованная функция
• Анонимная функция
• Стрелочная функция
• И их примеры Итак, давайте начнем.

Что такое именованная функция?

Прежде чем перейти к анонимной функции, давайте обсудим именованную функцию. Именованные функции — это общие функции, у которых есть имя. Как вы, наверное, знаете, функции — это блоки кода, которые используются для выполнения определенной задачи.

Синтаксис именованной функции в Javascript

Именованная функция объявляется с помощью ключевого слова function, за которым следует имя функции. За именем следует пара круглых скобок, а затем пара фигурных скобок. Внутри фигурных скобок мы определяем код. Эти функции могут быть вызваны с помощью имени функции.

function myFunction(){
     console.log(“It’s a Named Function”)
}

myFunction();

Преимущества именованных функций

• Существует множество вариантов использования именованных функций. Они имеют целый ряд преимуществ, включая
• Именованная функция может быть использована повторно
• Она может сделать код читабельным, так как в ней есть разделение между функцией и вызовом
• В случае обработки ошибок компилятор выдает ошибку с именем функции, что облегчает обработку ошибки
• Вы можете определить именованную функцию после ее вызова. Прерывая код, JavaScript переместит функцию на самый верх. Этот метод называется Hoisting.

Недостатки именованной функции

• Управление различными именами функций, переменных, компонентов и всего остального может быть суматошным.

Что такое анонимная функция?

Решая проблемы именованных функций, появилась анонимная функция. Вы уже знаете, что анонимная функция не имеет имени. Давайте рассмотрим ее синтаксис.

(function () {
     // Code
})

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

Реализация анонимной функции в JavaScript

Анонимная функция может быть определена, как указано выше, но для ее вызова нам необходимо сохранить ее в переменной. Эти переменные могут быть любого типа данных, например var, let и const. Использование const широко используется и рекомендуется для неизменяемых переменных, поэтому мы будем использовать const для хранения анонимной функции в переменной. Для вызова функции мы используем имя переменной. Вот синтаксис для реализации в JavaScript

const myFuntion = (
Function () {
     console.log(“Hello World!”)
})  

myFunction();

Вы также можете передать аргумент в анонимной функции. Вот пример

const myFunction = (function(str) {
    console.log(str)
})

myFunction("Hello World!")

Использование анонимной функции в JavaScript

Поскольку мы рассмотрели синтаксис и реализацию анонимных функций в JavaScript, пришло время узнать о некоторых сценариях использования анонимной функции.

a. Использование анонимных функций в качестве аргументов других функций

JavaScript является языком высокого порядка, что позволяет передавать функции в качестве аргумента другим функциям. Раньше мы передавали имя функции следующим образом:

function myFunction(){
     console.log(“5 second has passed”)
} 

setTimeout(myFunction(), 5000)

Поскольку функция Anonymous не имеет имени, мы можем передавать ее непосредственно в качестве аргумента другим функциям. Нам не нужно явно объявлять функцию вне аргумента. Здесь это выглядит следующим образом

setTimeout(function() {
     console.log(“1 sec has passed”)  
}, 1000)

Это делает наш код еще чище, так как однократно используемые функции определяются непосредственно в качестве аргумента.

b. Немедленное выполнение функции

При использовании обычной функции мы должны определить ее, а затем вызвать для выполнения. Анонимная функция может быть объявлена и сразу же вызвана для выполнения. Пример кода можно посмотреть здесь

(function(){
     console.log(“Hello World!”)
})();

В приведенном выше примере анонимная функция определяется как обычно, после чего следует пара круглых скобок. Эти скобки делают функцию немедленно вызываемой для выполнения.

Во время немедленного вызова функции вы также можете передать аргумент в круглых скобках, определенных после объявления функции.

const firstName = "John";
const lastName = "Doe";

(function(){
     console.log(firstName, lastName)
})(firstName, lastName);

Что такое функция Arrow?

Функция Arrow была представлена нам в ES6, чтобы еще больше упростить анонимную функцию. Эта функция также не имеет имени, но ее синтаксис отличается от обычной анонимной функции.

Синтаксис стрелочной функции прост. У нас есть круглые скобки, внутри которых мы можем передать аргумент для функции. Затем следует знак эквивалентности = и знак больше, чем >, вместе получается =>. После этого мы можем определить код в круглых или фигурных скобках. Круглые скобки используются для единственного утверждения и возвращают это утверждение. Для нескольких утверждений используются фигурные скобки. В этом случае необходимо явно определить оператор возврата.

Разница между стрелочной функцией и анонимной функцией

Стрелочная функция может быть определена в одной строке, в то время как в анонимной функции для выполнения одного оператора требуется более 3 строк.

// Anonymous Function

(function () {
     // Code
})

// Arrow Function

() => (//Code)

Примечание: Приведенный выше пример относится к одному оператору.

Пример стрелочной функции

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

const myFunction = () => (console.log("Arrow Funciton are awesome"));

myFunction();

Как мы видим в функции Anonymous, функцию arrow можно также передавать в качестве аргумента другой функции

setTimeout( () => (console.log(“5 second has passed”))
, 5000)

Мы также можем передавать аргумент в функции arrow, как в именованных функциях.

const name = (firstName, lastName) => (console.log(firstName, lastName));

name(“John”,”Doe” );

Заключение

Мы прошли долгий путь от именованной функции к анонимной функции и стрелочной функции. Все эти типы функций имеют множество вариантов использования в определенных условиях. Мы рассмотрели множество примеров с аргументами и преимуществами использования этих функций.

Все вышеперечисленные функции полезны. Надеюсь, эта статья помогла вам решить, какую функцию использовать в зависимости от различных сценариев. Спасибо за прочтение статьи в блоге.