Javascript : 일반함수와 화살표함수의 차이.
Arrow function (화살표 함수)는 ES6에서 추가되었다.
일반 함수 표현식
const expression = function() {}
화살표 함수
const arrow = () => {}
화살표 함수는 표기면에서 간편하다. 기존 함수에 비해 비교적 간단하게 사용된다.
일반 함수와 화살표 함수 둘은 크게 세가지 차이점이 있다.
첫째로 this 바인딩에 관한 것이다.
자바스크립트에서 함수를 호출하면 함수 내부에 this 객체가 자체적으로 전달된다.
이 this가 가리키는 값이 있을텐데, 그 가리키는 값과 this를 연결하는 것이 this 바인딩이다.
일반 함수
일반함수에서는
함수를 선언할 때 this에 바인딩할 객체가 결정되는 것이 아니라 (정적),
함수 호출 (실행) 할 때 함수의 호출에 따라 this에 바인딩할 객체가 결정된다. (동적)
- 함수 실행 시에는 전역 객체를 가리킨다.
- method 실행 시에는 method를 소유하는 객체를 가리킨다.
- 생성자 실행 시에는 새롭게 만들어진 객체를 가리킨다.
화살표 함수
반면 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.
또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없다
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(); // 하이화살표 함수를 사용했을 경우 자신보다 한단계 상위 선언에 의해 결과값이 나온 것을 알 수 있다.
두번째는 생성자 함수로 사용 가능 여부이다.
화살표 함수는 prototype 프로퍼티를 가지고 있지 않기 때문에, 생성자 함수로 사용할 수 없다.
function fun() {
this.num = 1234;
}
const arrFun = () => {
this.num = 1234;
};
const funA = new fun();
console.log(funA.num); // 1234
const funB = new arrFun(); // Error
세번째는 arguments 사용 가능 여부 이다.
일반 함수에서는 함수가 실행되면 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.
하지만 arrow 함수에서는 불가능하다.
function fun() {
console.log(arguments);
}
fun(1, 2, 3); // Arguments(3) [[1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
const arrFun = () => {
console.log(arguments);
};
fun(1, 2, 3); // Uncaught ReferenceError: arguments is not defined
참조사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions