[JavaScript Core] this 키워드에 대해 알아보자

오늘은 this 키워드에 대해서 알아보도록 하겠습니다.

자바스크립트만의 특징 중 하나를 꼽으라고 하면 this 키워드가 빠질 수 없는데, 그만큼 자바스크립트 내에서 자주 쓰이고 유명한 만큼 이번 글에서 제대로 알아보도록 합시다.

1. 메소드 속 this

 

 let obj = {
     msg : "hello",
     say() {
         console.log(this.msg);
     }
 }
 
 obj.say(); // hello
 

위의 코드에서 say 메소드 속 this 는 obj 객체를 가르킵니다. 따라서, obj.msg 프로퍼티에 접근할 수 있었죠.

즉, 특정 객체 속 메소드 내부에서 쓰이는 this 는 자신을 품고있는 객체를 가르킵니다.

 

let user = { name : "John" };
let admin = { name : "Admin" };

function sayHi() {
    alert(this.name);
}

user.f = sayHi;
admin.f = sayHi;

user.f(); // John
admin.f(); // Admin

또한, this 는 특별한 성질이 있는데, 바로 런타임 시에 결정된다는 것입니다.

위의 코드를 보면, sayHi 함수 내부에서 this 키워드를 미리 쓰고 나중에 user 와 admin 객체에 넣어주는것을 볼 수 있죠?

따라서, 선언과 동시에 결정되는것이 아닌 동적으로 런타임시에 결정되기 때문에 위와 같은 결과가 나올 수 있습니다.

 

2. 전역함수 속 this

위에서는 메소드 속 this 에 대해 알아보았는데, 이번에는 어느 객체에 종속된 메소드가 아닌 전역 스코브에 있는 함수 속 this 에 대해 알아보겠습니다.

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

call(); // window object

 

원래 엄격하게 따지면 틀린 사용법이므로 use strict 키워드를 사용하면 undefined 를 결과로 가지지만, 그냥 실행시에는 window object 를 내뱉습니다.

자바스크립트의 전역에서 선언되는 모든 변수와 함수 등은 window 객체 속 프로퍼티이기 때문이죠.

객체 지향 프로그래밍(OOP) 개념으로 생각하시면 됩니다. 자바스크립트도 기본적으로 OOP를 지향하기 때문이죠.



이렇게 this 키워드에 대해 알아보았는데, 사실 앞으로 나올 문법에 더해져 this 에 관해 다룰 내용들이 조금 더 있지만, 앞으로의 글들을 통해서 차차 알아보기로 합시다.

다음에 올라올 글들도 많은 관심 부탁드립니다!