Вопросы на собеседовании по JavaScript # 2: Что такое стрелочные функции и в чем разница между обычными функциями и стрелочными функциями?
Вопросы на собеседовании по JavaScript # 2
Что такое стрелочные функции и в чем разница между обычными функциями и стрелочными функциями?
Всем привет, сегодня мы узнаем, что такое стрелочные функции, и ответим на один из самых часто задаваемых вопросов интервью по JavaScript с примерами.
Начнем с того, как выглядят обычные функции.
Обычные функции
// Regular function expression
function multiply(x,y){
return x * y;
}
multiply(3,5) // Call the function
15
Как видите, мы определили нашу функцию как multiply и передали параметры как x и y и вернули x * y.
Давайте посмотрим, как мы можем написать эту функцию внутри стрелочных функций.
Стрелочные функции
// Declaring the multiply function with arrow function const multiply = (x,y) => x*y multiply(3,5) // Call the function 15
Как видите, мы сократили количество строк кода, которые мы пишем, и полностью упростили нашу стрелочную функцию. Это одно из преимуществ использования стрелочных функций.
Давайте подробнее рассмотрим синтаксис нашей стрелочной функции:
const functionName = (argument1, argument2, ...argumentN) => {
return (
// write your statements here with parameters
argument1 * argument2 // as our first example
)
}
Как вы видите здесь, functionName — это имя функции стрелки.
Аргумент1, аргумент2 и аргументN — это аргументы, которые мы можем использовать в нашей стрелочной функции. Мы можем добавить столько аргументов, сколько нам нужно. То же самое мы могли бы сделать с обычными функциями.
Последней вещью между return (…) мы определяем тело нашей функции.
Мы также можем упростить стрелочную функцию, если у нас есть один оператор в теле функции, как показано ниже:
const functionName = (argument1,argument2) => argument1 * argument2}
Пример 1. Стрелочные функции без аргументов
Мы можем определить нашу стрелочную функцию без передачи каких-либо аргументов.
const logHelloWorld = () => console.log('Hello World! 🌎')
logHelloWorld();
// Hello World! 🌎
Пример 2: Стрелочная функция с одним аргументом.
const logNumber = number => console.log(number) logNumber(42) // 42
Как вы видите, здесь мы не использовали круглые скобки, когда определяли наши аргументы. Если вы используете один аргумент в своих стрелочных функциях, вы можете опустить круглые скобки.
Пример 3. Функции многострочных стрелок
До сих пор мы обнаружили варианты использования однострочных стрелочных функций, но что, если у нас есть другая логика, которую нам нужно использовать в теле нашей функции?
const multiply = (x,y) => {
console.log(x)
console.log(y)
return (
x*y
)
}
multiply(4,2)
// 4
// 2
// 8
Как вы видите, после определения функции стрелки мы помещаем наш оператор в фигурные скобки {}, и мы можем использовать нашу функцию таким образом.
Пример 4. Выражения со стрелочными функциями
const isBiggerThan100 = (number) => number > 100 ? true : false; isBiggerThan100(42) // false
Как видите, мы создали функцию и использовали тернарный оператор, чтобы проверить, больше ли число 100, если оно возвращает true, в противном случае возвращает false.
Привязка аргументов в стрелочных функциях
В обычных функциях, если мы не определяем какой-либо аргумент функции при ее определении, мы все равно можем получить доступ к аргументам функции:
function testArguments() {
console.log(arguments)
}
testArguments(1,2,3)
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
Если мы попытаемся использовать то же самое со стрелочными функциями, мы не сможем этого сделать.
const testArguments = () => {
console.log(arguments)
}
testArguments(1,2,3)
// Uncaught ReferenceError: arguments is not defined
Когда мы попытаемся записать здесь аргументы, мы получим ReferenceError.
Есть способ добиться этого с помощью синтаксиса распространения.
const testArguments = (...n) => {
console.log(n)
}
testArguments(1,2,3)
// [1, 2, 3]
Это не совсем то же самое, что и аргументы, но если вы хотите использовать n аргументов в своей функции, вы можете сделать это следующим образом.
Использование этого ключевого слова в стрелочных функциях
Использование этого ключевого слова в обычной функции относится к функции, в которой оно вызывается.
С другой стороны, стрелочные функции не имеют этого ключевого слова и всегда ссылаются на родительскую область.
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayHello = function () {
// this is accessible
console.log('Hello', this.name);
function innerFunction() {
// this refers to the global object
console.log(this.age);
console.log(this);
}
innerFunction();
}
}
let x = new Person();
x.sayHello()
// Hello Jack
// undefined
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}
Как вы видите, наша функция sayHello правильно записывает this.name, но когда мы пытаемся получить доступ к this.age, мы не можем использовать age, потому что он ссылается на саму innerFunction .
Теперь, если мы изменим innerFunction на функцию стрелки, у которой будет возможность использовать родительскую область.
unction Person() {
this.name = 'Jack',
this.age = 25,
this.sayHello = function () {
// this is accessible
console.log('Hello', this.name);
const innerFunction = () => {
// this refers to the global object
console.log(this.age); // 25
console.log(this); // References Person
}
innerFunction();
}
}
let x = new Person();
x.sayHello()
// Hello Jack
// 25
// Person {name: 'Jack', age: 25, sayHello: ƒ}
Здесь внутренняя функция, которую мы использовали со стрелочной функцией, обращается к родительской области, поэтому мы можем получить доступ к ключевым словам this.age и this, чтобы вывести саму функцию Person.
Вот и все :)
Если вы нашли эту статью полезной, вы можете получить доступ к похожим, подписавшись на Medium-членство по моей реферальной ссылке
Подпишитесь на меня в Твиттере
Удачного кодирования!
Мелих
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
