JS중급_spread operator

▶️ spread operator

	var array = ['hello','world'];
	console.log(array);
	console.log(...array);

spread operator는 괄호를 제거해주는 연산자이다. 3번째 줄처럼 ...을 붙여서 출력해주면 괄호가 제거된 'hello','world'만 콘솔창에 출력된다.

	var Hi = 'hello';
	console.log(...Hi);//['h','e','l','l','o']
	console.log(Hi[0]);//h
	console.log(Hi[1]);//e

문자열에도 똑같이 적용할 수 있다.

---

▶️ spread operator의 활용1 - array합치기

	var a = [1,2,3];
	var b = [4,5];
	var c = [...a, ...b]; //[1,2,3,4,5]
	var d = a // [1,2,3] a값 변경시 d의 값도 변경
    var e = [...a] // [1,2,3] a값 변경되도 영향 없음

• 어레이를 합치거나, 복사가 가능하다.
• 등호로 복사를 하면 값을 '공유'하므로 위의 경우 a를 수정하면 d도 값이 바뀐다. 하지만 e처럼 spread operator를 이용하면 버그가 일어나지 않는다.

---

▶️ spread operator의 활용2 - object합치기

	var o1 = {a : 1, b : 2};
	var o2 = {c : 3, ...o1};
	console.log(o2);

array처럼 object도 비슷한 방식으로 합칠 수 있다.

	var o1 = {a : 1, b : 2};
	var o2 = {a : 3, ...o1};
	console.log(o2); // { a:1, b:2 }

키값에 중복이 발생하면 무조건 뒤에 추가된 a가 적용된다.

• spread operator 연산자는 함수 소괄호, 오브젝트 중괄호 내, 배열의 대괄호 내에서 사용하여야 한다.

---

▶️ spread operator의 활용3 - array를 파라미터로

	function add(a,b,c){
    	console.log(a+b+c);
    }

	var array = [10,20,30];
	add(...array);

spread operator를 사용하면 이렇게 함수안의 파라미터로 배열을 넣어줄수도 있다.

---