ES6 배열. spread operator 펼침연산자 ...arr, Array.from

 

펼침연산자 ...

---

배열을 펼쳐서 복사할 수 있는 녀석으로 기존 데이터의 참조를 끊고, 새로운 메모리에 새로운 데이터가 들어가게 된다. 

const arr = [1, 2, 3, 4];
const spreadOperator = [...arr];

console.log(spreadOperator); //[1,2,3,4]
console.log(arr === spreadOperator);	//false

spreadOperator은 arr을 복사한 것으로 값은 동일하지만 동등한지 비교하면 false를 리턴하게 된다.

 

예)

const arr = [1, 2, 3, 4];

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

카피한 데이터를 또 다시 배열로 만들 수 있다.

 

 

 

concat() 대체

---

const arr = [1, 2, 3, 4];
const arr2 = ['^_^', '^ㅠ^'];


console.log(arr.concat(arr2)); //[1, 2, 3, 4, "^_^", "^ㅠ^"]
console.log([...arr, ...arr2]); //[1, 2, 3, 4, "^_^", "^ㅠ^"]
console.log(['원하는 곳에 삽입 가능', ...arr2, '꼽사리2', 3]); //["원하는 곳에 삽입 가능", "^_^", "^ㅠ^", "꼽사리2", 3]

concat을 대체할 수 있는 펼침연산자는 배열 사이에 특정 데이터나 배열을 삽입하는 것이 쉬워진다.

(인덱스 찾기 추가할 배열 자르고 붙이는 과정 필요 없음)

 

 

apply() 대체

---

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

 

배열의 엘리먼트를 함수의 파라미터로 전달할 때 apply()함수를 사용해왔지만 ES6에서 펼침연산자를 사용하게 되면

파라미터값을 직관적이고 쉽게 전달할 수 있다.

 

 

Array.from

---

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

Array.from메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만들어 리턴해준다.

 

 

map에서 배열 만들기

const m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];