목차
스프레드 문법
- spread 문법이 뭔가요?
- 어떤 상황에서 사용할 수 있죠?
스프레드 문법
1. spread 문법이 뭔가요?
spread 문법: 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬- ES6에서 도입된 문법
- 대상을 개별 요소로 분리
- 스프레드 문법을 사용할 수 있는 대상 : Array, String, Set, Dom 컬렉션, arguments와 같이 for …of 문으로 순회할 수 있는 이터러블에 한정
스프레드 문법의 결과는 값이 아니므로 이 결과는 변수에 할당할 수 없음
배열 - 배열 안의 요소들이 전개됨
문자열 - 문자열의 문자들이 쪼개져서 전개됨1 2 3 4 5 6 7
const fruits = ["apple", "banana", "kiwi"]; const numbers = [1, 2, 3, 4, 5]; const str = "market"; console.log(...fruits); // apple banana kiwi console.log(...numbers); // 1 2 3 4 5 console.log(str); // market console.log(...str); // m a r k e t
key : value 형태의 한 쌍 단위의 객체 전개도 가능함
1 2 3
const transport = [{ bus: 4123, walk: 9123, subway: 912 }]; console.log(...transport); // {bus: 4123, walk: 9123, subway: 912} console.log(transport); // [{...}] > {bus: 4123, walk: 9123, subway: 912}
*이터러블 : 반복가능한 객체
Rest 파라미터(= 나머지 매개변수)- Rest 파라미터 구문은 구조 분해 할당 문법과 같이 사용하면 나머지 (객체, 배열)을 rest에 담아서 추출할 수 있음
- 함수에서 정해지지 않은 수의 매개변수를 배열로 받을 수 있음
- 객체, 배열, 함수의 매개변수에서 사용 가능
객체에서의 rest
1 2 3 4 5 6 7 8 9 10 11 12 13
// Rest 사용 예) 객체의 경우 1 const a = { one: '하나', two: '둘' three: '셋' } const { three, ...rest } = a; console.log(three); // '셋' console.log(rest); // { one:'하나', two:'둘' } // rest 안에는 three 값을 제외한 값이 들어있다.
배열에서의 rest
1 2 3 4 5
// Rest 사용 예) 배열의 경우 1 const a = [1, 2, 3]; const [one, ...rest] = a; console.log(one); // 1 console.log(rest); // [2, 3]
함수에서의 rest : 함수의 매개변수가 몇 개가 될 지 모르는 상황에서 사용하면 유용함
1 2 3 4 5 6
// Rest 사용 예) 함수 파라미터 1 function sum(...rest) { return rest; } const result = sum(1, 2, 3); console.log(result); // [1, 2, 3]
Spread 문법 vs Rest 파라미터
- 문법적으로는 같아보일 수 있으나 정반대의 기능을 수행함
- 스프레드 연산자는 인수에 사용 / Rest 파라미터는 매개 변수(변수 선언)에 사용
- 요소를 하나씩 모두 전개 시킬 때 : Spread
나머지 요소를 묶을 때 : rest
1 2 3 4
Math.max(...numbers); // 스프레드 연산자 : 함수 호출의 인수 const max = (...values) => { /* 본문 */ }; // 매개변수의 나머지 변수 선언
2. 어떤 상황에서 사용할 수 있죠?
상태의 불변성을 유지하기 위해 사용됨(기존에 메모리에 담겨있던 값이 다시 변경되지 않는 것 => 상태 변화를 빠르게 탐지할 수 있음)
=>기존의 것은 건들이지 않고 새로운 객체를 만들 때 사용1 2 3 4
const obj1 = { name: "John", age: "20", flag: "true", foo: "bar" }; const newObj = { ...obj1, name: "Alice" }; // { name: 'Alice', age: '20', flag: 'true', foo: 'bar' } console.log(obj1 === newObj); // false
함수 호출문의 인수 목록 : 요소들의 목록을 함수의 인수로 전달하고 싶은 경우
1 2 3 4 5 6
var arr = [1, 2, 3]; //기존 var max = Math.max.apply(null, arr); //3 //스프레드 문법 var max = Math.max(...arr); // 3
- 배열 리터럴의 요소 목록 : 배열 병합, 배열 복사, 이터러블을 배열로 변환(사용 예시 참고)
객체 리터럴의 프로퍼티 목록 : Object.assign 메서드를 사용하여 여러 개의 객체를 병합하거나 특정 프로퍼티를 변경 또는 추가
-> 스프레드 문법을 활용하면 간단하게 해결됨1 2 3 4 5 6 7
//Object.assign const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 }); console.log(merged); // {x:1, y:10, z:3}; //스프레드 문법 const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } }; console.log(merged); // {x:1, y:10, z:3};
**사용 예시
배열 병합
- 기존 : concat 메서드를 이용해 병합
현재 : spread 연산자를 이용 -> 다양한 형태의 배열 병합을 비교적 간단하게 할 수 있음
1 2 3 4 5 6 7 8 9 10 11 12 13
// 기존 방식 var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr = arr1.concat(arr2); console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] // ES6 spread operator var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr = [...arr1, ...arr2]; console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]
배열 복사
- 기존 : slice 또는 map 을 이용하여 배열 복사
현재 : 얕은 복사로 복사된 배열 생성 가능(배열 안에 객체가 있는 경우 : 객체 자체의 복사X -> 원본 값 참조
=> 원본 배열 내의 객체를 변경하는 경우, 새로운 배열 내의 객체 값도 변경됨)1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
// 기존 - ES5 map var arr1 = ["철수", "영희"]; var arr2 = arr1.map((item) => item); arr2.push("바둑이"); console.log(arr2); // [ "철수", "영희", "바둑이" ] // 원본 배열은 변경되지 않습니다. console.log(arr1); // [ "철수", "영희" ] //현재 - ES6 spread operator var arr1 = ["철수", "영희"]; var arr2 = [...arr1]; arr2.push("바둑이"); console.log(arr2); // [ "철수", "영희", "바둑이" ] // 원본 배열은 변경되지 않습니다. console.log(arr1); // [ "철수", "영희" ]
총 정리
스프레드 문법
- 1. spread 문법이 뭔가요?
- 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듬
- 2. 어떤 상황에서 사용할 수 있죠?
- 기존의 것은 건들이지 않고 새로운 객체를 만들 때 사용
출처