this란?

개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양하며, 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있다.

1. window

console.log(this);

this 키워드를 콘솔에 찍어보면 아래와 같이 window 객체가 찍힌다.

function printThis(){
  console.log(this);
}

printThis();

비슷하게 일반 함수 내에서 this라는 값을 호출하면 똑같이 this라는 값은 window 라고 출력된다.

❗️window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역 객체.

document.getElementById()
alert()
console.log()
//...

위와 같은 자바스크립트 내장함수 또는 전역변수를 보관하는 보관소라고 생각하면 쉽다!

*전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수. script 내에 변수를 선언하면 자연스레 전역변수가 된다.

2. undefined

IE 10버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면
strict mode로 자바스크립트를 작성가능하다.

strict mode에선 변수 선언 키워드 없이 변수를 선언하거나, 변수를 arguments라는 키워드로 선언하는 등의 실수를 방지해준다.

  'use strict';

  function printThis(){
    console.log(this)
  }
  printThis();

이 strict mode에선 this 키워드를 일반 함수 안에서 호출했을 때 undefined라는 값을 지정해준다.

3. object 자료형 내 함수

const obj = {
  data : 'Kim',
  printThis : function(){ console.log(this) } 
}

obj.printThis();

오브젝트 내에도 함수를 지정할 수 있고, 오브젝트 내 함수는 obj.printThis() 이런식으로 호출하여 사용할 수 있다.

오브젝트에 들어가는 함수들을 메소드(method)라고 칭한다.

이렇게 메소드 안에서 this를 사용하면, 이 this는 해당 메소드를 담고있는 상위 객체를 뜻한다.

여러분이 함수나 변수를 대충 스크립트 태그 안에 만들었을 때, 함수나 변수는 그냥 만들어지는게 아닙니다.

왜 그렇냐고요?

그건 자바스크립트 만든 사람에게 물어보시길 바랍니다.

4. window.함수

  function printThis(){
    console.log(this)
  }

printThis()는 전역변수나 전역함수를 관리하기 위한 window라는 오브젝트에 자동으로 추가된다.

  window.printThis();

window는 최상위 객체 이며 printThis는 window 오브젝트에 추가된 함수 자료이다.

다시 말해 전역함수 만들거나 전역변수 만들면 window {오브젝트} 안에 담긴다는 것이다.