this 키워드

this 키워드는 3~4가지의 뜻이 있다. 하나씩 살펴보도록 하자

첫 번째 의미

그냥 console 창에 this를 띄워보면 window가 뜬다, 이것이 첫 번째 this의 의미

그냥 쓰거나 일반 함수 안에서 쓰면 { window }
window라는 object는 JS의 기본함수들을 가지고 있는 수납공간이라고 생각하면 됨

💡 'use strict'
strict mode라고 하는데, 이곳에서는 그냥 변수 선언 시 에러가 난다

strict mode일 때 일반함수 내에서 this를 출력하면 undefined가 출력된다

두 번째 의미

object 안에 함수를 넣을 수 있는데 오브젝트.함수( ) 처럼 소괄호를 붙여줘야 한다
object 안에있는 함수 안에서 this를 쓰면 그 함수를 가지고 있는 object를 의미한다

let 오브젝트 = {
	data : {
    	함수 : function(){
        	console.log(this)
        }
    }
}

예를 들어 위와 같은 코드에서 오브젝트.data.함수();를 출력하면 뭐가 나올까?
🔑 this가 들어있는 함수를 가지고 있는 object를 의미하므로 오브젝트.data가 나온다

console.log(this);

let 오브젝트 = {
	data : {
    	함수 : () => {
        	console.log(this)
        }
    }
}

🔑 하지만 arrow function을 사용하면 window가 출력된다

화살표 함수는 this 값을 함수 밖에 있던것을 물려받아 그대로 쓴다는 특징이 있다
즉, 내부의 this 값을 변화시키지 않고 외부 this 값을 그대로 재사용 가능함

💡object 안에 함수 넣는 법
위 예시들처럼 함수를 표기해도 되지만 아래 예시처럼 표기해도 된다

let 오브젝트 = {
	data : {
    	함수(){
        	console.log(this)
        }
    }
}

JS는 함수나 변수를 전역공간에서 만들면 {window}(global object)라는 공간에 보관한다

함수를 출력할 때 함수()와 window.함수()의 값은 같다

정리

window: {
  함수(){
    console.log(this)
  }
}

실제 JS에서는 보이지 않지만 window 안에서 생성되기 때문에 this의 두번째 의미에 의해 this를 출력하면 window 객체가 나왔던 것

세 번째 의미

함수를 만들 때 this를 넣으면 새로 생성되는 object를 의미한다 (constructor 내부에서 사용할 때)

네 번째 의미

this의 마지막 뜻은 이벤트리스너 안에서 사용할 때는 e.currentTarget을 가리킨다는 것이다
e.currentTarget은 현재 이벤트가 동작하는 곳을 의미한다

응용

다음의 코드에서 this는 무엇을 출력할까?

배열의 경우

function(e){
  let array = [1,2,3];
	array.forEach(function(a){
  	console.log(this)
	});
}

🔑 함수가 콜백함수로 쓰였기 때문에 전역함수가 되어 { window }가 출력된다

함수 안에 함수를 넣으면 그 함수를 콜백 함수라고 한다

오브젝트인 경우

let object = {
  names : ['김', '이', '박'],
  func : function(){
    console.log(this);
    object.names.forEach(function(){
      console.log(this)
    })
  }
}

object.func();

첫 번째 this와 두 번째 this는 각각 무엇을 나타낼까?
🔑 첫 번째 : 이 함수를 소유한 object, 두 번째 : 그냥 일반 함수이기 때문에 window

let object = {
  names : ['김', '이', '박'],
  func : function(){
    console.log(this);
    object.names.forEach(()=>{
      console.log(this)
    })
  }
}

object.func();

forEach 문을 arrowFunction으로 바꾸면 두 번째 this도 첫 번째 this와 마찬가지로 object를 가리킨다

.
.
.
자바스크립트를 사용하다보면 this 키워드를 많이 접하게 되는데 이번 기회에 this가 의미하는 것을 정확히 알게 된 것 같다!