객체

객체의 키와 값 가져오기

1. 객체의 Key 가져오기

Object.keys

• 배열의 경우 key로 index를 반환
• 객체의 key가 숫자인 경우 정렬된 값으로 반환

var arr = ["Apple", "Orange", "Mango", "Banana"];
var obj1 = { 0: "Apple", 4: "Orange", 2: "Mango", 3: "Banana"};
var obj2 = { "id": "1", "name": "jenny", "color": "yellow"};

console.log(Object.keys(arr)); // ['0', '1', '2', '3']
console.log(Object.keys(obj1)); // ['0', '2', '3', '4']
console.log(Object.keys(obj2)); //  ['id', 'name', 'color']

2. 객체의 Key와 값 가져오기

Object.entries

• 객체를 작은 배열로 나눠서 반환 (배열 안의 배열)
• 각 배열은 [key, value] 형식으로 구성
• key와 해당 value를 포함하여 객체의 모든 항목을 반환
  

var obj = { "id": "1", "name": "jenny", "color": "yellow"};

console.log(Object.entries(obj)); 
// 0 : ['id', '1']
// 1 : ['name', 'jenny']
// 2 : ['color', 'yellow']

console.log(JSON.stringify(Object.entries(obj)));
// [["id","1"],["name","jenny"],["color","yellow"]]

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// id: 1
// name: jenny
// color: yellow

• for
  • object[key]를 활용. for-in에서 i는 key를 가르킴

var obj = { "id": "1", "name": "jenny", "color": "yellow"};

for(let i in obj) {
  console.log(`${i}: ${obj[i]}`);
}
// id: 1
// name: jenny
// color: yellow

객체와 배열의 변환

1. 객체 => 배열

Object.entries(obj)

• 객체를 2차원 배열로 변환
• 객체의 key와 value가 순서를 갖는 배열값으로 변환한다.

var obj = { 
  "id": "1", 
  "name": "jenny", 
  "color": "yellow"
};

let objToArr = Object.entries(obj);
// [
//	['id', '1']  //obj[0][0~1]
//	['name', 'jenny'] //obj[1][0~1]
//	['color', 'yellow'] //obj[2][0~1]
// ]

2. 배열 => 객체

Object.fromEntries(arr)

• 이차원 배열을 객체로 변환
• 이차원 배열에서 key와 value를 갖는 객체로 변환한다.
• 중복 key는 제거.

Object.fromEntries는 이차원 배열을 일차원 객체로 만들기 때문에, 이차원 이상의 다차원 배열에서는 map을 사용하여 배열 내부의 객체에 접근해야한다.

• 이차원 배열

var arr = [
  ["id", "1"], 
  ["name", "jenny"], 
  ["color", "yellow"]
];

let arrToObj = Object.fromEntries(arr);

// {id: '1', name: 'jenny', color: 'yellow'}

• 다차원 배열

var arr = [[
  ["id", "1"], 
  ["name", "jenny"], 
  ["color", "yellow"]
]];

let arrToObj = arr.map(el => Object.fromEntries(el));

console.log(arrToObj);
// [{id: '1', name: 'jenny', color: 'yellow'}]
console.log(arrToObj[0]);
// {id: '1', name: 'jenny', color: 'yellow'}

객체 메서드 활용

배열을 객체로 변환해서 중복제거

• Object.fromEntries
• Object.keys
• map

map으로 배열을 이차원배열로 변환

const arr = ['A','B','A','D','C','A','F','G','B'];

result = arr.map(v => [v,null]);
console.log(result);
/**
[
  ['A',null],
  ['B',null],
  ['A',null],
  ...
  ['B',null]
]
**/

Object.fromEntries로 이차원 배열을 객체로 변환. 그 과정에서 중복되는 Key가 제거되며 Key를 기준으로 정렬됨.

const arr = ['A','B','A','D','C','A','F','G','B'];

result = Object.fromEntries(
 arr.map(v => [v,null])
);
console.log(result);
/**
{
 A: null
 B: null
 C: null
 D: null
 F: null
 G: null
}
**/

Object.keys로 key만 추출해서 배열로 반환함.

const arr = ['A','B','A','D','C','A','F','G','B'];

result = Object.keys(
  Object.fromEntries(
    arr.map(v => [v,null])
  )
);

console.log(result);
// ['A', 'B', 'D', 'C', 'F', 'G']

출처

• 객체의 키와 값 가져오기
• Object.entries vs Object.fromEntries