객체에서 배열, 배열에서 객체

 자바스크립트에서 배열과 객체는 많이 다르다고 생각합니다. 객체는 Key와 Value로 이루어진 형태의 타입이며, 배열은 스택과 같은 느낌의 형태 타입으로 이루어졌다고 생각합니다. 코딩을 많이 하다 보면 객체에서 배열로 타입을 변환하여 사용하는 경우도 있고, 배열에서 객체로 타입을 변환하여 사용하는 경우도 있다고 생각합니다. 오늘은 이 안건에 대해 알아보는 시간을 가지려고 합니다.

 

# Contents

---

• 객체에서 배열
• 배열에서 객체

 

 

# 객체에서 배열

---

객체에서 배열로 만드는 방법은 아주 다양합니다. 다양한 방안들 중 기초적인 핵심과 어렵지 않는 부분만 다룰 예정입니다. 한번 보시죠. 

 

1. Object.keys()

var object = Object.keys(target)

 

 Object.keys() 메소드는 target 객체의 키를 열거하여 배열 형태로 변환해주는 메소드 입니다. target 객체의 키 값들이 배열의 요소가 됩니다. 다음은 해당 메소드를 이용하여 만든 간단한 예제입니다.

var market = {
    apple: 3000,
    banana: 3500,
    icecream: 1000,
    waterMelon: 5000,
};

var arr = Object.keys(market);

console.log(arr);

 

 결과는 아래와 같습니다.

 

 

2. Object.values()

var arr = Object.values(target)

 

 Object.values() 메소드는 target 객체의 값을 열거하여 배열 형태로 변환해주는 메소드 입니다.

 target 은 객체이어야 하고, 결과 값은 Array 형태로 나오게 됩니다.

 target 객체의 값 들이 배열의 요소가 됩니다. 다음은 해당 메소드를 이용하여 만든 간단한 예제입니다.

var market = {
    apple: 3000,
    banana: 3500,
    icecream: 1000,
    waterMelon: 5000,
};

var arr = Object.values(market);

console.log(arr);

 

 결과는 아래와 같습니다.

 

 

 

3. Object.entries()

var arr = Object.entries(target)

 

 Object.values() 메소드는 target 객체의 키 값과 키 값의 밸류를 열거하여 배열 형태로 변환해주는 메소드 입니다.

 target 은 객체이어야 하고, 결과 값은 Array형태로 나오게 됩니다.

 target 객체의 키 값과 키 값의 밸류가 배열의 요소가 됩니다. 다음은 해당 메소드를 이용하여 만든 간단한 예제입니다.

var market = {
    apple: 3000,
    banana: 3500,
    icecream: 1000,
    waterMelon: 5000,
};

var arr = Object.entries(market);

console.log(arr);

 

 결과는 아래와 같습니다.

 

 

4. Iterator

 객체를 이터레이터 형식으로 변환하여 값을 배열 형태로 받는 방식입니다. 이터레이터 형식으로 변환하게 되면 반복문을 처리할 수 있으며, 이터레이터 형식의 전형적인 반복문은 for of 문을 사용하게 됩니다. 아래 예제는 이터레이터 형식으로 처리된 객체를 배열형태와 for of 문을 사용한 예제입니다.

var range = {
    from: 1,
    to: 5,

    [Symbol.iterator]() {
        var current = this.from;
        var to = this.to;
        return {
            next() {
                if (current <= to) {
                    return { done: false, value: current++ };
                } else {
                    return { done: true };
                }
            },
        };
    },
};

console.log(Array.from(range));

for (const iterator of range) {
    console.log(iterator);
}

 

 결과는 아래와 같습니다.

 

 

5. Generator

 이터러블 한 객체를 제너레이터를 사용하여 배열 형태로 변환하였습니다. 이터레이터 형식으로 만든 객체보다 훨신 간단하며 유용하게 쓰일 수 있습니다. 아래는 예제 코드입니다.

let range = {
    from: 1,
    to: 5,

    *[Symbol.iterator]() {
        for (let i = this.from; i <= this.to; i++) {
            yield i;
        }
    },
};

console.log([...range]);

 

 결과는 아래와 같습니다.

 

 

6. Async Generator

 비동기적인 제너레이터 형식입니다. 아래 코드는 1초마다 값을 전송하는 역할을 하게 되는데, 소켓이나 어떠한 스트림 처리를 할 때 아주 유용한 로직입니다. 예제 코드는 아래와 같습니다.

let range2 = {
    from: 1,
    to: 5,

    async *[Symbol.asyncIterator]() {
        for (let value = this.from; value <= this.to; value++) {
            await new Promise((resolve) => setTimeout(resolve, 1000));
            yield value;
        }
    },
};

(async () => {
    for await (let value of range2) {
        console.log(value);
    }
})();

 

 결과는 아래와 같습니다.

 

 

 

# 배열에서 객체

---

 배열에서 객체로 변경하는 방법이 하나 밖에 떠오르질 않습니다. 더 유용한 방법이 있다면 댓글을 작성해주세요.

 

1. Object.fromEntries()

var obj = Object.fromEntries(target)

 

 Object.fromEntries() 메소드는 이터레이블 한 요소를 받아 Object 형태로 변환시켜주는 메소드입니다.

 target 은 이터레이터 형태이어야 하고, 결과 값은 Object 형태로 반환하게 됩니다. 

 다음 예제를 통해 사용방법을 파악해보도록 하겠습니다.

 

var market = ["apple", "banana", "icecream", "waterMelon"];

var marketObject = Object.fromEntries(
    market.map((key, idx) => {
        return [idx, key];
    })
);

console.log(marketObject);

 

결과 값은 아래와 같습니다.

 

 

 

# 객체에서 배열, 다시 배열에서 객체

---

객체에서 배열로 변환하여 일정한 로직이나 값을 더하고 다시 객체로 만드는 방법입니다. 예를 들어 설명해보도록 하겠습니다. 슈퍼마켓에서는 물가가 2배로 올랐기 때문에 모든 상품들의 가격을 2배로 상승시키도록 하려 합니다. 이러한 예제를 아래 코드를 통해 확인해 보도록 하겠습니다.

 

var market = {
    apple: 3000,
    banana: 3500,
    icecream: 1000,
    waterMelon: 5000,
};

console.log(
    Object.entries(market).map(([key, value]) => {
        return [key, value * 2];
    })
);

 

결과 값은 아래와 같습니다.