[Group Study, 모던 자바스크립트 Deep Dive] - 27 배열

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비나 novice인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

27 배열

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

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다(밀접 배열)

일반적인 의미의 배열은 각 요소가 동일한 데이터 크기를 가지며, 빈틈없이 연속적으로 이어져있으므로 다음과 같이 인덱스를 통해 단 한 번의 연산으로 임의의 요소에 접근(시간 복잡도 O(1))할 수 있다.

[그림 27-01]

 

자바스크립트의 배열은 일반적인 의미의 배열과 다르다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열이라 한다.

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

 

[예제 27-01]

console.log(Object.getOwnPropertyDescriptors([1,2,3]))

/*
{
 '0': {value: 1, wriatble: true, enumerable: true, configurable: true}
 '1': {value: 2, wriatble: true, enumerable: true, configurable: true}
 '2': {value: 3, wriatble: true, enumerable: true, configurable: true}
 length: {value: 3, wriatble: true, enumerable: false, configurable: false}
}
*/

 

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

---

27.4 배열 생성

27.4.1 배열 리터럴

[예제 27-02]

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

27.4.2 Array 생성자 함수

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

[예제 27-03]

const arr = new Array(10)

console.log(arr) // [empty * 10]



console.log(Object.getOwnPropertyDescriptors(arr))

/*
{
 length: {value: 10, wriatble: true, enumerable: false, configurable: false}
}
*/

27.4.3 Array.of

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

[예제 27-04]

Array.of(1) // -> [1]

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

27.4.4 Array.from

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

[예제 27-05]

Array.from({length: 2, 0: 'a', 1: 'b'}) // ['a', 'b']

 

=