[JavaScript/ES6] 3. Arrow Function

[arrow function이란]

 

function(){} 대신 사용

() => {} 꼴로 쓰면 됨.

var 함수 = (a) => { return a + 10 }

 

 

[특징]

 

1. 함수 본연의 기능(코드 축약 및 재사용, 입출력(수학의 함수 기능))을 잘 표현

2. 소괄호 생략 가능(파라미터가 1개일 때)

var 함수 = a => { return a + 10 }

3. 중괄호 생략 가능(코드가 1줄일 때)

var 함수 = a => return a + 10

4. 외부의 this값을 그래도 내부의 this값으로 사용

arrow function은 함수 안에서 this값을 재정의하지 않음.

 

 

[예시]

 

1.forEach 콜백 함수

// function 사용

[1,2,3,4].forEach(function(a){
    console.log(a)
})

array 자료 개수 만큼 내부 코드 반복
a는 array 내의 자료들

// arrow function 사용

[1,2,3,4].forEach( a => console.log(a) );

 

2. 이벤트리스너

document.getElementById('버튼').addEventListener('click', (e) => {
    this;
});
// 틀린 문장
// arrow function에서는 this값을 제대로 쓸 수 없음

document.getElementById('버튼').addEventListener('click', (e) => {
    e.currentTarget;
});
// arrow function에서 this를 쓰려면 e.currentTarget;을 씀

document.getElementById('버튼').addEventListener('click', function(e) {
    this;
});
// 그냥 function에서 this를 쓰거나

일반 이벤트 리스너에서 this==e.currentTarget

arrow function 이벤트리스너에서 this==바깥의 this값

 

 

3. object 안의 함수

var 오브젝트 = {
    함수 : () => {
        return this; // 여기서 this값은 윈도우 함수
    }
}

오브젝트.함수();