[JAVASCRIPT-모던자바스크립트] 메서드와 this

객체의 경우 사용자 (user), 주문(order)등과 같이 실제 존재하게 되는 개체 (entity)를 표현하고자 할 때 생성

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

• 사용자의 경우 현실에서 장바구니에서 물건을 선택하거나 로그인,로그아웃 하기 등의 행동을 한다. 
• 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있다.
• 자바스크립트에서는 객체에 프로퍼티에 함수를 할당해서 객체에게 행동할 수 있는 능력을 부여한다.

메서드 만들기

객체 user에게 인사할 수 있는 능력을 부여한다.

let user = {
    name : "John",
    age: 30
}

user.sayHi = function() {
	alert('안녕하세요!');
};

user.sayHi(); // 안녕하세요 -> sayHi가 메서드가 된다.

• 함수 표현식으로 함수를 만들게 되면 객체 프로퍼티 user.sayHi에 함수를 할당한다.
• 객체에 할당된 함수를 호출하게 되면 user가 인사를 하게 된다.
• 객체 프로퍼티에 할당된 함수를 method라고 한다.

let user = {
	// ...
};

// 함수 선언
function sayHi() {
	alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

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

객체 지향 프로그래밍
객체를 사용해서 개체를 표현하는 방식을  객체 지향 프로그래밍(object-oriented programming, OOP) 이라 부른다. 
OOP는 그 자체만으로 학문의 분야를 만드는 중요한 주제이며 올바른 개체를 선택하는 방법이나 사이의 상호작용을 나타내는 방법 등에 관련된 의사결정은 객체 지향 설계를 기반으로 이뤄진다고 볼 수 있다.

메서드 단축 구문

객체 리터럴 안에 메서드를 선언할 경우 사용할 수 있는 단축 문법은 아래와 같다.

// 아래 두 객체는 동일하게 동작한다.

user = {
	sayHi: function() {
    	alert('Hello');
    }
}

// 단축 구문을 사용하면 더 깔끔하다.
user = {
	sayHi() { // "sayHi: function()"과 동일하다.
    	alert("Hello");
    }
}

• 위처럼 function을 생략해도 메서드를 정의할 수 있다. 
• 일반적인 방법과 단축구문을 사용하는 방법이 완전하게 동일하지는 않다. 객체 상속과 관련된 차이가 존재한다.

메서드와 this

메서드는 객체에 저장된 정보에 접근을 할 수 있어야 제 역할을 할 수 있다. 대부분의 메서드가 객체 프로퍼티의 값을 활용하게 된다.

user.sayHi()의 내부 코드에서 객체 user에 저장된 이름(name)을 이용해서 인사말을 만드는 경우가 이에 속한다.

• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.
• 점 앞의 this는 객체를 나타내며 정확하게는 메서드를 호출할 때 사용하는 객체를 나타낸다.

let user = {
    name : 'John',
    age : 30,
    
    sayHi() {
        // 'this'는 현재 겍체를 나타낸다.
        alert(this.name);
    }
};

user.sayHi(); // John

user.sayHi()가 실행되는 동안에 this는 user를 나타낸다. this를 사용하지 않고 외부 변수를 참조해 객체에 접근하는 것도 가능하다.

let user = {
    name: 'John',
    age: 30,
    
    sayHi() {
    	alert(user.name); // 'this' 대신에 'user'를 이용함
    }
}

그런데 이렇게 외부 변수를 사용해서 객체를 사용하게 되면 에러가 발생할 수 있다. user를 복사해 다른 변수에 할당 (admin = user)하고 user는 전혀 다른 값으로 덮어썼다고 가정하면 원하지 않은 값 (null)를 참조하게 된다.

let user = {
	name : 'John',
    age : 30,

	sayHi() {
    	alert( user.name ); // Error: null
    }    
};

let admin = user;
user = null; //  user를 null로 덮어씀

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참조하면서 에러가 발생

alert함수가 user.name 대신  this.name을 인수로 받았다면 에러가 발생하지 않았을 것이다.