JavaScript - 배열 요소의 참조 & 추가 & 갱신 & 삭제까쥐

김민재·2021년 8월 4일

WeCode 키워드 심화 공부

TIL, Deep Javascript

목록 보기

14/22

*🔐Study Keyword :

✅배열의 🔑인덱스를 활용하여 🔑원하는 요소에 접근하는 법과 🔑배열의 값을 추가, 수정, 삭제하는 법을 배워보잣!

1. 배열 요소의 참조
2. 배열 요소의 추가와 갱신
3. 배열 요소의 삭제

배열의 원하는 요소에 접근

배열의 인덱스, 즉 값의 순서를 이용해서 원하는 요소에 접근(참조)하여 값을 추가, 수정, 삭제해보자.

1. 배열 요소의 참조

-HOW TO USE❓

배열의 요소를 참조할 땐 대괄호([]) 표기법을 사용하여 안에 인덱스(값의 순서)를 넣어준다.

인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 한다.
<script>
const arr = [1, 2];
// 인덱스가 0인 요소를 참조
console.log(arr[0]); // 1
// 인덱스가 1인 요소를 참조
console.log(arr[1]); // 2
</script>

존재하지 않는 요소에 접근하면 undefined가 반환된다.

<script>
const arr = [1, 2];
// 인덱스가 2인 요소를 참조 시 arr에 인덱스 2인 요소 존재하지 않는다
console.log(arr[2]); // undefined가
</script>

배열은 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는 객체✨다.
-> 따라서 존재하지 않는 프로퍼티 키로 객체의 프로퍼티에 접근하면 undefined를 반환하는 것과 같이 희소 배열에 존재하지 않는 요소를 참조해도 undefined가 반환된다.
<script>
//희소 배열
const arr = [1, , 3]; 
// 배열 arr에는 인덱스가 1인 요소가 존재하지 않는다.
console.log(Object.getOwnPropertyDescriptors(arr);
/* 
{
'0' : {configurable: true, enumerable: true, value: 1, writable: true},
'2' : {configurable: true, enumerable: true, value: 3, writable: true}, 
length: { configurable: false, enumerable: false, value: 3, writable: true}
}
*/
// 존재하지 안흔 요소 참조
console.log(arr[1]); // undefined
console.log(arr[3]); // undefined
</script>

2. 배열 요소의 추가와 갱신

객체에 프로퍼티를 동적으로 추가할 수 있듯 배열에도 요소를 동적으로 추가할 수 있다.

-HOW TO USE❓

2-1. 배열 요소의 추가

존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가되고 length 프로퍼티 값은 자동 갱신된다.
<script>
const arr = [0];
// 배열 요소의 추가
arr[1] = 1;
console.log(arr); // [0, 1];
console.log(arr.length); // 2
</script>

만약 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.
<script>
const arr[100] = 100;
console.log(arr); // [0,1, empty * 98, 100];
console.log(arr.length); // 101
</script>

이때 인덱스로 요소에 접근하여 명식적으로 값을 할당하지 않는 요소, 'empty는 생성되지 않았음'을 뜻한다.

<script>
// 명식적으로 값을 할당하지 않는 요소는 생성되지 않았음
console.log(Object.getOwnPropertyDescriptors(arr);
/* 
{
'0' : {configurable: true, enumerable: true, value: 1, writable: true},
'1' : {configurable: true, enumerable: true, value: 2, writable: true}, 
'100' : {configurable: true, enumerable: true, value: 100, writable: true}, 
length: { configurable: false, enumerable: false, value: 101, writable: true}
}
*/
</script>

2-2. 배열 요소의 갱신

배열의 요소를 갱신할 땐 이미 존재하는 요소에 값을 재할당하면 요소 값이 갱신된다.
// 요소 값 갱신
const arr[1] = 10;
console.log(arr); // [0,10, empty * 98, 100];
</script>

인덱스는 요소의 위치를 나타내므로 반드시 0 이상의 정수(또는 정수 형태의 문자열)를 사용해야한다.

정수 외에 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아닌 프로퍼가 생성되어 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.
<script>
const arr = [];
// 배열의 요소 추가
arr[0] = 1;
arr['1'] = 2;
// 프로퍼티 추가
arr['foo'] = 3;
arr.bar = 4;
arr[1.1] = 5;
console.log(arr); // [1, 2, foo: 3, bar: 4, '1.1': 5];
// 프로퍼티는 length에 영향을 주지 않는다.
console.log(arr.length); // 2
</script>

3. 배열 요소의 삭제

배열은 사실 객체✨이기에 배열의 특정 요소를 삭제시 delete 연산자를 사용할 수 있다.

<script>
const arr = [1, 2, 3];
// 배열의 요소 삭제
delete arr[1]; // delete arr[1]은 arr에서 프로퍼티 키'1'인 프로퍼티를 삭제한다.
console.log(arr); // [1, empty, 3];
// length 프로퍼티에 영향을 주지 않아 희소 배열이 된다.
console.log(arr.length); // 3
</script>

-delete 연산자는 객체의 프로퍼티를 삭제해 배열이 희소 배열이 되어 length 프로퍼티 값이 변하지 않는다.
-> 따라서 희소 배열을 만드는 delete 연산자는 사용하지 않는게 좋다.

🤷‍♂️? : 그렇다면 희소 배열을 만들지 않으면서 배열의 특정 요소를 삭제하려면 어떻게 해야하쥬?
🙆‍♂️! : 바로 Array.prototype.splice 메소드를 사용하면 된다!

-HOW TO USE❓

Array.prototype.splice는 첫 번째 인자로 삭제를 시작할 인덱스를 넣어주고, 두 번째 인자엔 삭제할 요소의 수를 넣어주면 된다.
<script>
const arr = [1, 2, 3];
// arr[1]부터 1개의 요소 삭제!
arr.splice(1, 1);
console.log(arr); // [1, 3];
// 이번엔 length 프로퍼티가 자동 갱신된다
console.log(arr.length); // 2
</script>