[javascript] 배열과 객체의 구조분해할당

구조분해할당

---

구조분해 할당은 배열이나 객체의 각 구성 요소 및 프로퍼티를 주어진 변수에 나눠서 할당하는 방법이다. 즉, 주어진 자료구조를 분해해서 새로운 변수에 할당하는 방식이다.

여기서 오해하면 안 되는 것은 구조분해할당은 기존의 변수나 객체의 값을 복사하여 
새로운 변수에 할당하는 것이지 기존 변수나 객체를 삭제하는 것이 아니다. 
그래서 구조분해할당을 한 이후에도 기존 데이터는 그대로 사용이 가능하다.

구조분해할당은 배열과 객체 모두에서 가능하지만, 조금 차이가 있다. 우선 배열의 경우에는 요소가 새로운 변수에 할당되는 순서가 정해져 있는 반면에, 새롭게 할당하려고 하는 변수의 이름은 마음대로 지어도 되지만,

객체의 경우에는 할당하고자 하는 변수의 이름이 객체 내의 프로퍼티 키의 이름과 동일해야 한다.

글로만 보면 이해가 어려우므로 코드로 간략하게 정리하면 다음과 같다.

---

< 배열의 구조분해할당 >

" 키워드 [새변수명1, 새변수명2,... ] = 기존변수명"

// 일반적인 배열 선언
const hobbies = ['tennis','coding'];

// 구조분해 할당 공식 키워드 [새변수명1 , 새변수명2  ] = 기존 배열명
// 기존 배열의 0번째 인덱스 요소부터 각 새변수에 차례대로 할당된다. 
const [hobby1, hobby2] = hobbies;
 
// 출력해보면 각 변수에 순서대로 값이 할당되어 출력된다. 
console.log(hobby1); //출력결과) tennis
console.log(hobby2); // 출력결과) coding

---

객체의 구조분해할당

" 키워드 {프로피티 명1, 프로퍼티명2,... }= 기존 객체명"

객체의 구조분해할당의 공식은 배열과 다르게 { }를 키워드 다음으로 둘러싼다. 그리고 중갈호 안 에는 기존 객체의 프로퍼티 명을 입력하여야 하며, 동일한 명칭에 해당하는 변수로 객체의 프로퍼티가 저장된다.

즉, 기존 객체의 프로퍼티 명과 새롭게 할당하려는 변수의 이름이 동일하지 않으면 undefined 가 출력된다.

// 일반적인 객체 선언
const obj = {
    name : "ke",
    age: 60,
    hobbies: ["tennis",'coding','boxing']
}

// 객체의 구조분해할당 공식: 키워드 {프로퍼티명1, 프로피터명2,...} = 기존 객체명
const {name, hobbies, ag3e} = obj

// 기존 객체명에서 사용된 프로퍼티명과 일치하는 경우 그 변수로 프로퍼티의 값이 저장되어 출력된다.
console.log(name) // 출력결과) ke
console.log(hobbies) // 출력결과)  [ 'tennis', 'coding', 'boxing' ]
console.log(ag3e)  // 출력결과) undefined

참고) 객체의 구조분해할당 시 프로퍼티 명은 다른 이름으로 바꿀 수 있다(별칭을 지정할 수 있다)

아래와 같은 형태로 작성하면 바뀐 명칭으로 호출이 가능하다.

키워드 {프로퍼티명 : 새 프로퍼티명  } = 객체명

기존 프로퍼티명에 : 을 붙이고 우측에 별칭을 지정한다.
const {name:Name, hobbies, age} = obj

//바뀐 별칭으로 정상적인 값을 도출했다. 
console.log(Name) //출력결과) ke