[JavaScript] 배열 기초

Rose Jang·2022년 11월 5일
0

Section 1

목록 보기
7/15

배열(Array)

배열은 여러 개의 값을 순차적으로 나열한 자료구조다.

const fruits = ['apple', 'banana', 'orange'];
// 3개의 요소 'apple', 'banana', 'orange'로 구성.
// 'apple'의 인덱스는 0, 'banana'의 인덱스는 1, 'orange'의 인덱스는 2

배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.

배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(Index)를 갖는다. 대부분의 프로그래밍 언어에서 인덱스는 0부터 시작한다.

요소에 접근할 때는 대괄호 표기법을 사용한다.

fruits[0] // 'apple'
fruits[1] // 'banana'
fruits[2] // 'orange'

자바스크립트에 배열이란 타입은 존재하지 않는다.
배열은 객체(object) 타입이다.

typeof fruits // object



length 프로퍼티

배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.

length 프로퍼티의 값은 빈 배열일 경우 0이며, 빈 배열이 아닐 경우 가장 큰 인덱스에 1을 더한 것과 같다.

fruits.length //3
[].length //0
[1, 2, 3, 4, 5].length //5

배열의 인덱스length 프로퍼티를 사용해 for문을 통해 배열을 순회할 수 있다.

for(let i = 0; i < fruits.length; i++){
  console.log(fruits[i]);
}

length프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.

let arr = [1, 2, 3];
console.log(arr.length); //3

//요소 추가
arr.push(4);
console.log(arr.length); //4

//요소 삭제
arr.pop();
console.log(arr.length); //3

length프로퍼티에 임의의 숫자 값을 명시적으로 할당할 수도 있다.
현재 length프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다.

let arr = [1, 2, 3, 4, 5];

arr.length = 3;

console.log(arr); //[1, 2, 3]



희소 배열

현재 length 프로퍼티 값보다 큰 숫자 값을 할당하는 경우 length 프로퍼티의 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.

let arr = [0];

arr.length = 3;

//length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다
console.log(arr.length); // 3
console.log(arr) // [0, empty x 2]

위에서 empty x 2는 실제로 추가된 배열의 요소가 아니다. 즉, arr[1]arr[2]에는 값이 존재하지 않는다.

length 프로퍼티 값보다 큰 값을 length 프로퍼티에 할당하는 경우 length 프로퍼티 값은 변경되지만 실제 배열에는 아무런 변함이 없다. 값 없이 비어있는 요소를 위해 메모리 공간을 확보하거나 빈 요소를 생성하지 않는다.

이렇게 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열을 희소 배열이라 한다.

// 희소 배열
let arr = [, 1, , 3];

// 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다.
console.log(arr.length); // 4
console.log(arr); // [empty, 1, empty, 3]

일반적인 배열의 length는 배열 요소의 개수와 언제나 일치한다. 하지만 희소 배열length와 배열 요소의 개수는 일치하지 않는다. 희소 배열length희소 배열의 실제 요소 개수보다 언제나 크다.

자바스크립트는 문법적으로 희소 배열을 허용하지만 희소 배열은 사용하지 않는 것이 좋다. 의도적으로 희소 배열을 만들어야 하는 상황은 발생하지 않는다.
배열을 생성할 때에는 희소 배열을 생성하지 않도록 주의해야 한다. 배열은 같은 타입의 요소를 연속적으로 위치시키는 것이 최선이다.

0개의 댓글