[모딥다] 27장 배열

⛳ 27.1 배열이란?

 

여러 값을 순차적으로 나열한 자료구조. 

요소: 배열이 갖고 있는 값

인덱스: 요소의 순서 0부터 시작

length : 배열의 길이

 

JS 에 배열이한 타입은 존재하지 않음. 

배열은 객체 타입임. 

객체와 배열의 차이

 

 

 

 

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

 

🏌️‍♂️ 일반적인 자료구조에서의 배열과는 의미가 다른 JS 에서의 배열

- 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 됨. 

- 희소 배열 : 배열의 요소가 연속으로 이어져 있지 않음 (<-> 밀집 배열)

- 배열의 동작을 흉내 낸 특수한 객체임. 

 

🏌️‍♂️ 일반 배열 vs 자바스크립트 배열 장단점 정리

일반 배열	JS 배열
- 인덱스로 요소에 빠르게 접근할 수 있다. - 하지만 요소를 삽입, 삭제하는 경우엔 효율성 떨어짐.	- 해시 테이블로 구현된 객체 => 인덱스에 요소로 접근하는 경우 일반적인 배열보다 성능 면에서 느릴 수 밖에 없다. - 요소를 삽입, 삭제하는 경우는 빠른 성능

 

인덱스로 배열 요소에 접근 시 느린 점을 보완하기 위해 

대부분의 JS 엔진은 배열을 일반 객체와 구별 & 최적화 구현

-> 일반 객체보다 약 2배 빠름. 

 

오

time , timeEnd 메서드를 이용해 걸리는 시간을 측정할 수 있군

 

 

 

 

⛳ 27.3 length 프로퍼티와 희소 배열

 

배열의 길이를 바탕으로 결정되지만, 

임의로 숫자 값을 명시적으로 할당할 수도 있다. 

실제 배열 길이보다 작은 숫자 할당 -> 길이 줄어듦

실제 배열 길이보다 큰 숫자 할당 -> 변화 없음. 값이 존재 하지 않기에 메모리 할당을 하지 않음. 

 

희소 배열

- 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열. 

- JS 에서 문법적으로 허용함. 

- 중간, 앞부분이 비어있을 수 있음.

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

const arr = [1, , 3];

 

 

 

⛳ 27.4 배열 생성

 

27.4.1 배열 리터럴

const arr = [1, 2, 3];

 

27.4.2  Array 생성자 함수

const arr = new Array(10);

빈자리 10개 생성 

채우기 전 까지 희소배열

 

27.4.3 Array.of

전달된 인수를 요소로 갖는 배열 생성

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

 

27.4.3 Array.from

유사 배열 객체 또는 이터러블 객체를 인수로 전달 받아 배열로 반환

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

 

 

 

 

⛳ 27.5 배열 요소의 참조

 

arr[index]

 

 

 

 

⛳ 27.6 배열 요소의 추가와 갱신

 

[] 안에 정수 이외의 값을 사용하면 -> 요소 생성이 아니라 프로퍼티가 생성됨.

const arr = [];

arr[0]=1;
arr['1'] = 2;

//[1, 2]

arr['hello'] = 3;
arr.bar = 4;
arr[1.1] = 5;
arr[-1] = 6;

//[1, 2, hello:3, bar:4, '1.1': 5, '-1': 6]

 

 

 

 

⛳ 27.7 배열 요소의 삭제

 

delete 연산자 사용

 

 

⛳ 27.8 배열 메서드

 

원본 배열 직접 변경 mutator method

원본 배열 변경 안하고 새로운 배열 생성 accessor method

 

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

Array() 생성자 - JavaScript | MDN

 

메서드 리스트 참조

 

 

27.8.7 Array.prototype.concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

• 기존배열을 변경하지 않습니다.
• 추가된 새로운 배열을 반환합니다.

 

push 와 unshift 와 다른 점

- 얘네는 원본 배열 변경, concat 은 원본 배열을 변경하지 않고 새로운 배열 반환. 

- push, unshift 사용시 원본 배열을 따로 저장해둬야함. 

- 배열로 인수를 전달 받을 경우, push 와 unshift 는 배열을 그대로 요소로 추가함. 

- concat 은 전달받은 배열을 해체, 새로운 배열의 요소로 추가함.

 

 

 

27.8.8 Array.prototype.splice()

- 중간 값 제거하고 추가할 때 유용함. 

 

27.8.9 Array.prototype.slice()

복사. 전달된 범위의 요소를 복사  -> 배열로 반환. 원본 배열은 변경되지 않음. 

(얕은 복사임)

 

 

27.8.14 Array.prototype.flat()

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

 

오..

 

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

Array.prototype.flat() - JavaScript | MDN

 

 

 

⛳ 27.9 배열 고차 함수

 

고차 함수 : 함수를 인자로 받거나 함수를 반환하는 함수. 

 

희소 배열의 경우 존재하지 않는 요소는 순회 대상에서 제외됨. 

 

 

27.9.10 Array.prototype.flatMap()

flat + map => map 메서드를 통해 생성된 새로운 배열을 평탄화. 

평탄화 깊이를 지정할 수 없고 1단계만 가능. 

 

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

Array.prototype.flatMap() - JavaScript | MDN