[ES6]Arrow Function

Arrow Function?

 

1. 화살표 함수란 ...?

 

화살표 함수란 기존에 사용하던 function 키워드 대신 ' ⇒ ' 를 사용하여 함수를 표현하는 방식.

 

2. 사용방법은 ?

기존의 함수 호출 방식인

 

// 함수 선언식 

function Hello() { 
	// Something... 
} 


// 함수 표현식 

let Hello = function () {
	// Something ... 
}

 

 

요 위의 두가지 방식과 다르게

 

// 기본적으로 let something = () => { ... } 의 구조 

// ex) 

let Hello = () => { 
	// Something ... 
}

 

 

이와 같이 function 키워드 대신 ' ⇒ ' 를 사용하여 함수를 나타낼 수 있다.

 

3. 사용 시의 유의사항

 

// 1. 매개변수가 하나라면 괄호 생략 가능. 하지만 둘 이상이라면 괄호 필요! 

() => { ... } 

x => { ... }

(x, y) => { ... } 


// 2. 한줄짜리의 구문이라면 return 표시 생략 가능 

x => { return x * x } 

x => x * x 

// 3. 객체를 return 할 시에는 소괄호로 감싸주어야 한다. 

() => { return { a: 5 } }

() => ({ a: 5 })

// 4. 보통은 이처럼 사용 

() => {
	
    const x = 5;
   	
    return x + 5; 

};

 

 

개인적으로 react를 공부하고 사용하면서 아래에서 소개할 사용 시의 특성 때문에 화살표 함수를 사용할 일이 꽤 있었는데, 사용하는 과정에서 3번 내용이 가장 도움이 많이 되었다고 생각한다.

 

4. 사용 시의 특성

 

Arrow function을 사용하게 되면 보여지는 코드 상의 변화 이외의 가장 큰 변화로는 'this값이 변경 된다는 점' 인데.

 

해당 function을 정의한 영역의 this를 가져온다. 한 단계 더 위의 element를 가리키는 것이다.

 

(이래서 react에서 자주 사용)

 

그렇기 때문에 prototype에 함수를 정의할 때 arrow function을 사용할 때 내부적으로 this를 사용하게 되면 객체를 가리키지 않고

 

window 객체를 가리키게 된다.

 

또한 arrow function은 명식적으로 bind, call로 this를 넣어줘도 이를 무시한다.