아주 쉬운 배열 - 참조, 추가, 갱신, 삭제

배열의 참조, 추가, 갱신, 삭제 방법에 대해 알아보자!

배열 요소 참조

배열 요소 참조 시 대괄호 표기법 사용, 대괄호 안에는 인덱스를 작성

인덱스는 값을 참조할 수 있으므로 객체의 프로퍼티와 같은 역할을 한다.

존재하지 않는 요소 참조 시 unedfined 반환

희소 배열의 존재하지 않는 요소 참조 시 undefined 반환

const arr = [1, 2];
console.log(arr[0]);	// 1
console.log(arr[3]);	// unedfined

---

배열 요소 추가 및 갱신

존재하지 않는 인덱스를 사용해 값 할당 시 새로운 요소 추가 => length 프로퍼티 값 자동 갱신

현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소 추가 시 희소 배열이 된다.

인덱스로 요소에 접근하여 명시적으로 값을 할당하지 않은 요소는 생성되지 않는다.

이미 요소가 존재하는 요소에 값을 재할당하면 요소 값 갱신

const arr = [0];
arr[1] = 1;
console.log(arr);	// [0,1]

arr[3] = 3;
console.log(arr);	// [0, 1, , 3]

arr[2] = 2;
console.log(arr);	// [0, 1, 2, 3]

정수 이외의 값을 인덱스처럼 사용 시 요소가 생성되는 것이 아니라 프로퍼티가 생성, 추가된 프로퍼티는 length 프로퍼티값에 영향을 주지 않는다.

---

배열 요소 삭제

배열은 객체이므로 배열의 특정 요소를 삭제하기 위해 delete 연산자 사용 가능

delete 연산자는 객체의 프로퍼티를 삭제

희소 배열을 만들지 않고 배열의 요소를 삭제하려면 Array.prototype.splice 메서드를 사용

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

arr.splice(1,1);
console.log(arr);	// [1, 3] => length = 2

 

본 게시글은 모던자바스크립트 Deep Dive - 자바스크립트의 기본 개념 책을 읽고 정리했습니다.
더 자세한 내용은 책을 구매해보시길 권장드립니다!