[JS] 구조 분해 할당(Destructuring Assignment)

1. 구조 분해 할당(Destructuring Assignment)이란?

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
• Java에서 배열의 순서를 바꾸려면 값을 임시 변수에 저장한 후 하나씩 차례대로 옮겨줘야 하는데에 반해, JavaScript는 아주 편한 문법을 가지고 있다.

 

Java 코드와 비교해서 보도록 하자

Java 배열 값 옮기기

// Java 코드
public class Exam {

  public static void main(String[] args) {
    int[] arr = { 1, 2, 3, 4 };
    
    int a = arr[0];				// 여기부터
    for (int i = 0; i < arr.length - 1; i++) {	//
      arr[i] = arr[i + 1];			//
      arr[i + 1] = arr[i];			//
    }						//
    arr[arr.length - 1] = a;			// 여기까지

    for (int i = 0; i < arr.length; i++)
      System.out.println(arr[i]);
  }

}
/************** 결과 **************/
2
3
4
1
/*********************************/

Java 코드의 경우 배열의 값을 옮기려면 굉장히 복잡한 로직을 구성해야 한다.
반면, JavaScript의 구조 분해 할당을 보자.

JavaScript 구조 분해 할당

// JavaScript 코드
const myname = "Danny Seung Hyeon Lee";
const [name1, name2, name3, name4] = myname.split(" ");
const [nameEng, ...nameKR] = [name1, name2, name3, name4];

console.log("영어이름 : " + nameEng);
console.log("한국이름 : " + nameKR);

[engName, lastName, ...firstName] = [name1, name4, name2, name3]; // 한 줄.

console.log("영어이름 : " + engName);
console.log("성 : " + lastName);
console.log("이름 : " + [...firstName]);

/************** 결과 **************/
영어이름 : Danny
한국이름 : Seung,Hyeon,Lee
영어이름 : Danny
성 : Lee
이름 : Seung,Hyeon
/*********************************/

구조 분해 할당과 Spread 연산자를 잘 활용하면 배열을 아주 쉽게 옮기고 사용할 수 있다.

 

2. Spread 연산자(...)

• '전개 연산자'라고도 부르며, 배열이나 객체의 목록을 담아서 펼처주는 역할을 한다. 이 과정에서 원본 값을 건드리는 것이 아닌 복사본을 이용하기 때문에, 원본에는 영향을 끼치지 않는다.
• 위의 구조 분해 할당 코드를 보면, 결과 값 중 '한국이름'을 보면 [...nameKR] = [name2, name3, name4] 를 가지고 있다. 이를 출력한 결과, Seung, Hyeon, Lee 세 가지 배열 값을 펼쳐서 보여준다.
• 구조 분해 할당과 잘 활용하면 아주 간결한 코드로 배열을 조작할 수 있다.