Что такое стрелочные функции JavaScript?

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

Javascript — очень многофункциональный язык . Функции в javascript — одна из самых ценных концепций. Мы пишем функции, мы передаем функции, обратные вызовы и код синхронизации, у нас есть функции. Это просто фундаментальная часть JavaScript.

В течение долгого времени мы писали ключевые слова функций для написания функции на javascript. Вот несколько примеров функций в JavaScript. Как видите, здесь мы используем ключевое слово function.

(function () {
   //...
});

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

Например, ниже показана анонимная функция, которая отображает сообщение:

let show = function() {
    console.log('Anonymous function');
};

show();

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

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

На практике вы часто передаете анонимные функции в качестве аргументов другим функциям. Например:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

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

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

Обычно функции Arrow короче, и иногда они ведут себя по-другому по сравнению с традиционными функциями javascript.

Функции стрелок не поддерживаются для Internet Explorer .

Мы используем символы «=» и «>», когда определяем стрелочную функцию. Это похоже на стрелку, поэтому мы называем эти функции стрелочными функциями.

let show = () => console.log('Anonymous function');

Мы можем написать нормальную функцию как стрелочную функцию следующим образом.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Если у вас есть 2 аргумента, вы можете использовать круглые скобки как обычную функцию:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Чтобы устранить эту проблему, нам нужно заключить ее в круглые скобки .

Теперь javascript знает это как возвращаемое значение, а не просто фигурную скобку для тела функции.

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

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

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

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

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

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

По тем же причинам методы call(), apply(), и bind()бесполезны при вызове стрелочных функций, поскольку стрелочные функции устанавливаются thisна основе области действия, в которой определена стрелочная функция, и thisзначение не изменяется в зависимости от того, как вызывается функция.

• Стрелочные функции нельзя использовать в качестве конструкторов, и при вызове с new. У них тоже нет prototypeимущества.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

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

Спасибо!