메서드와 this
자바스크립트에서 객체는 행동(메서드)을 포함할 수 있으며, 이를 통해 객체는 데이터를 다루는 기능을 가진다. 이 글에서는 메서드와 this 키워드의 동작 방식을 알아본다.
1. 메서드란?
객체의 프로퍼티에 함수를 할당하여 객체에 행동을 부여할 수 있다. 이를 메서드라고 한다.
메서드 생성
let user = {
name: "John",
age: 30
};
user.sayHi = function() {
alert("안녕하세요!");
};
user.sayHi(); // "안녕하세요!"- 객체의 프로퍼티에 함수를 할당하면, 이를 메서드라고 한다.
- 메서드는 객체의 데이터를 다룰 수 있는 동작을 정의한다.
메서드 단축 구문
객체 리터럴에서 메서드를 선언할 때 function 키워드를 생략할 수 있다.
let user = {
sayHi() {
alert("Hello");
}
};
user.sayHi(); // "Hello"- 단축 구문은
sayHi: function()과 동일하게 동작한다.
2. this 키워드
this의 기본 동작
메서드 내부에서 this는 메서드가 호출된 객체 자신을 참조한다.
let user = {
name: "John",
age: 30,
sayHi() {
alert(this.name);
}
};
user.sayHi(); // "John"this는 메서드 호출 시점에 결정되며,점(.)앞의 객체를 참조한다.
this와 외부 변수의 차이
메서드 내부에서 this를 사용하지 않고 외부 변수를 참조하면 문제가 발생할 수 있다.
let user = {
name: "John",
sayHi() {
alert(user.name);
}
};
let admin = user;
user = null;
admin.sayHi(); // 에러: user는 null을 참조함- 위 코드에서
this대신user를 참조하면,user가 변경되었을 때 에러가 발생할 수 있다.
자유로운 this
자바스크립트에서 this는 호출 시점에 동적으로 결정된다. 동일한 함수라도 호출한 객체에 따라 this가 달라진다.
let user = { name: "John" };
let admin = { name: "Admin" };
function sayHi() {
alert(this.name);
}
user.f = sayHi;
admin.f = sayHi;
user.f(); // "John"
admin.f(); // "Admin"this는 함수가 호출된 객체를 참조한다.
this가 없는 경우
객체 없이 호출된 함수에서 this는 undefined를 참조한다(엄격 모드에서).
function sayHi() {
alert(this);
}
sayHi(); // undefined- 엄격 모드가 아닐 경우
this는 전역 객체(window)를 참조한다.
3. 화살표 함수와 this
화살표 함수의 this
화살표 함수는 고유한 this를 가지지 않으며, 외부 함수의 this를 상속받는다.
let user = {
firstName: "보라",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // "보라"- 화살표 함수는
this를 바인딩하지 않고 외부 컨텍스트의this를 사용한다.
4. 객체 지향 프로그래밍(OOP)
객체 지향 프로그래밍은 개체(Entity)를 표현하는 객체를 중심으로 프로그램을 설계하는 방법이다.
- 객체는 데이터를 저장하며, 메서드를 통해 데이터를 조작하거나 행동을 수행한다.
요약
- 메서드는 객체 프로퍼티에 저장된 함수이다.
this는 메서드를 호출한 객체를 참조한다.this는 런타임에 동적으로 결정되며, 호출된 위치에 따라 참조 대상이 달라진다.- 화살표 함수는 고유한
this를 가지지 않고, 외부 함수의this를 상속받는다.
과제
1. 객체 리터럴에서 this 사용하기
아래 코드에서 alert(user.ref.name)의 결과는 무엇일까?
function makeUser() {
return {
name: "John",
ref: this
};
}
let user = makeUser();
alert(user.ref.name); // 결과는?엄격 모드("use strict"): this는 undefined가 된다.
엄격 모드가 아닐 때: this는 전역 객체(window 또는 globalThis)를 참조한다
이겨내