객체
: 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.
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 : '아이언맨'
};
console.log(ironMan);
// {name: "토니 스타크", actor: "로버트 다우니 주니어", alias: "아이언맨"}함수에서 객체를 파라미터로 받기
const ironMan = {
name : '토니 스타크',
actor : '로버트 다우니 주니어',
alias : '아이언맨'
};
function print(hero) {
const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${hero.actor} 입니다.`;
console.log(text);
}
print(ironMan);
// 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다. 객체 비구조화 할당
: 파라미터로 받아온 hero 내부의 값을 조회할 때마다 hero.을 입력하고 있는데,
객체 비구조화 할당이라는 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성할 수 있다.
(이 문법은 객체 구조 분해라고 불리기도 한다.)
const ironMan = {
name : '토니 스타크',
actor : '로버트 다우니 주니어',
alias : '아이언맨'
};
function print(hero) {
const { alias, name, actor} = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(ironMan);
// 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다. const { alias, name, actor} = hero;이 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해주는 것이다.
여기서 더 나가가면, 파라미터 단계에서 객체 비구조화 할당을 할 수 있다.
const ironMan = {
name : '토니 스타크',
actor : '로버트 다우니 주니어',
alias : '아이언맨'
};
function print({ alias, name, actor}) {
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(ironMan);
// 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다. 객체 안에 함수 넣기
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가 제대로 자신이 속한 객체를 가리키게 되는데,
화살표 함수는 그렇지 않다.
객체 안에 함수 넣을 때는 function으로!
getter 함수와 setter 함수
객체를 만들고 다면 다음과 같이 객체 안의 값을 수정할 수도 있다.
const numbers = {
a : 1,
b : 2
};
numbers.a = 5;
console.log(numbers);
/*{
a:5,
b:2
}*/getter 함수와 setter 함수를 사용하게 되면 특정 값을 바꾸려고 하거나,
특정 값을 조회하려고 할 때 우리가 원하는 코드를 실행시킬 수 있다.
- getter
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);
/*
sum 함수가 실행됩니다.
3
sum 함수가 실행됩니다.
6
*/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);setter 함수를 설정할 때 함수의 앞부분에 set 키워드를 붙인다.
setter 함수를 설정하고 나면 numbers.a = 5 이렇게 값을 설정했을 때 5를 함수의 파라미터로 받아오게 된다.
이전에는 numbers.sum이 조회될 때마다 덧셈이 이루어졌지만,
a 혹은 b 값이 바뀔 때마다 sum 값을 연산한다.
- getter setter 이해하기
우선 참고한 링크는 아래와 같다.
https://ko.javascript.info/property-accessors
let obj = {
get propName() {
// getter, obj.propName을 실행할 때 실행되는 코드
},
set propName(value) {
// setter, obj.propName = value를 실행할 때 실행되는 코드
}
};먼저 getter는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행
setter는 obj.propName - value으로 프로퍼티에 값을 할당하려 할 때 실행
