[JS] 구조 분해 할당(destructuring assignment)

구조 분해 할당(destructuring assignment)

const [element1, element2] = array;
const {element1, element2} = obj;

 
: 객체나 배열을 분해해서 개별 변수에 담을 수 있게 하는 문법

• 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용 
• 원본 보호⭕

 
 
 

📌 배열

기존 문법

let arr = ["Bora", "Lee"];

let firstName = arr[0];
let surname = arr[1];

alert(firstName); // Bora
alert(surname);  // Lee

 
 
구조 분해 할당

let arr = ["Bora", "Lee"]

// 구조 분해 할당
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

 
 
선언과 분리된 할당

var a, b;

[a, b] = [1, 2];

console.log(a); // 1
console.log(b); // 2

 
 
이미 정의된 배열의 값 바꾸기 

let num = [10, 20, 30];

let [a, b, c] = num; // a: 10, b: 20, c: 30

[a] = [1, 3, 5];
[, b] = [1, 3, 5];
[, , c] = [1, 3, 5];
// a: 1, b: 3, c: 5

 
 
변수 값 교환하기

var a = 1;
var b = 3;

[a, b] = [b, a];

console.log(a); // 3
console.log(b); // 1

 
 
중첩된 배열

let num = [10, 20, 30, [40, 50]];

let [a, b, c, [d, e]]; // a: 10, b: 20 , c: 30, d: 40, e: 50

 
 
 
예제 1)

const courses = [
  {
    id: 1,
    title: 'React 펀더멘탈',
    url: 'https://fundamentals.dev/react',
  },
  {
    id: 2,
    title: 'React Router 펀더멘탈',
    url: 'https://fundamentals.dev/react-rouer',
  },
  {
    id: 3,
    title: 'Recoil 펀더멘탈',
    url: 'https://fundamentals.dev/recoil',
  },
];


function spreadArray() {

  // 구조 분해 할당 X
  {
    const reactCourse = courses[0];
    const restCourses = courses.slice(1);

    console.log(reactCourse);
    // { id: 1, title: 'React 펀더멘탈', url: 'https://fundamentals.dev/react' }
    
    console.log(restCourses);
    // [
    //   {
    //     id: 2,
    //     title: 'React Router 펀더멘탈',
    //     url: 'https://fundamentals.dev/react-rouer'
    //   },
    //   { id: 3, title: 'Recoil 펀더멘탈', url: 'https://fundamentals.dev/recoil' }
    // ]
  }


  // 구조 분해 할당 O
  const [reactCourse, ...restCourses] = courses; 
  
  console.log({ course: reactCourse });
  // { course: { id: 1, title: 'React 펀더멘탈', url: 'https://fundamentals.dev/react' } }
  
  console.log({ rest: restCourses }); 
//  {
//   rest: [
//     {
//       id: 2,
//       title: 'React Router 펀더멘탈',
//       url: 'https://fundamentals.dev/react-rouer'
//     },
//     { 
//       id: 3, title: 'Recoil 펀더멘탈', url: 'https://fundamentals.dev/recoil' 
//     }
//   ]
//  }
}

 
 

---

📌 객체

기존 문법

let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

let kor = exam.kor;
let eng = exam.eng;
let math = exam.math;

 
 
구조 분해 할당

let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

let {kor, eng, math} = exam; // kor: 30, eng: 40, math: 50

 
 
이미 정의된 배열의 값 바꾸기 

let exam = {
    kor: 30,
    eng: 40,
    math: 50
};

let {kor, eng, math} = exam; // kor: 30, eng: 40, math: 50


// 값 변경
exam.kor = 100;
exam.eng = 200;

{kor, eng, math} = exam; // kor: 100, eng: 200, math: 50

 
 
중첩된 객체 

let exam = {
    kor: 30,
    eng: 40,
    math: 50,
    student: {
        name: "nadia",
        phone: "010-1111-2222"
    }
};

// 기존 문법
let name = exam.student.name;
let phone = exam.student.phone;

// 구조 분해 할당
let {student:{name}, student:{phone}} = exam; // student name: nadia, phone: 010-1111-2222

 
 
 
예제 1)

const courses = [
  {
    id: 1,
    title: 'React 펀더멘탈',
    url: 'https://fundamentals.dev/react',
  },
  {
    id: 2,
    title: 'React Router 펀더멘탈',
    url: 'https://fundamentals.dev/react-rouer',
  },
  {
    id: 3,
    title: 'Recoil 펀더멘탈',
    url: 'https://fundamentals.dev/recoil',
  },
];


function spreadObject() {
  const [reactCourse] = courses;

  {
    let reactCourseId = reactCourse.id;
    let reactCourseTitle = reactCourse.title;
    let reactCourseUrl = reactCourse.url;

    console.log(reactCourseId); // 1 
    console.log(reactCourseTitle); // 'React 펀더멘탈'
    console.log(reactCourseUrl); // 'https://fundamentals.dev/react'
  }


  // 구조 분해 할당 O
  const {id: courseId, title: courseTitle, url: courseUrl} = reactCourse

  console.log({ courseId }); // { courseId: 1 }
  console.log({ courseTitle }); // { courseTitle: 'React 펀더멘탈' }
  console.log({ courseUrl }); // { courseUrl: 'https://fundamentals.dev/react' }
}

 
 

---

📌 배열 Array + 객체 Object

let notice = {
    id: 1,
    title: "공지사항",
    files: [
        "img1.png",
        "img2.png"
    ]
};

// img2에 "img2.png"를 대입
let {files: [, img2]} = notice;

 
 

---

 

구조 분해 할당 - JavaScript | MDN

 

구조 분해 할당