[코딩애플] js part 1-3. Arrow function은 function을 대체하는 신문법이 아님

함수 만드는 방법

(1=2)

1. function 함수() {}

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

3. **ES6 Arrow function**을 이용 (function 키워드 대신)
4. var 함수 = () => {};

함수 사용하는 경우

함수는 그냥 쓰는 문법이 아니다.

1. 코드들을 기능으로 묶고 싶을 때 사용
2. **입출력 기계**를 만들고 싶을 때 사용(input, output) ➡️ 함수 본연의 기능

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

Arrow function의 좋은 점

1. 입출력 나타내는데 훨씬 직관적임(쉽게 예측 가능)
2. 파라미터 1개면 소괄호 생략 가능

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

1. 코드 한 줄이면 중괄호도 생략 가능

var 함수 = a => a + 10;
var 함수 = (a,b) => a + 10;

Arrow function 사용 예시

1. forEach 콜백함수

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

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

2. 이벤트 리스너

document.getElementByid('버튼').addEventListener('click', function(e){
});

document.getElementByid('버튼').addEventListener('click', (e) =>{ } );

• 함수 내 this값을 변경시키지 않고, 바깥에 있던 this값을 내부에서 그대로 사용한다(재정의하지 않음).
• **일반 이벤트리스너에선 this == e.currentTarget**
• **arrow function 이벤트리스너에선 this == 바깥의this값(=window)**
• this 안쓰고 그냥 e.currentTarget으로 써도 됨

3. Object안의 함수

var 오브젝트 = {
	함수: function() {
    }
}

var 오브젝트 = {
	함수: () => {
        console.log(this); // { Window }
    }
}
오브젝트.함수();

• 상위 객체의 this를 가져옴. 함수는 arrow function이니까 this를 바꾸지 않기 때문에.
• 함수의 this == 객체 '오브젝트'의 this == **window**