[Javascript] this 키워드에 대해 알아보자

this란

• javascript 키워드이다! 즉, 변수가 아니기 때문에 this에 값을 할당하는 것은 불가능하다
• this의 값은 함수를 호출한 방법에 의해 결정된다

---

this가 중요한 이유

javascript 공부를 하다보면 this에 대해 많이 접하게 되는 데 왜 이게 중요하고 또 어려울까?

➡️ this에 자바스크립트의 언어적 결함과 this만의 특징이 있기 때문이다

this의 언어적 결함

this의 언어적 결함은 중첩 함수에서 나타난다

let o = {
	m: function() {
    	let self = this; // self라는 변수에 this의 값 할당
        this === o; // true
        f();
		
      	function func3() {
        	this === o; // false
          	self === o; // true
        }
    }
}

• 중첩된 함수(포함되는 함수, 내부 함수)는 포함하는 함수(외부 함수)의 this값을 상속받지 않는다
• 그래서 중첩된 함수(위 예시에서는 함수 func3)를 함수로 호출하면
  ➡️ 일반 모드 : 전역 객체, 엄격 모드 : undefined로 인식된다
• 메서드 내에 정의된 함수를 함수로 호출해도 this를 통해 메서드의 호출 컨텍스트를 참조할 수 없다
  
  

this만의 특징

• 변수의 스코프 규칙을 따르지 않는다

function func1() {
	let a = 1
    func2();
    function func2() {
    	console.log(a === 1)  // true
    }
} 

• 위와 같은 코드가 있다고 하면 a는 당연히 func1 함수 스코프 안에 있는 a라고 인식되어 func2에서도 사용할 수 있다
• 하지만 this 키워드는 그렇지 않다
  ➡️ 함수를 호출한 방법에 의해 결정된다

---

this에 할당되는 값(일반적)

1. 일반 모드일 때: 전역 객체
- web browser에서는 window 객체, Node.js 환경에서는 global 객체

function f1(){return this}
console.log(f1()) // Window

2. 엄격 모드(strict mode)일 때: undefined

3. 객체 내의 메서드를 호출한 경우: 객체

function independent() {return this}
let obj = {
    a: 1,
    func: independent
}
console.log(obj.func()) // {a: 1, func: f(함수라는 콘솔창 표시)} => obj 객체

❓ 만약 객체가 여러 층이라면 어떤 객체를 참조할까?

obj.b = {g : independent, a: 25}
console.log(obj.b.g()) // 25

• ⭐ 가장 즉각적인 참조를 한다
  - 함수 실행시 객체 obj.b의 메소드 g로서 independent가 호출이 된 것이다
  ➡️ 따라서, 이 때의 this는 obj.b를 나타내기에 그 값은 25이다

---

4. 함수 호출을 한 경우: 위의 일반 모드/엄격 모드인 경우와 같음

5. 화살표 함수(ES2015(ES6))
- 자신이 정의된 곳의 this 값을 상속받는다
- 자신을 감싼 정적 범위의 this를 상속받는다

이해를 위해 위의 obj 객체에 새로운 메서드를 넣어서 예시를 작성해 보겠습니다

(1) 일반 함수로 구성된 중첩함수

obj.f2 = function () {
    console.log('this1', this)
    func2();
    function func2() {
        console.log('this2', this)
    }
}
obj.f2()
/*
this1 {a: 1, f: ƒ, f2: ƒ}
this2 Window
*/

• 내부에 있는 함수의 this가 전역을 가리킴을 볼 수 있다
  
  

(2) 화살표 함수로 구성된 중첩 함수

• func2 함수가 정의된 곳의 this값(obj 객체)를 상속받기 때문에 this2 또한 obj 객체이다

obj.f2 = function () {
    console.log('this1', this)
    const func2 = () => {
        console.log('this2', this)
    }
    func2();
}
obj.f2()
/*
this1 {a: 1, f: ƒ, f2: ƒ}
this2s {a: 1, f: ƒ, f2: ƒ}
*/

이렇게 일반 중첩 함수일 때 외부 함수(포함하는 함수)와 내부 함수(포함되는 함수)의 this 값이 달라지는 언어적 결함 이 발생해서, 이를 해결하기 위해 bind, call, apply 메서드, ES6에서는 화살표 함수가 도입되었다

• bind(), call(), apply() 를 사용해 this의 범위를 재정의할 수 있다

---

참고 자료

• this - MDN
• 자바스크립트 완벽 가이드/ 데이비드 플래네건 지음/ 한빛미디어, O'REILLY