1. spread, Array spread, String spread, Object spread, push(...spread)
spread
Syntax: [...iterable]
•
[...iterable]
◦
[...처럼 [ ]안에 점(.) 3개를 작성하고 이어서 이터러블 오브젝트를 작성합니다.
const list = [21, 22];
console.log([11, ...list, 12]); [11,21,22,12]
const obj = {key: 50};
console.log({...obj}); // {key: 50}
JavaScript
복사
•
이터러블 오브젝트를 하나씩 전개합니다.
•
{key: value}의 Object가 이터러블 오브젝트는 아니지만 전개가 가능합니다.
Array spread
•
spread 대상 배열을 작성한 위치에 엘리먼트 단위로 분리및 전개합니다.
•
Array spread 작성 형태
const one = [21, 22];
const two = [31, 32];
const result = [11, ...one, 12, ...two];
console.log(result);//[11,21,22,12,31,32];
consoel.log(result.length);//6
JavaScript
복사
•
값이 대체되지 않고 전개됩니다.
const one = [21, 22];
const result = [11, 12, ...one];
console.log(result);//[11, 12, 21, 22];
console.log(result.length);//4
JavaScript
복사
⇒ 만일 값이 대체되었다면 [11, 12, [21, 22]]로 이차원 배열이 되고 length는 3이되었을 것입니다.
String spread
•
spread 대상 문자열을 작성한 위치에 문자 단위로 전개합니다.
•
String spread 작성 형태
const target = "ABC";
console.log([...target]);//[A, B, C]
JavaScript
복사
⇒ target의 ABC를 문자 단위로 분리하여 전개합니다.
Object spread
•
spread 대상 Object를 작성한 위치에 프로퍼티 단위로 전개합니다.
•
Object spread 작성 형태
const one = {key1: 11, key2: 22};
const result = {key3: 33, ...one};
console.log(result);//{key3: 33, key1: 11, key2: 22}
JavaScript
복사
⇒ ...one 은 one오브젝트의 프로퍼티를 전개합니다.
•
프로퍼티의 이름이 같을경우 값을 대체합니다.
const one = {key1: 11, key2: 22};
const result = {key1: 33, ...one};
console.log(result);//{key1: 11, key2: 22}
//const check = [...one];
JavaScript
복사
⇒one의 key1과 result의 key1은 프로퍼티 이름이 같기에 뒤에 작성한 one의 프로퍼티 내용으로 대체됩니다. 그래서 key1은 33이 아니라 11이 출력됩니다.
⇒const check = [...one]; one은 빌트인 오브젝트이기에 이터러블 오브젝트가 아니므로 대괄호 형태로 작성하면 에러가 발생합니다.
push(...spread)
•
push()파라미터에서 spread 대상을 작성할 수 있습니다.
•
배열 끝에 대상을 분리하여 첨부합니다.
let result = [21, 22];
const five = [51, 52];
result.push(...five);
console.log(result);//[21, 22, 51, 52]
result.push(..."abc");
console.log(result);//[21, 22, 51, 52, a, b, c]
JavaScript
복사
2. Rest 파라미터, function spread, Array-like, rest와 arguments 차이
function spread
•
호출하는 함수의 파라미터에 spread대상을 작성합니다.
•
처리 순서 및 방법
◦
함수가 호출되면 우선, 파라미터 배열을 엘리먼트 단위로 전개
add(...values) → add(10, 20, 30); 이와같이 전개
◦
전개한 순서대로 파라미터 값으로 넘겨줍니다.
◦
호출받는 함수의 파라미터에 순서대로 매핑됩니다.
function add(one, two, three){
console.log(one + two + three);
};
const values = [10, 20, 30];
add(...values);//60
JavaScript
복사
rest 파라미터
syntax: function(param, paramN, ...name)
•
분리하여 받은 파라미터를 배열로 결합합니다.
◦
spread: 분리, rest: 결합
⇒ point(...values) → point(10, 20, 30)이 되어 호출합니다.
⇒ rest파라미터로 다시 결합하여 param = [10, 20, 30]이 됩니다.
function point(...param){
console.log(param);
console.log(Array.isArray(param));
}
const values = [10, 20, 30];
point(...values);
JavaScript
복사
•
작성 방법
◦
호출받는 함수의 파라미터에 ...에 이어서 파라미터 이름 작성을 합니다.
◦
호출한 함수에서 보낸 순서로 매핑합니다.
•
파라미터와 Rest파라미터를 혼합 사용할 수 있습니다.
⇒ point(...values) → point(10, 20, 30)이 되어 호출합니다.
⇒ point에서는 첫번째 파라미터인 10을 ten에 할당합니다.
⇒ 나머지 20, 30을 ...rest 파라미터로 결합하여 최종적으로는 point(10, [20,30])으로 받게 됩니다.
function point(ten, ...rest){
console.log(ten);
console.log(rest);
};
const values = [10, 20, 30];
point(...values);
JavaScript
복사
Array-like
•
Object 타입이지만 배열처럼 이터러블 가능한 오브젝트입니다.
◦
for()문으로 전개할 수 있습니다.
•
작성 방법
◦
프로퍼티key 값을 0부터 1씩 증가하며 프로퍼티 값 작성
◦
length에 전체 프로퍼티 수 작성
const values = {0: "가",1:"나", 2:"다", length: 3};
for(let k = 0; k< values.length; k++){
console.log(values[k]);
};
JavaScript
복사
⇒ length 프로퍼티는 전개되지 않습니다.(하면 안됩니다.)
⇒ for~in문으로 전개할 경우 length 프로퍼티도 전개됩니다.
rest와 arguments의 차이점
•
Argument 오브젝트
◦
파라미터 작성에 관계없이 전체를 설정합니다.
◦
Array-like 형태
Array 메소드를 사용할 수 없습니다.
◦
__proto__가 Object 입니다.
•
rest 파라미터
◦
매핑되지 않은 나머지 파라미터만 설정합니다.
◦
Array 오브젝트 형태
Array 메소드를 사용할 수 있습니다.
◦
__proto__가 Array
