JavaScript Arrow Functions
Arrow Functions allow a shorter syntax forfunction expressions.
You can skip thefunction keyword, thereturn keyword, and thecurly brackets:
Arrow Functions were introduced inES6 and are commonlyused in modern JavaScript.
Arrow Function Syntax
An arrow function uses the=> symbol.
An arrow function is always written as a function expression.
Example
return a + b;
};
This arrow function does the same thing as a regular function expression.
Shorter Syntax
If the function body contains only one statement:
You can remove the wordfunction, thecurly brackets and thereturn keyword.
Before Arrow
Function to compute the product of a and b:
Arrow Functions with One Parameter
If a function has only one parameter, you can omit the parentheses:
With Paranthesis
Without Paranthesis
With Paranthesis
Without Paranthesis
Arrow Functions Return Value by Default
If the function has only one statement that returns a value:
You can remove thebrackets and thereturn keyword:
Note
This works only if the function has only one statement.
Arrow Function Parameters
If you have parameters, you pass them inside the parentheses:
If you have only one parameter, you can skip the parentheses as well:
Arrow Functions with No Parameters
If there are no parameters, parentheses are required.
You can only omit thereturn keyword and thecurly brackets if the function is a singlestatement. Because of this, it might be a good habit to always keep them:
Example
const myFunction = (x, y) => { x * y };
// This wull return undefined
const myFunction = (x, y) => return x * y;
// This will return the expected result
const myFunction = (x, y) => { return x * y };
Arrow Functions Are Not Declarations
Arrow functions are always expressions and must be assigned to a variable.
They cannot be used before they are defined.
Example
const hello = () => "Hello";
Note
Arrow functions must be definedbefore they are used.
Arrow Functions and the this Keyword
Arrow functions do not have their ownthis value.
They inheritthis from the surrounding code.
Example
name: "John",
greet: function() {
return this.name;
}
};
Using an arrow function as a method often gives unexpected results.
Example
name: "John",
greet: () => {
return this.name;
}
};
In this case,this does not refer to theperson object.
When to Use Arrow Functions
- For short functions
- For callbacks and array methods
- When you do not need your ownthis
When Not to Use Arrow Functions
- As object methods
- When you need your ownthis
- When using function declarations
Quiz
What is one important difference between arrow functions and regular functions?
Common Mistakes
Forgetting Parentheses Rules
Parentheses are required for zero or multiple parameters.Using Arrow Functions as Methods
Arrow functions do not bindthis.Expecting Hoisting
Arrow functions arenot hoisted.
End of Functions Section
You have now learned the most important concepts about JavaScript functions.
Try the quiz to test your knowledge.
