ES6 Arrow Function

Arrow Function은 기존 자바스크립트의 함수 선언법을 보다 간결하게 만든 새로운 문법이다. 함수로서의 동작은 동일하나 일부 차이점이 있으니 사용 시 유의해야 한다.

 

0. 함수를 사용하는 용도

1. 코드들을 하나의 기능으로 묶고 싶을 때 사용한다.
2. 입출력하는 기능을 만들고 싶을 때 사용한다.

1. 자바스크립트 함수 선언 방법

1.
function 함수(){}
2.
var 함수 = function(){}

• 함수만을 선언하거나 변수에 함수를 담아도 된다.

1-2. ES6 함수 선언 방법

var 함수 = (x) => { return x + 10 } // 1. 함수를 만들 때 보기 쉽다.
var 함수 = x => { return x + 10 } // 2. 파라미터가 한 개일 때는 소괄호 생략 가능
var 함수 = x =>  x + 10  // 3. 코드가 한 줄이면 중괄호 및 return도 생략 가능

1. forEach 함수 사용
[1,2,3,4].forEach(function(a){
        console.log(a)
})
2. Arrow 함수 사용
[1,2,3,4].forEach(a => console.log(a)) // 괄호, 중괄호 생략

var 오브젝트 = {
        함수 : () => {
            return this // window 반환
        }
    }
    
오브젝트.함수();

• 오브젝트에서 함수를 선언하고 사용할 때는 이름과 ()를 같이 써야 한다.

2. Arraw Function에서 this 사용할 때 주의점

• Arrow Function은 this 값을 새로 정의하지 않고 기존의 this 값을 그대로 사용한다. 따라서 일반 함수에서의 this 값 출력 혹은 반환 값과 차이가 있다. arrow 함수 바깥에서의 this의 의미는 window이기 때문에 window를 출력하는 것이다.
• this는 사용되는 함수의 위치, 종류에 따라 의미가 달라진다. 일반함수 내에서 사용될 경우에는 window를 가리킨다. 하지만 Arrow 함수에서 사용될 경우엔 Arrow 함수 바로 바깥에서의 this 의미를 가지게 된다!

1. 일반함수 사용
document.getElementById('버튼').addEventListener('click', function(e){
        console.log(this) // e.currentTarget
    });
    
2. Arrow 함수 사용
document.getElementById('버튼').addEventListener('click', (e) => {
        // this 값을 새로 만들지 않고 Arrow 함수 바로 바깥 this 값을 사용
        console.log(this) // window 출력
    });

• 이벤트 리스너의 경우 일반함수를 사용하면 this가 해당 html 요소를 출력하는 e.currentTarget 역할을 한다.
• 하지만 Arrow 함수의 경우 바로 바깥의의 this - window 를 칭한다. 따라서 Arrow 함수에서 1번처럼 this를 출력하고 싶다면 e.currentTarget을 출력하면 된다.

3. 예제

var 사람 = {
        name : 'Jo',
        함수 : () => { console.log('안녕 나는 ' + 사람.name)}
        
        /*
        함수 : function(){
            console.log('안녕 나는 ' + this.name)
        }
        arrow 함수에서는 this를 사용하면 사람을 가리키지 않으므로 일반함수에서만 this 사용 가능
        */
}

사람.함수();

• 일반함수를 사용할 경우 this를 사용하면 오브젝트 전체를 가리키기 때문에 this를 사용할 수 있다.
  하지만 Arrow 함수를 사용할 경우에는 여기서 this는 함수 바깥에서 this를 의미하므로 window를 가리키게 된다.
• 일반적으로 그냥 함수나 변수에서 this를 사용할 경우 window를 출력한다. 이유는 그냥 함수나 변수를 포함하고 있는 것이 최상이 오브젝트인 window이기 때문이다. 오브젝트 내 함수에서 this를 출력하는 경우에만 그 함수를 포함한 오브젝트를 출력하는 것이다. 그 경우에는 this를 포함하고 있는 것이 해당 오브젝트이기 때문이다 (window는 그보다 더 위에 있는 것)
  사람 오브젝트 안에서 this 값을 출력하면 window가 출력됨을 알 수 있다.

var 배열 = {
        data : [1,2,3,4,5],
    }
    
배열.더하기 = function(){
        var 결과 = 0;
        this.data.forEach(function(a){
            결과 += a;
        })
        console.log(결과);
}

배열.더하기();

배열.더하기 = () => {
     var 결과 = 0;
     배열.data.forEach(function(a){
         결과 += a;
     })
     console.log(결과);
 }

• 여기서 사용된 this는 배열.더하기라는 함수를 포함한 배열이라는 오브젝트를 가리키기 때문에 this.data가 오브젝트.data가 된다.
• 마찬가지로 Arrow 함수에서 this를 사용할 경우엔 this가 Arrow 함수 바깥의 자료 오브젝트 안의 this를 의미하므로 window를 칭하게 된다. 따라서 this.data가 아닌 배열.data라고 해야 한다.

<button id="버튼">버튼이에요</button>

<script>
  document.getElementById('버튼').addEventListener('click', function(){
    setTimeout(() => {console.log(this.innerHTML)}, 1000)
  });
</script>

일반 함수로 사용할 경우
  document.getElementById('버튼').addEventListener('click', function(){
    var that = this;
    setTimeout(function(){console.log(that.innerHTML)}, 1000)
  });

• 일반 함수에서 만약에 this를 사용하면 this는 window를 가리킨다. ( 별볼일 없는 그냥 함수에서 쓰였으니까 )
  하지만 해당 버튼의 html 요소를 가리키는 this를 사용하기 위해서 (이벤트 리스너 안에 있는 this 의 뜻) this를 변수로 담아서 사용하거나 Arrow 함수를 사용하여 Arrow 함수 바깥에서의 this 의미 (이벤트 리스너 안에 있는 this)를 사용하게끔 한다.

 

자료 출처 : https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!