Arrow function in JavaScript

 

Function declaration 일반적인 함수선언

function foo() {};

 

Function expression 함수표현식 

const foo = function(){};

 

Arrow function 화살표함수

const foo = () => {};

const foo = num => {}; //single parameter는 {}생략가능. ()가능. return생략가능

 

간단한 화살표함수의 활용

function(num){return `saved ${num}`}; 

//위의 내용을 arrow function을 사용하면 간단해진다
num => `saved ${num}`; //parameter가 하나고 한 줄이면 {}와 return 생략가능

*JavaScript들어가거나 multi-line string사용 할 때  ``backtick(template literal)사용. 

 

 

 

 

Features of Arrow function

 

 

No function name

- It's always anonymous function

const arrow = function(){
 
}
 
const arrow = () => {
    
}

 

 

 

 

No 'this'

- bind() can not be used.

- no new 

- 함수는 자기만의 'this'가 존재하지만 화살표함수는 this를 가지고 있지 않아. 그렇기에 그 함수가 포함된 함수의 'this'를 사용하게 된다. 

- It can not be used as constructor. 생성자에서 this는 생성자함수로 생성된 instance가 되는데 그 this 는 존재하지 않기 때문에 화살표함수는 constructor로 쓸 수 없다. 

 

ERROR

const arrow = () => {
    
}
 
new arrow();

 

 

 

 

 

No arguments 

- argument 가 존재하지 않는다. 

 

ERROR

const arrow = () => {
    console.log(arguments);
}
 
arrow(1,2,3,4);
 

Arrow Function Example I

function outer(){
    const arrow = () => {
        console.log(arguments);
    }
    arrow();
}
 
outer(1,2,3,4);

 

output

[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

 

 

 

 

Arrow Function  Example II 

Arrow function을 사용할 때 한 문장이면 '{ }' 생략   'return' 생략

단, 매개변수가 없다면 ()  필요

 

 Example II 

//1
reduce(function (a, b) {
	return a + b;
});


//2 
reduce((a, b) => a+b);

 

 

 

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98