배열

여러개의 값을 순서대로 나열한 자료구조를 뜻하며 배열이 가지고 있는 값은 요소라고 부릅니다.

자바스크립트에서 배열은 배열타입이아닌 객체타입으로 객체로 여겨진다. 하지만 객체와는 분명한 차이점이 있다.

자바스크립트의 배열은 배열이 아니다?

일반적으로 배열은 동일한 크기의 메모리 공간이 빈틈없이 나열되어있는 자료구조를 의미한다. 이러한 형태를 밀집 배열이라고 하며 인덱스를 통해 한번의 연산으로 임의의 요소에 접근할 수 있어 매우 효율적이다. 하지만 정렬되지 않은 배열은 배열의 요소를 순회하며 검색하여야 하는 문제가 있다.

또한 배열의 요소를 삽입하거나 삭제하려고 할 때 배열의 연속성을 유지하기위해 요소의 위치를 이동시켜야하는 현상도 발생한다.

그러나 자바스크립트의 배열은 다르다. 배열이 동일한 크기의 메모리 공간을 보유하지 않아도 되며 연속적으로 나열될 필요도 없다. 이를 희소 배열이라고 부른다.

그래서 일반적인 배열과 자바스크립트의 배열은 아래와 같은 차이를 가진다.

• 일반적인 배열은 인덱스를 통해 빠르게 요소를 찾을 수 있지만 특정 요소를 삽입 삭제하는 경우에는 효율성이 떨어진다.
• 자바스크립트의 배열은 해시 테이블로 구현된 객체 구조를 지니기 때문에 인덱스를 통해 요소를 찾는 것은 효율 성이 떨어지나 삽입이나 삭제의 경우에는 일반적인 배열보다 빠르다.

인덱스를 통해 요소를 찾는 효율성을 증대시키기위해 모던 자바스크립트 엔진은 배열을 통한 인덱스 검색을 최적화 하여 객체의 인덱스를 찾는 시간보다 더 빠르다.

length 프로퍼티

배열의 length 는 배열의 마지막 인덱스 + 1 을 한 값이며 0부터 2³² - 1 미만의 양의 정수이다. 이 말은 즉 배열은 최대 2³² - 1 개의 요소를 가질 수 있음을 뜻한다.

배열의 length 프로퍼티에 값을 직접 할당 할 수 있으며 기존 length보다 작은 값을 할당할 경우 길이가 줄어들며 큰 값을 할당할 경우에는 실제로 길이는 늘어나지 않는다.

const array = [1, 2, 3, 4, 5];
array.length = 3;

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

array.length = 5;
console.log(array.length); //5
console.log(array); // [1,2,3, empty * 2]

배열 생성

배열 리터럴

0개 이상의 요소를 쉼표로 구분하여 대괄호로 감싸 생성한다.

const array = [1, 2, 3];
const empty = []; // 대괄호 내부에 요소를 추가하지 않으면 length 0의 배열이 된다.

const number = [1, , 3]; // 요소를 생략할 경우에는 희소배열이 된다.

Array 생성자 함수

// 인수가 1개에 숫자일 경우 length 프로퍼티가 그 숫자만큼인 배열을 생성한다.
const array = new Array(10);

console.log(array); // [empty * 10]

const arr = new Array();
console.log(arr); // []

// 인수가 숫자가 아니거나 2개이상인 경우에는 인수를 요소로 갖는 배열을 생성한다.
const list = new Array(3, 4, 5);
const nestedObject = new Array({});

Array.of

전달 받은 인수를 요소로 갖는 배열을 생성한다.

const array = Array.of('string'); // ["string"]

Array.from

유사 배열객체 또는 이터러블 객체를 인수로 전달받아 배열을 생성한다.

Array.from({ length: 2, a: 3, b: 4 }); // [3,4]

Array.from({ length: 3 }, (_, i) => i); // [0,1,2]

배열 요소의 참조

const array = [1, 2, 3, 4, 5];

array[4]; // 5
array[5]; // undefined

배열 요소의 추가와 갱신

const array = [1, 2, 3, 4, 5];

array[5] = 6;
array[4] = 3;

array[7] = 5;

console.log(array); // [1, 2, 3, 4, 3, 6, empty, 5]

배열 요소의 삭제

배열은 객체이기 때문에 delete 연산자로 요소를 제거 할 수 있지만 배열의 length 프로퍼티가 변하지 않기 때문에 사용하지 않는 것 이 좋다.

배열의 요소를 제거할 수 있는 Array.prototype.splice 메서드를 권장한다.

배열 메서드

배열 메서드에는 원본배열을 변경하는 메서드와 원본배열을 변경하지 않고 새로운 배열을 반환하는 메서드로 나뉜다.

• 배열 고차 함수

고차 함수 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말하며 외부상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

자바스크립트는 고차함수를 다수 지원하며 특히 배열은 유용한 고차함수를 제공하고 있다.

다양한 배열 메서드에대한 자세한 소개는 아래 링크에서 확인할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array