매서드와 this

객체 생성 목적 : 사용자(user), 주문(order) 등 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다

 

ex)

let user = {

name: “Kim”,

age: 26

};

 

현실에서 장바구니에서 물건 선택하기, 로그인 & 로그아웃 하기처럼 user를 나타내는 객체 user도 특정한 행동을 할 수 있다

 

JS에선 객체 프로퍼티에 함수를 할당 ➡️ 행동 능력 부여

 

매서드 만들기

 

ex) 객체 user가 인사할 수 있도록 해보자

 

let user = {

name: “Kim”,

age: 26

};

 

user.sayHi = () => { // let 선언을 할 필요가 없는게 이미 앞에서 선언했기떄문

alert(“Hi”);

};

 

user.sayHi(); // Hi

 

예시처럼 객체 프로퍼티에 할당된 함수를 매서드(method)라고 부른다

 

또한 이미 정의된 함수를 이용해서 만들수도 있다

(선언된 함수를 매서드로 등록하기)

 

ex) 

let user = {

name: “Kim”,

age: 26

};

 

let Hello = () => {

console.log(“Hello”);

};

 

user.sayHi = Hello; 

user.sayHi() // Hello

 

객체 지향 프로그래밍(OOP(Object Oriented Programming))

: 객체를 사용하여 개체(entity)를 표현하는 방식

 

객체 지향 설계 기반으로 올바른 개체 선택, 개체 사이 상호작용을 나타내는 방법 등에 관한 의사결정을 한다

 

매서드 단축 구문(객체 리터럴에서 사용)

• function을 생략한 매서드 정의

 

ex) 동일하게 동작하는 두개의 객체(그러나 완전히 동일하진 않다!)

 

user = {

sayHi: function () {

console.log(“Hello”);

}

};

 

// 단축 구문

user = {

sayHi() { // sayHi: function ()과 동일 

console.log(“Hello”);

}

};

 

매서드와 this

• 매서드는 객체에 저장된 정보에 접근할 수 있어야 한다
• 대부분의 매서드는 객체 프로퍼티의 값을 활용한다
• 매서드 내부에서 this 키워드를 사용하면 객체에 접근
• this는 매서드를 호출할 때 사용된 객체를 뜻함

 

ex)

 

let user = {

name: “Kim”,

age: 26,

 

sayHi() {

console.log(this.name); // this = user

}

};

 

user.sayHi(); // Kim

 

또한 this를 사용하지 않고 외부 변수 user를 참조해 접근하는 것도 가능하다

 

ex) 

…

sayHi() {

console.log(user.name);

}

…

 

그러나 에상치 못한 에러가 발생할 수 있다

만약 user를 다른 변수에 할당(admin = user)하고 user가 전혀 다른 값으로 덮어졌다면 sayHi()는 예상하지 못한 값을 참조할 것이다

 

ex)

 

let user = {

  name: “Kim”,

  age: 26,

 

  sayHi() {

    console.log( user.name ); // Error: Cannot read property 'name' of null

  }

 

};

 

 

let admin = user;

user = null; // user를 null로 

 

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

 

자유로운 this

• 모든 함수에 this를 사용할 수 있다
• runtime(실행 환경)에 결정되어 문맥에 따라 달라진다

 

ex)

let sayHi = () => {

console.log(this.name);

} // not error!

 

 

동일한 함수라도 다른 객체에서 호출했다면 this가 참조하는 값은 달라진다

 

ex)

let user = { name: “kim” };

let admin = { name: “shim” };

 

let sayHi = () => {

console.log(this.name);

} 

 

// 다른 두 객체에서 동일한 함수 사용

user.func = sayHi;

admin.func = sayHi;

 

user.func(); // kim 

admin.func() // shim 또는 adim[‘func’]로 작성해도 shim

 

객체 없이 호출하기: this == undefined

• 엄격 모드에서

 

ex)

let sayHi = () => {

console.log(this);

}

 

sayHi(); // undefined

 

그냥 this 라고만 했을 땐 undefined가 뜨지만 만약 this.name 같이 뒤에 매서드를 같이 불렀다면 에러가 난다

 

• 엄격 모드가 아닐 때

 

this는 전역 객체를 참조하므로 브라우저 환경에선 window라는 전역 객체를 참조한다 ➡️ 이러한 차이로 use strict가 도입

 

다른 언어에서 this는 매서드가 정의된 객체를 참조하고 JS에선 런타임에 결정되는 것 - .앞에 객체가 무엇인가에 따라 자유롭게 결정 - 차이이다

 

객체 안에 매서드를 하나만 만들어 여러 객체에서 재사용의 장점이 있지만 실수가 발생할 수 있다 그렇지만 개발자는 this의 동작 방식을 충분히 이해하고 장점을 취하면서 실수를 피하는데만 집중하면 된다

 

this가 없는 arrow function

• 일반 함수와 달리 고유한 this를 가지지 않는다
• this를 참조하게 된다면 다른 외부 함수에서 this 값을 가져온다
• 외부 상황에 있는 this를 이용하고 싶은 경우 arrow function 사용

 

ex)

let user = {

firstName : “bora”,

sayHi() {

let arrow = () => console.log(this.fisrtName);

arrow();

}

};

 

user.sayHi(); // bora

 

• use strict ?

• 객체 지향 프로그래밍에 대해 더 알아보도록 하자

• this가 없는 arrow function은 결국 arrow의 this = user 인건가?

 

• 외부에서 this 값을 가져온다는 말을 완벽히 이해할 것

• 체이닝 과제에서 각 매서드에 return문을 써주지 않으면 호출 체이닝이 불가한가?

• 계산서 과제에서 매서드의 순서는 상관없나? this가 정확하게 어떻게 동작하는지 다시 알아보자…