[JS] Array의 사용, 복사, 메소드, 이중배열등 배열에 대해

Array,배열은 개발자라면 언제나 익숙하고 자주 접하게 됩니다.
코드스테이츠에 들어오기 전, JAVA위주로 공부한 저에게는 비슷하지만 몇가지 다른점들이 있어, 해당 내용을 복습하면서 정리하려고 합니다.

기본적으로 배열의 선언은

let arr = [];
let arr = [1,2,3]
let arr = Array(length)
let arr = new Array(length)

등의 명령어로 선언이 가능합니다.

Array에서 가장 많이 사용되는 메소드는 length이며,
Array.length를 입력시 해당 배열의 길이를 리턴해줍니다.
보통 반복문에서 많이 사용되며, 이중배열일 경우는 해당 인덱스를 입력시 안의 이중배열의 길이만 리턴이 가능합니다.

다른 map,forEach,reduce,filter등의 메소드는 따로 포스트에 정리하도록 하겠습니다.

가장 중요한 배열의 복사입니다.
제가 이 포스팅을 작성하는 의미이며, 얕은복사와 깊은복사에 대해 적으려고 합니다.
얕은복사는 해당 배열을 참조하며, 원본과 사본을 수정시 함께 수정되는 애로사항이 있습니다.

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

이렇게 출력되며, 해당 내용을 참조만 하기때문에 원본과 사본 모두 동시에 변경됩니다.
얕은 복사를 피하기 위해서 사용하는 몇가지 방법이 있습니다.
slice명령어를 이용하거나, spread를 사용하면 됩니다.

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

이렇게 출력되오며 해당내용은 slice()로 arr1의 배열의 모든 내용을 arr2로 복사해 새로운 배열을 만들어낸 결과입니다.

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

위의 내용은 spread용법을 사용해 배열을 깊은복사로 복사하는 방법입니다.

이중배열의 복사는 조금더 까다롭습니다
위와 같이 배열을 복사했을때 배열내 배열의 참조는 변경되지 않기때문에, 배열내 배열마다 따로 slice()나 spread용법을 사용해 변경해 주어야 합니다.

let arr1 = [[1,2,3],[1,2,3,4,5],[1,2,3]];
let arr2 = new Array(arr1.length);
for(let i = 0; i < arr2.length; i++) {
  arr2[i] = arr1[i].slice()
}

위처럼 사용하거나,

let arr2 = new Array(arr1.length);
for(let i = 0; i < arr2.length; i++) {
  arr2[i] = [...arr[i]];
}

위의 내용처럼 사용하여 깊은 복사가 가능합니다.
배열의 깊이에 따라 해당내용을 응용해 사용이 가능합니다.