📅 스터디 정보

1. 🗺️ 개념 지도 (Overview)

이 주제를 한 문장으로 설명하면?

"this는 함수가 어떻게 정의됐는지가 아니라, 어떻게 호출됐는지에 따라 달라지는 동적인 참조값이다."

이 주제가 왜 중요한가?

• this 를 잘못 이해하면 콜백 함수나 이벤트 핸들러에서 undefined 또는 전역 객체를 참조하는 버그가 발생한다.
• React 클래스 컴포넌트, 이벤트 처리, 비동기 콜백에서 this 가 원인인 버그는 매우 흔하다.
• 면접에서 빈출되는 JavaScript 핵심 개념 중 하나다.

[this 바인딩]
├── 바인딩 규칙
│   ├── 전역 바인딩 (기본 바인딩)
│   ├── 암묵적 바인딩 (메서드 호출)
│   ├── 명시적 바인딩 (call / apply / bind)
│   └── new 바인딩
├── 화살표 함수 (Lexical this)
│   └── 상위 스코프의 this를 정적으로 캡처
├── 실행 컨텍스트
│   ├── 호출 시점에 결정
│   └── strict mode 영향
        (기본 바인딩에서만 this가 window vs undefined로 달라진다)
└── 실무 적용
    ├── 이벤트 핸들러
    ├── setTimeout / setInterval
    └── React 클래스 컴포넌트

2. 📖 핵심 개념 정리

⚠️ 단순 복붙 금지! 반드시 자신의 말로 재작성할 것

2-1. this 란 무엇인가?

this 는 “지금 이 함수를 누가 실행하고 있나요?”에 대한 대답이다. 자바스크립트에서 this 는 함수가 작성된 위치가 아닌, 함수가 호출되는 방식에 따라 값이 결정된다.

1. 자바스크립트 엔진이 함수를 호출하는 순간 실행 컨텍스트가 생성된다.
2. 이 실행 컨텍스트 안에서 this 가 결정된다.
3. 아래 4가지 규칙 중 어떤 방식으로 호출됐는지를 보고 this 가 무엇인지 알 수 있다.

function introduce() {
  console.log(this.name);
}

const person = { name: '세비', introduce };

// 같은 함수지만, 호출 방식에 따라 this가 달라진다

핵심 포인트:

• this 는 정의 시점이 아닌 호출 시점에 결정된다(화살표 함수 제외)

2-2. 4가지 바인딩 규칙

this 가 결정되는 데는 4가지 규칙이 있다. 우선순위는 아래 순서 그대로다. new 바인딩 > 명시적 바인딩 > 암묵적 바인딩 > 기본 바인딩

1. 기본 바인딩 (Default Binding): 아무 조건도 해당되지 않을 때의 기본값
2. 암묵적 바인딩 (Implicit Binding): 점(.) 앞의 객체가 this가 된다.
3. 명시적 바인딩 (Explicit Binding): call, apply, bind 로 직접 this 를 지정한다.
4. new 바인딩: new 키워드로 함수를 호출하면 새로 생성된 객체가 this 가 된다.

// ① 기본 바인딩
function greet() {
  console.log(this); // window 또는 undefined('use strict')
}
greet();

// ② 암묵적 바인딩 - 점(.) 앞의 객체가 this
const user = {

핵심 포인트:

• 아무것도 아니면 → 전역(window) 또는 undefined(strict mode)
• obj.method() → obj가 this
• call/apply/bind → 인자로 전달한 객체가 this
• new Func() → 새로 만들어진 인스턴스가 this

2-3. 화살표 함수의 this (Lexical this)

화살표 함수는 자신만의 this를 가지지 않는다. 화살표 함수가 정의된 시점에서 자신을 감싸는 바깥 스코프의 this를 그대로 가져온다. 이것을 Lexical this 라고 부른다.

1. 일반 함수: 호출 방식에 따라 this가 동적으로 바뀐다
2. 화살표 함수: 정의된 스코프의 this를 정적으로 캡처하고 바뀌지 않는다
3. call, apply, bind로도 화살표 함수의 this를 바꿀 수 없다

// ❌ 일반 함수 콜백 - this가 의도치 않게 바뀜
const timer = {
  name: '타이머',
  start() {
    setTimeout(function () {
      console.log(this.name); // undefined (전역 바인딩)

핵심 포인트:

• 화살표 함수는 this를 새로 만들지 않고, 바깥 스코프에서 빌려온다.
• bind/call/apply로 화살표 함수의 this를 바꾸는 것은 불가능하다.
• 객체의 메서드를 화살표 함수로 선언하면 의도치 않은 동작이 발생할 수 있다

3. 🔍 깊이 이해하기

왜 이렇게 설계됐을까? (Design Decision)

이 기술/개념이 왜 이런 방식으로 만들어졌는지 배경을 이해하자

• JavaScript는 함수가 일급 객체(First-Class Object)로, 변수에 담기거나 인자로 전달될 수 있다
• 그래서 동일한 함수를 다양한 객체의 메서드로 재사용할 수 있도록 this를 동적으로 결정하는 방식을 택했다
• 단, 이 유연성이 콜백 함수에서는 혼란을 야기하는 부작용을 낳았고, ES6에서 화살표 함수로 이를 보완했다

다른 개념과의 비교

call vs apply vs bind

일반 함수 vs 화살표 함수의 this

실무에서는 어떻게 쓰이나?

실제 프로젝트에서 마주칠 수 있는 상황

• React 클래스 컴포넌트: 이벤트 핸들러를 생성자에서 bind(this) 해주지 않으면 클릭 시 this가 undefined가 된다
• setTimeout / setInterval: 일반 함수를 콜백으로 사용하면 this가 전역 객체를 가리키므로, 화살표 함수 또는 bind로 처리해야 한다
• DOM 이벤트 핸들러: addEventListener로 등록한 일반 함수 내부의 this는 이벤트가 걸린 DOM 요소를 가리킨다.

4. 🎤 구두 설명 연습

면접관 앞에서 말하듯이 작성. 읽는 용도가 아니라 말하는 연습을 위한 섹션

"~이 뭔가요?" 질문에 대한 답변 스크립트

[도입 - 핵심 정의 먼저]
"this는 함수가 실행되는 시점에 결정되는, 현재 실행 맥락을 가리키는 참조값입니다."

[부연 - 왜/어떻게]
"this가 필요한 이유는 같은 함수를 다양한 객체의 메서드로 재사용할 수 있게 하기 위해서입니다.
 결정 방식은 크게 네 가지로, 일반 호출 시에는 전역 객체, 메서드 호출 시에는 점 앞의 객체,
 call/apply/bind 사용 시에는 명시한 객체, new로 호출하면 생성된 인스턴스가 this가 됩니다."

[마무리 - 실무 연결]
"실제로 저는 프로젝트에서 setTimeout 콜백에 일반 함수를 썼다가 this 유실 버그를 경험했고,
 화살표 함수로 교체해서 해결했습니다. 이후에는 콜백에서는 화살표 함수, 객체 메서드에서는 일반 함수를 쓰는 패턴을 팀 컨벤션으로 정리했습니다."

⏱️ 1분 요약 버전

면접관이 바쁠 때, 딱 1분 안에 설명하는 버전

this는 호출 방식에 따라 값이 달라지는 키워드입니다.
메서드로 호출되면 앞의 객체, call/apply/bind를 쓰면 지정한 객체,
new로 호출하면 새 인스턴스, 단독 호출이면 전역 객체(strict 모드에서는 undefined)입니다.
화살표 함수는 자신만의 this가 없고, 선언된 위치의 this를 그대로 사용합니다.

5. ❓ 예상 면접 질문 & 답변

각 질문에 대해 STAR 구조 혹은 두berlingo 두berlingo 두 문장 요약으로 작성

기본 질문

심화 질문 (꼬리질문 대비)

const obj = {
  name: '세비',
  getName: function () {
    const inner = function () {
      return this.name;
    

🧨 함정/난이도 높은 질문

const user = {
  name: '세비',
  greet: () => 

6. 🛠️ 실습 / 직접 구현해보기

개념을 몸으로 익히기 위한 미니 실습

실습 목표

실습 코드

// 1️⃣ 4가지 바인딩 규칙 확인
function printBrand() {
  console.log('브랜드:', this?.brand || '없음 (전역/undefined)');
}

const kia = { brand: '기아',

실습하면서 깨달은 점

• 메서드 안의 콜백은 별도의 함수 호출이므로 this가 쉽게 유실될 수 있다.
• 화살표 함수는 this를 새로 만들지 않고 외부 스코프의 this를 그대로 사용한다.
• bind는 this를 고정한 새로운 함수를 반환하므로 이벤트 핸들러 등에서 유용하다.

7. 📝 나만의 요약 노트

공부하고 나서 진짜 내 머릿속에 남은 것들만 정리

오늘 이 주제에서 가장 중요한 것 3가지

1. this는 호출 방식에 따라 결정된다 (정의 위치가 아님)
2. 화살표 함수는 this를 가지지 않고, 선언 시점 외부 스코프의 this를 캡처한다
3. call/apply는 즉시 실행, bind는 나중에 쓸 새 함수를 만든다

헷갈렸던 부분 & 해결

8. 📚 참고 자료