객체 리터럴, 메서드, getter/setter, 프로토타입, class 문법을 익힌다.
객체와 프로토타입
객체는 관련된 데이터와 동작을 하나로 묶는 그릇입니다. 이번 레슨에서는 객체를 만들고 다루는 법부터 프로토타입 기반 상속과 class 문법까지 배웁니다.
학습 목표
- 객체 리터럴과 단축 속성으로 객체를 만들 수 있다
- 메서드와 getter/setter 를 정의할 수 있다
- 프로토타입과 상속의 원리를 이해한다
class문법으로 객체를 설계할 수 있다- 구조 분해로 객체에서 값을 꺼낼 수 있다
객체 리터럴과 단축 속성
const name = '민수';
const age = 20;
// 단축 속성: 변수명과 키가 같으면 생략
const user = { name, age };
console.log(user); // → { name: '민수', age: 20 }
// 속성 접근
console.log(user.name); // → 민수
console.log(user['age']); // → 20
메서드
객체 안에 함수를 넣으면 메서드가 됩니다.
const calculator = {
value: 0,
add(n) {
this.value += n;
return this; // 체이닝을 위해 자신 반환
},
};
calculator.add(5).add(3);
console.log(calculator.value); // → 8
getter / setter
속성처럼 보이지만 접근할 때 함수가 실행됩니다.
const person = {
firstName: '길동',
lastName: '홍',
get fullName() {
return `${this.lastName}${this.firstName}`;
},
set fullName(value) {
[this.lastName, this.firstName] = value.split(' ');
},
};
console.log(person.fullName); // → 홍길동
person.fullName = '김 철수';
console.log(person.firstName); // → 철수
프로토타입과 상속
모든 객체는 프로토타입이라는 부모 객체를 가지며, 자신에게 없는 속성을 부모에서 찾습니다.
const animal = {
breathe() {
return '숨쉬기';
},
};
const dog = Object.create(animal); // animal 을 프로토타입으로
dog.bark = () => '멍멍';
console.log(dog.bark()); // → 멍멍 (자신의 메서드)
console.log(dog.breathe()); // → 숨쉬기 (프로토타입에서 찾음)
💡 TIP — JavaScript 의 상속은 클래스 복사가 아니라 프로토타입 체인 연결입니다.
class도 내부적으로는 이 방식으로 동작합니다.
class 문법
ES2015 부터는 더 읽기 좋은 class 문법을 제공합니다.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name}이(가) 소리를 냅니다`;
}
}
class Dog extends Animal {
speak() {
return `${this.name}: 멍멍`; // 메서드 오버라이드
}
}
const d = new Dog('바둑이');
console.log(d.speak()); // → 바둑이: 멍멍
console.log(d instanceof Animal); // → true
| 키워드 | 역할 |
|---|---|
constructor | 인스턴스 생성 시 초기화 |
extends | 다른 클래스 상속 |
super | 부모의 생성자/메서드 호출 |
static | 인스턴스가 아닌 클래스 자체의 멤버 |
class Circle {
constructor(r) {
this.r = r;
}
static fromDiameter(d) {
return new Circle(d / 2); // 정적 팩토리 메서드
}
}
const c = Circle.fromDiameter(10);
console.log(c.r); // → 5
구조 분해 기초
객체에서 필요한 값만 변수로 꺼낼 수 있습니다.
const config = { host: 'localhost', port: 8080, secure: false };
const { host, port } = config;
console.log(host, port); // → localhost 8080
// 기본값과 이름 바꾸기
const { secure = true, port: p } = config;
console.log(secure, p); // → false 8080
⚠️ 주의 — 구조 분해는 6번 레슨(ES2015+)에서 배열까지 포함해 더 자세히 다룹니다.
요약
- 단축 속성으로
{ name }처럼 간결하게 객체를 만든다 - getter/setter 로 속성 접근을 함수처럼 가로챌 수 있다
- JavaScript 의 상속은 프로토타입 체인으로 동작한다
class는extends·super·static으로 객체지향 설계를 돕는다- 구조 분해로 객체에서 필요한 값만 변수에 담는다
연습문제
- 가로·세로를 받는
Rectangle객체를 만들고, 넓이를 돌려주는 getterarea를 추가하세요. Animal클래스를 상속한Cat클래스를 만들어speak를 "야옹"으로 오버라이드하세요.힌트 —
class Cat extends Animal { speak() { ... } }Object.create를 이용해 프로토타입 체인을 만들고, 자식이 부모 메서드를 호출하는 예제를 작성하세요.- 객체
{ a: 1, b: 2, c: 3 }에서 구조 분해로a와c만 꺼내고, 없는 키d는 기본값 0 으로 받으세요.힌트 —
const { a, c, d = 0 } = obj;
💡 연습문제 풀이
불러오는 중…
댓글 0
“JavaScript” 강좌에 대한 댓글입니다.