객체는 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.
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;이코드가 객체에서 값들을 추출해서 새로운 상수로 선언해 주는것이다.
여기서 더 나아가면, 파라미터 단계에서 객체 비구조화 할당을 할수도 있다.
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
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();이전과 똑같이 동작할것이다.
객체안에 함수를 넣을때, 화살표 함수로 선언한다면 제대로 작동하지 않는다.
이유는 function으로 선언한 함수는 this가 제대로 자신이 속한 객체를 가르키게 되는데, 화살표 함수는 그렇지 않기 때문이다.
Getter함수와 Setter함수
객체 안에 Getter함수와 Setter함수를 설정하는 방법을 알아봅시다. 객체를 만들고 나면, 다음과 같이 객체안의 값을 수정할 수도 있다.
const numbers = {
a: 1,
b: 2
};
numbers.a = 5;
console.log(numbers);
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()을 한 것이 아니라 number.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함수를 설정 할때는 함수의 앞부분에 set키워드를 붙인다.
Setter함수를 설정하고 나면, numbers.a = 5이렇게 값을 설정했을때 5를 함수의 파라미터로 받아오게 된다. 위 코드에서는 객체 안에 _a, _b 라는 숫자를 선언해주고, 이 값들을 위한 Getter와 Setter함수를 설정해 주었다
아까는 만든객체에서는 numbers.sum이 조회 될 때 마다 덧셈이 이루어졌었지만, 이제는 a 혹은 b값이 바뀔때 마다 sum값을 연산한다.