JavaScript - destructuting (구조분해할당)

구조분해할당(Destructuring Assignment)
구조분해할당 : Array 객체(배열)이나 Object 객체의 요소를 해체하여 요소값을 개별적인 변수에 저장하여 제공하기 위한 기능 - ES6

일반적인 경우: 인덱스를 통해 값을 반환하여 저장

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

Array 객체의 요소값을 각각의 변수에 차례대로 전달되어 저장가능

var array=["홍길동","임꺽정","전우치"];
	var [one,two,three]=array;
	alert(one+", "+two+", "+three); //배열로부터 전달된 값 정상 출력 

Array 객체 직접 생성하여 변수에 분리 할당 가능

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

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

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

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

	function sum(num1=10, num2=20) {
		return num1+num2;
	}
	//alert("합계 = "+sum()); // 기본값 10 , 20 으로 연산처리
	//alert("합계 = "+sum(100));  // 기본값 20을 포함하여 연산처리
	//alert("합계 = "+sum(100,200)); //제공한 값으로만 연산

두 변수의 값을 서로 치환하여 저장

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 객체 반환
  //var array=returnArray();
	//alert(array[0]+","+array[1]+","+array[2]);//10,20,30
	}

반환되는 Array 객체의 요소값을 구조 분해하여 각각의 변수에 개별 저장

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

반환되는 Array 객체의 요소값을 구조 분해하여 필요한 값만 전달받아 저장

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

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

var [num1, ...num2]=returnArray();
	alert(num1);//10
	alert(num2);//20,30 - Array 객체

Object 객체를 생성하여 객체변수에 저장 ✔공통사항

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

Object 객체의 요소값을 구조 분해하여 개별적인 변수에 저장
> 변수의 이름이 반드시 요소의 이름과 동일하게 생성

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

변수의 이름을 요소의 이름과 다르게 설정하여 저장 가능

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

Object 객체를 생성하여 구조 분해 할당 가능

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

var people=[
		{name:"홍길동",subject:{name:"Java",grade:"초급"}}
		,{name:"임꺽정",subject:{name:"JSP",grade:"중급"}}
		,{name:"전우치",subject:{name:"Spring",grade:"고급"}}
	];
	
	/*
	for(i=0;i<people.length;i++) {
		alert("이름 = "+people[i].name+", 과목명 = "
				+people[i].subject.name+", 등급 = "+people[i].subject.grade);
	}
	*/
	
	/*
	//for 구문에 of 연산자를 사용하여 Array 객체의 요소값을 하나씩 제공받아 반복 처리 가능
	//형식)for(변수명 of 객체) { 명령; ... }
	for({name:irum,subject:{name,grade}} of people) {
		alert("이름 = "+irum+", 과목명 = "+name+", 등급 = "+grade);
	}
	*/
	
	
	//매개변수로 Object 객체를 전달받아 요소값을 구조 분해하여 개별적인 변수에 저장
	function display({num,name}) {
		alert("학번 = "+num+", 이름 = "+name);
	}
	
	/*
	var student={num:1000, name:"홍길동"};
	display(student);
	*/
	
	display({num:2000, name:"임꺽정"});
	</script>