21. 메서드와 this

2026년 4월 11일

자바스크립트

1. 메서드(Method): 객체에게 생명 불어넣기

객체는 단순히 데이터를 담는 바구니가 아닙니다. 현실의 사람처럼 '말하기', '걷기' 같은 행동을 할 수 있죠. 객체의 프로퍼티에 할당된 함수를 우리는 메서드라고 부릅니다.

메서드 단축 구문

최근에는 function 키워드를 생략하고 더 간결하게 작성하는 것이 관습입니다.

let user = {
  name: "John",
  sayHi() { // "sayHi: function()"과 동일하지만 훨씬 깔끔하죠?
    alert("안녕하세요!");
  }
};

2. `this`: "내가 누구게?"

메서드가 객체 내부의 정보(예: name)를 사용하려면, 자신이 속한 객체를 가리킬 방법이 필요합니다. 이때 사용하는 키워드가 바로 this입니다.

규칙: obj.method()를 호출하면, 메서드 내부의 this는 점(.) 앞의 객체인 obj를 가리킵니다.

3. 자바스크립트만의 '자유로운' `this`

다른 언어(Java, C++ 등)와 달리 자바스크립트의 this는 **런타임(실행 시점)**에 결정됩니다. 함수가 어디서 정의되었는지는 중요하지 않습니다. 누가 불렀느냐가 핵심입니다.

호출 방식에 따른 변화

호출 방식	this의 값
`user.sayHi()`	`user` 객체
`admin.sayHi()`	`admin` 객체
그냥 `sayHi()`	`undefined` (엄격 모드 기준)

⚠️ 주의: user.name vs this.name

메서드 안에서 외부 변수 이름(user.name)을 직접 쓰면, 나중에 user 변수가 null이 되었을 때 에러가 발생합니다. 항상 this를 사용하는 습관을 들이세요. 그것이 훨씬 안전합니다.

4. 화살표 함수: `this`가 없는 무법자

화살표 함수는 일반 함수와 완전히 다른 길을 걷습니다. 자체적인 this를 가지지 않습니다.

동작: 화살표 함수 내부에서 this를 쓰면, 그 함수를 감싸고 있는 **외부(일반 함수)의 this*를 그대로 가져다 씁니다.
장점: 콜백 함수 내부에서 외부 객체의 this를 유지하고 싶을 때 매우 유용합니다.

기술 면접 대비 (Interview Questions)

Q1. 객체 리터럴에서 `ref: this`라고 작성하면 왜 에러가 날까요? (심화)

답변: this는 함수가 호출될 때 결정되기 때문입니다. 객체 리터럴이 생성되는 시점은 함수 호출이 아니므로, 그 안의 this는 해당 객체를 가리키지 못하고 전역 객체나 undefined를 가리키게 됩니다. 이를 해결하려면 ref를 메서드로 만들어 호출 시점에 this를 바인딩해야 합니다.

Q2. 메서드 체이닝(Chaining)을 구현하려면 어떻게 해야 하나요? (중급)

답변: 각 메서드의 마지막에 **return this;**를 추가하면 됩니다. 메서드가 자기 자신(객체)을 반환하기 때문에, 반환된 객체에 이어서 다른 메서드를 연달아 호출할 수 있게 됩니다.

인사이트

this의 자유로움은 자바스크립트의 강력한 무기이지만, 동시에 수많은 버그의 원인이 되기도 합니다. 특히 비동기 콜백이나 이벤트 리스너에서 this가 사라지는 현상을 자주 겪게 될 텐데, 이때 화살표 함수나 **.bind()**를 적절히 섞어 쓰는 능력이 곧 실력입니다.