[JavaScript-51] 배열 spread

spread는 명령어 이름은 아니고, 개념 이름입니다. 

무슨 개념이냐?!

 

배열에 있는 요소들을 하나씩 꺼내준다는 얘깁니다. 

명령어로 구현하려면, 배열 이름 앞에 마침표 세 개를 찍어주면 됩니다. 

코드로 보시죠

let arr1 = [1, 2, 3];

//일반적인 출력
console.log(arr1); // [1, 2, 3]
//spread방법으로 출력
console.log(...arr1); //1, 2, 3

이렇게, 두 번째 호출을 보시면, arr1이라는 배열의 이름 앞에 마침표 세 개를 찍고 있죠?

그럼, spread방식으로 배열에 접근하겠다고 컴퓨터에게 전달해주는 셈입니다. 

즉, 대괄호를 풀고 요소 하나 하나씩을 각각 꺼내서 가져오란 말이 됩니다. 

 

이 메소드를 잘 활용하면, 배열을 병합할 수 있습니다. 

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

//병합법1-concat
let arr3 = arr1.concat(arr2);

//병합법2-spread문법 사용
let arr3 = [...arr1, ...arr2];

이렇게, JS에서 두 배열을 합치는 방법은 concat메소드를 사용하는 방법 외에도,

spread를 사용할 수도 있습니다!

 

병합 외에도, 배열의 값을 복사해올 수 있습니다!

 

또, 예전에 배열과 객체는 대입 연산자로 복사해오면 주소값이 같아져

하나만 변경해도 서로에게 변경사항이 자동적으로 반영되니까 .splice()를 붙여서 독립된 객체로 복사해오라 했었죠?

그런데, spread를 쓰면 그럴 필요가 없습니다!

코드로 보시죠! 하나 하나 차근차근 설명해드릴게요.

 

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr1.push(4);

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

이렇게, 두 번째 줄 처럼 =(대입연산자) 를 사용해 배열이나 객체를 복사해오면, 

둘은 같은 주소를 공유하게 되어 

 

arr1에만 push를 해도, arr2에도 자동적으로 push가 된다는 문제가 있었죠?

이를 막기 위해,

let arr1 = [1, 2, 3];
let arr2 = arr1.splice();

arr1.push(4);

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

arr1의 내용을 복사해올 때, splice()를 붙여주면 둘은 독립된 배열이 된다고 했죠.

그런데, 이제 spread를 사용해 값을 더 쉽게 가져올 수 있는 것이죠

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

arr1.push(4);

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

spread를 해준 것을 다시 대괄호 속에 넣어주면, 값은 그대로 가져오지만,

arr1과 arr2는 독립적인 배열이 됩니다!