[MJS] 배열

Javascript 개념

모던 자바스크립트 딥 다이브 정리

배열

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

밀집 배열

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

하나의 데이터 타입으로 통일되어 있다.

인덱스를 통해서 고속으로 접근할 수 있어 접근은 O(n)의 시간 복잡도를 가진다.
검색 시에는 O(n)의 시간 복잡도를 가진다.

요소의 삽입이나 삭제의 경우 배열을 연속적으로 유지하기 위해 요소를 이동시켜야 하는 비효율이 있다.

자바스크립트에서는 일반적인 의미의 배열과 다르다

자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.

인덱스를 나타내는 문자열 (’0’, ‘1’, ‘2’,,,)을 프로퍼티 키로 가지고, length 프로퍼티(요소의 개수)를 갖는 객체이다.

따라서, 배열의 요소는 프로퍼티 값이므로 어떤 타입을 넣어도 된다.

일반 배열과 자바스크립트 배열의 차이

• 일반 배열: 인덱스 요소에 빠르게 접근 가능. 검색, 삽입, 삭제는 비효율
• 자바스크립트 배열: 접근은 일반 배열보다 느리지만, 특정 요소를 삽입, 삭제하는 경우 일반 배열보다 빠르다.

희소 배열

length 프로퍼티의 값과 배열의 요소의 개수가 일치하지 않는 배열이다.
length가 배열의 요소 개수보다 언제나 크다.

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

배열은 같은 타입의 요소를 연속적으로 위치 시키는 것이 성능에 좋으므로 희소 배열은 사용하지 않아야 한다.

length 프로퍼티를 실제 요소 개수보다 크게 설정하면 프로퍼티에는 값이 적용되지만, 요소가 비어있게 된다.(메모리 공간 확보 X)

이는 앞부분, 중간, 뒷부분 어디에서도 비어있을 수 있다.

const arr = [1];

// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;

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

// 희소 배열
const sparse = [, 2, , 4];

// 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다.
console.log(sparse.length); // 4
console.log(sparse); // [empty, 2, empty, 4] // 배열 sparse에는 인덱스가 0, 2인 요소가 존재하지 않는다.

배열의 생성

1. 배열 리터럴

   [ ]안에 쉼표로 구분하여 변수에 할당하는 방식

2. Array 생성자 함수

   new Array()를 통해 배열을 생성한다. (Array 생성자 함수 내부에서 new.target을 확인하기 때문에 new 써주지 않아도 동작한다.)

   전달된 인수에 따라 다르게 동작한다.

   • 전달된 인수 1개(숫자): 전달받은 숫자를 length로 가지는 배열을 생성

     const arr = new Array(10);
     console.log(arr); // [empty x 10]
     console.log(arr.length); // 10
     

   • 전달된 인수 0개: 빈 배열 생성

     new Array(); // []
     

   • 전달된 인수 2개 이상 혹은 숫자가 아닌 경우: 전달받은 내용을 요소로 갖는 배열 생성

     new Array(1, 2, 3); // [1,2,3]
     
     new Array({}); // [{}]
     

3. Array.of

   ES6에서 도입된 메서드, 전달된 인수를 요소로 갖는 배열을 생성

   Array.of(1); // [1]
   Array.of(1, 2, 3); // [1,2,3]
   

   전달된 인수가 숫자 1개 이더라도 그것을 요소로 갖는 배열을 생성한다.

4. Array.from

   ES6에서 도입된 메서드, 유사 배열 객체 및 이터러블 객체를 인수로 전달받아 배열로 변환하는 메서드

   // 유사 배열 객체
   Array.from({ length: 2, 0: "a", 1: "b" }); // ['a','b']
   // 이터러블 (문자열)
   Array.from("Hello"); // ['H', 'e', 'l', 'l', 'o']
   

배열 메서드

Array 생성자 함수는 정적 메서드를 제공하고, 배열 객체의 프로토타입 Array.prototype은 프로토타입 메서드를 제공한다.

배열 메서드의 결과물을 반환하는 패턴

• mutator method: 원본 배열을 직접 변경하는 메서드
• accessor method: 원본 배열을 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드

가급적 원본을 수정하지 않는 accessor method를 사용하는 것이 좋다.

배열 고차 함수

고차함수

함수를 인수로 전달받거나 함수를 반환하는 함수

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

함수형 프로그래밍

순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결,
변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임

순수 함수를 통해 부수 효과를 억제하여 오류를 피하고, 프로그램의 안정성을 높일 수 있다.