1. 전개 구문 Spread_syntax란?
ES6에서 도입이 되었으며 사용은 ...로 사용한다.
Spread_syntax, 한글로는 전개 구문이라 통칭한다.
전개 구문을 사용하면 배열이나 문자열과 같은 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소 (배열 리터널의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.
확장이 가능한 점에서 이전에 사용되었던 apply(), push(), concat()등을 포함한 메서드 조합을 대체하여 간결하게 사용한다.
!! 정리 !!
- spread_syntax 는 점 세개로 사용
... - 배열이나 문자열과 같이 반복이 가능한 인수 또는 요소에 사용
- 이전에 배열를 다룰때 사용한 함수들을 대체
iterable object(반복 가능한 객체)는
for...of구문과 함께 ES2015에 도입
iterable 객체를 만들어내는 생성자는String,Array,TypedArray,Map, 'Set` 이 있습니다.
1.2 Spread_syntax or Spread_operator?
Spread_Syntax를 인터넷에서 찾아보면 심심치않게 Spread_operator라고 불리는 것을 볼 수 있다. 인터넷 상에서는 동음의어처럼 사용되는 걸 볼 수가 있다. 그러나 Spread_operator는 잘못된 말이다. 연산자처럼 ...를 변수 앞에 사용하는 접두사처럼 사용하지만 아래와 같은 이유로 다릅니다.
- 반환 값이 다르다.
- 연산자는 단일 값만 반환해야하지만
...은 배열 또는 iterable 을 반환하기에 반환하는 형태가 완전히 다르다.
- 연산자는 단일 값만 반환해야하지만
- 연산자는 독립적으로 사용이 가능하지만
...은 구문으로 사용한다.1 + 2 = 3에서 연산자는+이다. 연산자는-,*으로 변경이 되어도 변수에 영향을 주지 않습니다....는 구문이 빠지면 오류가 나거나 원치 않는 결과가 나온다.
2. 전개 구문(spread_syntax)를 사용하는 이유
전개 구문은 코드를 간결하게 만들고 가독성을 높이는데 기여한다. 기존의 메서드들을 대체하여 더욱 효율적은 코드 작성한다.
Spread_syntax 사용하는 각각의 요소
- 배열 또는 객체의 요소 확장
- 기본의 배열이나 객체를 변경하지 않으면서 새로운 배열이나 객체를 생성한다.
- 함수 호출 시 인수 확장
- 함수를 호출할때 배열이나 객체를 인수로 전달할 수 있다.
- 새로운 배열 또는 객체 생성
- 기존의 배열이나 객체를 기반으로 새로운 배열, 객체를 생성할 수 있다.
- 문자열 분해
- 문자열을 개별 문자로 분해할 수 있다.
- 얕은 복사
- 배열이나 객체를 얕은 복사하여 기존의 배열, 객체를 변경하지 않고 복제본을 만들어 사용하여 순수함수성을 유지할 수 있다.
3. 전개 구문(Spread_syntax) 사용 예시
- 배열 또는 객체의 요소 확장 예시
// 배열의 확장
arr1 = [1, 2, 3]
console.log(...arr1) // 출력 : 1 ,2 3
// 객체의 확장
const obj1 = { foo: "bar", x: 42 };
const obj2 = { bar: "baz", y: 13 };
const mergedObj = { ...obj1, ...obj2 };
// mergedObj = { foo: "bar", x: 42, bar: "baz", y: 13 }- 함수 호출 시 인수 확장
function myFunction(x, y, z) {
console.log(x, y, z);
}
const args = [0, 1, 2];
myFunction(...args); // 출력 : 0, 1, 2- 새로운 배열 또는 객체 생성
const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };
const mergedObj = { x: 41, ...obj1, ...obj2, y: 9 };
// { x: 42, foo: "baz", y: 9 }- 문자열 분해
const hello = "hello"
console.log(...hello) // 'h' 'e' 'l' 'l' 'o'- 얕은 복사
const arr = [1, 2, 3];
const arr2 = [...arr]; // like arr.slice()3.2 배열 매서드 대체
- apply() 예시
// 1. apply()
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction.apply(null, args);
myFunction(...args);
// 2. apply()
var arr = [0, 1, 2];
Math.max.apply(null, arr); // 2
Math.max(...arr); //2- concat() 예시
배열 두 개를 병합하는 예시
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
arr3 = arr1.concat(arr2); // [0, 1, 2, 3, 4, 5]
arr3 = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5]3.3 조건부로 값 배열에 저장
삼항 연산자를 이용하여 조건부로 값을 배열에 저장할 수 있다.
const isSummer = false;
const fruits = ["apple", "banana", ...(isSummer ? ["watermelon"] : [])];
// ['apple', 'banana']
const isSummer = true;
const fruits = ["apple", "banana", ...(isSummer ? ["watermelon"] : [])];
// ['apple', 'banana', 'watermelon']3.4 Object.assign()과 Speard_syntax
Object.assign()과 Speard_syntax는 같은 결과를 도출하지만 과정이 다르다.
const obj1 = { a: 1, b: 2 };
// Object.assign() 사용
const newObj1 = Object.assign(obj1, { b: 3, c: 4 });
console.log(newObj1); // { a: 1, b: 3, c: 4 }
console.log(obj1); // { a: 1, b: 3, c: 4 } (원본 객체 변경)
// 전개 구문 사용
const newObj2 = { ...obj1, b: 3, c: 4 };
console.log(newObj2); // { a: 1, b: 3, c: 4 }
console.log(obj1); // { a: 1, b: 2 } (원본 객체 유지)
- Object.assign()은 얕은 복사를 수행하며 객체를 변경한다. 그 과정에 원본 객체가 변경이 된다.
- Speard_syntax는 기존 객체를 복제하여 새로운 객체를 생성한다. 즉 기존 객체는 변경되지 않는다.
위 예시는 MDN에서 가져왔다 더 자세한 내용은 참조 MDN Spread_syntax 에서 확인하세요
자바스크립트의 공식사이트 : ecma-international.org
공부에 도와줄 사이트 MDN : developer.mozilla.org
참조
