[js] 자바스크립트 DeepDive 27장 요약 (1)

* 본 내용은 자바스크립트 DeepDive 내용을 참고하여 정리한 것입니다.

 

27장. 배열(1) (P.492~528)

 

27.1) 배열이란? (p.492~494)

- 배열이란 여러 개의 값을 순차적으로 나열한 객체 타입의 자료구조

- 배열은 배열의 길이를 나타내는 length프로퍼티를 가진다. -> for문을 통해 접근 가능

-  Array 생성자 함수, Array.of, Array.from메소드로 생성할 수 있다.

- 요소: 배열이 가지고 있는 값. 자신의 위치를 나타내는 0이상의 정수인 인덱스를 가진다. (0부터 시작)

 

* 일반 객체와 배열의 구분.

-> 가장 명확한 차이는 값의 순서와 length 프로퍼티.

구분	객체	배열
구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	x	o
lenght프로퍼티	x	o

 

* 배열의 장점

- 순차적/역순으로 요소 접근 가능

- 특정 위치에서부터 순차적으로 접근 가능

- 일반적인 의미의 배열은 매우 효율적, 고속 동작함.

 

* 배열의 단점

- 선형 검색으로 인한 시간 복잡

- 배열에 요소를 삽입 혹은 삭제하는 경우 요소를 이동시켜야 함.

 

 

27.2) 자바스크립트 배열은 배열이 아니다. (p.494~497)

- 밀집 배열: 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접한 배열

- 희소 배열: 배열의 요소가 연속적으로 이어져 있지 않는 배열

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

 

 

27.3) length프로퍼티와 희소 배열 (p.497~500)

* length 프로퍼티 설명

- length프로퍼티는 배열의 길이를 나타내는 0이상의 정수를 값으로 가진다.

- 빈 배열: 0, 빈 배열이 아닐 경우, 가장 큰 인덱스에 1을 더한 값

- length프로퍼티의 값은 자동 갱신되며, 임의 숫자 값을 명시적으로 할당 가능.

- length프로퍼티 값보다 작은 숫자 값을 할당 시 배열의 길이가 줄어듦.

- length프로퍼티 값보다 큰 숫자 값을 할당 시 lenght프로퍼티 값은 변경되나, 배열의 길이가 늘어나지 않음.

 

* 희소 배열

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

- 자바스크립트에서는 문법적으로 허용함.

- 희소 배열은 length와 배열 요소의 개수가 일치하지 않음. 

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

 

 

27.4) 배열 생성 (p.500~503)

 27.4.1) 배열 리터럴 (p.500~501)

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

- 가장 일반적이면서도, 간편한 배열 생성 방식.

- 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶음.

- 프로퍼티 키가 없고, 값만 존재.

 

 

 27.4.2) Array 생성자 함수 (p.501~502)

const arr = new Array(100);
console.log(arr); // [ <100 empty items> ]
console.log(arr.length); // 100

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

- Array 생성자 함수에 전달할 인수는 0 또는 2^32-1이하인 양의 정수여야 함. 이러한 범위를 벗어나면 RangeError발생.

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

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

 

 

 27.4.3) Array.of (p.502)

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

- 인수가 1개이고 숫자더라도 인수를 요소로 갖는 배열을 생성.

 

 

27.4.4) Array.from (p.502~503)

const len = Array.from({ length: 2, 0: 'a', 1: 'b'});
const hello = Array.from('Hello');
console.log(len); // [ 'a', 'b' ]
console.log(hello); // [ 'H', 'e', 'l', 'l', 'o' ]

- 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환함.

- 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채우기 가능.

 

 

27.5) 배열 요소의 참조 (p.504~505)

- 배열의 요소를 참조 시에는 대괄호 ([]) 표기법 사용

- 희소 배열의 존재하지 않는 요소를 참조하거나, 존재하지 않는 요소에 접근 시 undefined가 반환

 

 

27.6) 배열의 요소의 추가와 갱신 (p.505~506)

- 배열에도 요소를 동적으로 추가할 수 있음

- 존재하지 않는 인덱스를 활용해 값을 할당하면 새로운 요소가 추가됨

- length프로퍼티 값은 자동으로 갱신됨

- 현재 배열의 length프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가 시 희소 배열이 됨 (단. 명시적으로 값을 할당하지 않은 요소는 생성되지 않음)

- 이미 요소가 존재하는 요소에 값을 재할당할 시 요소값이 갱신됨.

- 인덱스는 반드시 0 이상의 정수를 사용해야 함. 정수 이외의 값을 사용하면 프로퍼티가 생성됨. 

 

 

27.7) 배열 요소의 삭제 (p.506~507)

- 배열은 delete연산자를 사용하여 배열의 특정 요소 삭제 가능

- 삭제 시 배열은 희소 배열이 되며, length프로퍼티 값은 변하지 않음

- 희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice메소드를 사용함.

 

 

27.8) 배열 메서드 (p.507~528)

- 배열 메서드는 결과물을 반환하는 패턴이 두 가지이다.

- 원본 배열을 직접 변경하는 메서드, 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.

- 원본 배열: 배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체

- 가급적 원본 배열을 직접 변경하지 않는 메서드 사용이 권장됨.

 

 27.8.1) Array.isArray (p.508)

-  Array생성자 함수의 정적 메서드.

- 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환

 

 

27.8.2) Array.prototype.indexOf (p.508~509)

-  indexof메소드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환

- 배열에 특정 요소가 존재하는지 확인할 때 유용

- ES7에서는, indexOf메서드 대신, Array.prototype.includes메서드를 사용하면 가독성이 더 좋음.

 

* 반환법

- 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있을 시, 첫 번째로 검색된 요소의 인덱스 반환

- 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환

 

 

27.8.3) Array.prototype.push (p.510)

- 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환.

- 원본 배열을 직접 변경하는 부수 효과 존재. -> ES6 스프레드 문법 사용 권장

- 성능 면에서 좋지 않음.

 

 

27.8.4) Array.prototype.pop (p.510~513)

- 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환

- 원본 배열이 빈 배열이면 undefined를 반환

- 원본 배열을 직접 변경함

 

* 스택의 구현

- 스택: 데이터를 마지막에 밀어 넣고, 마지막에 밀어 넣은 데이터를 먼저 꺼내는 후입 선출 방식의 자료 구조.

- pop메서드와 push메서드를 사용하면 구현 가능

- 스택에 밀어 넣는 것을 푸시(push), 스택에서 데이터를 꺼내는 것을 팝(pop)이라고 함.

 

 

27.8.5) Array.prototype.unshift (p.513~514)

- 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length프로퍼티 값을 반환

- 원본 배열을 직접 변경하는 부수 효과 존재. -> ES6 스프레드 문법 사용 권장

 

 

27.8.6) Array.prototype.shift (p.514~516)

- 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환함.

- 원본 배열이 빈 배열이면 undefined를 반환.

- 원본 배열을 직접 변경함.

 

* 큐의 구현

- 큐: 데이터를 마지막에 밀어 넣고, 처음 데이터를 먼저 꺼내는 선입 선출방식의 자료구조.

- 큐는 언제나 데이터를 밀어 넣은 순서대로 취득한다.

 

 

27.8.7) Array.prototype.concat (p.516~518)

- 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환

- 인수로 전달한 값이 배열인 경우, 배열을 해체 후 새로운 배열의 요소로 추가.

- 단, 원본 배열은 변경되지 않음.

- push와 unshift메서드는 concat메서드로 대체할 수 있음. 단 일부 차이점 존재.

- ES6의 스프레드 문법으로 대체 가능 -> 스프레드 문법을 일관적으로 사용하는 것을 권장

 

* push/unshift메서드와 concat메서드의 차이

	push/unshift메서드	concat메서드
원본배열 변경방식	직접 변경	원본배열변경안함, 새로운 배열 반환
원본배열 저장방식	변수에 저장	반환값을 변수에 할당
인수로 전달받은 값이 배열인 경우	원본 배열의 마지막/첫 요소로 추가	배열 해체 후 새로운 배열의 마지막 요소에 추가함

 

 

27.8.8) Array.prototype.splice (p.518~521)

- 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하고자 할 경우 사용

- 원본 배열을 직접 변경함

 

* splice메서드에 속하는 매개변수

1) start: 원본 배열의 요소를 제거하기 시작할 인덱스

2) delectCount: start부터 제거할 요소의 개수

3) items: 제거한 위치에 삽입할 요소들의 목록

 

- 위 3개의 인수를 모두 전달하면 시작 인덱스부터 제거할 요소의 개수만큼 원본 배열에서 요소를 제거

- 두 번째 인수, 제거할 요소의 개수를 0으로 지정하면 아무런 요소도 제거하지 않고 새로운 요소들을 삽입함

- 두 번재 인수를 생략하면, 첫 번째 인수로 전달된 시작 인덱스부터 모든 요소를 제거.

- 세 번째 인수를 지정하지 않으면 원본 배열에서 지정된 요소를 제거하기만 함.

 

 

27.8.9) Array.prototype.slice (p.522~525)

- 인수로 전달된 범위의 요소들을 복사하여 배열로 반환.

- 원본 배열은 변경되지 않음.

 

* slice메서드에 속하는 매개변수

1) start: 복사를 시작할 인덱스. 

2) end: 복사를 종료할 인덱스 (생략 가능, 생략 시 기본 값은 length프로퍼티 값)

 

- 위 매개변수 중 첫 번째 인수(start)가 음수라면 배열의 끝에서부터 요소를 복사하여 배열로 반환

- 매개변수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환함.

 

 

27.8.10) Array.prototype.join (p.525)

- 원본 배열의 모든 요소를 문자열로 반환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환함.

- 구분자는 생략 가능하며, 기본 구분자는 콤마(,)임.

 

 

27.8.11) Array.prototype.reverse (p.525)

- 원본 배열의 순서를 반대로 뒤집음.

- 원본 배열이 변경됨

- 반환값은 변경된 배열임.

 

 

27.8.12) Array.prototype.fill (p.526~527)

- 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채움.

- 원본 배열이 변경됨.

- fill메서드를 사용해 모든 요소를 채울 경우, 모든 요소를 하나의 값만으로 채울 수밖에 없다는 단점 존재

 

 

27.8.13) Array.prototype.includes (p.527~528)

- ES7도입.

- 배열 내에 특정 요소가 포함되어 있는지 확인하여 true or false로 반환

- 첫 번째 인수로 검색할 대상을 지정

- 두 번째 인수로 검색을 시작할 인덱스 전달 (생략시 기본값은 0, 음수 입력 시 length프로퍼티 값과 인덱스를 합산함.)

 

 

27.8.14) Array.prototype.flat (p.528)

- ES10(2019)도입

- 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화

- 중첩 배열을 평탄화할 깊이를 인수로 전달. 

- 인수 생략 시 기본값은 1

- 인수로 Infinity지정 시 중첩 배열 모두를 평탄화 함.

 

 

끝.

 

다음 내용: 자바스크립트 DeepDive 27장 [배열(2)] 요약 (p.529~551)