객체 : 메서드와 this

모던 JavaScript 튜토리얼 내용 일부를 정리 요약한 내용입니다. 더 자세한 설명은 원문 링크를 참고하시고, 하단 과제를 꼭 풀어보세요.

객체는 사용자와 같은 실제 존재하는 개체(entity)를 표현할 때 생성합니다. 사용자는 현실에서 로그인, 물건 선택하기 등의 행동을 하는데, 이 객체 안에 특정 행동 역시 함수로 할당해 담을 수 있습니다. 객체 user 에게 인사하는 능력을 아래 처럼 담을 수 있습니다.

let user = {
    name: "mike",
    age: 30
};

user.sayHi = function() { // 함수를 만들고 객체 프로퍼티에 할당
    alert("안녕하세요")
}

user.sayHi(); // 안녕하세요.

이렇게 객체 프로퍼티에 할당된 함수를 메서드라고 합니다. 메서드는 이미 정의된 함수를 사용해서 등록할 수도 있습니다.

let user = {
    ...
}

function sayHi() { // 함수를 정의하고
    alert("안녕하세요")
};

user.sayHello = sayHi; // 정의한 함수를 할당

user.sayHello() // 안녕하세요

이렇게 객체를 사용해 개체를 표현하는 방식을 객체 지향 프로그램(object-oriented programming, OOP)라고 부릅니다.

객체 리터럴 안에서 메서드를 선언할 때는 아래처럼 function을 생략해 단축할 수 있습니다.

user = {
    sayHi: function() {
        alert("Hello")
    }
}

// 단축하면 아래처럼

user = {
    sayHi() {
        alert("Hello")
    }
}

대부분의 메서드는 객체 프로퍼티 값을 활용하비다. 객체에 저장된 정보에 접근할 수 있어야 합니다. 아래 코드의 user.sayHi() 는 객체 user 에 저장된 name 을 활용할 수 있습니다. 이때 메서드 내부에서는 this 키워드를 사용해 객체에 접근합니다.

let user = {
    name: 'mike',
    age: 30,
    sayHi() {
        alert(this.name);
    }
}

user.sayHi(); // mike

this 는 함수가 실행될 때, 런타임에 결정됩니다. 동일한 함수라도 다른 객체에서 호출한다면 this 가 참조하는 값이 달라집니다. 메서드가 어디서 정의되었는지와 상관없이 this는 점 앞의 객체가 무엇인가에 따라 자유롭게 결정됩니다.

let user = { name: 'mike' }
let admin = { name: 'lucy' }

function sayHi() {
    alert(this.name);
}

user.f = sayHi;
admin.f = sayHi;

user.f(); // mike
user.f(); // lucy