JS : 화살표 함수 this ('this' with Arrow Function)

화살표 함수란?

//매개변수 없으면 소괄호만 달랑
const one = () => {
    return 1;
}

//매개변수가 1개면 소괄호 생략 가능
const square = x => { return x*x };

//한 줄이면 중괄호와 return 키워드도 생략 가능
const add = (a,b) => a+b;

함수 짧게 줄이는거.

단순히 길이만 줄이는게 아니라 this 사용에도 차이가 있다.

 

화살표 함수 this

function 출력() { console.log(this) }

const obj = { name: '객체', main: 출력 }
const obj2 = { name: '객체2', main: 출력 }

obj.main(); // 'obj'
obj2.main(); // 'obj2'

this는 객체 자신을 지칭하는 메서드임.

일반 함수에서 this 쓸 땐 자신을 호출한 객체에 따라 뜻이 달라짐. (= dynamic binding) (= runtime binding)

 

화살표 함수 안의 this는 항상 화살표 함수가 정의된 스코프의 this를 가리킴 (= Lexical this)

 

const obj = { name: '객체', main: () => {console.log(this.value);} };

obj.main(); // undefined

현재 main은 obj의 메서드임. obj.main()으로 사용할 수 있음.

obj.main()은 범위 제한 없이 아무데서나 갖다 쓸 수 있음.

 

즉, 화살표 함수가 전역 스코프에 정의되어있음.

 

전역 스코프의 this는 전역 객체 window임.

window.value 같은 건 없으니까 undefined 출력.

 

const obj = {
  name: '객체', 
  main: function Func() {
    const arrowFunc = () => console.log(this);
    arrowFunc();
  }
}
obj.main(); // obj
obj.arrowFunc(); // 정의 안됐다면서 TypeError 발생

이번엔 Func() 안에 arrowFunc()가 정의되어 있음.

 

arrowFunc()는 Func() 안에서만 쓸 수 있음.

obj.arrowFunc() 이런 식으로 사용 못함.

 

즉, 화살표 함수가 함수 스코프에 정의되어있음.

 

Func()는 obj 객체의 메서드임.

따라서 Func()의 this는 obj임.

그러면 화살표 함수의 this도 obj가 되니까 obj 출력.

 

메서드 함수 안의 this

 

 

Func()는 obj 객체의 메서드임.
따라서 Func()의 this는 obj임.

 

이게 당최 무슨 소리일까?

 

 

원래 this는 "누가 나를 불렀느냐"는 의미.

객체의 메소드 함수는 사람으로 치면 
var 사람 = { 나이 : 12살, 특기 : 숨쉬기() }
에서 '숨쉬기()' 임.

숨쉬기(= 객체 메소드 함수) 안에 this가 있어도
숨쉬기(= 객체 메소드 함수)가 부른 걸로 취급되는게 아니라
사람(= 객체)이 부른 것으로 취급됨.

 

 

참고

• https://kim-solshar.tistory.com/57
• https://kim-solshar.tistory.com/42
• https://bluayer.com/25
• https://www.youtube.com/watch?v=2lIde1abdBY