JavaScript Arrow Function

Arrow Function

Arrow functions can also be used to concisely express function expressions. Arrow functions do not have this, so they allow the upper this to be used as is.

How to Use

How to Use 1

const fn01 = () => { console.log('Arrow Function')}
 
fn01();
// Arrow Function

How to Use 2

const fn02 = () => console.log('Arrow Function');
 
fn02(); // Arrow function

Usage 3 If there is a return

const fn03 = () => {
return 'Arrow function';
}
 
fn03();
// Arrow function

Usage 4 If there is a return

const fn04 = () => 'Arrow function';
 
fn04();
// Arrow function
// # Return is possible even if square brackets are omitted.
 

this

Arrow functions do not have this. Therefore, the upper this can be used as is.

this 01

const fn01 = () => console.log(this);
 
fn01(); // window object

this 02

const ex = {
v: 'ex01',
fns: function() {
const fn02 = () => {
console.log(this.v);
}
fn02();
}
}
 
ex.fns();
// ex01

Other

Arrow functions can be used to simplify functions, but they also allow you to use this more efficiently in JavaScript. If used appropriately, the source code will be much simpler.