(ES6) - 05 Spread 연산자SUNGMIN SHIN15 Minutes2017년 9월 26일

[ ECMA Script6 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=11556385)

5.1 개요

---

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

[ 구문 ]

[…iterableObject]
function(…iterableObject)

배열

[ 소스 spread-1 ]

let one = [11, 12];
let two = [21, 22];
let speardObj = [51, ...one, 52, ...two];

console.log(speardObj);
console.log(speardObj.length);

배열 one과 two를 speardObj내부에 전개하는 코드로 배열들의 값이 분리 전개되었기 때문에 spreadObj내에 배열이 아닌 값으로 추가되어 있는 것을 볼 수 있습니다.

문자열

[ 소스 spread-2 ]

let speardObj = [...'music'];

console.log(speardObj);
console.log(speardObj.length);

String이 이터러블 오브젝트이므로 문자열 역시 spread연산자를 사용할 수 있습니다. 위 코드에서는 spread연산자로 작성하면 연산자로 작성한 문자열 ‘music’이 전개 대상이 되고 문자를 하나씩 분리합니다.

함수 파라미터

호출하는 함수의 파라미터 값을 연산자로 작성하면 함수를 호출하기 전에 파라미터 값을 분리, 전개합니다.

[ 소스 spread-3 ]

// 상수 value에 Array로 값을 지정
const value = [10, 20, 30];
// 파라미터 3개의 합을 반환하는 함수 get을 선언
function get(one, two, three) {
  console.log(one + two + three);
}
// spread 연산자를 통해 get함수를 실행
get(...value);

5.2 rest 파라미터

---

호출 받는 함수의 파라미터에 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 합니다.

[ 구문 ]

function(…restName) {
…
}

[ 소스 rest-2 ]

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

rest 파라미터의 형태로 사용하는 경우 spread 연산자를 사용할 때와 같이 값이 나열되지만 그 값을 Array 오브젝트로 설정하는 것이 특별한 점으로 즉 형태는 값지만 기능이 다르므로 구분해서 사용해야 합니다.

5.3 Array-like

---

Array는 아니지만 Array처럼 사용할 수 있는 Object 오브젝트를 Array-like라고 하며 이 것은 ES6 스펙에서 사용하는 공식 용어 입니다.
[ 구문 ]

// key(0부터 이어지는 숫자), value, length로 구성
let value = {
  0: 'zero',
  1: 'one',
  2: 'two',
  length: 3
}

{key: value}의 형태의 Object 오브젝트를 유지하면서 배열의 특징을 가미한 것으로 {key: value}의 형태에서 key를 0부터 1씩 증가시키며 값을 부여하고 마지막 key는 ‘length: 3’의 형태로 전체 프로퍼티의 수를 작성합니다.
프로퍼티를 가져올 때에는 value[0] 혹은 value[‘0’]의 형태로 사용합니다.

[ 소스 array-like-1 ]

// array-like로 생성
let values = {
  0: 'zero',
  1: 'one',
  2: 'two',
  length: 3
};

// for in(values.length도 출력되므로 주의)
for (var key in values) {
  console.log(key, ':', values[key]);
}

// for
for (var k = 0; k <= values.length; k++) {
  console.log(values[k]);
}

위 예제에서 처럼 for-in문 for문과 달리 length 프로퍼티도 함께 전개되므로 Array-like에서 사용하지 적절하지 않으며 만약 사용하는 경우 length 프로퍼티를 제외시키는 처리가 필요합니다.

[ 소스 array-like-번외 ]

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

console.log(values[Symbol.iterator]);

Array-like는 Array처럼 사용하는 Object 오브젝트지만 이터러블 오브젝트는 아닙니다.

5.4 Array-like 전개

---

Array-like의 프로퍼티 키 값은 0부터 1씩 증가하면서 순차적으로 작성해야 합니다.

[ 소스 array-like-번외 ]

let values = {
 10: 'ten',
 zoo: '동물원',
 2: 'two',
 length: 5
};

for (var k = 0; k < values.length; k++) {
  console.log(values[k]);
}

위 예제의 values 오브젝트에 length 프로퍼티가 작성되어 있으므로 Array-like로 볼 수 있지만 프로퍼티의 키 값이 10, ‘zoo’, 2로 완전한 형태가 아니므로 정상적으로 동작하지 않으며 length의 값이 5이므로 5번 반복하게 됩니다.

5.4 rest와 arguments의 차이

---

arguments 오브젝트

arguments 오브젝트는 Array-like 이므로 Array 오브젝트의 메서드를 사용할 수 없습니다. 또한 화살표 함수에서 사용할 수 없습니다. 그 외에 함수 안의 코드를 보아야 사용 여부와 사용 부분을 알 수 있어 코드 가독성이 떨어집니다.

rest 파라미터

rest 파라미터는 Array 오브젝트이므로 Array 오브젝트의 메서드를 사용할 수 있습니다 화살표 함수에서도 사용할 수 있으며 함수의 코드를 확인하지 않아도 형태로 rest 파라미터의 범위를 알 수 있어 가독성이 높습니다.

요약

---

spread 연산자

• Spread 연산자는 이터러블 오브젝트를 하나씩 분리하여 전개 함
• 배열에 사용하는 경우에는 1개씩 값을 가져 옴 (EX> …[1,2,3] -> 1,2,3)
• 문자열에 사용하는 경우 문자를 하나씩 분리하여 전개 (EX> …’music’ -> ‘m’,’u’,’s’,’i’,’c )

rest 파라미터

• 함수의 파라미터를 받아 배열로 전개(1개의 rest 파라미터는 그 위치의 값이 몇개든 1개의 배열로 받음)
• spread 연산자와 형태는 동일하지만 배열로 배열로 전개하므로 기능이 다르다는 점에 유의

Array-like

• Array는 아니지만 Array처럼 쓸 수 있는 Object
• 프로퍼티의 키 값은 0부터 1씩 증가하는 형태로 순서대로 작성해야 함
• 마지막 프로퍼티에는 length: 프로퍼티의 수를 입력
• obj[0] 혹은 obj[‘0’]의 형태로 사용
• for in문에서는 length 프로퍼티까지 가져오므로 사용에 유의

rest 파라미터와 arguments의 차이

• arguments는 Array-like이므로 Array의 메서드를 사용할 수 없음
• arguments는 화살표 함수에서 사용 불가
• rest 파라미터는 Array이므로 Array의 메서드를 사용할 수 있음