Javascript ES6 Array spread operator 배열 펼치기

//spread operator [...val] 배열을 펼쳐서 전달할 때 편함

let pre = ["apple", "orange", 100];
let preCopy = ["apple", "orange", 100];
let newData = [...pre];

console.log(pre, newData); //같은 값
console.log(pre === newData); //false
console.log(pre === preCopy); //false

let ppp = [100,200,"hello",null];
let newPPP = [0,1,2,3,4, ...ppp, 4];
console.log(ppp, newPPP);	// [0, 1, 2, 3, 4, 100, 200, "hello", null, 4]


function sum(a,b,c) {
    return a+b+c;
}
let p1 = [100,200,300];
console.log(sum.apply(null, p1)); //600
console.log(sum(...p1));    //600 펼쳐져서 값이 들어감

spread operator는 배열 중간에 배열을 추가할 수 있는 기능 [ . . . val ]  

 

for문을 이용하여 n번째에 넣을 필요 없이 간단하게 한줄로 배열안에 값을 추가할 수 있음

sum 함수식에도 사용 가능 apply  함수와 함께

 

배열에 배열을 붙이기 위해 apply 사용하기

push 를 사용하여 요소를 배열에 추가 할 수 있습니다. push 는 가변 인수를 허용하기 때문에 여러 요소를 동시에 추가 할 수 있습니다. 그러나 push 에 배열을 전달하면 요소를 개별적으로 추가하는 대신 실제로 해당 배열을 단일 요소로 추가하므로 결국 배열 내부에 배열로 끝납니다. 그것이 우리가 원하는 것이 아니라면? 이 경우 concat 은 우리가 원하는 동작을 하지만 실제로는 기존 배열에 추가되지 않고 새 배열을 만들어 반환 합니다. 그러나 우리는 기존 배열에 추가하고 싶었습니다 ... 그럼 이제 어쩌죠? 루프를 작성 할까요? 분명히 아니죠?

방법은 apply !

 

참고: 이 함수의 구문은 거의 call() 구문과 유사합니다. 근본적인 차이점은  call() 은 함수에 전달될 인수 리스트를 받는데 비해, apply() 는 인수들의 단일 배열을 받는다는 점입니다.

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply