[모던 자바스크립트 Deep Dive] 27장. 배열(1) 생성,참조,추가,삭제

* [출처] 이웅모, 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작원리(2020) , 위키북스, p.492-507

* 책 읽고 공부한 내용 정리한 TIL 입니다. (정보 전달 목적이 아니라 개인 기록용이니 참고 바랍니다.)

---

[ctrl + f 로 찾아쓰기]

* length 프로퍼티

* 희소배열

(배열생성)

* Array.of

* Array.from

(배열 요소 삭제)

* Array.splice(삭제 시작할 인덱스, 삭제할 요소 개수)

---

27장. 배열 (1) 생성,참조,추가,삭제

27.1 배열이란?

- 배열은 객체 타입

- 배열 & 객체의 큰 차이점 : 값의 순서 / length 프로퍼티

- 배열의 생성자 함수 : Array

- 배열의 프로토 타입 객체 : Array.prototype

- 배열의 요소는 최대 2의32승 -1 (4,294,967,295)개 까지 가능

 

27.3 length 프로퍼티와 희소배열

[].length // 0 (빈 배열이면 0)

[1,2,3].length //3 (빈 배열이 아니면 인덱스 +1)

- 희소배열: 배열의 요소가 연속적으로 위치x / 일부가 비여 있는 배열 

[예제 27-17]
//희소배열
const sparse =[,2,,4];

//희소배열의 length 프로퍼티는 요소의 개수와 일치 안함
console.log(sparse.length); //4

//배열 인덱스가 0,2의 요소가 존재하지 않음
console.log(Object.getOwnPropertyDescriptions(sparse));
/*
'1' : ~~~
'3' : ~~~
length :~~~
*/

 

27.4.2 Array 생성자 함수

[예제 27-19]
//1.기본
const arr = [];

[예제 27-25]
//2.Array 생성자 함수
new Array();      // []
new Array(1,2,3); // [1,2,3]
new Array({});    // [{}]

[예제 27-27]
//3. Array.of : 전달된 인수를 요소로 갖는 배열 생성
Array.of(1);        //[1]
Array.of(1,2,3);    //[1,2,3]
Array.of('string'); //['string']

[예제 27-28]
//4. Array.from : 유사배열객체 / 이터러블 객체를 인수로 받아 배열 생성
//유사배열
Array.from( {length: 2, 0:'a', 1:'b'} ) // ['a','b']
Array.from( {length: 3} );              // [undefined,undefined,undefined]
//이터러블 객체
Array.from('Hello');                    // ['H','e','l','l','o']
Array.from({length:3}, (_,i) => i)} ;   // [0,1,2]

 

- 이터러블 객체 : Symbol.iterator 메서드 구현 (for--of문으로 순회 가능)--> 34장"이터러블" 참고

 

27.6 배열 요소의 추가와 갱신

[예제 27-34] 
const arr = [0];

//1.요소 추가
arr[1] = 1;
console.log(arr); //[0,1]


[예제 27-38]
//프로퍼티는 length에 영향을 안 줌
const arr = [];

//배열 요소 추가
arr[0] = 1;
arr['1'] =2;

//프로퍼티 추가
arr['foo'] = 3;
arr.bar    = 4;
arr[1.1]   = 5;
arr[-1]    = 6;

console.log(arr); //[1,2,foo:3, bar:4, '1.1' : 5, '-1':6]
console.log(arr.length); //2

- 배열에 프로퍼티는 길이에 영향을 주지 않음

 

27.7 배열 요소의 삭제 : splice(삭제 시작할 인덱스, 삭제할 요소 개수)

const arr = [1,2,3];

delete arr[1];
console.log(arr); // [1,empty,3]

//요소 삭제해도 길이에 영향 안줌 --> 희소배열이 되어버림
console.log(arr.length); //3


** 그렇기에 특정요소를 완전히 삭제 "splice()"메서드 사용
const arr = [1,2,3];

//Array.prototype.splice(삭제 시작할 인덱스, 삭제할 요소 개수)
arr.splice(1,1); //1번째인덱스부터 1개 삭제
console.log(arr); //[1,3]
console.log(arr.length); //2