Written by java-style
on 2021-11-24

메서드와 this 실습 과제

2021.11.24 - [Language/JavaScript] - 메서드와 this

객체 리터럴에서 'this' 사용하기

함수 makeUser는 객체를 반환합니다.

이 객체의 ref에 접근하면 어떤 결과가 발생하고, 그 이유는 뭘까요?

function makeUser() { return { name: "John", ref: this }; }; let user = makeUser(); alert( user.ref.name ); // 결과가 어떻게 될까요?

해설

에러가 발생합니다.

직접 실행해 봅시다

function makeUser() { return { name: "John", ref: this }; }; let user = makeUser(); alert( user.ref.name ); // Error: Cannot read property 'name' of undefined

에러가 발생하는 이유는 this 값을 설정할 땐 객체 정의가 사용되지 않기 때문입니다. this 값은 호출 시점에 결정됩니다.

위 코드에서 makeUser() 내 this는 undefined가 됩니다. 메서드로써 호출된 게 아니라 함수로써 호출되었기 때문입니다.

this 값은 전체 함수가 됩니다. 코드 블록과 객체 리터럴은 여기에 영향을 주지 않습니다.

따라서 ref: this는 함수의 현재 this 값을 가져옵니다.

this의 값이 undefined가 되게 함수를 다시 작성하면 다음과 같습니다.

function makeUser(){ return this; // 이번엔 객체 리터럴을 사용하지 않았습니다. } alert( makeUser().name ); // Error: Cannot read property 'name' of undefined

보시다시피 alert( makeUser().name )와 위쪽에서 살펴본 alert( user.ref.name )의 결과가 같은 것을 확인할 수 있습니다.

에러가 발생하지 않게 하려면 코드를 다음과 같이 수정하면 됩니다.

function makeUser() { return { name: "John", ref() { return this; } }; }; let user = makeUser(); alert( user.ref().name ); // John

이렇게 하면 user.ref()가 메서드가 되고 this는 . 앞의 객체가 되기 때문에 에러가 발생하지 않습니다.

계산기 만들기

calculator라는 객체를 만들고 세 메서드를 구현해 봅시다.

read()에선 프롬프트 창을 띄우고 더할 값 두 개를 입력받습니다. 입력받은 값은 객체의 프로퍼티에 저장합니다.

sum()은 저장된 두 값의 합을 반환합니다.

mul()은 저장된 두 값의 곱을 반환합니다.

let calculator = { // ... 여기에 답안 작성 ... }; calculator.read(); alert( calculator.sum() ); alert( calculator.mul() );

풀이

let calculator = { read() { this.a = +prompt('num1', 0); this.b = +prompt('num2', 0); }, sum() { return this.a + this.b; }, mul() { return this.a * this.b; } };

해설

체이닝

올라가기(up)와 내려가기(down) 메서드를 제공하는 객체 ladder가 있습니다.

let ladder = { step: 0, up() { this.step++; }, down() { this.step--; }, showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌 alert( this.step ); } };

메서드를 연이어 호출하고자 한다면 아래와 같이 코드를 작성할 수 있습니다.

ladder.up(); ladder.up(); ladder.down(); ladder.showStep(); // 1

up, down, showStep을 수정해 아래처럼 메서드 호출 체이닝이 가능하도록 해봅시다.

ladder.up().up().down().showStep(); // 1

참고로 이런 방식은 자바스크립트 라이브러리에서 널리 사용됩니다.

해설

메서드를 호출할 때마다 객체 자신을 반환하게 하면 됩니다

체이닝이 길어질 땐 메서드 호출을 별도의 줄에 작성하면 가독성이 좋아집니다.

ladder .up() .up() .down() .up() .down() .showStep(); // 1

from http://heimish-web.tistory.com/87 by ccl(A) rewrite - 2021-11-24 19:27:27

Top