this 키워드를 알아보자 1. 함수와 Object에서 사용하면?

개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양합니다. 

사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있는데  

이번 기회에 총정리해드리겠습니다. 

---

1-1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다. 

그냥 HTML 파일 아무거나 하나 만들고 중간에 <script>태그 열어서

일단 this라는 키워드를 콘솔창에 출력해보도록 합시다. 

 console.log(this)

그러면 this 키워드는 그냥 window {어쩌구} 이런 값이 나옵니다. 

이건 this 의 첫 번째 뜻임.

this 라는 키워드는 우리가 사용하는 상황에 맞춰서,

3-4 가지의 다른 뜻들이 있음. 

함수를 하나 만들고 this 를 출력했을 경우,

이 경우도 비슷하게 나옴. 

 

비슷하게 일반 함수 내에서 this라는 값을 불러보면

function 간지나는함수(){
  console.log(this)
}
간지나는함수();

똑같이 this라는 값은 window 라고 출력됩니다. 

(함수 만들고 실행하는 문법은 다 아시죠? 모른다면 JS 기초 강의를 듣고 오도록 합시다. )

이것이 this의 첫째 뜻입니다. 그냥 window(자바스크립트 기본 함수들 갖고있는 오브젝트)입니다. 

---

Q. window가 뭔가요?

A. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체입니다.

 

라고 구글검색 번역투로 설명하면 솔직히 이해가 안되니 좀 쉽게 비유해보자면 

님들이 쓰는 자바스크립트 함수들 있죠? 

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

이런 함수들을 보관하는 보관소입니다. 보관소는 특별한건 아니고 그냥 큰 {오브젝트}일 뿐입니다.  

 

또한 여러분이 전역변수를 만들었을 때도 이 값을 보관해줍니다. 

<script>
  var x = 300;
</script>

이렇게 변수를 큰 공간에 만드시면 x라는 변수는 window라는 큰 오브젝트안에 자동적으로 생성됩니다. 

함수도 마찬가지고요.

아무튼 그냥 보관소입니다. 끝!

 

*전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수입니다.

그냥 script 태그 내에 쌩으로 var 변수 하나 만들면 그건 자연스레 전역변수가 됩니다. 

비유를 들어 설명

전역변수를 비유로 설명하면, 전역변수는 모든 사람이 볼 수 있는 공용 칠판과 같습니다. 어떤 사람이든 칠판에 무언가를 쓰거나 지울 수 있습니다.

# 전역변수 = 공용 칠판
칠판 = "아무것도 없음"

def 작성하기(내용):
    global 칠판
    칠판 = 내용
    print(f"칠판에 작성: {칠판}")

def 지우기():
    global 칠판
    칠판 = "아무것도 없음"
    print(f"칠판 지움: {칠판}")

작성하기("안녕하세요!")  # 칠판에 작성: 안녕하세요!
지우기()              # 칠판 지움: 아무것도 없음

 

---

1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined 입니다. 

자바스크립트를 쓸 때 최상단에 저런 이상한 키워드를 쓸 수 있음. 

- use strict

- 이 자바스크립트를 실행할 때, 엄격하게 실행시킬 수 있음.

근데 이 모드를 실행하자마자

두 개의 this 가 차이를 보임. 

<script>
  'use strict';

  function 간지나는함수(){
    console.log(this)
  }
  간지나는함수();
  
</script>

IE 10버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면 

strict mode로 자바스크립트를 작성가능합니다. 

 

strict mode에선 var 키워드 없이 변수를 선언하거나, 

변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해줍니다. 

 

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해줍니다. 

외울게 하나 더 생겼군요.  

---

2. object 자료형 내에 함수들이 있을 수 있는데 거기서 this값은 '주인님'을 뜻합니다. 

this 를 오브젝트 자료형 안에서 작성해보기.

오브젝트 먼저 생성. 

 

여러분 object 자료형에 함수같은거 집어넣을 수 있다는거 아셨습니까.

이렇게 집어넣어서 실행까지도 할 수 있다.

오브젝트에서 kim 이라는 데이터를 꺼내고 싶은 경우,

특히 함수를 꺼내고 싶은경우,

똑같이 콤마찍고 이름 써주면 된다. 

+ 함수 인걸 표현해주기 위해서 () 도 써줘야함.

안녕 출력되는 거 확인. 

함수 안에서 this 를 출력해볼 경우,

해당 내용이 뜬다. 

오브젝트 같은 게 뜸.

 

이 this 의 의미.

오브젝트 안에 있는 함수를 메소드 라고 함.

이 메소드가 동작하고 있는 오브젝트를 의미.

저기 드래그 하고 있는 부분 의미.

---

var 오브젝트1 = {
  data : 'Kim',
  간지함수 : function(){ console.log('간지') } 
}

글자나 숫자 집어넣듯이 오브젝트 내에도 저렇게 함수를 집어넣을 수 있습니다. 

그럼 함수를 어떻게 꺼내쓰냐면 

var 오브젝트1 = {
  data : 'Kim',
  간지함수 : function(){ console.log('간지') } 
}

오브젝트1.간지함수();

이렇게 쓰시면 됩니다. 그럼 콘솔창에 '간지'라는 글자가 출력되겠군요.

오브젝트에 들어가는 함수들을 있어보이는 전문용어로 메소드 method라고 칭합니다. 

 

근데 메소드 안에서 this를 쓰면 신기한 값이 나옵니다. 바로 주인님이라는 값인데 

var 오브젝트1 = {
  data : 'Kim',
  간지함수 : function(){ console.log(this) } 
}

오브젝트1.간지함수();

간지라는 단어 대신 this라는 키워드를 출력시키면 어떻게되나요?

콘솔창에 { data : 'Kim', 간지함수 : f } 뭐 이런값이 출력되지않습니까? 

이게 뭐냐면 그냥 여러분이 방금 만든 오브젝트1입니다. 

그래서 메소드안에서 this를 쓰시면 this는 메소드를 가지고 있는(포함하고 있는) 오브젝트를 뜻합니다. 

쉽게 외우고싶다면 this는 '메소드의 주인님'을 지칭합니다. 

그럼 밑의 예제의 this는 무슨 값이 출력될까요? 

오브젝트 안에다가 오브젝트를 넣음. 

그리고 그 안에 함수를 넣음.

var 오브젝트2 = {
  data : {
    간지함수 : function(){ console.log(this) }
  }
}
오브젝트2.data.간지함수();

이런거 그대로 복붙해서 출력해보지말고 미리 생각을 해보시길 바랍니다. 

그러면 머리에 잘 남습니다. 

생각을 해보셨다면 직접 출력해보셔서 머릿속의 답과 비교해보시길 바랍니다. 

 

답이 무엇이냐면 >>

이렇게 뜸. 안에 함수라는 오브젝트. 

별거없고 오브젝트의 메소드안에서 썼을 때 this는 메소드를 담고있는 주인님을 뜻하기 때문에

간지함수()를 담고있는 주인님인 오브젝트2.data 라는게 위의 this랑 동일한 뜻입니다. 

둘다 각각 출력해보시면 됩니다. 

[collapse]

만약 화살표 함수로 바꿨을 경우, 

얘는 this 라는 값을 새로 만들어주지 않음. 

그래서 object 뜨는게 아니라 window 가 뜸. 

오브젝트 안에 함수를 하나 넣고 싶을 때, 

: 칠 필요 없이

그냥 이렇게 써도 됨. 

function 키워드가 생략된것. 

 

---

근데 놀라운 사실은 그냥 this라는 뜻은 2번만 아시면 됩니다. 

1번, 즉 "일반 함수 내에서 썼을 때 this는 window입니다" 라는 정의는 굳이 외울 필요가 없습니다. 

왜냐면 여러분이 2번 뜻을 잘 배우셨다면 1번도 자연스레 유추가 가능하니까요.

여러분이 함수나 변수를 대충 스크립트 태그 안에 만들었을 때,

함수나 변수는 그냥 만들어지는게 아닙니다. 

<script>

  function 간지나는함수(){
    console.log()
  }
  
</script>

방금 만드신 간지나는함수()는 전역변수나 전역함수를 관리하기 위한

window라는 오브젝트에 자동으로 추가가 됩니다. 

 

왜 그렇냐고요? 

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

그래서 코드(1) 코드(2) 둘다 자바스크립트 입장에서 보면 똑같단 이야기입니다.

<script>

  (1)
  function 간지나는함수(){
    console.log(this)
  }

  (2)
  window.간지나는함수 = function(){ console.log() };
  
</script>

(2)문법은 window라는 오브젝트에 함수 자료를 추가하는 문법일 뿐입니다. 어려운거 없습니다.

아무튼 결론은 전역함수 만들거나 전역변수 만드시면

저렇게 window {오브젝트} 안에 담긴다는 소리입니다. 

우리가 일부러 하지 않아도 변수나 함수 쌩으로 만들면

자바스크립트가 자동으로 알아서 window안에 담습니다. 

(변수 강의시간에 window 오브젝트에 대해 잠깐 더 알아볼 예정입니다)

나를 담고 있는 window 가 출력되는 것. 

 

---

그럼 이제 function 문법의 동작원리 하나를 알았으니 다시 한번 this를 여기서 출력해봅시다. 

<script>

  function 간지나는함수(){
    console.log(this)
  }
</script>

여기서 this는 무슨 값이 나올까요? 

this는 아까 2번에 의하면 내 메소드를 포함하고 있는 주인님 오브젝트를 출력시켜준댔죠?

간지나는함수()를 포함하고 있는 주인님 오브젝트가 무엇입니까?

 

그래서 1번 : this를 함수안에서 썼을 땐 window가 나온다~ 라는건 안외우셔도 되고 

2번 : this는 오브젝트 내의 메소드(함수)에서 사용했을 때 메소드의 주인님 오브젝트를 출력해준다~

요것만 외우시면 됩니다. 

 

근데 난관이 있습니다. this의 얼탱이없는 3번 4번 뜻도 있기 때문입니다. 

하지만 뇌용량이 지금 꽉 찼기 때문에 메모리부족 에러가 날 수 있으니 다음시간에 알아보도록 합시다.