[ES6+] Arrow Function(화살표 함수)를 쓰면 안되는 경우

바닐라js로 버튼을 하나 만들어보자

[html]
<button>click me</button>

[js]
const button = document.querySelector("button");

button.addEventListener("click", function(){
	console.log("클릭됨!")
})

이 경우에는 아무문제없이 작동된다. 버튼을 클릭하면 ‘클릭됨!’이라는 문자가 콘솔에 찍히게 됨

그치만 여기서 만약 this 를 쓰고 싶을 경우, 얘기가 달라진다.

this 는, 자바스크립트에서의 예약어이고

자바스크립트의 규칙에 따르면 이벤트리스너에 function이 붙어있으면 자바스크립트는 버튼ele을 this에 넣는다.

그래서 저 경우에

button.addEventListener("click", function(){
	console.log(this);
	console.log("클릭됨!")
})
//<button>click me</button>
//"클릭됨!"

버튼 엘리먼트를 출력한다. this 가 버튼엘리먼트를 가리키기 때문이다.

(그래서 원하는 함수 내에서 적어주어야 원하는 대상을 참조하기 때문에 이것도 scope의 영향을 받는것이다)

하지만 만약 화살표함수를 사용하게 되면

button.addEventListener("click", () => {
	console.log(this);
	console.log("클릭됨!")
})
//Window {postMessage:....}

라며 윈도우 객체를 리턴하게 된다.

화살표함수내에서의 this는 window를 참조하기 때문이다.

결국 화살표함수는 스코프의 영향을 받지않고 스코프 외부에 접근하여 윈도우를 참조한다는 것이다.

다른 예를 들어보면

const sora = {
	name: 'sora',
	age:26,
	addYear:()=>{
		this.age++;
	}
}
console.log(sora);
sora.addYear();
sora.addYear();
console.log(sora);

//{.. age:26, ..}
//{.. age:26, ..}

결과값은 sora오브젝트를 리턴하지만 age가 변하지 않았다

똑같이 26을 리턴한다. 화살표함수를 사용했기 때문에!

그래서

addYear()이 작동했을때 age를 올리려면

일반함수를 써주어야한다

const sora = {
	name: 'sora',
	age:26,
	addYear(){
		this.age++;
	}
}
console.log(sora);
sora.addYear();
sora.addYear();
console.log(sora);

//{.. age:26, ..}
//{.. age:28, ..}

이렇게!

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)

Share this post