[Javascript] 다중 배열(Multidimensional Arrays)에 대해서 알아보자

앞선 포스팅에서는 Javascript의 배열에 대해서 알아보았습니다. 배열은 여러 개의 Object를 하나의 변수에 담아서 사용할 수 있으며 배열에 담긴 모든 Object는 index로 접근이 가능합니다.

 

 

이번 포스팅에서는 배열속에 다시 배열을 넣은 다중 배열에 대해서 알아보겠습니다.

---

Javascript 다중 배열이란

다중 배열은 배열에 다시 배열이 있는 배열을 말합니다. 배열 속에는 다양한 Object들이 포함될 수 있습니다. 배열 역시 하나의 Object이기 때문에 배열 내부에 다시 포함될 수 있습니다. 이러한 배열들을 2차 배열, 3차 배열이라 표현합니다.

 

구조는 동일하기때문에 2차 배열을 보도록 하겠습니다.

const arrays = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

위와 같이 배열 속 다시 배열이 들어가 있는 형태입니다. 그럼 2차 배열을 생성하는 방법을 알아보겠습니다.

---

Javascript 다중 배열 생성

배열을 생성하는 방법에는 여러가지가 있듯 다중배열도 동일합니다. 2차 배열을 예를 들어서 생성해보도록 하겠습니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

첫 번째 방법은 배열변수를 생성할 때 값을 초기화하는 방법입니다. 배열에는 여러 가지 값이 들어갈 수 있고 위에서는 문자와 숫자를 함께 넣었습니다.

let array1 = ['a', 1];
let array2 = ['b', 2];
let array3 = ['c', 3];

const arrays = [array1, array2, array3];

두 번째 방법은 모두 1차 배열을 생성하고 새롭게 만들 2차 배열의 요소에 1차 배열을 넣어서 생성할 수 있습니다.

---

Javascript 다중 배열 접근

다중 배열에 접근하는 방법 역시 1차 배열과 동일합니다. 위에서 생성한 배열에 접근해보도록 하겠습니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

console.log(arrays[0][1]); // 1
console.log(arrays[1][0]); // b

배열을 큰 대괄호 index부터 하나씩 접근하시면 됩니다. 가장 밖의 배열 arrays는 총 3개의 Object를 가지고 있습니다. 따라서 index는 0, 1, 2가 됩니다. 여기서 0을 선택하는 방법은 arrays[0]이 되는 것입니다.

 

선택한 배열 arrays[0]의 배열중 1번 index에 접근하기 위해서는 arrays[0][1]로 표현하시면 됩니다. 만약 3차 배열이라면 다시 여기서 다음 선택할 index를 이어나가시면 다중 배열에 접근이 가능합니다.

---

Javascript 다중 배열 요소 추가

다중 배열에 요소르 추가하는 방법은 1차 배열과 같이 생각하고 접근하고 추가할 수 있습니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

arrays.push(['d', 4]);

첫 번째는 push() 함수를 이용해서 추가하는 방법입니다. parameter로 추가할 요소를 넣어주시면 됩니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

arrays[3] = ['d', 4];

두 번째는 index를 이용해서 추가할 수 있습니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

arrays.unshift(['z', 26]);

세 번째는 unshift() 함수를 이용할 수 있습니다. 이 함수는 배열의 가장 처음 요소를 손쉽게 추가할 수 있습니다.

 

추가하는 방법은 사용하면서 편한 방법을 이용하시면 됩니다.

---

Javascript 다중 배열 요소 삭제

생성, 접근, 추가를 진행했으며 당연히 삭제 역시 필요합니다. 배열의 요소를 삭제하는 방법도 동일합니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

arrays.pop();

첫 번째 방법은 pop() 함수를 이용하는 것입니다. pop 함수는 마지막 요소를 제거하고 return 값으로 제거한 요소를 내보냅니다.

let arrays = [['a', 1], ['b', 2], ['c', 3]];

arrays.shift();

두 번째 방법은 shift() 함수입니다. 이 함수는 배열의 가장 처음 요소를 제거하고 pop()과 마찬가지로 그 요소를 return 해줍니다.

---

지금까지 다중 배열의 생성 및 접근, 추가, 삭제에 대해서 알아보았습니다. 1차 배열과 마찬가지로 다중 배열 역시 동일한 방법으로 사용할 수 있습니다. 도움이 되셨으면 합니다. 이상입니다.