Javascript - 배열 선언하는 여러가지 방법

 

javascript를 사용하다보면 배열을 쓸 일이 정말 많다. 화면을 다루는 언어이기 때문에 리스트, 값들을 담고 있는 경우가 많기 때문인 것 같다. 예를 들면 api로 어떤 리스트를 받아와서 담은 후에 화면에서 처리하거나, 셀렉트 박스에 담을 리스트를 선언하는 등의 경우 들이있다.

 

 

그런데 사실 웹을 개발할 때는 초기화를 안하고 api에서 값을 받을 때 결과 값으로 초기화 하는 경우도 있고 단순히 []로 선언하여 사용하는 경우가 있다. 그리하여 나는 사실 자바스크립트의 배열을 선언하는 방법을 제대로 모르고 있었다. 그리하여 오늘 어떻게 선언하는지에 대해 소상히 알아보도록하겠다.

 

먼저 배열을 선언하는 방법은 여러가지가 있는데, 초기 값을 넣는 방법도 여러가지가 있다. 아래와 같은 방법으로 빈 배열을 선언 할 수 있는데, 보통은 첫번째 방법을 선호하는 것이, 쓰기 편하기 때문이다. 그런데 new는 붙여도 되고 안붙여도 된다. 

 

const a = [];
const a = new Array();

 

그리고 이번에는 배열을 값을 가지고 선언하는 방법에 대해 알아보겠다. javascript는 java보다는 배열을 선언하는 것이 비교적 간단하다. 자바는 array와 list가 구분이 되어 있기 때문에 솔직히 복잡한데, 자바는 그렇지가 않기 때문이다. 자바스크립트에서 초기값을 가지고 선언하는 방법을 알아보겠다.

 

const arr = new Array(1,2,3,4,5);
const arr = [1,2,3,4,5];

 

그리고 자바스크립트의 배열은 내부의 내용을 iterate할 필요 없이 그냥 console.log()를 사용하면 내부의 값을 바로 볼 수 있다는 편리한 점이 있다. 

 

이번에는 2중 배열을 선언하는 방법을 알아보자. 이중배열은 먼저 배열을 하나 만들고 그 배열안에 또 배열을 선언하면 된다. 방법은 다음과 같다. 방법은 매우 다양한데, 만약 내가 배열의 길이를 알 수 없다면 배열의 길이를 선언할 필요는 없는데, 사실 배열의 길이를 선언해도 불변이아니기 때문에 상관은 없는 듯하다. 명시적으로 길이를 보여주는 것일 뿐이기 때문이다. 사실 new Array(5)를 사용해서 길이를 5로 사용해도 arr[5]라는 6번째 인덱스에 값을 할당할 수도 있다는 사실.. 제약이 없는 것이 자바스크립트의 특징인 것 같다. 

 

const arr = [];

arr.push([])
arr.push([])
arr.push([])
arr.push([])


const arr = [];
for (let i = 0; i < 5; i++){
	arr.push([]);
}

const arr = new Array()
for (let i = 0; i < 5; i++){
	arr.push(new Array());
}

 

다음으로는 ES6를 지원하는 브라우저에서 사용할 수 있는 새롭게 배열을 선언하는 방법에 대해서 알아보자. 개발하는 부분에 따라 다르겠지만 나는 이렇게 배열을 사용할 일이 많이 없어서 한 번 사용하면 까먹고 또 까먹는 문법이기도 하다. 그러나 한 번 알아 놓으면 다른 이의 코드에서 등장했을 때 당황하지 않을 수 있으니 알아놓으면 좋겠다. 아래의 경우도 똑같이 길이는 제한했지만, 사실 계속 push해서 배열의 길이를 바꿀 수 있다는 것을 기억하다.

const arr = Array(10).fill(1);

const arr = Array.from(Array(5), () => new Array(2));
//arr[5][2]
[[empty, empty] x 5]
const arr2 = Array.from(Array(5), () => Array(2).fill(null));
//arr[5][2]
// [[null, null] x 5]