Spread 연산자

✅ 핵심요약

• 스프레드 연산자란?
  • 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사
  • “…”과 같이 점(.) 세개를 연속해서 작성
  • rest 파라미터
    • 스트레드 연산자를 사용한 것으로 여러 인수를 배열로 받을 때 사용

⚡ 스프레드 연산자

• 이터러블 오브젝트의 엘리먼트를 하나씩 분리하여 전개함
• 전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있다.

[..iterableObject]
function(...iterableObject)

• spread 연산자는 “…”과 같이 점(.) 세개를 연속해서 작성하고 이어서 이터러블 오브젝트를 작성
• 대괄호 [] 안에 작성하거나 function(…[1,2])와 같이 호출하는 함수의 파라미터에 작성

문자열

let spreadObj = [..."music"];
console.log(spreadObj);

---------------------------------------------------------
[실행 결과]
["m", "u", "s", "i", "c"]

• 문자가 하나씩 분리됨

함수 파라미터

• 함수가 호출되기 전에 파라미터 값을 분리, 전개
• 호출받은 함수의 파라미터에 이름을 작성하면 저개한 각 엘리먼트 값이 파리미터 이름에 설정됨

const values = [10, 20, 30];
get(...values);

function get(one, two, three) {
	console.log(one + two + three);
};

---------------------------------------------------------
[실행 결과]
60

• get 함수를 호출하기 전에 [10, 20, 30]을 get(10, 20, 30) 형태로 전개
• 호출받은 함수 파라미터의one에 10, two에 20, three에 30이 설정됨

🔹rest 파라미터

• 호출받은 함수의 파라미터에 function(…rest)와 같이 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 함

function(param, paramN, ...rest);

• 호출하는 함수의 파리미터에 3개의 파리미터 값을 작성하고 호출받은 함수의 파라미터에 파라미터 이름을 하나만 작성하면 2개의 파리미터 값이 설정되지 않았음
• 이때, rest 파라미터 작성하면 2개의 파라미터 값이 rest 파라미터에 배열 엘리먼트로 설정됨

let get = (one) => {
	console.log(one);
}
get(...[1, 2, 3]);

---------------------------------------------------------
[실행 결과]
1

• 호출받은 get 함수가 화살표 함수이므로 호출한 함수에서 보낸 파라미터가 arguments에 설정되지 않는다
• 따라서, [1, 2, 3]에서 2와 3은 받지 못함
• rest 파리미터를 작성하면 2와 3을 받을 수 있음

let get = (...rest) => {
	console.log(rest);
	console.log(Array.isArray(rest));
}
get(...[1, 2, 3]);

---------------------------------------------------------
[실행 결과]
[1, 2, 3]
true

let get = (one, ...rest) => {
	console.log(one);
	console.log(rest);
}
get(...[1, 2, 3]);

---------------------------------------------------------
[실행 결과]
1
[2, 3]

🗨️ spread와 rest 파라미터 구분

• 형태는 같지만, 기능이 다름
• spread 파라미터는 호출하는 함수의 파라미터에 사용하며 배열을 엘리먼트 단위로 전개
• rest 파라미터는 호출받은 함수의 파라미터를 사용
• spread 파라미터는 배열을 엘리먼트로 분리, 전개
• rest 파라미터는 전개된 앨리먼트를 다시 배열에 설정

🔹Array-like

• Array는 아니지만 Array처럼 사용할 수 있는 Object

let values = {0: "zero", 1: "one", 2: "two", length: 3};

• {key: value} 형태의 Object 특징을 유지하면서 배열의 특징을 가미한 것
• key에 0부터 1씩 증가시키면서 값을 부여
• 포로퍼티 키 값을 일련번호로 사용하는 것이 Object와 형태와 다르다.
• {length: 3}과 같이 Object 전체 프로퍼티 수를 작성

🔹rest와 arguments 차이

🔸Argument 오브젝트

• Argument 오브젝트가 Array-like이므로 Array 오브젝트의 메서드를 사용할 수 없다.
• Object.prototype에 연결된 프로퍼티가 Argument 오브젝트의 proto에 설정되므로 Object 메서드를 사용할 수 있지만, 모든 오브젝트에 Object가 상속되므로 Argument 오브젝트에 한정된 것은 아니다.
• 화살표 함수에서는 arguments를 사용할 수 없다.
• 함수 안의 코드를 보아야 arguments의 사용 여부와 사용 부분을 알 수 있어 코드 가독성이 떨어짐
• 많은 코드를 디버깅하거나 소스 코드를 리팩토링(Refactoring) 할 때 부담이 됨

🔸rest 파라미터

• 함수 안의 코드를 체크하지 않고 get(one, …rest) 형태만 보더라도 rest 파라미터 범위를 알 수 있어 가독성이 높다.
• rest 파라미터가 배열이므로 Array 오브젝트의 메서드를 사용할 수 있다.
• 화살표 함수 블록에서 rest 파라미터를 사용할 수 있다.
• Argument 오브젝트보다 rest 파라미터가 효율이 높다.