javascript ES6 Spread

스프레드 문법 (Spread)

Posted by Seongkyun Yu on 2020-03-22
Estimated Reading Time 2 Minutes
Words 452 In Total
Viewed Times

1. 스프레드 문법이란

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것.

값을 만드는게 아니기 때문에 변수에 할당할 수 없다.

따라서 단독으로 사용될 수 없고 다음과 같이 사용될 수 있다.

  • 함수 호출문의 인수 목록
  • 배열 리터럴의 요소 목록
  • 객체 리터럴의 프로퍼티 목록 (최신 버전)

이터러블에 한정되어 사용될 수 있다.



2. 함수 호출문의 인수 목록에서 사용하는 경우

spread.js
1
2
3
4
5
const arr = [1, 2, 3];

const minValue = Math.min(...arr);

console.log(minValue); // 1

주의 : Rest파라미터와는 다르다. Rest 파라미터는 여러개의 값을 동시에 받기 위해 사용한다.

restParam.js
1
2
3
4
5
6
7
function cook(param, ...rest) {
  // 이건 레스트 파라미터
  console.log(param); // 면
  console.log(rest); // ['계란', '스프']
}

cook(...["면", "계란", "스프"]); // 이건 스프레드 문법



3. 배열 리터럴 내부에서 사용하는 경우

3.1 concat

concat & spread
1
2
3
4
5
var arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]

const arrS = [...arr, 5, 6];
console.log(arrS);

3.2 push

push & spread
1
2
3
4
5
6
7
8
9
10
var arr1 = [1, 2];
var arr2 = [3, 4];
const arr3 = [5, 6];

Array.prototype.push.apply(arr1, arr2); // arry1.push(arr2) 하면 배열 요소로 arr2가 들어가게 됨
console.log(arr1); // [1, 2, 3, 4]

// 스프레드 문법
arr1.push(...arr3);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

3.3 splice

splice & spread
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var arr1 = [1, 4];
var arr2 = [2, 3];

// apply 메소드의 2번째 인수는 배열이다. 이것은 인수 목록으로 splice 메소드에 전달된다.
// [1, 0].concat(arr2) → [1, 0, 2, 3]
// arr1.splice(1, 0, 2, 3) → arr1[1]부터 0개의 요소를 제거하고
// 그자리(arr1[1])에 새로운 요소(2, 3)를 삽입한다.
Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));

console.log(arr1); // [1, 2, 3, 4]

// 스프레드 문법
const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);

console.log(arr1); // [1, 2, 3, 4]

3.4 slice (배열 복사)

slice & spread
1
2
3
4
5
6
7
8
9
10
11
var origin = ["면", "스프"];
var copy = origin.slice();

console.log(copy); // ['면', '스프']
console.log(copy === origin); // false

// 스프레드 문법
const origin2 = ["면", "멸치육수"];
const copy2 = [...origin2];

console.log(copy2); // ['면', '멸치육수']

3.5 유사 배열 객체를 배열로 변환

Array-like object to Array
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function isRamen() {
  var args = Array.prototype.slice.apply(arguments);

  return args.some((item) => item === "스프");
}

console.log(isRamen("면", "계란", "스프")); // true

// 스프레드 문법
function isRamen2() {
  var args = [...arguments];

  return args.some((item) => item === "스프");
}

console.log(isRamen2("면", "계란", "스프")); // true



4. 객체 리터럴 내부에서 사용하는 경우

Object.assign & spread
1
2
3
4
5
6
const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });
console.log(merged); // { x: 1, y: 10, z: 3 }

// 스프레드 문법
const merged2 = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged2); // { x: 1, y: 10, z: 3 }

참고자료: poiemaweb.com

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
javascript ES6 Spread
FRIENDS
ESC