[Javascript ES6] 기초 문법 12. Destructuring

 

 

 

 

 

Destructuring

 

 

 

array Destructuring은 여러개의 변수에 한번에 값을 저장할 때 사용한다. a,b,c 세개의 변수에 각각 2,3,4라는 값을 한번에 집어넣고 싶다면, 양옆을 배열 형태로 맞추어 값을 넣어주면 된다. 값을 전달받지 못했을 때 사용할 default 값도 = 등호를 사용하여 만들어 줄 수 있다.

<script>  

    var [a,b,c] = [2,3,4];
    console.log(a,b,c)

    let [d,e,f=10] = [5,6];
    console.log(d,e,f)   


</script>

결과

 

 

Object 객체에도 같은 방식을 통해 값을 할당해 줄 수 있다. = 등호를 중심으로, 양 옆의 모양과 변수명을 맞추어주면 된다.

name에는 'chali'가, age 에는 24가 들어가게 된다. 마찬가지로 default값을 줄 수도 있다.

<script>  

    let {name, age=24} = {name:'chali'}

    console.log(name)
    console.log(age)  

</script>

결과

 

변수를 오브젝트 객체에 할당할 때, 만일 key이름과 value의 이름이 똑같다면 아래와 같은 방법으로 사용할 수 있다. 하단의 두 코드는 같은 내용이다.

<script>  

let name = 'Kim';
let age = 30;

let obj = { name : name, age : age }
console.log(obj)

</script>

let name = 'Kim';
let age = 30;

let obj = { name, age }

같은 결과를 도출한다.

 

함수의 파라미터로 object나 array를 전달할 수도 있다. 

<script>  

let obj = {name:'chali', age:24}

function 함수({name,age}){
    console.log('name: ',name)
    console.log('age: ',age)
}

함수({name:'kim',age:30})

</script>

결과

<script>  

function 함수([name,age]){
    console.log('name: ',name)
    console.log('age: ',age)
}

함수(['chali',24])

</script>

결과