[Javascript/ES6+] Rest / Array-like / Rest와 Arguments의 차이

출처

자바스크립트 ES6+ 기본 - 인프런 | 강의

 

---

 

🚀 Rest

 

◽ Rest 파라미터

- Syntax: function(param, paramN, ...name)

- 분리하여 받은 파라미터를 배열로 결합한다.

- spread는 분리, rest는 결합으로 볼 수 있다.

 

[코드 1: rest 파라미터]
// 다시 배열로 만든다.
function point(...param) {
    console.log(param);
    console.log(Array.isArray(param));
};

const value = {10, 20, 30};
point(...value);

[실행결과]

[10, 20, 30]

true

 

[코드 2: 혼합 사용]
function point(ten, ...rest)) {
    console.log(ten);
    console.log(rest); // 나머지가 배열로 나옴
};

const value = [10, 20, 30];
point(...value);

[실행결과]

10

[20 30]

---

◽ Array-like

- Object 타입이지만 배열처럼 이터러블 가능한 오브젝트이다.

- 작성방법은 프로퍼티 key값을 0부터 1씩 증가하며 작성한다.

- length에 전체 프로퍼티 수를 작성한다. (length는 전개되지 않는다.)

 

 [코드 1: Array-like]
 const values = {0: "가", 1: "나", 2: "다", length: 3};
 for(let k=0; k<values.length; k++) {
     console.log(values[k]);
 };

 [실행결과]

 가

 나

 다

---

◽ Rest와 Arguments 차이

1) Argument 오브젝트

- 파라미터 작성에 관계없이 전체를 설정한다.

- Array-like 형태로, Array 메소드를 사용할 수 없다.

- _proto_가 Object이다.

 

2) Rest 파라미터

- 매핑되지 않은 나머지 파라미터만 설정한다.

- Array 오브젝트 형태로, Array 메소드를 사용할 수 있다.

- _proto_가 Array이다.