[JS] 비 구조화 할당(구조분해 할당)

 

구조분해 할당

구조분해할당은 배열이나 객체에서 원하는 값을 더 빠르고 쉽게 뽑아내는 방법이다.

 

 

 

배열의 비구조화 할당

 

예시를 만들어서 활용해보자.

간단한 배열을 하나 만들고 각각의 인덱스로 할당하였다.

하지만 이렇게 각각의 변수에 할당하려니, arr이라는 반복적인 코드를 

써야한다는 단점이있다.

짧고 가독성 있는 코드를 적기위해서 arr 세글자도 줄여보도록하자.

    let arr = ['one', 'two', 'three'];

    let one = arr[0]
    let two = arr[1]
    let three = arr[2]

    console.log(one, two, three)

매우 간단해졌다. 

배열안에 변수를 3개를 선언하게되고 오른쪽엔 배열을 할당하게 되면

arr이라는 0번째 인덱스는 one 1번째는 two 2번째는 three에 할당해라 

하는 뜻이된다.

    let arr = ['one', 'two', 'three'];

    let [one, two, three] = arr;

    console.log(one, two, three)

이렇게 대괄호를 이용해서 배열의 값을 순서대로 할당 받아서 사용할 수 있는 방법을

배열의 비구조화 할당이라고 한다. (배열의 기본변수 비구조화 할당)

 

코드를 더 단축 시켜보면,

배열을 선언자체에서 분리한다고 해서

배열의 선언분리 비구조화 할당이라고 한다. (명칭을 정확하게 알지못해도 되지만 배열을 비구조화해서 할당할 수 있는

여러가지 방법이있다는 것만 알아두면 좋다.)

    let [one, two, three] = ['one', 'two', 'three']

    console.log(one, two, three)

그럼 배열에 마지막 요소에 4번째 아이템을 할당받고 싶을땐 어떻게 해야할까?

 let [one, two, three, four] = ['one', 'two', 'three']

 console.log(one, two, three, four) //one two three undefined

마지막 four 에는 undefined가 뜨게 된다. four라는 변수는 할당 받지 못했기 때문이다.

 

그럼 변수에 기본값을 설정해보자.

    let [one, two, three, four = "four"] = ['one', 'two', 'three']

    console.log(one, two, three, four) //one two three four

값이 잘 출력된다.

 

배열의 비구조화 할당을 이용하면 두개의 변수를 바꾸는

스왑에 활용할 수 있다.

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b) //20 10

두개의 변수가 잘 스왑된걸 볼 수 있다.

의미는 오른쪽에 b와 a를 가지고 있는 배열을 하나만들고,

[a , b] = [b ,  a]

a에는 오른쪽 값인 b가 할당되고 b에는 오른쪽 a의 인덱스가 할당되는것이다.

 

 

 

객체의 비구조화 할당

 

    let object = { one: 'one', two: "two", three: "three" }

    let one = object.one
    let two = object.two
    let three = object.three

    console.log(one, two, three)

간단한 객체를 만들어보았다.

여기서도 마찬가지로 배열처럼 object가 반복되는것을 볼 수 있다.

이런 반복노동을 비구조화할당을 활용해서 줄여주면 좋다.

 

    let object = { one: 'one', two: "two", three: "three" }

    let { one, two, three } = object
    console.log(one, two, three)

간단~ 

 

만약에 여기서 우리가 object 객체안에 프로퍼티 이름을 다른이름을 변경하고 싶을 땐,

아래처럼 콜론 기호를 넣어주고 뒤에 변경할 변수이름을 적어주면 된다.

객체 비구조화 할당에서도 배열처럼 기본값설정도 가능하다.!

    let object = { one: 'one', two: "two", three: "three" }

    let { one : oneOne, two, three } = object
    console.log(one, two, three)

 

 

 

결론
객체의 비구조화 할당은 index기준이 아닌 key값을 활용하는 것
배열의 비구조화 할당은 index를 활용하는 것