[ES6]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를 넣어줘도 이를 무시한다.