[JS] Object 변환에 대해 알아보자

Object.entries()

열거 가능한 오브젝트의 {key: value}를 [[key, value]] 형태로 변환한다.

const obj = {music: "음악", book: "책"};
const list = Object.entries(obj);

for (let keyValue of list) {
	console.log(keyValue)
}; 

// [music, 음악]
// [book, 책]

 

위에서는 키가 영문자일 때 별도로 키값을 분류하지 않고 작성한대로 반환했다.

하지만 아래처럼 숫자와 문자가 섞여 있다면 숫자 -> 문자 순서로 분류하기에 작성한 순서가 중요하다면 해당 메서드를 사용해선 안된다.

const obj = {10: "십", book: "책", 7: "칠"};
const list = Object.entries(obj);

for (let keyValue of list) {
	console.log(keyValue)
}; 

// [7, 칠]
// [10, 십]
// [book, 책]

 

상기 코드들의 경우 오브젝트 안의 키밸류 값이었다.

만약 파라미터가 문자열이라면 아래처럼 문자를 하나씩 분리하고 인덱스를 키값으로 사용한다.

const list = Object.entries("ABC");

for (let keyValue of list) {
	console.log(keyValue)
}; 

// [0, A]
// [1, B]
// [2, C]

---

Object.Values()

열거 가능한 오브젝트의 {key: value}에서 값만 [val1, val2] 형태로 반환한다.

 

entries 때와 똑같이 밸류값도 숫자 -> 문자 순서로 처리해서 순서가 중요하다면 해당 메서드를 사용해선 안되고, 문자열도 문자를 하나씩 반환한다. 다만 키밸류 쌍으로 하는 게 아니라 밸류값만 모아서 보여준다.

const obj = {music: "음악", book: "책"};
const list = Object.values(obj);

for (let value of list) {
	console.log(value)
}; 

// 음악
// 책

const obj = {10: "십", book: "책", 7: "칠"};
const list = Object.values(obj);

for (let value of list) {
	console.log(value)
}; 

// 칠
// 십
// 책

const list = Object.values("ABC");

for (let value of list) {
	console.log(value)
}; 

// A
// B
// C

---

Object.fromEntries()

[[key, value]] 형태를 {key: value} 형태로 반환한다.

Object.entries()와는 반대되는 개념이다.

const list = [["one", 10], ["two", 20]];
const obj = Object.fromEntries(list);

// {one: 10, two: 20}

 

만약 반환할 형태의 프로퍼티 키 값이 같은 경우에는 마지막 값으로 대체한다.

const list = [["one", 10], ["one", 20]];
const obj = Object.fromEntries(list);

// {one: 20}

---

Object.getOwnPropertyDescriptors()

Object의 프로퍼티 디스크립터를 반환한다. 

 

이게 뭐하는 놈인지 몰라서 임의의 오브젝트를 만들어 콘솔에 찍어봤다.

 

기본적으로 4가지 속성이 나온다.

객체의 속성을 삭제하거나 속성의 속성 디스크립터를 수정할 수 있는지 여부를 나타내는 configurable, 열거할 수 있는지 여부를 나타내는 enumerable, 값 value, 객체의 속성 값이 변경 가능한지 여부를 나타내는 writable이 있다.

 

configurable이랑 writable이랑 비슷해보이는데 전자의 경우 삭제 가능 여부와 함께 한 번 false로 설정되면 다시 true로 설정할 수 없다고 한다. 후자는 속성 값의 변경 가능 여부에 초점을 맞춰서 기능이 조금 다른 것 같다.

 

아래와 같이 엑세스 디스크립터(객체의 속성에 대한 접근 방식과 관련된 속성 디스크립터)도 확인할 수 있다.

이 엑세스 디스크립터는 게터와 세터 속성으로 구성되는데, 콘솔에 찍어보면 위랑 비슷하게 나온다.

let a = {
    get music() {}
};

console.log(Object.getOwnPropertyDescriptors(a))

다만 configurable, enumerable만 확인할 수 있다.

이 두 가지는 속성의 특성과 수정 가능성을 갖고 있는 디스크립터라서 그렇다.

게터와 세터가 속성의 엑세스 동작을 정의하는데 사용되기 때문에 두 가지는 연관성이 있는 반면 value, writable은 관련이 없기 때문이다. (라고 구글링 해서 알아본 결과 그렇다. 아직 자세히 모르겠다.)