What is 'this' in Javascript?

자바스크립트에서 this는 특별한 동작은 한다.
우선 this를 콘솔에 출력해보면 window 객체가 출력된다.

console.log(this) // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

브라우저 안에서 자바스크립트가 동작한다면 전역 객체인, window 객체가 this의 기본값이 된다.

일반적으로 this는 함수 내부에서 사용되고
특히, 객체 내부의 메소드를 만들 때 중요한 역할을 한다.

const user = {
	firstName : Sangmin,
    lastName : Jeon,
    getFullName : function () {
    	return `${user.lastName} ${user.firstName}`
        }
   }
   
console.log(user.getFullName()); // Jeon Sangmin

위 코드를 보면 user 객체의 getFullName 함수를 호출하여 user의 lastName, firstName을 출력할 수 있다.

getFullName 함수를 좀 더 활용하고 싶어서 객체 밖으로 가지고 나와 사용하면 문제가 생긴다.

function getFullName() {
	return `${user.lastName} ${user.firstName}`;
}

const user = {
	firstName : 'Sangmin',
    lastName : 'Jeon',
    getFullName : getFullName
}

const admin = {
	firstName : 'minsu,'
    lastName : 'lee',
    getFullName : getFullName
}

   
console.log(user.getFullName()); // Jeon Sangmin
console.log(admin.getFullName()); // Jeon Sangmin

하나의 getFullName 함수로 여러 객체를 다루기를 원했지만 user객체의 속성만 선택하게 된다.
이때 유용하게 쓰이는 것이 'this'다.

function getFullName() {
	return `${this.lastName} ${this.firstName}`;
}

const user = {
	firstName : 'Sangmin',
    lastName : 'Jeon',
    getFullName : getFullName
}

const admin = {
	firstName : 'Minsu',
    lastName : 'lee',
    getFullName : getFullName
}

   
console.log(user.getFullName()); // Jeon Sangmin
console.log(admin.getFullName()); // lee Minsu

getFullName 함수의 user객체에서 this객체로 바꿔주면 해결이 된다.

this는 함수를 호출한 객체를 가리키는 키워드이기 때문에 같은 함수를 불러도 객체마다 각각의 값을 가지게 된다.

요약

1. 'this' 출력하면 전역 객체인 window 객체 값을 가진다.

2. 함수안의 'this'를 함수 호출하면 전역 객체인 window 객체 값을 가진다.

3. 어떤 객체의 메소드로 호출이 된다면, 그 객체의 값을 가진다

추가 사항

Arrow function은 'this'를 사용하기 쉽지 않은데
그 이유는 'this'가 선언되기 직전의 값을 가지기 때문이다.

일반 함수에서 처럼 함수를 호출한 객체를 가리키지 않고 직전에 어떤 값이였나가 중요하다.
값이 없었다면 전역객체인 window객체 값을 가지므로 활용하기 까다로울 것이다.

'this'를 사용하고 싶다면 일반 함수로 사용 할 것!