[JavaScript] Arrow function vs Function

일반 Function

• 일반 함수 안의 this는 자신을 마지막으로 품고 있는 scope로 변한다 (어디서 "선언"했는지 중요x, 어디서 "호출" 하느냐에 따라 다름)

const example = {
	name: "world",
	speak: function() {
		function getName() {
			return `${this.name}`;
		}
		return `Hello ${getName()}`;
	}
};
example.speak(); // Hello 또는 Hello undefined 출력

//이를 해결하려면..
const example = {
	name: "world",
	speak: function() {
		//여기까지는 this에 객체 example이 bind돼있음
		const self = this; // self를 선언해서 결합시킴
		function getName() {
			return `${self.name}`;
		}
		return `Hello ${getName()}`;
	}
};
example.speak(); // Hello world

 

Arrow function

• ES6 부터 추가 된 표현 형태
• 익명함수 선언 방식으로 간결하게 코드 작성 가능
• 이름을 직접 지어줄 수 없고 변수에 담아서 사용해야 한다
• 상위 컨텍스트가 전역 (window)
• () => {} 모양을 하고 있다
• self를 쓰지 않아도 된다 (처음 바인딩 된 스코프 안에서 가리키는 this가 변하지 않음)

//위랑 같은 코드임
const example = {
	name: "world",
	speak: function() {
		const getName = () => {
			return `${this.name}`; //this를 정적(lexically)으로 결합시킴
		}
		return `Hello ${getName()}`;
	}
};
example.speak(); // Hello world

• 자신의 this, arguments, super, new.target을 바인딩 하지 않음
• prototype 속성 없음
• addEventListener 함수의 callback 함수로 사용하면 안됨 (내부에서 this를 사용하는 경우)

 

참고

https://bluayer.com/25

https://velog.io/@leeeeunz/TIL-34.-Arrow-Function%EA%B3%BC-Function%EC%9D%98-%EC%B0%A8%EC%9D%B4

https://velog.io/@modolee/javascript-function-vs-arrow-function