객체
객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
console.log(ironMan);
console.log(captainAmerica);콘솔 출력:
{name: "토니 스타크", actor: "로버트 다우니 주니어", alias: "아이언맨"}
{name: "스티븐 로저스", actor: "크리스 에반스", alias: "캡틴 아메리카"}함수에서 객체를 파라미터로 받기
function print(hero) {
const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${hero.actor} 입니다.`;
console.log(text);
}
print(ironMan);
print(captainAmerica);콘솔 출력:
아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.객체 비구조화 할당
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
function print(hero) {
const { alias, name, actor } = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
}
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); // 캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다. 함수의 파라미터에서도 객체 비구조화 할당을 할 수도 있다.
배열 비구조화 할당
이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 유용하다.
let array = [1];
let [first, second = 2] = array; // 기본값 지정
first = 5;
console.log(first); // 5
console.log(second); // 2깊은 값 비구조화 할당: 객체의 깊숙한 곳에 들어있는 값 추출하기
아래의 코드는 비구조화 할당 문법을 2번 사용하여 name, languages, value 값들을 밖으로 꺼내는 예제이다.
const deepObject = {
state: {
information: {
name: 'Jane',
languages: ['korean', 'english', 'chinese']
}
},
value: 5
};
const { name, languages } = deepObject.state.information;
const { value } = deepObject;
const extracted = {
name,
languages,
value
};
console.log(extracted); // {name: "Jane", languages: Array(3), value: 5}한 번에 모두 추출하는 방법도 있다.
const deepObject = {
state: {
information: {
name: 'Jane',
languages: ['korean', 'english', 'chinese']
}
},
value: 5
};
const {
state: {
information: { name, languages }
},
value
} = deepObject;
const extracted = {
name,
languages,
value
};
console.log(extracted); // {name: "Jane", languages: Array(3), value: 5}객체 안에 함수 넣기
const dog = {
name: '멍멍이',
sound: '멍멍!',
say: function say() {
console.log(this.sound);
}
};
dog.say(); // 멍멍!함수가 객체 안에 들어가게 되면, this는 자신이 속해 있는 객체를 가리키게 된다.
따라서 함수를 선언할 때에는 이름이 없어도 된다. 여기서는 function say()가 아닌 function()만 적어도 무방하다.
주의: 화살표함수를 사용하면 제대로 작동하지 않는다.
객체 안에 함수를 넣을 때 화살표 함수로 선언한다면 제대로 작동하지 않는다. function으로 선언한 함수는 this가 제대로 자신이 속한 객체를 가리키게 되는데, 화살표 함수는 this를 자신이 속해 있는 곳으로 연결하지 않기 때문이다.
const dog = {
name: '멍멍이',
sound: '멍멍!',
say: () => {
console.log(this.sound);
}
};
dog.say(); // undefined→작동 X
화살표 함수와 this 바인딩
Getter 함수와 Setter 함수
- Getter 함수는 특정 값을 조회할 때 우리가 설정한 함수로 연산된 값을 반환한다.
const numbers = {
a: 1,
b: 2,
get sum() {
console.log('sum 함수가 실행됩니다!');
return this.a + this.b;
}
};
console.log(numbers.sum); // 3
numbers.b = 5;
console.log(numbers.sum); // 6numbers.sum()을 한 것이 아니라 numbers.sum을 조회했는데 함수가 실행되고 그 결괏값이 출력된다.
- Setter 함수를 설정할 때는 함수의 앞부분에 set 키워드를 붙인다.
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); // 3
numbers.a = 5;
console.log(numbers.sum); // 7
numbers.b = 7;
console.log(numbers.sum); // 12Setter 함수를 설정하고 나면, numbers.a = 5 이렇게 값을 설정했을 때 5를 함수의 파라미터로 받아오게 된다.
Getter&Setter 이해
getter setter in ES6
객체를 위한 반복문 - for...in
const doggy = {
name: '멍멍이',
sound: '멍멍',
age: 2
};
for (let key in doggy) {
console.log(`${key}: ${doggy[key]}`);
}콘솔 출력:
name: 멍멍이
sound: 멍멍
age: 2
객체가 지니는 값에 대하여 반복을 하고 싶다면 아래의 함수 사용
- Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
- Object.keys: [키, 키, 키] 형태의 배열로 변환
- Object.values: [값, 값, 값] 형태의 배열로 변환
const doggy = { name: '멍멍이', sound: '멍멍', age: 2 }; console.log(Object.entries(doggy)); console.log(Object.keys(doggy)); console.log(Object.values(doggy));
