[JavaScript] 배열이란

배열

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

const arr = [ 1, 2, 3];

배열이 가지고 있는 값을 요소라고 부른다.

배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다.

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

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

그러므로 배열은 for문을 통해 순차적으로 요소에 접근할 수 있다.

 

배열은 객체지만 일반 객체와는 구별되는 독특한 특징이 있다.

구분	객체	배열
구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	X	O
length 프로퍼티	X	O

일반 객체와 배열을 구분하는 가장 명확한 차이는 "값의 순서"와 "length 프로퍼티"다.

 

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다.

하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이 배열을 밀집 배열이라고 한다.

그러나 JS의 배열은 밀집 배열과는 다르다.

배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다.

배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열이라고 한다.

 

밀집 배열과 희소 배열의 장단점

• 밀집 배열은 인덱스로 요소에 빠르게 접근할 수 있다.하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에도 효율적이지 않다.
• 희소 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴 수 밖에 없는 구조적인 단점이 있다. 하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

length프로퍼티

length 프로퍼티 값은 요소의 개수, 즉 배열의 길이를 바탕으로 결정되지만 임의의 숫자 값을 명시적으로 할당할 수 있다.

현재 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다. 반대인 경우에는 늘어나지 않는다.

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

//작은 값을 할당
const arr = [1,2,3,4,5];
arr.length = 3;
console.log(arr); // [1,2,3]

//큰 값을 할당
const arr = [1];
arr.length = 3;
console.log(arr.length); // 3
console.log(arr); // [1]

그러나 위 같은 경우는 밀집 배열일 때의 얘기고 희소 배열은 length와 배열 요소의 개수가 일치하지 않는다.

희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.

 

배열 생성

• 배열 리터럴
• Array 생성자 함수
• Array.of
• Array.from

배열 리터럴

배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재한다.

const arr = [1,2,3];

배열 리터럴에 요소를 하나도 추가하지 않으면 배열의 길이는 0인 빈 배열이 된다.

배열 리터럴에 요소를 생략하면 희소 배열이 생성된다.

요소를 갖지 않은 인덱스를 출력하면 undefined이 반환된다.

 

Array 생성자 함수

Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작한다.

const arr = new Array(10);

전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다.

이 때 생성된 배열은 희소 배열이다.

전달된 인수가 없는 경우 빈 배열을 생성한다.

전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.

Array 생성자 함수는 new 연산자와 함께 호출하지 않더라도, 배열을 생성하는 생성자 함수로 동작한다.

 

Array.of

Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.

생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는다.

Array.of(1);

 

Array.from

Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

첫 번째 인수는 배열의 요소값 즉 길이를 뜻하며 두 번째 인수는 콜백 함수다.

두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채운다.

//유사 배열 객체를 변환
Array.from({ length: 2, 0: 'a', 1: 'b' }); / ['a','b']
//이터러블 변환
Array.from('Hello'); // ['H','e','l','l','o']
//콜백 함수를 이용한 배열
Array.from( { length: 3}, (_, i) => i); // [0,1,2]