[JavaScript]객체를 배열로 변환하는 방법

이번 포스팅에서는 JavaScript에서 객체를 배열로 변환하는 방법들을 소개합니다.

---

고전적인 방법

JavaScript에서 객체를 배열로 변환하는 고전적인 방법은 객체의 속성을 반복적으로 접근하여 push() 함수로 배열에 값을 추가하는 방법입니다.

 

다음은 객체의 key(속성명)를 배열로 변환하는 예제입니다.

let strObj = {
  A : 'A string',
  B : 'B string',
  C : 'C string'
};

let strArr = [];

for (let objKey in strObj) {
  if(strObj.hasOwnProperty(objKey)) {
    strArr.push(objKey);
  }
}

console.log(strArr);
// ['A', 'B', 'C']

객체의 key(속성명)를 for...in 루프로 접근합니다.

 

hasOwnProperty() 함수로 key가 존재하는지 체크 후 존재하면 배열에 key를 추가하였습니다.

 

다음은 key가 아닌 값을 배열로 변환하는 예제입니다. 동작 방식은 key를 배열로 변환하는 예제와 비슷합니다.

let strObj = {
  A : 'A string',
  B : 'B string',
  C : 'C string'
};

let strArr = [];

for (let objKey in strObj) {
  if(strObj.hasOwnProperty(objKey)) {
    strArr.push(strObj[objKey]);
  }
}

console.log(strArr);
// ['A string', 'B string', 'C string']

---

Object.keys() 함수

Object.keys() 함수는 객체에서 key를 문자열 배열로 반환합니다.

 

ES6부터 도입되었으며, 위에서 작성한 예제를 더 심플하게 작성할 수 있습니다.

 

다음은 Object.keys() 함수를 사용하는 예제입니다.

let strObj = {
  A : 'A string',
  B : 'B string',
  C : 'C string'
};

let strArr = Object.keys(strObj);

console.log(strArr);
// ['A', 'B', 'C']

 

Object.keys() 함수와 map() 함수를 결합하여 객체의 값을 배열로 변환할 수 있습니다.

 

다음은 Object.key() 함수와 map() 함수를 사용하는 예제입니다.

let strObj = {
  A : 'A string',
  B : 'B string',
  C : 'C string'
};

let strArr = Object.keys(strObj).map(item => strObj[item]);

console.log(strArr);
// ['A string', 'B string', 'C string']

반응형

---

Object.values() 함수

Object.values() 함수는 객체에서 값을 문자열 배열로 반환합니다.

 

ES2017부터 도입되었으며, 고전적인 방법과 Object.keys() 함수를 사용하여 객체의 값을 배열로 변환하는 예제를 더 심플하게 작성할 수 있습니다.

let strObj = {
  A : 'A string',
  B : 'B string',
  C : 'C string'
};

let strArr = Object.values(strObj);

console.log(strArr);
// ['A string', 'B string', 'C string']

---

Object.entries() 함수

Object.entries() 함수는 객체에서 [Key, Value] 형식의 값을 배열로 반환합니다.

 

ES2017부터 도입되었으며, 다음은 Object.entries() 함수 예제입니다.

let strObj = {
  A : 'A string',
  B : 'B string',
  C : 'C string'
};

let strArr = Object.entries(strObj);

console.log(strArr);
// [['A', 'A string'], ['B', 'B string'], ['C', 'C string']]