Chapter 35 - 스프레드 문법
ES6 에서 도입된 스프레듬문법은하나로 뭉쳐있는 여러값들의 집합을 펼처서 개별적인 값들의 목록으로 만듦.
Array,String,Map,Set,DOM 컬렉션 (NodeList, HTMLCollection), arguments 와 같이
" for...of"문으로 순회 할 수 있는 이터러블에 한정.
// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]); // 1 2 3
// 문자열은 이터러블이다.
console.log(...'Hello'); // H e l l o
// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3])); // 1 2 3
// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator이터러블 배열을 펼처서 요소들을 "개별적인 값들의 목록 1 2 3으로 만듦."
1 2 3 은 "값이 아니라 값들의 목록"
스프레드 문법이 피연산자를 연산하여 값을 생성하는 연산자가 x === 스프레드 문법의 결과는 변수에 할당 x
// 값이 아님.
const list= ...[1,2,3]; SyntaxError : Unexpected token ...스프레드 문법의 결과물은 값으로 할당 x
다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용
1. 함수 호출문의 인수 목록
2. 배열 리터럴의 요소 목록
3. 객체 리터럴의 프로퍼티 목록
// 1. 함수 호출문의 인수 목록
function myFunction(param1, param2, param3) {
console.log(param1,param2,param3);
}
const args = [1, 2, 3];
myFunction(...args);
console.log(myFunction()); 1 2 3// 2. 배열 리터럴의 요소 목록
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // 출력: [1, 2, 3, 4, 5, 6]
// 3. 객체 리터럴의 프로퍼티 목록
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // 출력: { a: 1, b: 2, c: 3, d: 4 }
35.1 함수 호출문의 인수목록에서 사용하는 경우
요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후 , 이를 함수 인수목록으로 전달해야 하는경우.
const arr = [1, 2, 3];
// 배열 arr의 요소 중에서 최대값을 구하기 위해 Math.max를 사용한다.
const max = Math.max(arr); // -> NaNMath.max 메서드는 매개변수 개수를 확정할 수 없는 가변 인자 함수. 개수가 정해져 있지않은 여러개의 숫자를 인수로 전달받아 인수 중에서 최대값을 반환.
Math.max(1); // -> 1
Math.max(1, 2); // -> 2
Math.max(1, 2, 3); // -> 3
Math.max(); // -> -InfinityMath.max([1,2,3]); // NaN배열을 인수로 전달 받지 못함.
그럼 어떻게해야하나? [1,2,3]을 펼쳐서 값의 목록을 만든다 .(spread)
ES6이전에는 Function.prototype.apply
var arr = [1, 2, 3];
// apply 함수의 2번째 인수(배열)는 apply 함수가 호출하는 함수의 인수 목록이다.
// 따라서 배열이 펼쳐져서 인수로 전달되는 효과가 있다.
var max = Math.max.apply(null, arr); // -> 3const arr = [1,2,3];
const max = Math.max(...arr); // 3Rest 파라미터와 형태가 동일해서 혼동가능.
// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
console.log(rest); // 1, 2, 3 -> [ 1, 2, 3 ]
}
// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
// [1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);//Rest 파라미터 예시코드
function sum(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}
console.log(sum(1, 2, 3, 4)); // 출력: 10
//스프레드 예시 코드
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // 출력: [1, 2, 3, 4, 5, 6]
35.2 배열 리터럴 내부에서 사용하는 경우
ES5시절 방식과 비교
35.2.1 concat
//ES5
const arr=[1,2].concat([3,4]);
console.log(arr); // [1,2,3,4];
//ES6
const arr=[...[1,2],...[3,4]];
console.log(arr); //[1,2,3,4];배열 리터럴만으로 2개의 배열을 1개의 배열로 결합 가능.
35.2.2 splice
// ES5
var arr1 = [1, 4];
var arr2 = [2, 3];
// 세 번째 인수 arr2를 해체하여 전달해야 한다.
// 그렇지 않으면 arr1에 arr2 배열 자체가 추가된다.
arr1.splice(1, 0, arr2);
// 기대한 결과는 [1, [2, 3], 4]가 아니라 [1, 2, 3, 4]다.
console.log(arr1); // [1, [2, 3], 4]// ES6
const arr1 = [1, 4];
const arr2 = [2, 3];
arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]
// 불변성을 지키는 [toSpliced](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced) 메서드
const arr1 = [1, 4];
const arr2 = [2, 3];
const NewArr=arr1.toSpliced(1, 0, ...arr2);
console.log(NewArr); // [1, 2, 3, 4]
console.log(arr1); //[1,4]35.2.3 배열복사
ES5에서 배열을 복사하려면 slice메서드 사용.
// ES5
var origin = [1, 2];
var copy = origin.slice();
console.log(copy); // [1, 2]
console.log(copy === origin); // false// ES6
const origin = [1, 2];
const copy = [...origin];
console.log(copy); // [1, 2]
console.log(copy === origin); // false번외로 객체복사(참조에 의한)
배열비교 또한 "값이 비교 되는 것이 아닌 주소값이 비교되기 때문."(reference타입).
35.2.4 이터러블을 배열로 변환
// ES5
function sum() {
// 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
var args = Array.prototype.slice.call(arguments);
return args.reduce(function (pre, cur) {
return pre + cur;
}, 0);
}
console.log(sum(1, 2, 3)); // 6// ES6
function sum() {
// 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
return [...arguments].reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1, 2, 3)); // 6// Rest 파라미터 args는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 위 예제보다 나은 방법.
const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);
console.log(sum(1, 2, 3)); // 6// 이터러블이 아닌 유사 배열 객체
const arrayLike = {
0: 1,
1: 2,
2: 3,
length: 3
};
const arr = [...arrayLike];
// TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))이터러블이 아닌 유사 배열 객체를 배열로 변경하려면 ES6에 도입된 Array.from 메서드를 사용.
유사 배열 객체 , 이터러블 => 배열로 변환.
// 이터러블이 아닌 유사 배열 객체
const arrayLike = {
0: 1,
1: 2,
2: 3,
length: 3
};
const arr = Array.from(arrayLike );
console.log(...arr); // 1 2 3 35.3 객체 리터럴 내부에서 사용하는 경우
// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy); // { x: 1, y: 2 }
console.log(obj === copy); // false
// 객체 병합
const merged = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4 }스프레드 프로퍼티가 제안되기 이전에는 Object.assign 메서드를 사용하여 여러개 객체를 병합하거나 프로퍼티를 변경 또는 추가.
// 객체 병합. 프로퍼티가 중복되는 경우, 뒤에 위치한 프로퍼티가 우선권을 갖는다.
const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });
console.log(merged); // { x: 1, y: 10, z: 3 }
// 특정 프로퍼티 변경
const changed = Object.assign({}, { x: 1, y: 2 }, { y: 100 });
console.log(changed); // { x: 1, y: 100 }
// 프로퍼티 추가
const added = Object.assign({}, { x: 1, y: 2 }, { z: 0 });
console.log(added); // { x: 1, y: 2, z: 0 }스프레드 프로퍼티는 Object.assign 메서드를 대체할 수 있는 간편한 문법.
// 객체 병합. 프로퍼티가 중복되는 경우, 뒤에 위치한 프로퍼티가 우선권을 갖는다.
const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged); // { x: 1, y: 10, z: 3 }
// 특정 프로퍼티 변경
const changed = { ...{ x: 1, y: 2 }, y: 100 };
// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }
console.log(changed); // { x: 1, y: 100 }
// 프로퍼티 추가
const added = { ...{ x: 1, y: 2 }, z: 0 };
// added = { ...{ x: 1, y: 2 }, ...{ z: 0 } }
console.log(added); // { x: 1, y: 2, z: 0 }Chapter 36 디스트럭처링 할당
36.1 배열 디스트럭처링 할당
ES5 에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같음.
// ES5
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1 2 3배열디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당기준은 배열의 인덱스.
const arr = [1, 2, 3];
// ES6 배열 디스트럭처링 할당
// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
// 이때 할당 기준은 배열의 인덱스다.
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3const [x,y]=[1,2];
// 이때 우변에 이터러블을 할당하지 않으면 에러발생.
const [x, y]; // SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {}; // TypeError: {} is not iterablelet x, y;
[x, y] = [1, 2];
// 권장 xlet을 사용하여 선언과 할당을 분리하면, 나중에 해당 변수가 다른 값을 할당받을 수 있다는 가능성을 열어두는 것으로 인식. 이는 코드를 이해하기 어렵게 만들 수 있으며, 변수가 재할당되는지 여부를 계속 추적해야 한다는 번거로움을 야기할 수 있음. 키워드는 const 로 보통 많이 사용."(immutable)"
const [a, b] = [1, 2];
console.log(a, b); // 1 2
const [c, d] = [1];
console.log(c, d); // 1 undefined
const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2
const [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3
// 기본값보다 할당된 값이 우선한다.
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3// url을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환한다.
function parseURL(url = '') {
// '://' 앞의 문자열(protocol)과 '/' 이전의 '/'으로 시작하지 않는 문자열(host)과 '/' 이후의 문자열(path)을 검색한다.
const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
console.log(parsedURL);
/*
[
'https://developer.mozilla.org/ko/docs/Web/JavaScript',
'https',
'developer.mozilla.org',
'ko/docs/Web/JavaScript',
index: 0,
input: 'https://developer.mozilla.org/ko/docs/Web/JavaScript',
groups: undefined
]
*/
if (!parsedURL) return {};
// 배열 디스트럭처링 할당을 사용하여 이터러블에서 필요한 요소만 추출한다.
const [, protocol, host, path] = parsedURL;
return { protocol, host, path };
}
const parsedURL = parseURL('https://developer.mozilla.org/ko/docs/Web/JavaScript');
console.log(parsedURL);
/*
{
protocol: 'https',
host: 'developer.mozilla.org',
path: 'ko/docs/Web/JavaScript'
}
*/// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]
Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야함.36.2 객체 디스트럭처링 할당
// ES5
var user = { firstName: 'Ungmo', lastName: 'Lee' };
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName); // Ungmo Leeconst user = { firstName: 'Ungmo', lastName: 'Lee' };
// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee할당 기준은 프로퍼티 키. 순서 의미 x
const { lastName, firstName } = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName, firstName };
// SyntaxError: Missing initializer in destructuring declaration
const { lastName, firstName } = null;
// TypeError: Cannot destructure property 'lastName' of 'null' as it is null.const { lastName, firstName } = user;
// 위와 아래는 동치다.
const { lastName: lastName, firstName: firstName } = user;
//Ex)
const user = { firstName: 'Ungmo', lastName: 'Lee' };
// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Ungmo Leeconst str = 'Hello';
// String 래퍼 객체로부터 length 프로퍼티만 추출한다.
const { length } = str;
console.log(length); // 5
const todo = { id: 1, content: 'HTML', completed: true };
// todo 객체로부터 id 프로퍼티만 추출한다.
const { id } = todo;
console.log(id); // 1function printTodo(todo) {
console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.function printTodo({ content, completed }) {
console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.const todos = [
{ id: 1, content: 'HTML', completed: true },
{ id: 2, content: 'CSS', completed: false },
{ id: 3, content: 'JS', completed: false }
];
// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // 2배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용 할 수 있음.
const user = {
name: 'Lee',
address: {
zipCode: '03068',
city: 'Seoul'
}
};
// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: { city } } = user;
console.log(city); // 'Seoul'// Rest 프로퍼티
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }
step by step