arrow (화살표) 함수 표현법
- 화살표 함수는 ES6에 도입된 함수 표현법이다.
- 보다 간단하게 함수를 표현할 수 있다.
- 화살표 함수는 항상 익명함수이다.
- return 명령어 없이도 함수 실행을 종료시키고 값을 반환한다.
화살표함수와 일반함수의 차이
일반함수
- 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. (함수 실행시에는 전역 window 객체를 가리킨다) 📌this에 대한 내용은 다음에 deep하게 다룰 예정
- 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
화살표함수
- 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
- 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.
- call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
<script>
function fun() {
this.name = "하이";
return {
name: "바이",
speak: function () {
console.log(this.name);
},
};
}
function arrFun() {
this.name = "하이";
return {
name: "바이",
speak: () => {
console.log(this.name);
},
};
}
const fun1 = new fun();
fun1.speak();
const fun2 = new arrFun();
fun2.speak();
</script>
설명
func1 함수
- func1.speak() 함수를 호출한다.
- func1에 의해서 speak 함수가 호출됐다 즉, speak 함수의 this는 func1 (this는 나를 누가 호출했는가에 의해서 결정된다. *화살표함수 예외)
- 그래서 func1 함수 내의 객체 '하이' --> '바이'로 할당되었으므로 '바이'출력
func2 함수
- func2.speak() 함수를 호출한다.
- func2에 의해서 speak() 함수가 호출됐다. 하지만 speak 함수는 화살표 함수로 표현되었다. 그러므로 상위 스코프에게 this를 계승 받아서 '하이'를 출력한다.