우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.
const dog = {
name: '멍멍이',
age: 2
};
console.log(dog.name); // 멍멍이
console.log(dog.age); // 2
객체 선언 방법
{ }
문자 안에 원하는 값을
키: 원하는 값
형태로 넣기
키에 해당하는 부분은 공백이 없어야
공백이 있어야 하는 상황이라면 따옴표로 감싸서 문자열로 처리
const sample = {
'key with space': true
};
const ironMan = {
name: '토니스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
}
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
console.log(ironMan);
console.log(captainAmerica);
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
function print(hero) {
const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
hero.actor
} 입니다.`;
console.log(text);
}
print(ironMan); // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
print(captainAmerica); // 캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.
print 함수를 보면 파라미터로 받아온 hero 내부의 값을 조회 할 때 매번 hero.
를 입력해야 하는데, 이를 객체 비구조화 할당 문법을 통해 더 짧고 보기 좋게 작성이 가능하다.
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
function print(hero) {
const { alias, name, actor } = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(ironMan);
print(captainAmerica);
// 동일한 결과 출력
const { alias, name, actor } = hero;
객체에서 각각의 값을 추출해서 새로운 상수로 선언해 주는 것
&
파라미터 단계에서 객체 비구조화 할당도 가능!
function print({ alias, name, actor }) {
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(ironMan);
print(captainAmerica);
const dog = {
name: '멍멍이',
sound: '멍멍!',
say: function say() {
console.log(this.sound);
}
};
dog.say(); // 멍멍!
함수가 객체안에 들어가게 되면, this 는 자신이 속해있는 객체를 가르킨다.
함수 선언할 때 이름이 없어도 된다.
const dog = {
name: '멍멍이',
sound: '멍멍!',
say: function() {
console.log(this.sound);
}
};
dog.say();
단, 객체 안에 함수를 넣을 때 화살표 함수로 선언하면 제대로 작동 X
=> function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가르키지만, 화살표 함수는 그렇지 않기 때문!
객체 안에 Getter 함수와 Setter 함수 설정하는 방법
객체를 만든 후, 다음과 같이 객체 안의 값 수정 가능
const numbers = {
a: 1,
b: 2
};
numbers.a = 5;
console.log(numbers); // {a:5, b:2}
Getter 함수와 Setter 함수를 사용하면
특정 값을 바꾸려고 하거나, 특정 값을 조회하고자 할 때
원하는 코드를 실행 시킬 수 있다.
const numbers = {
a: 1,
b: 2,
get sum() {
console.log('sum 함수가 실행됩니다!');
return this.a + this.b;
}
};
console.log(numbers.sum);
numbers.b = 5;
console.log(numbers.sum);
numbers.sum() 을 한 것이 아니라 numbers.sum 을 조회했을 뿐인데,
함수가 실행되고 그 결과값이 출력
이런식으로 Getter 함수는 특정 값을 조회 할 때 우리가 설정한 함수로 연산된 값을 반환!
Setter 함수 예시
const numbers = {
_a: 1,
_b: 2,
sum: 3,
calculate() {
console.log('calculate');
this.sum = this._a + this._b;
},
get a() {
return this._a;
},
get b() {
return this._b;
},
set a(value) {
console.log('a가 바뀝니다.');
this._a = value;
this.calculate();
},
set b(value) {
console.log('b가 바뀝니다.');
this._b = value;
this.calculate();
}
};
console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
numbers.a = 9;
console.log(numbers.sum);
console.log(numbers.sum);
console.log(numbers.sum);
Setter 함수를 설정하고 나면,
numbers.a = 5
이렇게 값을 설정했을 때 5를 함수의 파라미터로 받아오게 된다.
위 코드에서는 객체 안에 _a, _b 라는 숫자를 선언해주고, 이 값들을 위한 Getter 와 Setter 함수를 설정해주었다.
아까 만든 객체에서는 numbers.sum
이 조회 될 때마다 덧셈이 이루어졌었지만, 이제는 a 혹은 b 값이 바뀔 때마다 sum 값을 연산한다.