[JavaScript] 구조 분해 할당(Destructuring Assignment)

구조 분해 할당(Destructuring Assignment)

 

구조 분해 할당은 Object 객체 또는 Array 객체의 요소를 해체하여 요소값을 개별적인 변수에 저장하여 제공하기 위한 기능이다.

 

---

배열 분해 할당(Array Destructuring)

 

배열 분해 할당은 배열의 요소를 변수에 할당하는 것이다.
[ ] 대괄호를 사용하여 할당할 변수를 지정하고, 할당할 배열을 대상으로 분해한다.

 

 

구조분해할당 문법을 이용하지 않은 경우

var array=["홍길동","임꺽정","전우치"];

var one=array[0];
var two=array[1];
var three=array[2];
	
alert("one = "+one+", two = "+two+",  three = "+three); //one = 홍길동, two = 임꺽정,  three = 전우치

---

 

구조분해할당을 사용하여 Array 객체의 요소값을 차례대로 제공받아 변수에 저장할 수 있다.

형식) var [변수명,변수명,...] = Array객체

---

구조 분해 할당을 이용해 Array 객체가 가지고 있는 요소값들을 변수에 한번에 저장할 수 있다.

var array=["홍길동","임꺽정","전우치"];

var [one, two, three] = array;
alert("one = "+one+", two = "+two+",  three = "+three); //one = 홍길동, two = 임꺽정,  three = 전우치

---

처음부터 구조 분해 할당을 할 수  있다.

var [one, two, three] = ["홍길동","임꺽정","전우치"];
alert("one = "+one+", two = "+two+",  three = "+three);//one = 홍길동, two = 임꺽정,  three = 전우치

---

Array 객체를 분리 할당할 경우 할당 받을 값이 없을 때 변수에 저장될 기본값 설정이 가능하다.

var [one, two, three="일지매"] = ["홍길동","임꺽정","전우치"];
alert("one = "+one+", two = "+two+",  three = "+three);//one = 홍길동, two = 임꺽정,  three = 전우치

var [one, two, three="일지매"] = ["홍길동","임꺽정"];
alert("one = "+one+", two = "+two+",  three = "+three);//one = 홍길동, two = 임꺽정,  three = 일지매

---

함수 선언시 매개변수에 전달된 값이 없는 경우 매개변수에 저장된 기본값 설정이 가능하다.

function sum(num1=10, num2=20) {
	return num1+num2;
}
	
alert("합계 = "+sum());//합계 = 30
alert("합계 = "+sum(100));//합계 = 120
alert("합계 = "+sum(100,200));//합계 = 300

---

구조 분해 할당을 통해 두 변수에 저장된 값을 바꾸어 저장할 수 있다.

var [num1, num2] = [10, 20];
alert("num1 = "+num1+", num2 = "+num2);//num1 = 10, num2 = 20
	
[num1, num2] = [num2, num1];
alert("num1 = "+num1+", num2 = "+num2);//num1 = 20, num2 = 10

---

Array 객체를 반환받아 변수에 저장할 수 있다.

function returnArray() {
	return [10, 20, 30]; //Array 객체 반환 
}
	
//Array 객체를 반환받아 변수에 저장 
var array=returnArray(); 
alert(array[0]+", "+array[1]+", "+array[2]); //10, 20, 30

 

Array 객체를 반환받아 Array 객체의 요소값을 변수에 저장할 수 있다.

var [num1, num2, num3] = returnArray();
alert(num1+", "+num2+", "+num3); //10, 20, 30

---

Array 객체를 반환받아 Array 객체의 요소값 중 필요하지 않은 반환 값은 무시하고 필요한 값만 변수에 저장할 수 있다. 

function returnArray() {
	return [10, 20, 30]; //Array 객체 반환 
}

var [num1, ,num3] = returnArray();
alert(num1+", "+num3); //10, 30

---

... 연산자(전개연산자)를 사용하여 할당된 나머지 요소값들을 Array 객체로 전달받아 저장할 수 있다.

function returnArray() {
	return [10, 20, 30]; //Array 객체 반환 
}

var [num1, ... num2] = returnArray();
alert("num1 = "+num1);//num1 = 10
alert("num2 = "+num2);//num2 = 20,30

 

---

객체 분해 할당(Object Destructuring)

 

객체 분해 할당은 객체의 속성을 변수에 할당하는 것이다.
{ } 중괄호를 사용하여 할당할 변수를 지정하고, 할당할 객체를 대상으로 분해한다.

 

 

Object 객체를 생성하여 변수에 저장 

 

var student = {"num":1000, "name":"홍길동"};
alert("학번 ="+student.num+", 이름 = "+student.name);//학번 =1000, 이름 = 홍길동

 

Object 객체의 요소값을 구조 분해하여 개별적인 변수에 저장할 수 있다.

→ 변수의 이름이 반드시 요소명과 동일하게 생성되도록 작성해야 한다.

var student = {"num":1000, "name":"홍길동"};

var {num, name} = student;
alert("학번 = "+num+", 이름 = "+name);//학번 =1000, 이름 = 홍길동

 

변수의 이름이 요소명과 일치하지 않으면 에러가 발생한다.

var student = {"num":1000, "name":"홍길동"};

var {number, name} = student;
alert("학번 ="+number+", 이름 = "+name);//에러 발생

 

변수의 이름을 요소명과 다르게 설정하여 사용할 수 있다.

var student = {"num":1000, "name":"홍길동"};

var {num:number, name:irum} = student;
alert("학번 ="+number+", 이름 = "+irum); //학번 =1000, 이름 = 홍길동

 

var {num:number, name:irum} = {num:1000, name:"홍길동"};
alert("학번 = "+number+", 이름 = "+irum);

 

---

JSON을 이용하여 객체 배열 생성 

 

var people=[{"name":"홍길동","subject":"Java","grade":"초급"}
	,{"name":"임꺽정","subject":"JSP","grade":"중급"}
	,{"name":"전우치","subject":"SPRING","grade":"고급"}];

 

출력

 

1) for 구문 이용해 출력 

for(i=0;i<people.length;i++) {
	alert("이름 = "+people[i].name+", 과목명 = "+people[i].subject+", 등급 = "+people[i].grade);
}

//이름 = 홍길동, 과목명 = Java, 등급 = 초급
//이름 = 임꺽정, 과목명 = JSP, 등급 = 중급
//이름 = 전우치, 과목명 = SPRING, 등급 = 고급

 

2) for 구문에서 of 연산자를 사용하여 Array 객체의 요소값(Object 객체)를 하나씩 제공받아 반복처리

for(object of people) {
	alert("이름 = "+object.name+", 과목명 = "+object.subject+", 등급 = "+object.grade);
}

//이름 = 홍길동, 과목명 = Java, 등급 = 초급
//이름 = 임꺽정, 과목명 = JSP, 등급 = 중급
//이름 = 전우치, 과목명 = SPRING, 등급 = 고급

 

 

Array 객체의 요소값(Object 객체)를 구조 분해하여 변수에 저장할 수 있다.

 

 

1) Object 객체의 요소명과 변수명을 동일하게 작성 

for({name, subject, grade} of people) {
	alert("이름 = "+name+", 과목명 = "+subject+", 등급 = "+grade);
}

 

2) 변수명 변경해서 작성 

for({name:irum, subject:name, grade} of people) {
	alert("이름 = "+irum+", 과목명 = "+name+", 등급 = "+grade);
}

 

---

 

매개변수로 Object 객체를 전달받아 요소값을 구조 분해하여 변수에 저장할 수 있다. 

 

1)

function display({num, name}) {
	alert("학번 = "+num+", 이름 = "+name);
}

var student = {"num":1000, "name":"홍길동"};
display(student); //학번 = 1000, 이름 = 홍길동

 

2)

function display({num, name}) {
	alert("학번 = "+num+", 이름 = "+name);
}

display({"num":1000, "name":"홍길동"}); //학번 = 1000, 이름 = 홍길동