[Javascript] 구조 분해 할당

 

ES6 의 구조 분해 할당 (Destructing Assignment) 방법에 대해 공부하고 기록하자

---

 

 

 

 

구조 분해 할당(Destructuring assignment)

 

배열이나 객체의 속성을 해체해 그 값을 각각의 변수에 담을 수 있게 하는 JavaScript 표현식이다

 

 

하나하나 할당해줘야 할 수 있었던 부분들을 한 번에 해결하며 코드의 양을 줄여줄 수 있다.

 

 

// 기존 할당 방법
var list = [1,2,3];
var v1 = list[0];
var v2 = list[1];
var v3 = list[2];

// 객체 분해할당 방법
var [v1,v2,v3] = list;

 

 

 

 

 

배열 객체분해 할당

 

양쪽 모두 배열 형식으로 지정해야하고 인덱스를 기준으로 값을 할당한다.

 

//basic
let one,two;
[one,two] = [100,200];

// no assignment
let a,b,c;
[a,b,c] = [100,200];
// c => undefined

// default value - 할당이 안되면 기본값으로 대체함
let aa,bb,cc;
[aa,bb,cc="hi"] = ["hell", "hello"];
console.log(aa,bb,cc); // hell hello hi

let [,,n] = [10,20,30];
console.log(n) // n = 30;

// rest
let arr = [1,2,3,4,5,6];
let [a,b,...rest] = arr;
console.log(b); // 2
console.log(rest); // [3,4,5,6]

//exchange : 기존처럼 temp 변수 필요없음
let x = 5;
let y = 3;
[y,x] = [x,y];

 

 

 

Object 객체분해 할당

 

Key 를 기준으로 값을 할당하며 Key에 맞는 이름으로 내부 변수를 선언하지 않으면 컴파일러가 인식하지 못한다.

 

 

let a,b;
({a,b} = {a:100,b:100});

let {a2,b2} = {a2:100,b2:100};

let {a3,b3} = {a3:"hi",c3:"hello"}; // b3 = undefined


let myObj = {
  name: "김갑환",
  age: 25,
};

let {name, age} = myObj; // OK

let {age, sex} = myObj;  // age = 25 , sex = undefined

let {name: username, age: userage} = myObj; // username: 김갑환, userage : 25

 

 

 

함수 객체분해 할당

 

호출받는 함수의 파라미터를 객체 분해할당 형태로 하여 함수에서 사용할 수 있다.

 

 

// 객체 파라미터
function f1({x,y}) {
	console.log(x,y);
}

f1({x:100,y:200});

// 배열 파라미터
function f2([x,y]) {
	console.log(x,y);
}
f2(['H','I']);

// 배열 리턴
function f3() {
  return [1, 2];
}
let [v1,v2] = f3();

// 객체 리턴
function f4() {
	return {name:"김갑환", age:25};
}
let {name,age} = f4();

// 반환값 무시
function f5() {
  return [1, 2, 3];
}
let[,a,] = f5(); // a = 2;
let[b] = f5(); // b = 1;

 

 

 

 

 

 

 

 

Ref

 

[JavaScript] 구조 분해 / 비구조화 할당 (Destructuring assignment)