C
JavaScript 목록
이전10 / 21다음
JavaScript/함수/Lesson 10

this — *JavaScript 의 미스터리*

30분·theory
이 챕터
4/4

this — *JavaScript 의 미스터리*

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ 일반 함수의 this 가 호출 컨텍스트에 따라 변하는 규칙
  • ▸✅ arrow function 의 this 바인딩 차이
  • ▸✅ call · apply · bind 사용 시점

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

this 가 *4가지 방식* 으로 결정

핵심 한 줄

JS 의 this 는 함수가 어떻게 호출되는가 에 따라 4가지 로 결정됩니다. 다른 언어와 가장 다른 부분. 한 번 외워두면 평생.

1. 기본 호출 — 전역 또는 undefined

javascript
function fn() {
    console.log(this);
}
fn();   // 브라우저: window / Node: global / strict mode: undefined

일반 함수 호출은 호출 컨텍스트 없음 → 전역 객체 또는 undefined.

2. 메서드 호출 — 점 앞의 객체

javascript
const user = {
    name: "홍길동",
    greet() {
        console.log(this.name);   // this = user (점 앞)
    }
};

user.greet();   // "홍길동"   ← user.greet() → this = user

// ⚠️ 핵심: *호출 시점* 의 점 앞이 this — 같은 함수도 호출 방식에 따라 다름!
const fn = user.greet;   // 함수만 떼서 변수에 담음 (user 와 분리됨)
fn();   // undefined   ← 점 없이 호출 → this = 전역(또는 undefined)
//                       → this.name = 전역에 name 없음 → undefined

같은 함수도 어떻게 호출하느냐 에 따라 this 가 다릅니다.

3. new 호출 — 새 인스턴스

javascript
function User(name) {
    // 🆕 new 와 함께 호출되면, 새 빈 객체 { } 가 this 가 됨
    this.name = name;        // 새 객체에 name 프로퍼티 설정
    // 자동으로 return this; (생략된 것)
}

const u = new User("홍");   // ▶️ 새 인스턴스 생성
console.log(u);              // User { name: "홍" }
console.log(u.name);         // "홍"

new 키워드와 함께 호출하면 새 객체 가 생성되고 그 객체가 this.

4. 명시적 바인딩 — call·apply·bind

javascript
function greet() {
    console.log(this.name);
}

const user = { name: "홍" };

// 1️⃣ call — this 지정 + 즉시 호출 (인자 그대로 나열)
greet.call(user);          // "홍"

// 2️⃣ apply — call 과 동일하지만, 인자를 배열로 전달
greet.apply(user);         // "홍"

// 3️⃣ bind — this 를 "고정" 한 새 함수를 만들어서 돌려줌 (즉시 실행 X)
const bound = greet.bind(user);
bound();                   // "홍"   ← 나중에 어디서 호출해도 this = user 로 고정

// 💡 한 줄 차이:
//   call/apply  → 즉시 실행
//   bind        → 새 함수 리턴 (나중에 실행)

화살표 함수 — this 가 없다

javascript
const obj = {
    name: "홍",

    // 일반 함수 — this = obj (점 앞 객체)
    method1() {
        return this.name;          // "홍"
    },

    // 화살표 함수 — this = 주변 스코프 (여기선 전역)
    method2: () => this.name,      // undefined
};

console.log(obj.method1());   // "홍"        ← 일반 함수: this = obj
console.log(obj.method2());   // undefined    ← 화살표: this 가 obj 아님!

화살표는 자체 this 없음 — 외곽 스코프의 this 사용. 가장 흔한 사용:

javascript
class Counter {
    constructor() { this.count = 0; }

    start() {
        setTimeout(() => {
            this.count++;       // ✅ Counter 의 this 그대로
        }, 1000);

        // 만약 일반 함수였다면:
        // setTimeout(function() { this.count++ }, 1000);
        // this = window → 안 됨
    }
}

React 에서

jsx
// 화살표 함수 — this 걱정 없음
<button onClick={() => this.handleClick()}>...</button>

// 또는 더 모던:
<button onClick={this.handleClick}>...</button>   // 클래스 메서드 직접

함수형 컴포넌트 (현대 표준) 에선 this 자체를 안 씀. Hook 이 대신.

결정 순서 (외울 필요 X, 참고)

1. new ? → 새 객체
2. call·apply·bind 명시? → 그 객체
3. obj.method() 점 앞? → 그 객체
4. 그 외 → 전역 / undefined (strict)

한 번 정리

  • ▸this 는 호출 방식 에 의해 결정
  • ▸메서드 호출 → 점 앞 객체
  • ▸new 호출 → 새 인스턴스
  • ▸bind·call·apply 로 명시 가능
  • ▸화살표 함수는 자체 this 없음 — 가장 안전한 선택

⚡ 직접 해보기 — this 4가지 호출 방식

같은 함수가 호출 방식에 따라 this 가 어떻게 달라지는지 한 번에 확인.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • ▸"이 콜백의 this 바인딩 문제를 arrow function 또는 bind 로 고쳐줘"
  • ▸"이 클래스 메서드를 명시적 .bind(this) 로 안정화해줘"
  • ▸"이 코드의 strict mode 켰을 때 this 동작 차이 알려줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: 스코프와 클로저
다음 추천: 객체(Object) 기초 — 생성 · 접근 · 구조분해 · 스프레드
이전목록다음
this 바인딩 — 암묵적/명시적/화살표함수, call/apply/bind - JavaScript