[JavaScript] The this Keyword

안녕하세요. 동기 여러분! 오늘 알아볼 내용은 this라는 키워드입니다. 요즘 너무 코드를 길게 적어서 제가 불편했는데 오늘은 아주 짧고 간결하게 끝내 보도록 하겠습니다. 갑시다!

 

The this Keyword

객체(Object)는 데이터(data)들과 기능(functionality)의 모음집입니다. 이제 프로퍼티(Property)와 메서드(Method)를 객체(Object) 안에서 선언하는 방법들을 배웠기 때문에 이제 아래와 같은 코드를 적을 수 있습니다.

// JavaScript

const newMacBookPro16 = {
    chip : 'Apple M1 Pro chip',
    cpu : '10-core CPU with 8 performance cores and 2 efficiency cores',
    gpu : '16-core GPU',
    mention() {
    	console.log('이번에 새로 나온 맥북 프로 16인치는 Apple M1 Pro chip에 10-core CPU with 8 performance cores and 2 efficiency cores라는 CPU와 16-core GPU가 탑재 되었습니다.'); 
    }
};

newMacBookPro16.mention();

// 출력 : 이번에 새로 나온 맥북 프로 16인치는 Apple M1 Pro chip에 10-core CPU with 8 performance cores and 2 efficiency cores라는 CPU와 16-core GPU가 탑재 되었습니다.

 

위 코드의 문제는 메서드(Method) mention안에 프로퍼티들을 문자 그대로 출력문을 적었기 때문에 쓸데 없이 긴 코드가 되었습니다. 이를 고치기 위해서는 아래의 코드처럼 바꿔줘야 합니다.

// JavaScript

const newMacBookPro16 = {
    chip : 'Apple M1 Pro chip',
    cpu : '10-core CPU with 8 performance cores and 2 efficiency cores',
    gpu : '16-core GPU',
    mention() {
    	console.log(`이번에 새로 나온 맥북 프로 16인치는 ${chip}에 ${cpu}라는 CPU와 ${gpu}가 탑재 되었습니다.`); 
    }
};

newMacBookPro16.mention();

// 출력 : ReferenceError: chip is not defined at Object.mention

 

이렇게 출력을 하면 에러가 생깁니다. chip이 정의가 되어 있지 않다고 뜹니다. 왜냐하면 newMacBookPro16.mention()이라는 메서드 안에 범위(Scope)에서는 객체(Object) 안에 다른 프로퍼티(Property)에 자동으로 접근을 할 수가 없습니다. 프로퍼티(Property) 각각이 지역범위(Local Scope)가 되는 것입니다.

 

아래의 코드에서는 this라는 키워드를 이용해 위 코드의 문제를 바로 잡아 보겠습니다.

// JavaScript

const newMacBookPro16 = {
    chip : 'Apple M1 Pro chip',
    cpu : '10-core CPU with 8 performance cores and 2 efficiency cores',
    gpu : '16-core GPU',
    mention() {
    	console.log(`이번에 새로 나온 맥북 프로 16인치는 ${this.chip}에 ${this.cpu}라는 CPU와 ${this.gpu}가 탑재 되었습니다.`); 
    }
};

newMacBookPro16.mention();

// 출력 : 이번에 새로 나온 맥북 프로 16인치는 Apple M1 Pro chip에 10-core CPU with 8 performance cores and 2 efficiency cores라는 CPU와 16-core GPU가 탑재 되었습니다.

 

this 키워드는 객체 내에 있는 프로퍼티를 참조하여 불러오는 역할을 수행합니다. 점 표기법(Dot notation)을 사용하여 위 코드와 같이 적어주시면 됩니다.

 

---

오늘의 느낌

맥북 프로가 새로 나왔네요. 겜돌이 시절에는 맥북 뭐하러 쓰는가? 돈 아깝다고 생각했지만 게임 빼고는 애플이 좋은 점이 엄청 많더라고요... 맥북 들고 카페 앉아서 코딩하면 너무 멋질 듯 ㅎㅎㅎ