JavaScript: 자바스크립트 최대의 난제? 'this' 키워드 기초 완벽 가이드 🧭

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊

36일차 포스팅에서는 파일들을 기능별로 쪼개고 조립하는 모듈(Import / Export) 시스템에 대해 배웠습니다. 이제 여러분의 코드는 훨씬 더 체계적이고 전문적인 형태를 갖추게 되었습니다.

오늘은 자바스크립트를 공부하는 수많은 초보자를 좌절하게 만드는 악명 높은 키워드, 바로 this에 대해 알아보려고 합니다. 하지만 겁먹을 필요 없습니다! 아주 쉬운 비유와 핵심 규칙 몇 가지만 기억하면 this도 결코 정복 불가능한 산이 아닙니다.

1. 도입

코딩을 하다 보면 객체 안에서 자기 자신의 정보를 불러와야 할 때가 있습니다. 이때 사용하는 것이 바로 this입니다. 단어 뜻 그대로 "이것", 즉 자기 자신을 가리키는 말이죠.

그런데 왜 this가 어렵다고 소문이 났을까요? 자바스크립트에서 this는 다른 언어들과 달리 코드가 작성된 위치가 아니라, 코드가 어떻게 호출되었느냐에 따라 카멜레온처럼 변하기 때문입니다. 오늘 이 카멜레온의 색깔이 바뀌는 규칙을 확실히 잡아보겠습니다.

2. 개념 설명: '나'는 누구인가?

this를 이해하는 가장 좋은 방법은 일상생활의 나(I)라는 단어와 비교하는 것입니다.

철수가 "나는 배가 고파"라고 하면 '나'는 철수입니다. 영희가 "나는 피곤해"라고 하면 '나'는 영희입니다.

'나(this)'라는 단어 자체는 변하지 않지만, 그 말을 누가 했느냐(누가 호출했느냐)에 따라 가리키는 대상이 달라집니다. 자바스크립트의 this도 똑같습니다.

A. 일반 함수에서의 this 그냥 함수를 불렀을 때 this는 기본적으로 브라우저 전체를 담당하는 거대한 창문인 window 객체를 가리킵니다. (허공에 대고 "나!"라고 외치면, 우주 전체가 응답하는 것과 비슷합니다.)

B. 객체의 메서드(함수)에서의 this 객체 안에서 만들어진 함수를 부를 때, this는 그 함수를 부른 주인(객체)을 가리킵니다.

C. 화살표 함수(Arrow Function)에서의 this 화살표 함수는 자신만의 this를 가지지 않습니다. 대신 자기 바깥에 있는 this를 그대로 끌어다 씁니다.

3. 예시 코드: 호출되는 방식에 따라 변하는 this

코드를 통해 this가 어떻게 달라지는지 직접 눈으로 확인해 보겠습니다.

JavaScript

 

// 1. 일반 함수에서의 this
function showThis() {
    console.log("일반 함수 안의 this:", this);
}
showThis(); // 출력: window 객체 (브라우저 전체 창)


// 2. 객체의 메서드에서의 this
const myUser = {
    name: "김민준",
    age: 28,
    sayHello: function() {
        // 여기서 this는 함수를 부른 주인인 myUser 객체 자체입니다.
        console.log(`안녕하세요! 제 이름은 ${this.name}입니다.`);
    }
};

myUser.sayHello(); // 출력: 안녕하세요! 제 이름은 김민준입니다.


// 3. 가장 많이 겪는 문제 상황과 해결책 (화살표 함수)
const timerObj = {
    title: "타이머",
    
    // 일반 함수 방식: 타이머 내부의 함수는 주인을 잃어버립니다.
    startBadTimer: function() {
        setTimeout(function() {
            // 여기서 this는 window를 가리키게 되어 this.title은 undefined가 됩니다.
            console.log("나쁜 타이머:", this.title); 
        }, 1000);
    },

    // 화살표 함수 방식: 바깥의 this(timerObj)를 그대로 유지합니다.
    startGoodTimer: function() {
        setTimeout(() => {
            console.log("좋은 타이머:", this.title); 
        }, 1000);
    }
};

timerObj.startBadTimer();  // 1초 뒤 출력: 나쁜 타이머: undefined
timerObj.startGoodTimer(); // 1초 뒤 출력: 좋은 타이머: 타이머

4. 코드 설명: 화살표 함수의 진짜 존재 이유

myUser.sayHello(): 함수 이름 앞에 있는 점(.) 왼쪽의 객체가 바로 this가 됩니다. myUser가 불렀으니 this는 myUser입니다. 따라서 this.name은 "김민준"이 됩니다.

타이머의 함정 (setTimeout): startBadTimer 안의 setTimeout에 쓰인 일반 콜백 함수는 누가 직접 부른 것이 아니라 브라우저가 나중에 알아서 실행하는 함수입니다. 주인이 없으므로 this는 허공(window)을 가리키게 되고, window.title은 없기 때문에 undefined가 나옵니다.

화살표 함수 (() => {}): startGoodTimer 안의 화살표 함수는 아주 영리합니다. 자기는 this를 가지지 않기 때문에, 자기를 감싸고 있는 바깥쪽 함수(startGoodTimer)의 this를 그대로 빌려옵니다. 바깥 함수의 this는 timerObj이므로, 정상적으로 "타이머"라는 값을 출력할 수 있습니다. 이것이 콜백 함수에서 화살표 함수를 즐겨 쓰는 가장 큰 이유입니다.

5. 마무리

오늘은 37일차 포스팅으로 자바스크립트의 난제 중 하나인 this에 대해 알아보았습니다. "누가 불렀느냐에 따라 정해진다", "화살표 함수는 바깥의 this를 쓴다" 이 두 가지만 기억하셔도 초보자 수준에서 겪는 대부분의 문제는 해결하실 수 있습니다.

지금까지 37일에 걸쳐 자바스크립트의 기초부터 심화 문법까지 먼 길을 달려왔습니다. 이제 문법 공부는 끝났습니다!

내일 38일차 포스팅부터는 지금까지 배운 모든 지식을 총동원하여, 인터넷 브라우저를 켤 때마다 나오는 나만의 대시보드(크롬 모멘텀 클론 코딩) 만들기 종합 실습을 시작해 보겠습니다. 시계도 넣고, 날씨도 넣고, 할 일 목록도 넣는 멋진 프로젝트가 될 것입니다.

오늘도 포기하지 않고 여기까지 오신 여러분, 정말 대단하십니다! 다음 시간에 만나요! 👋