[JavaScript] 배열 디스트럭처링(Destructuring) - 구조 분해 할당
배열이나 오브젝트에 있는 자료들을 변수로 꺼내고 싶으면 어떻게 할까요?
var a = arr[0];
이런식으로 하나하나 뽑아오면 되겠죠.
하지만, 한 두개면 모르겠는데 다수의 값을 변수로 만들려면 위와 같은 방법으로는 코드가 매우 길어집니다.
그럴 때 Destructuring 문법을 사용하면 변수를 쉽게 만들 수 있습니다.
배열 방식
var arr = [2,3,4]; // 이 arr안에 있는 2,3,4를 각각 새로운 변수에 담아주고 싶을 경우,
// 기본 방법
var a = arr[0];
var b = arr[1];
var c = arr[2];
// destructuring 방법
var [a, b, c] = [2, 3, 4];
위와같이 변수명에도 배열형식으로 지정하여 각 위치에 맞게 값을 담아줄 수 있습니다.
이번에는 Destructuring 문법을 사용하면서 모든 값을 가져오는 것이 아닌 일부의 값만 가져올 경우입니다.
// 예제1
var arr = [2, 3];
var [a, b, c=10] = arr; // 순서대로 가져오며 c의 경우에는 입력값이 없으며 등호를 사용하여 10의 값 입력
console.log(a,b,c); // 2 3 10
// 예제2
var arr2 = [2,3];
var [a, b=10, c] = arr2;
console.log(a,b,c); // 2, 3, undefined
예제1에서처럼 선언한 변수의 순서대로 입력을 받게 되며 c의 경우에는 아무런 값이 들어가지 않았으므로 undefined가 나오겠지만 c의 값에 10을 등호로 넣었기 때문에 c의값은 10이 되었습니다.
예제2 에서 b값에 10을 넣었을 경우에는 뒤에 3이라는 값을 덮어 쓰게 되므로 b의 값은 10이 아니라 3이 되게 됩니다. 또한 c의값에는 아무런 값이 입력되지 않았으므로 undefined가 됩니다.
오브젝트 방식
// 일반적인 방식
var obj = {name : 'kim', age : 30};
var name = obj.name;
var age = obj.age;
// Destructuring 방식1
var {name, age, city = 'seoul'} = {name : 'kim', age : 30};
console.log(name, age, city); // kim, 30 , seoul
오브젝트 또한 배열과 같이 위치에 맞게 오브젝트로 둘러쌓인 괄호안에 변수명을 입력해주면 오브젝트의 키와 일치하는 변수명 안에 값이 입력되게 됩니다.
오브젝트 Destructuring에서 주의해야 할 점은, 변수명과 오브젝트의 키 네임을 똑같이 쓰셔야 합니다.
name이라는 키 명과 name이라는 변수가 맞아야 값이 입력되므로, 오브젝트에서는 변수 선언의 순서와는 상관이 없습니다.
또한 배열때와 마찬가지로 city = 'seoul' 과 같이 등호를 사용하여 기본값을 지정해둘 수 있습니다.
이 오브젝트 Destructuring방식으로 변수를 생성하게 되면 오브젝트의 키네임과 변수명이 일치해야 하므로 기존의 변수와 충돌하는 등의 문제가 생길 수 있습니다. 혹은 변수명을 다른것으로 지정하고 싶을 때도 있습니다.
이럴 때 변수명을 바꿔주는 방법이 있습니다.
// Destructuring 방식2
var {name : newname, age : newage} = {name : 'kim', age : 30, city : 'seoul'};
// 변수를 선언하면서 키네임과 일치하는 변수명이 아닌 다른 변수명을 입력하고 싶다면 name : 새로운변수명
// 의 방법으로 만들 수 있습니다.
console.log(newname, newage); // kim 30
var {name : 새로운변수명} = {name : 'kim'};
과 같은 방법을 사용하면 새로운변수명에 'kim'이라는 값이 적용됩니다.
또한 name : newname = 'park' 와 같이 오브젝트의 name이라는 키네임이 존재하지 않거나 값이 없다면 newname에 'park'라는 값을 넣어주는 기본값 설정도 할 수 있습니다.
다수의 변수들을 object에 집어넣고 싶을 경우
오브젝트에서 변수로 꺼내는 방법 외에 변수들의 값을 오브젝트 안에 넣는 방법또한 있습니다.
var name = 'kim';
var age = 30;
var obj = {name : name, age : age}; // 오브젝트 name에 변수명 name을 대입
var obj = {name, age}; // 바로 위와 같은 의미로, 오브젝트의 키네임과 변수명이 같을 경우 축약 가능하다
console.log(obj); // {name:'kim', age:30};
함수의 파라미터를 넣을때
함수의 파라미터값을 대입할때도 Destructuring문법을 사용할 수 있습니다.
var obj = {name : 'kim', age : 30};
function fc(params){
console.log(params);
}
fc(obj); // { name: 'kim', age: 30 }
fc(obj.name); // kim
fc({name:'kim', age:30}); // { name: 'kim', age: 30 }