객체 리터럴과 this

• 들어가기 전에 자바스크립트 객체를 활용하면 비슷한 행위를 하는 코드를 묶어서 모듈화를 간단히 만들 수 있습니다. key-value 구조의 자바스크립트 객체를 통해 어떻게 모듈화를 할 수 있는지 알아볼 겁니다.

---

학습 목표

1. 객체 리터럴을 어떻게 사용하는지 이해하고, this키워드를 통해 객체 내부 메서드 접근방법을 이해합니다.

핵심 개념

• 객체 리터럴(Object literal) 패턴
• this keyword

학습하기

자바스크립트 객체의 활용

자바스크립트에서는 객체 리터럴이라는 표현식을 이용해 객체를 쉽게 만들 수 있습니다. 한 가지 비슷한 예제를 하나 살펴보겠습니다. `var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } }

healthObj.showHealth();` 이와 같은 식으로 비슷한 기능을 묶어서 객체리터럴로 코드를 만들고, 각 메서드를 실행해보세요.

this

객체 안에서의 this는 그 객체 자신을 가리킵니다. 참고로, ES6에서는 객체에서 메서드를 사용할 때 'function'키워드르 생략할 수 있습니다. const obj = { getName() { return this.name; }, setName(name) { this.name = name; } } obj.setName("crong"); const result = obj.getName();

this 좀 더 알아보기

JavaScript에는 전역스크립트나 함수가 실행될 때 실행문맥(Execution context)이 생성됩니다.(참고로 실제 실행은 브라우저내에 stack이라는 메모리 공간에 올라가서 실행됩니다.) 모든 context에는 참조하고 있는 객체(thisBinding이라 함)가 존재하는데, 현재 context가 참조하고 있는 객체를 알 수 있습니다. `function get() { return this; }

get(); //window. 함수가 실행될때의 컨텍스트는 window를 참조한다. new get(); //object. new키워드를 쓰면 새로운 object context가 생성된다.`

생각해보기

1. Tab UI와 같은 UI요소 하나를 객체리터럴로 묶을 수 있습니다.
2. 본인이 이전에 구현했던 코드를 보면서 어떻게 객체리터럴 형태로 변경할 수 있을지 고민해보세요.
3. object literal pattern 키워드를 통해서 좀 더 다양한 예제를 찾아보세요.