Стрелочная функция — это функция, представленная в версии JavaScript ES6. Она позволяет нам создавать функции более чистым и коротким способом по сравнению с обычными функциями.
Например, эта нормальная функция
// Function expression
let sum = function(num1, num2) {
return num1+num2;
}
можно записать с использованием стрелочной функции.
// Using arrow functions
let sum = (num1, num2) => num1+num2;
Как вы можете заметить в приведенном выше примере, в стрелочной функции не используется ключевое слово function. Мы также исключили ключевое слово return из тела функции. Таким образом, стрелочная функция поддерживает еще более компактный синтаксис в JavaScript.
- Синтаксис стрелочной функции JavaScript
- Как вызвать стрелочную функцию в JavaScript?
- Стрелочная функция без аргумента
- Стрелочная функция с одним параметром
- Стрелочные функции с несколькими параметрами
- Стрелочная функция как выражение
- Множественный оператор внутри стрелочной функции
- Возврат литерала объекта с помощью стрелочной функции
- Массив объектов с использованием стрелочной функции
- Стрелочная функция с обещаниями и обратными вызовами
- Можно ли использовать стрелочные функции для создания функций-конструкторов?
- Можно ли использовать стрелочные функции для создания метода внутри объекта?
Синтаксис стрелочной функции JavaScript
Общий синтаксис стрелочной функции в JavaScript выглядит следующим образом:
let myFunction = (parameter-list) => {
statement(s);
};
В приведенном выше синтаксисе myFunction — это имя переменной. Поскольку стрелочная функция в JavaScript всегда анонимна, мы должны присвоить ее переменной, как мы это делали с выражениями функций.
В приведенном выше примере показано, что мы создали стрелочную функцию, которая назначена переменной myFunction.
Определение стрелочной функции начинается со списка параметров, разделенных запятыми, в скобках, за которым следует жирная стрелка (=>), а затем тело функции в фигурных скобках.
Если параметра нет или имеется более одного параметра, список параметров должен быть заключен в скобки. Но у нас только один параметр, поэтому скобки можно опустить.
- Нет параметров: () => {… }
- Один параметр: x => {… }
- Более одного параметра: (x, y) => {…}
Обязательный оператор жирной стрелки (=>, знак равенства, за которым сразу следует знак «больше») сообщает интерпретатору JavaScript, что мы имеем дело со стрелочной функцией.
Если тело функции состоит из одного оператора или выражения, мы можем записать стрелочную функцию как:
let myFunction = (parameter-list) => expression;
Функция JavaScript Arrow может возвращать значение напрямую, без использования ключевого слова return, опуская { } сразу после стрелки (=>). При использовании функции Arrow нам не нужно писать ключевое слово return, если тело функции содержит только одну строку кода.
Как вызвать стрелочную функцию в JavaScript?
Мы можем вызвать стрелочную функцию точно так же, как и обычную функцию. Просто напишите ее имя и не забудьте добавить скобки в конце. Мы также можем передавать значения аргументов в список параметров стрелочной функции. Общий синтаксис такой:
myFunction(argument-values);
Стрелочная функция без аргумента
Если стрелочная функция не имеет аргументов, то следует написать пустую пару скобок. Например:
Пример 1:
<html>
<head>
<title>Arrow functions with no arguments</title>
<script>
// First arrow function declaration.
let greeting = () => document.write("Hello JavaScript", "<br>");
greeting(); // calling arrow function.
// Second arrow function declaration.
const constantFunc = () => 50;
document.write(constantFunc()); // calling arrow function.
</script>
</head>
</html>
Output:
Hello JavaScript
50
Стрелочная функция с одним параметром
Если стрелочная функция имеет ровно один параметр, мы можем опустить скобки вокруг списка параметров. Давайте разберемся с помощью примеров.
Пример 2:
<html>
<head>
<title>Arrow functions with one parameter</title>
<script>
// First arrow function with one parameter.
let name = firstName => document.write(firstName, "<br>");
name("Tripti"); // calling arrow function with passing argument value.
// Second arrow function with one parameter.
let polynomial = x => x*x+2*x+10;
document.write(polynomial(5)); // calling arrow function with passing argument.
</script>
</head>
</html>
Output:
Tripti
45
Стрелочные функции с несколькими параметрами
Мы можем определить функцию с более чем одним параметром. Давайте рассмотрим пример программы на ее основе.
Пример 3:
<html>
<head>
<title>Arrow functions more than one parameter</title>
<script>
let sum = (x, y) => x+y;
document.write(sum(2, 3), "<br>");
let sub = (x, y, z) => x - y - z;
document.write(sub(4, 5, 6), "<br>");
let multiply = (x, y, z) => x * y * z;
document.write(multiply(4, 5, 6));
</script>
</head>
</html>
Output:
5
-7
120
Стрелочная функция как выражение
Мы также можем динамически создать стрелочную функцию и использовать ее как выражение. Давайте напишем программу JavaScript, в которой мы будем принимать возраст пользователя в качестве входных данных и проверять, имеете ли вы право на голосование или нет.
Пример 4:
<html>
<head>
<title>Arrow function as an expression</title>
<script>
let age = prompt("Enter your age:");
let vote = (age >= 18)?
() => document.write('You are eligible to vote.'):
() => document.write('You are not eligible to vote.');
vote(); // calling function.
</script>
</head>
</html>
Здесь мы ввели возраст 18 лет в диалоговом окне, и в веб-браузере отобразится следующий вывод.
Output:
You are eligible to vote.
Множественный оператор внутри стрелочной функции
Если тело стрелочной функции содержит несколько операторов, нам нужно поместить их в фигурные скобки {}. Например:
Пример 5:
<html>
<head>
<title>Multiple statements inside arrow function </title>
<script>
let s = (a, b, c) => {
let sum = a+b+c;
return sum;
};
let sum2 = s(10, 20, 30);
document.write("Sum: " +sum2);
</script>
</head>
</html>
Output:
Sum: 60
Возврат литерала объекта с помощью стрелочной функции
Если вы возвращаете литерал объекта с помощью стрелочной функции, вам необходимо поместить литерал объекта в скобки, чтобы избежать синтаксической неоднозначности между фигурными скобками тела функции и фигурными скобками литерала объекта.
Если этого не сделать, интерпретатор JavaScript не поймет разницу между литералом объекта и блоком кода. Поэтому, заключив объект в скобки, объект вернется, даже если мы не используем ключевое слово return явно. Давайте рассмотрим пример программы, основанной на вышеприведенной концепции.
Пример 6:
<html>
<head>
<title>Returning Object literal using Arrow function </title>
<script>
// ES5:
let per = function person(firstName, id)
{
return {
name: firstName,
id: id
};
};
let p = per("John", 12464);
document.write("Name: " +p.name+ ", "+"Id: " +p.id, "<br>");
// ES6:
// Method 1:
let person = (firstName, id) => { return {name: firstName, id: id};};
let x = person("Tripti", 12345);
document.write("Name: " +x.name+ ", "+ "Id: " +x.id, "<br>");
// Method 2:
let person2 = (firstName, id) => ({name: firstName, id: id});
let y = person2("Deepak", 54647);
document.write("Name: " +y.name+ ", " +"Id: " +y.id);
</script>
</head>
</html>
Output:
Name: John, Id: 12464
Name: Tripti, Id: 12345
Name: Deepak, Id: 54647
Массив объектов с использованием стрелочной функции
Возьмем простой массив объектов:
const smartPhones = [
{name: 'Iphone 13 Pro', Price: 676},
{name: 'Samsung Galaxy S13', Price: 685},
{name: 'Vivo Y21', Price: 345}
];
Здесь мы создали массив объектов только с именами и ценами в ES5. Теперь мы отобразим указанный выше массив объектов и отобразим цены в веб-браузере.
// ES5:
let prices = smartPhones.map(function(smartPhone) {
return smartPhone.Price;
});
document.write(prices); // 676,685,345
Функция стрелки в JavaScript ES6 более лаконична и проще для чтения и отображения массива объектов. Посмотрите на код ниже, чтобы лучше понять.
// ES6:
let prices = smartPhones.map(smartPhone => smartPhone.Price);
document.write(prices);
Output:
676,685,345
Стрелочная функция с обещаниями и обратными вызовами
Функции стрелок в JavaScript обеспечивают краткий и лучший синтаксис для написания обещаний и обратных вызовов. Рассмотрим следующий пример кода.
// ES5
asyncFunct().then(function() {
return asyncFunct1();
}).then(function() {
return asyncFunct2();
}).then(function() {
finish;
});
В ES6 мы можем записать приведенный выше код более простым и, возможно, более удобным для чтения, используя стрелочную функцию.
// ES6
asyncFunct()
.then(() => asyncFunct1())
.then(() => asyncFunct2())
.then(() => finish);
Можно ли использовать стрелочные функции для создания функций-конструкторов?
Мы не можем использовать стрелочную функцию для создания функции-конструктора, поскольку стрелочная функция не имеет собственного this. Поэтому всякий раз, когда мы вызываем this, она ссылается на свою родительскую область видимости. Например,
let Doomed = () => { };
let d = new Doomed(); // TypeError: Doomed is not a constructor.
Основное назначение функции-конструктора — задать свойства вновь созданного объекта, которые мы передаем функции с помощью этого ключевого слова.
Если функция не имеет собственного this, она не может устанавливать свойства на новом объекте. Поэтому нет смысла использовать для создания функции-конструктора.
Можно ли использовать стрелочные функции для создания метода внутри объекта?
Нет, мы не можем использовать стрелочные функции для создания метода внутри объекта.
<script>
let person = {
name: 'John',
age: 30,
sayName: () => {
// Here, this refers to the global.....
console.log(this.age);
}
}
person.sayName(); //output: undefined.
</script>
В этом уроке вы изучили концепцию стрелочной функции в JavaScript на различных примерах. Стрелочные функции мощные, лаконичные, и разработчики любят использовать их в кодировании JavaScript. Возможно, вам следует использовать их в ES6. Надеюсь, вы поняли основную концепцию стрелочной функции на примере.
