TIL no.3 - arrow function(ES 5와 ES 6의 차이)

arrow function에 대해 포스팅하겠습니다.
ES 5와 ES 6의 함수 선언 차이를 살펴보면서 알아보겠습니다.

---

1-1. 이름없는 함수 선언

// ES 5의 경우
function() {}
// ES 6의 경우
() => {}

1-2. 이름있는 함수 선언

// ES 5의 경우
let getName = function() {}

// ES 6의 경우
let getName = () => {}

이제, 인자가 있는 예제를 살펴보겠습니다.

2-1. 인자가 1개인 경우

// ES 5의 경우
let getName = function(name) {}

// ES 6의 경우
let getName = (name) => {}
let getName = name => {}

ES 6의 arrow function의 경우 인자가 1개일 때, 소괄호를 생략해도 됩니다.

2-2. 인자가 2개 이상인 경우

// ES 5의 경우
let getName = function(name, age) {}

// ES 6의 경우
let getName = (name, age) => {}

ES 5와 마찬가지로 소괄호를 생략할 수 없습니다.

ES 6의 arrow function은 함수 내용이 딱히 없다면 return을 생략할 수 있습니다.

3. return 생략 가능

//ES 5의 경우
let getName = function(name) {
	return name;
}

//ES 6의 경우
let getName = name => {return name};
let getName = name => name;

이때 중괄호를 생략해야 합니다.

3-E return 생략 가능 헷갈리는 예제

//ES 5의 경우
let sayHi = function() {
   alert('Hello');
};

//ES 6의 경우
let sayHi = () => {alert('Hello')};

만약에

let sayHi = () => alert('Hello');

라고 하면 alert('Hello')를 return하는 꼴이 됩니다.