1. 리터럴과 프로퍼티
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법
- {}를 이용해 객체를 선언하는것을 객체 리터럴이라고한다.
- 객체안에 키:값쌍으로 구성된 프로퍼티가 들어간다.
- 키엔 문자형 값에는 모든 자료형 오케이
let user = { // 객체
//프로퍼티1
name: "John", // 키: "name", 값: "John"
//프로퍼티2
age: 30 // 키: "age", 값: 30
};
- 프로퍼티의 추가, 삭제, 수정
- 계산된 프로퍼티 : 객체 리터럴안에 프로퍼티 키가 []로 되어있음
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.
- 단축 프로퍼티 : 키와값이 동일한 경우 하나만 입력가능
function makeUser(name, age) {
return {
name, //name: name과 같음
age, //age: age과 같음
};
}
let user = makeUser("John", 30);
alert(user.name); // John
- 자바스크립트는 다른언어와달리 객체내 존재하지않는 프로퍼티에 접근하려해도 오류대신 undefined를 반환한다.
- in 연산자로 프로퍼티 존재여부 확인하기
- 객체의 모든 키 순회하기
let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
// 키
alert( key ); // name, age, isAdmin
// 키에 해당하는 값
alert( user[key] ); // John, 30, true
}
object.keys, object.values, object.entires
let user = {
name: "John",
age: 30
};
Object.keys(user)//["name", "age"]
Object.values(user)//["John", 30]
Object.entries(user)//[ ["name","John"], ["age",30] ]
활용예시
// 값을 순회합니다.
for (let value of Object.values(user)) {
alert(value); // Violet과 30이 연속적으로 출력됨
}
객체변환
객체엔 map, filter과 같은 배열전용 메서드를 사용할수없기에 배열을 반환해주는 entries를 활용한다.
배열을 다시 객체로 돌리기
Object.fromEntries(array)
let prices = {
banana: 1,
orange: 2,
meat: 4,
};
let doublePrices = Object.fromEntries(
// 객체를 배열로 변환해서 배열 전용 메서드인 map을 적용하고 fromEntries를 사용해 배열을 다시 객체로 되돌립니다.
Object.entries(prices).map(([key, value]) => [key, value * 2])
);
alert(doublePrices.meat); // 8
2. 참조에 의한 객체 복사
a = 1;
b = 1;
a == b //true
c = {}
d = {}
c == d //false
객체 복사
let user = {name:'John', age:30};
let clone = {}
//방법1
//빈 객체에 user프로퍼티 전부를 복사해 넣는다
for(let key in user){
clone[key] = user[key];
}
//방법2
let clone2 = Object.assign({}, user)
반응형
'Frontend > 모던자바스크립트' 카테고리의 다른 글
Javascript class example (0) | 2022.05.17 |
---|---|
배열함수 총정리 forEach(), Map(), filter() 등등 (0) | 2021.11.09 |
자료구조와 자료형 Object.keys, values, entries (0) | 2021.09.20 |
객체와 배열 구조분해할당(destructuring) (0) | 2021.09.20 |
배열, 배열 반복문 (0) | 2021.07.09 |