[ES6] 화살표 함수(Arrow function)

저번 글에는 var <-> let/const 의 차이에 대해서 알아보았다. 이번에는 ES5 <-> ES6의 대표적인 차이 가운데 하나인

화살표 함수에 대해서 알아보려고 한다.

 

1. 화살 표함수 문법

자바스크립트에선 함수를 아래와 같이 만들어서 사용한다.

// 1
function func(){
 //blablabla..
}

// 2
var func() = function(){
 //blablabla..
}

func();

함수는 1 과 2 처럼 만들수 있고 func() ; 이렇게 호출합니다.

하지만 ES6에서 부터는 신 문법을 사용하면 이렇게 만들 수 있습니다.

 

var func = () => {
 // blablabla..
}

function 이라는 길고 복잡한 키워드 대신에 => 이렇게 화살표를 사용해서 함수를 만들어 낼 수 있습니다.

그렇다면 이 문법의 용도는 무엇일까?

 

1. 함수의 본연의 기능을 아주 잘 표현한다.

function 문법의 사용 이유는 아래와 같다.

•  여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때
• 입 출력 기능을 만들 때

화살표 함수를 사용하면 함수 본연의 입/출력 기능을 아주 직관적으로 잘 표현해준다.

( 입/출력 기능이란 간단하게 말해서 소괄호 안에 무엇인가를 넣으면 return을 이용해 결과를 내놓는 것이라고 이해했다.)

 

화살표 함수를 사용하면 아래와 같이 입/출력 기능을 직관적으로 나타낼 수 있다.

var calcDouble = (x) => {return x *2 };
console.log(calcDouble(2)); // 4

숫자를 넣으면 2배로 만들어주는 함수를 하나 만들었다. 함수 표현식 자체가 x에 2를 곱한다는 이해하기 쉬운 표현이다.

 

2. 소괄호 생략

var calcDouble => x => { return x*2 };
console.log(calcDouble(2)); // 4

x 매개 변수에 대한 소 괄호를 생략할 수 있다.

 

3. 중괄호 생략

var calcDouble = x => x * 2;
console.log( calcDouble(2) ); // 4

생략하게 되면 이제 x가 어떻게 변하는 함수인지 입출력 기능이 바로 한눈에 들어오게 된다.

{} 중괄호 끝날 때 ; (세미콜론)을 입력 안해도 되는데 생략할 땐 세미콜론을 적어두는게 좋다.

 

4. 화살표 함수를 사용하면 내부에서 this 값을 쓸 때 함수 스코프 안과 밖에 상관 없이 this 값을 그대로 사용한다.

ES5 함수에서는 함수가 쓰인 위치에 따라서 내부의 this 값이 변하게 된다.

하지만 화살표 함수에서는 위치에 상관 없이 내부의 this 값을 변화시키지 않는다.

var obj = {
 func : function(){ console.log(this) }
}
obj.func();

위의 코드는 func() 를 가지고 있는  obj1이 출력될 것이다.

 

var obj = {
 func : () => { console.log(this); }
}

obj.func();

위의 코드는 window 객체를 출력한다. 

왜냐하면 thus 값은 함수를 만나면 항상 변하는데 화살표 함수 안에서는 변하지 않고 바깥에 있던 this를 그대로 사용하기 때문이다. ( obj 밖에 있던 this가 window 이다.)

 

화살표 함수는 외부에 있던 this를 그대로 내부로 가져와 사용하기 때문에 항상 장점은 아닐 수 있다.

내가 예측하는 this와 결과 값이 다르게 나올 수 있기 때문이다.

 

많은 사람들이 위와 같은 내용을 공통적인 이야기를 하기 때문에 깊숙히 알아보기 보다는 핵심을 위주로 알아보는 시간을 가졌다. 지금까지 화살표 함수에 대해서 알아보았다!