여는 글

안녕하세요. Jimoou 김지운입니다. 굉장히 오랜만에 포스팅이네요. 거의 두달만…?

예전에 쿠버네티스(Kubernetes)에 대해 공부하며 블로그를 통해 그 지식들을 공유하고 있었는데, 쿠버네티스와 관련 없는 영상 솔루션 분야의 회사에 새롭게 입사하면서 바쁜 시간을 보냈습니다. 이제 다시 블로그 포스팅을 시작할 때가 된 것 같아요. 퇴근 후에는 주로 네트워크 관련 지식과 Vue.js, Node.js를 학습하는 데 시간을 할애했습니다. 앞으로 블로그에서는 다시 학습을 시작할 쿠버네티스, 그리고 JavaScript 및 네트워크에 대한 정보를 공유할 계획입니다.

JavaScript를 공부하기 시작한 이유는 이 언어가 유연하고 다재다능하다고 느낀 것도 있고, 제가 엔지니어링 분야에서 일하면서 프로그래밍 언어에 대한 이해도가 부족하다는 점이 아쉬웠어요. 회사에서 엔지니어링뿐만 아니라 웹 개발 업무도 겸하고 있기 때문에, JavaScript에 대해 더 깊이 있게 공부해보려고 합니다.

Javascript의 this가 뭔데, 어떻게 하는건데..

Vue.js 강의를 듣고 있는데, 3년전 강의입니다. 그렇다 보니 강사의 코드를 그대로 따라치면 동작이 되지 않는 경우가 많은데요. 이런 경우엔 현재 Vue.js 버전에 맞추어 코드를 수정해야 합니다. 저는 GPT의 힘을 빌려 강의 속 오래된 코드를 최신 버전에 맞게 업데이트하기도 하는데요. 변경된 코드에서 this의 쓰임이 어떻게 바뀌었는지 인지하고 있어야만 합니다. 그냥 문법이겠거니 하고 지나치면.. Javascript 안하겠단 얘기가 되겠죠..

Javascript에서 this 이해하기

MDN에서 this에 대해 잘 설명하고 있지만, 저처럼 처음 접하는 분들에게는 다소 복잡하게 느껴질 수 있습니다. 그래서 이번 포스팅을 통해 this의 기본 개념을 쉽게 설명하고자 합니다. 만약 여기서 잘못된 내용을 발견하시면 댓글로 알려주시면 감사하겠습니다.

사전 개념 이해하기

컨텍스트(Context)는 코드가 실행되는 환경 또는 상황을 말합니다. this의 값은 그것이 사용되는 컨텍스트에 따라 달라집니다.

스코프(Scope)는 변수와 함수가 접근 가능한 범위를 의미합니다. 자바스크립트(Javascript)에서는 두 가지 주요한 스코프 타입이 있습니다. 전역 스코프(Global Scope)와 지역 스코프(Local Scope)가 있는데, 전역 스코프에 선언된 변수나 함수는 어디서든 접근할 수 있습니다. 반면, 지역스코프에 선언된 변수는 해당 스코프 내에서만 접근할 수 있습니다.

객체(Object)는 자바스크립트의 데이터 구조 중 하나입니다. 자바스크립트에서의 객체는 키(Key)와 값(Value)쌍으로 구성된 프로퍼티의 집합입니다. 이는 다음에 더 자세히 설명하겠습니다.

객체 메소드(Object Method) 내에서의 this

객체 내부에서 정의된 메소드에서 this는 해당 객체 자신을 참조합니다.

let person = {
  name: 'Jimoou',
  greet: function () {
    // 여기서 this는 person 객체를 가리킵니다.
    console.log('Hello, my name is ' + this.name);
  },
};
person.greet();
// Hello, my name is Jimoou

여기서 this는 ‘나’입니다. 다시 말해, 객체 내부에서 this는 그 객체 자신을 가리킵니다.

전역 컨텍스트(Global Context)에서의 this

전역 컨텍스트(Global Context)에서 this는 전역 객체를 가리킵니다.

function showContext() {
  // 전역 컨텍스트에서 this는 전역 객체(window 또는 global)를 가리킵니다.
  console.log(this);
}
showContext();
// 전역 객체를 출력

여기서 this는 ‘현재 있는 방’입니다. 전역 컨텍스트에서 this는 전역 환경(브라우저에서는 전체 웹페이지(window), Node.js에서는 ‘global’을 참조)을 의미합니다.

생성자 함수(Constructor Function)에서의 this

function Person(name) {
  // 여기서 this는 새로 생성되는 객체를 가리킵니다.
  this.name = name;
}
let jiwoon = new Person('Jimoou');
console.log(jiwoon.name);
// 'Jimoou';

여기서 new Person('Jimoou')를 호출하면 this는 새로 생성된 Person객체(‘Jimoou’)를 가리키게 됩니다.

이벤트 핸들러에서의 this

<button id="my button">Click me</button>

document.getElementById('myButton').onclick = function () {
  // 이벤트 핸들러에서 this는 이벤트를 받는 요소를 가리킵니다.
  console.log(this.id);
  // "myButton"
};

이 경우, this는 이벤트를 받는 HTML 요소를 가리킵니다.

화살표 함수에서의 this

let person = {
  name: 'Jimoou',
  greet: () => {
    // 화살표 함수에서 this는 상위 스코프의 this를 상속받습니다.
    // 여기서는 전역 객체를 가리킵니다.
    console.log('Hello, my name is ' + this.name);
  },
};
person.greet();
// "Hello, my name is " (name이 정의되지 않았으므로 undefined)

화살표 함수에서 this는 상위 스코프의 this를 상속받기 때문에, 여기서는 전역 객체의 name을 참조하려고 시도합니다. 하지만, 전역 스코프에 name이 정의되지 않았으므로 undefined가 됩니다.

글을 마치며

이렇게 this는 사용되는 방법과 위치에 따라 그 값이 달라진다는 것을 알아보았는데요.

다음에 또 this에 이어지는 지식으로 알아야 할 내용에 대해 작성 해보도록 하겠습니다.