[JS] this에 대하여

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
자바스크립트에서 this는 조금 특별한 역할을 갖는다.
함수를 선언할 때 this에 바인딩(함수 또는 메소드를 호출한 대상에 실제 함수를 연결해주는 것)할 객체가 결정되는 것이 아니라, 함수를 호출할 때 결정되기 때문이다. 즉, 함수의 호출 방식에 따라 this에 바인딩할 객체가 동적으로 변화한다.

console.log(this === window); // true

브라우저 안에서 자바 스크립트가 동작하는 일반적인 경우에, this의 기본값은 전역객체인 window객체이다. 따라서 콘솔에서 바로 this를 출력해보면 window객체를 출력하는 걸 확인할 수 있다. 그러나 this는 보통 함수 내부에서 많이 사용하기 때문에 실제 this를 사용할 때의 출력값은 window객체가 아닐 확률이 높다.

this는 특히 객체에 메소드를 만들 때 중요한 역할을 한다. 하나의 함수를 서로 다른 객체에서 여러번 호출할 때, 각각 그 객체에 저장된 값을 사용하려면 this를 사용하는 것이 유용하기 때문이다.

// (1) 단순 호출
function returnThis() {
    return this;
}
console.log(returnThis() === window); // true


// (2) 객체의 메소드 호출
function getFullName() {
	return `${this.firstName} ${this.lastName}`;
}
    
const name = {
    firstName: '김',
    lastName: '다은'
};
    
console.log(name.getFullName() === '김 다은'); // true

위의 코드를 보면, 단순하게 전역에서 함수를 호출한 경우 this 는 전역 객체인 window 가 바인딩된다.
그러나 (2)번 케이스처럼 함수를 어떤 객체의 메소드로 호출하면 this 의 값은 그 객체가 바인딩되는 것을 확인할 수 있다. 즉, 해당 객체의 firstName, lastName 프로퍼티 네임을 찾아서 그 값을 함수에 사용할 수 있는 것이다.

즉, 자바스크립트에서 this는 함수를 호출한 객체를 가리키는 키워드이다. 그래서 코드를 작성할 때 값이 미리 결정되는 게 아니라, 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 값이 상대적으로 변하는 특징을 가지고 있다.

const getFullName = () => {
	return `${this.firstName} ${this.lastName}`;
}
    
const name = {
    firstName: '김',
    lastName: '다은'
};
    
console.log(name.getFullName() === '김 다은'); // false

그러나 예외적으로 Arrow Function에서 this은 일반함수처럼 호출한 객체에 따라 상대적으로 바뀌는 게 아니라, Arrow Function이 선언되기 직전에 그 때 유효한 this값과 똑같은 값을 가지고 동작하기 때문에 이를 고려해서 적절한 방식으로 코드를 작성해야 한다.
즉, 위에 코드에서는 getFullName가 선언되기 직전에 바인딩할 대상이 window객체이기 때문에, window객체가 바인딩할 대상으로 유지된다.

---

References
1. poiemaweb
2. Codeit 모던 자바스크립트 - 함수 다루기