array.concat([value1[, value2[, ...[valueN]]]])
concat()함수는
파라미터로 받은 배열이나 값들을 기존의 배열에 합쳐서,
새로운 배열로 만들어서 리턴합니다
value1 ~ valueN
기존 배열에 합칠 배열 또는 값
기존 배열(array)와 파라미터로 받은 값(value1~ valueN)을 합쳐서 새로 만든 배열
const newArr = arr.concat('a', ['b', 'c'], 'abc');
// arr.concat()에 3개의 파라미터를 전달하여
//3개의 값을 가진 배열 arr와 파라미터를 합쳤습니다.
//concat() 함수는 arr와 전달받은 파라미터들을 합쳐서
//"새로운 배열"을 생성하여 리턴합니다.
//이 때, 파라미터가 배열인 경우, 배열 안의 원소들을 꺼내여 새로운 배열에 포함시킵니다.
//그래서, 새로운 배열(newArr)의 길이는 6이 아닌 7이 됩니다.
//원본인 arr의 값은 변하지 않습니다.
spread operator는 한글로 전개 연산자라도고 한다.
배열과 객체 등 여러 곳에서 사용할 수 있다.
배열에서 spread operator는 배열의 원소드을 분해해서 개별요소로 만들어준다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const newArr = [
...arr1,
...arr2,
...arr3
];
document.write(newArr.length + '<br>'); // 9
document.write(newArr); /// 1,2,3,4,5,6,7,8,9
spread operator ...는 각 배열의 개별 요소들을 리턴한다.
newArr은 쪼개진 개별 요소들을 인자로 가지는 새로운 배열이다.
spread operator를 사용하면 push() 함수를 이용해서라도 여러 개의 배열을 하나로 합칠 수 있다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(arr2);
document.write(arr1.length + '<br>'); // 4
document.write(arr1[0] + '<br>'); // 1
document.write(arr1[1] + '<br>'); // 2
document.write(arr1[2] + '<br>'); // 3
document.write(arr1[3] + '<br>'); // [4, 5, 6]
push() 함수를 사용해 배열을 합치면 파리미터로 전달 된 배열을 하나의 원소로 처리한다.
push()함수를 사용해, 두 여러개의 배열을 합칠때는 concat() 함수를 사용한 것과 같이 파라미터로 전달 된 배열의 원소 각각을 새로운 배열에 넣어서 합치기 위해서는 spread operator(...)를 사용해야 한다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2);
document.write(arr1.length + '<br>'); // 6
document.write(arr1[0] + '<br>'); // 1
document.write(arr1[1] + '<br>'); // 2
document.write(arr1[2] + '<br>'); // 3
document.write(arr1[3] + '<br>'); // 4
document.write(arr1[4] + '<br>'); // 5
document.write(arr1[5] + '<br>'); // 6
arr1.push(...arr2)
위 예제에서는 파라미터로 전달되는 배열(arr2)에 spread operator를 사용해 arr2의 원소들을 각각 쪼개 주었다.
spead operator를 사용함으로써, 이 표현식은 arr1.push(4, 5, 6)와 같은 효과를 가지게 된다.
가독성과 간결함을 동시에 챙길 수 있는 spread operator를 사용하자!