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

JavaScript 객체를 새 배열로 변환하기

JavaScript에서는 구조 분해 할당(Destructuring)과 for...of 반복문을 활용하면 복잡한 객체의 데이터를 원하는 형태의 새로운 배열로 손쉽게 변환할 수 있습니다. 이 글에서는 학교(school) 객체에 담긴 학생 정보를 추출하여 새로운 문자열 배열로 만드는 방법을 예제와 함께 살펴보겠습니다.

핵심 개념 정리

구조 분해 할당: 객체나 배열의 값을 한 번에 여러 변수로 꺼내올 수 있는 문법입니다.
for...of 문: 배열이나 이터러블 객체의 요소를 순회할 때 사용합니다.
템플릿 리터럴: 백틱(``)을 사용해 문자열 안에 변수를 간편하게 삽입할 수 있습니다.

예제 코드

다음은 JavaScript 객체를 새로운 배열로 변환하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScript 객체를 새 배열로 변환하기</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 school 객체가 배열로 변환되어 출력됩니다.</h3>
<script>
    const school = {
        name: "St Marks",
        address: "Delhi",
        students: [
            {
                firstName: "Rohan",
                lastName: "Sharma",
                age: 14,
            },
            {
                firstName: "Mohit",
                lastName: "Singh",
                age: 18,
            },
            {
                firstName: "Mike",
                lastName: "Shaw"