[240411] 27장 배열 (1)
배열이란?
- 배열이 가지고 있는 값을 요소
- length 프로퍼티 갖는다.
- 배열이라는 타입은 존재 X 객체 타입
- 배열 리터럴, Array 생성자 함수, Array.of , Array.from 메서드로 생성 가능
- 배열의 프로토타입은 Array.prototype → 배열을 위한 빌트인 메서드 제공
| 구분 | 객체 | 배열 |
|---|---|---|
| 구조 | 프로퍼티 키와 프로퍼티 값 | 인덱스와 요소 |
| 값의 참조 | 프로퍼티 키 | 인덱스 |
| 값의 순서 | X | O |
| length 프로퍼티 | X | O |
자바스크립트 배열은 배열이 아니다.
- 자료구조에서 말하는 배열은 동일한 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조를 말하는데 (밀집배열, O(1)), 자바스크립트 배열은 메모리 공간은 동일한 크기를 갖지 않아도 되고 연속적으로 이어져있지 않을 수도 있어서 희소 배열 O(n) 이라 한다.
- 이처럼 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.
- 해시 테이블로 구현된 객체
- 요소 접근은 일반적인 배열보다 느리지만 요소를 삽입 삭제하는 경우 빠른 성능을 기대할 수 있다.
length 프로퍼티와 희소 배열
- 배열 요소의 최대 크기
const arr = [1,2,3];
arr.push(4);
arr.pop()
arr.length = 2 // 배열의 길이 줄어듬
- 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열이라하는데, JS는 문법적으로 허용함
- 희소 배열은 length 와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다.
- 배열에는 같은 타입의 요소를 연속적으로 위치 시키는 것이 최선이다.
배열 생성
1. 배열 리터럴
- []
const arr = [1, ,3]; // 희소 배열, length 3
2. Array 생성자 함수
const arr = new Array(10); // [empty * 10] 생성
// 배열은 요소를 최대 4,294,967,295개 가질 수 있다.
new Array(4294967295);
// RangeError 발생
new Array(4294967295);
// RangeError 발생
new Array(-1);
new Array(); // []
new Array(1,2,3); // [1,2,3]
- new 연산자와 함께 호출하지 않더라도 일반 함수로 호출해도 생성자 함수로 동작한다. Array 함수 내부에서 new target을 확인하기 때문
3. Array.of
- ES6 에서 도입
- 전달 인수가 1개이더라도 인수를 요소로 갖는 배열 생성
Array.of(1); // [1]
Array.of(1,2,3); // [1,2,3]
Array.of('string'); // ['string']
4. Array.from
- 유사 배열 객체, 이터러블 객체를 인수로 전달받아 배열로 변환
// 유사 배열 객체
Array.from({length: 2, 0:'a', 1:'b'}); // ['a','b']
// 이터러블 변환
Array.from('Hello'); // ['H','e','l','l','o']
// 두번째 콜백로 채울 수 있음
Array.from({ length : 3 }, (_,i)=>i); // [0,1,2]
배열 요소의 참조
- 대괄호 표기법 사용
- 객체의 프로퍼티와 같은 역할
- 존재하지 않으면 undefined
배열 요소의 추가와 갱신
- index를 통해 할당하면 새로운 요소가 추가, length 프로퍼티 값은 자동 갱신
- length 프로퍼티 값보다 큰 인덱스로 요소 추가하면 희소 배열됨
arr[100] = 100;
console.log(arr); // [0,1, empty * 98, 100]
console.log(arr.length); // 101
arr['1'] = 2; // 정수값만 length 값에 영향 줌
배열 요소의 삭제
- delete 연산자 사용 가능 → 사용하지 않는 것이 좋다. (희소배열)
const arr = [1,2,3];
delete arr[1]; // length 3 , 영향을 주지 않음, 희소배열됨
- Array.prototype.splice 메서드 사용
- 희소 배열 만들지 않음
- 요소를 완전히 삭제
- splice(삭제를 시작할 인덱스, 삭제할 요소 수)
const arr = [1,2,3];
arr.splice(1,1);
console.log(arr); // [1,3]
console.log(arr.length); // 2
배열 메서드
- 반환하는 패턴 두가지
- 원본 배열을 직접 변경하는 메서드
- 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드 (가급적 사용 권장)
1. Array.isArray
- 배열 유무에 따른 true, false
2. Array.prototype.indexOf
- 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환
- 없으면 -1 반환
3. Array.prototype.push
- 원본 배열 직접 변경
- 마지막 요소 추가
- ES6 스프레드 문법 추천
4. Array.prototype.pop
- 원본 배열 직접 변경
- 마지막 요소 반환
- 빈 배열이면 undefined
5. Array.prototype.unshift
- 선두에 요소 추가
- length 값 반환
- 원본 배열 직접 변경
- 스프레드 문법 추천
Leave a comment