JS - Object(객체)2

지난번에 이어서 객체에 대해 정리 및 예제
자료 출처 : replit / 설명 아래에 기재

객체 순회하기

지난번에 설명했듯이 객체는 배열과 달리 순서가 없고 키를 통해서만 접근이 가능하다.
즉, 객체의 순회는 "순서가 보장되지 않은 순회"이다.
따라서 배열의 반복문과는 다르게 순회해야한다.

Object.keys()

Object.keys메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다.

< 예제 >

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

배열을 리턴하기 때문에 이로써 반복문을 사용할 수 있다.

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(value)
}

Object.values() / Object.entries()

Object.values는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.
Object.entries는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진 배열을 리턴한다.

< 예제 >

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

for-in

객체를 순회하는 다른 방법으로는 for-in문이 있다.
객체와 배열을 위해 특별히 존재하는 ES6에서 추가된 문법이다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}

Cloning

< 예제 >

const user = { name: 'ellie', age: '20' };
const user2 = user;
user2.name = 'coder';
console.log(user); // {name: "coder", age: "20"}

//old way
const user3 = {}; //빈 객체를 할당 
for (key in user){
  user3[key] = user[key];
}
console.log(user3); // {name: "coder", age: "20"}

//new way
const user4 = Object.assign(user4,user);
console.log(user4); // {name: "coder", age: "20"}

//another example
const fruit1 = { color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({},fruit1,fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); // big

console.log(mixed.color)에서 red가 아나리 blue가 출력되는 이유는 fruit1,fruit2에 같은 프로퍼티가 있다면 값을 덮어쓰기때문이다.

자료출처: 유튜브 '드림코딩 by 엘리'
( https://www.youtube.com/watch?v=1Lbr29tzAA8 )