ECMA Script - spread연산자

rest 파라미터

다양한 전개연산자 사용의 차이를 보자 

• 자바의 가변인자와 동일한 기능을한다.
• spread연산자 라고 불린다.

초과되는 매개변수를 배열로 받는 전개연산자 1

<script type="text/javascript">
	const array1= [1,2,3,...[10,11,12]];
	const array2= [1,2,3,[10,11,12]];
	
	console.log(array1);	//1,2,3,10,11,12
	console.log(array2);	//1,2,3,[10,11,12]
	
	for(let i = 0; i<array1.length; i++){
		console.log(array1[i])
		
	}
	for(let i = 0; i<array2.length; i++){
		console.log(array2[i])	//1,2,3,[10,11,12]
		
	}
</script>

초과되는 매개변수를 배열로 받는 전개연산자 2

array로 묶여 들어간다.

<script type="text/javascript">
	function aaa(...n){
		console.log("aaa()===",n);
	}
	aaa(1);
	aaa(10,20,30);
	aaa(9,8,7,6,5,4,3,2,1);	
</script>

초과되는 매개변수를 배열로 받는 전개연산자 3

지정된 매개변수 x,y에 첫번째 값, 두번째 값이 할당되어 들어가고 나머지에는 스프레드 연산자 n에 배열의 형태로 들어가게 된다.

<script type="text/javascript">
	function aaa(x,y,...n){	//지정된 매개변수에 모두 할당되고나면 나머지는 ...n연산자에 들어간다
		console.log("aaa()=== x = ",x," y = ",y," [] n = ",n);
	}
	aaa(1);
	aaa(10,20,30);
	aaa(9,8,7,6,5,4,3,2,1);	
</script>

초과되는 매개변수를 배열로 받는 전개연산자 4

스프레드 연산자 xxx에 매개변수들이 배열형태로 들어가며,
for each문을 통해 각각의 값을 출력하는 예제이다.

<script type="text/javascript">
	function aaa(...xxx){
		for(let i in xxx){
			console.log(xxx[i]);
		}
	}
	aaa(10);
	aaa(1,2,3);
</script>

객체로 받는 전개연산자 1

<script type="text/javascript">
	var obj1 = {foo:"bar",x:42};
	var obj2 = {name:"baz",y:13};
	var cloneObj = {...obj1};	
	var mergedObj={...obj1,...obj2};	// obj1과 obj2에 있는 내용들이 풀어서 들어가게 된다. 
	console.log(cloneObj);	// foo:"bar", x:42
	console.log(mergedObj); // foo:"bar", x:42, name:"baz", y:13
	
</script>

풀어서 들어가는 전개연산자

<script type="text/javascript">
	const n = [1,2,3,[4,5,6]];
	console.log(n.length);	// 4
	const n2 = [1,2,3,...[10,11,12]];	//[10,11,12]내용이 펼쳐서 들어간다. 
	console.log(n2.length);	// 6
	
</script>

배열을 복사 및 배열을 합치는 전개연산자

<script type="text/javascript">
	const array = [1,2,3];
	const copied_array = [...array];	//[1,2,3]
	
	const array_2 = [4,5,6];
	const merged_array = [...array,...array_2];
	console.log(merged_array);		//[1,2,3,4,5,6]
</script>

unpacking하는 unspread 연산자

<script type="text/javascript">
  function aaa(x,y,z){
    console.log(x+y+z)
  }
  const n = [10,20,30];
  aaa(n);     	// [10,20,30]이 x에 들어감
  aaa(...n);    // 10,20,30이 풀어서 각각 x,y,z에 
</script>

...n은 배열이 풀어서 각각 매개변수에 매칭된다.