TIL11 - JavaScript 배열

배열 선언 방식

JavaScript에서 배열을 선언하는 방식에는 두 가지가 있다.

1. 리터럴([])을 사용하여 선언
2. Array()를 사용하여 선언

1. 리터럴을 사용

//방법 1
let arr0 = [];
arr0[0] = "apple";
arr0[1] = "strawberry";
arr0[2] = "pineapple";
console.log("arr0 : " + arr0);

//방법 2
let arr1 = ["apple", "strawberry", "pineapple"];
console.log("arr1 : " + arr1);

//방법 3
let arr2 = [,,,];
for (let i=0; i<arr2.length; i++) {
  console.log("arr2[i] : " + arr2[i]);
}

리터럴을 사용하여 선언과 초기화를 같이 하거나 따로 할 수 있다.
이 때, 다른 방법으로 3과 같이 쉼표를 사용하여 배열의 크기를 지정하여 빈 배열을 생성할 수 있다.

2. Array()를 사용

//방법 1
let arr0 = new Array();
arr0[0] = "apple";
arr0[1] = "strawberry";
arr0[2] = "pineapple";
console.log("arr0 : " + arr0);

//방법 2
let arr1 = new Array("apple", "strawberry", "pineapple");
console.log("arr1 : " + arr1);

//방법 3
let arr2 = new Array(3);
for (let i=0; i<arr2.length; i++) {
  console.log("arr2[i] : " + arr2[i]);
}

리터럴을 사용하여 선언하는 방식과 거의 동일하다. []로 선언한 부분을 new Array()함수로 변경해주면 된다.

new Array()보다 []로 선언하는 것이 코드를 간소화시킬 수 있기 때문에 JavaScript에서는 리터럴로 선언하는 것을 권장한다.

인덱스를 이용해 값 출력하기

모든 배열의 인덱스는 0부터 시작한다.

const foods = ['🍗', '🍕'];
console.log(foods);
console.log(foods.length);
console.log(foods[0]);
console.log(foods[1]);

//배열의 전체 길이 - 1은 항상 끝 인덱스의 숫자이다.
console.log(foods[foods.length - 1]);

결과 :
['🍗', '🍕']
2
🍗
🍕
🍕

foods란 배열을 만들었다.
이 배열은 🍗, 🍕를 가지고 있다. 이것을 표로 표현해보면

이렇게 표현할 수 있다.

이 배열의 값에 접근하기 위해서는 위의 코드에서 사용한 것과 같이 배열이름[인덱스] 를 사용하면 된다.

자바스크립트 배열은 다른 언어의 배열과 뭐가 다를까?

다른 언어에서 배열을 배우면 알아볼 수 있는 대표적인 특징이 있다. 바로 배열이 한 가지 데이터 타입으로 이루어져 있다는 것이다. 하지만 JavaScript에서는 다르다.

JavaScript의 배열이 다른 언어의 배열과 다른 점이 있는데

1. 배열 내부에 있는 요소들의 데이터 타입이 다양하다.
2. 배열의 크기는 유동적으로 변경이 가능하다.

이 두 가지가 JavaScript 배열의 대표적인 특징이다.

let arr1 = ["apple", 100, "pineapple"];
console.log("arr1 : " + arr1);

위와 같이 배열 arr1 내부에는 String과 함께 데이터 타입이 Number인 아이템이 같이 저장될 수 있다.

코드를 살짝 변형해보자.

let arr1 = ["apple", 100, "pineapple"];

console.log(arr1.length); // 3
arr1[6] = 300;
console.log(arr1.length); // 7

arr1의 크기는 3이다. 이 상태에서 arr1의 7번째 자리에 300을 저장하는 코드를 입력하였다.

이 때 일어나는 변화는 3이었던 배열의 크기가 7로 늘어나 7번째 자리에 300을 저장하고 남은 공간에는 undefined 값이 저장된다.

이처럼 자바스크립트의 배열은 다른 언어의 배열보다 제약 사항이 적어보인다. 하지만 그만큼 생각지 못한 오류가 발생할 수 있기 때문에 되도록이면 배열에 같은 데이터 타입을 저장하는 것을 권장한다.