Object / Array 구조분해할당

객체구조분해할당에 대해서는 어느 정도 알고 있다고 생각했고 배열을 구조분해할당 하는 것은 한 번도 하지않아서 이번 기회에 배열구조분해할당도 연습하며 알게 된 것을 적어보려고 한다.
우선 구조분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

객체 구조 분해 할당 예시

const user = {
    name : "홍길동", // 이름
      tel : "010-1234-4321", // 전화번호
      mail: "gildong@gmail.com", // 메일
}

우선 user라는 상수변수에는 object타입으로 이루어진 key가 3개인 이름,전화번호,메일로 이루어져있다.
객체안의 속성에 접근하기 위해서는 . dot을 통해 접근하여 해당하는 key가 가진 value값을 가져올 수 있다.

const named = user.name; // 홍길동
const telNumber = user.tel; // 010-1234-4321
const email = user.mail; // gildong@gmail.com

이렇게 각각의 변수에 객체가 가지고 있는 key값들을 할당할 수 있게되는데, 구조분해할당을 하면 필요한 속성의 값을 가져와 재사용 할 수 있다는 장점이 있다. 그리고 개인적인 생각으로는 코드의 가독성도 좋고 직관적인거 같다. 아래에는 객체구조분해 할당의 예시이다.

    const {name,tel,mail} = user;
    console.log(name,tel,mail);  // 홍길동,010-1234-4321,gildong@gmail.com

    // 구조분해할당한 변수의 이름을 바꾸고싶다?
    const {name : named, tel: phone, mail : email} = user;
    console.log(named,phone,email); // 홍길동,010-1234-4321,gildong@gmail.com

이렇게 구조분해할당한 변수의 이름도 변경할 수 있게 되는데 해당하는 key값 뒤에 : 을 붙여 바꿀 수 있다. 그리고 이 값을 재사용하기 위해서는
변경된 이름값을 사용해야 그 값을 가져올 수 있다!

배열 구조 분해 할당 예시

    const fruits = ['사과','바나나','포도','오렌지'] // 과일들을 가지고 있는 변수 -> array

fruits라는 변수안에는 4개의 과일이 할당되어있는 배열형태인데, 각각의 값들을 변수에 담기위해서는 아래와 같이 해야할 것 이다.

    const apple = fruits[0] // 사과
    const banana = fruits[1] // 바나나
    const grape = fruits[2] // 포도
    const orange = fruits[3] // 오렌지

배열은 인덱스가 존재하기 때문에 현재 위에 예시대로 라고한다면, 총 4개의 인덱스가 있다. 인덱스는 0부터 시작하니 0~3까지 각각의 값들을 변수에 할당할 수 있게된다. 객체는 . 을 통해 접근할 수 있고 배열은 인덱스로 접근하여 값을 가지고 올 수 있다.
하지만 배열도 객체구조분해할당처럼 구조분해할당을 하고 이름을 바꿀 수 있을까?

    const [apple,banana,grape,orange] = fruits
        // 차례대로 배열의 인덱스 0 , 1, 2, 3

이렇게 배열을 구조분해할당 할 수 있는데 객체와 같이 이름을 바꾸려고 한다면 오류가 날 것이다. 그 이유는 배열은 객체와는 다르게 변수이름을 바꿀 수 없고 배열자체가 인덱스로 접근 할 수 있기때문에 구조분해할당 하려는 배열의 인덱스 값이 차례대로 들어간다고 생각하면 편하다.
결과적으로 이름을 바꿀순 있지만 객체처럼은 바꿀 수 없고 인덱스 위치에따라 값이 설정되기 때문에 처음부터 이름을 알아보기 쉽게 바꿀 수 있다.

    const [fruit1, fruit2, fruit3, fruit4] = fruits
        // fruit1 = 사과
        // fruit2 = 바나나
        // fruit3 = 포도
        // fruit4 = 오렌지

인덱스의 값으로 설정되니 배열은 객체와다르게 처음부터 이름을 바꿔 설정 할 수 있다. 그렇게 만약 fruits 배열에는 현재 4개의 값을 가지고 있는데 추가로 fruit5 를 추가한다면 어떻게 될까?
답은 undefined 가 나올 것이다. 그 이유는 원본배열에는 4개의 값만 있을 뿐, index[4] 에 대한 값은 없기때문에 당연히 undefined 가 출력되는 것이다.