자바스크립트 완벽 가이드 7판 스터디
책의 목차를 따라가며 관련 내용을 학습하고 공유하는 스터디입니다.
1. 자바스크립트에서 배열(Array)이란?
ㄴ MDN에서는 배열을 아래와 같은 특성을 가진 객체라고 설명한다.
ㄴ 배열의 객체 속성과 배열 요소 목록은 별개이다.
2. Dense Array vs Sparse Array
ㄴ Dense Array (밀집 배열)
ㄴ Sparse Array (성긴 배열)
3. 배열을 생성하는 방법 (feat. I like Array.from)
4. length 프로퍼티로 배열 조작하기
5. 배열요소를 삭제할 때 delete 사용을 지양하자
6. 원본배열을 수정하는 메서드를 조심하자
7. forEach vs for...of, forEach의 동작원리 알아보기
8. 유사배열객체 - HTMLCollection, NodeList, arguments 등
Array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Index
로 사용하여 접근해야한다.arr['1']
Index
는 0부터 시작. 마지막 Index
는 배열의 length - 1
이다.object properties(객체 속성)
과 list of array elements(배열 요소 목록)
은 별개이다.length
는 배열 요소 목록만을 포함한다.const arr = [1, 2, 3];
arr['key'] = 'property';
arr[true] = -1;
arr[() => false] = -1;
arr;
// [ 1, 2, 3, key: 'property', true: -1, '() => false': -1 ]
// key : value 형태로 저장된 것을 확인할 수 있다.
arr.length; // 3
// 배열의 요소만 길이에 포함된다.
for (const el of arr) console.info(el); // 1, 2, 3
arr.forEach(el => console.info(el)); // 1, 2, 3
// 1, 2, 3은 배열의 요소 목록이다. 요소만 순회한다.
for (const key in arr) {
console.info(key);
}
// 0
// 1
// 2
// key
// true
// () => false
// for...in 으로 객체의 키를 조회하면 인덱스와 속성의 키를 확인할 수 있다.
Sparse Arrays vs Dense Arrays in JavaScript — Explained with Examples
https://www.freecodecamp.org/news/sparse-and-dense-arrays-in-javascript/
arr.length === 요소 개수
arr[length - 1]
const denseArray = [1, 2, 3, 4, 5];
denseArray.length; // 5
denseArray[denseArray.length - 1]; // 5
delete
로 배열의 요소를 지우면 해당 요소가 삭제되고 empty 상태가 된다.forEach
, map
등 메소드가 순회할 때 요소가 없는 인덱스는 순회에서 제외된다.const sparseArray = [];
sparseArray[10] = 1;
sparseArray[11] = 2;
sparseArray[12] = 3;
sparseArray[13] = 4;
sparseArray[14] = 5;
sparseArray; // [ <10 empty items>, 1, 2, 3, 4, 5 ]
sparseArray.length; // 15
sparseArray[0]; // undefined
const arr1 = [1, 2, 3];
arr1; // [1, 2, 3];
arr1.length; // 3
const arr2 = [1, , 3];
arr2; // [ 1, <1 empty item>, 3 ];
arr2.length; // 3
length
가 인수인 배열 생성const arr3 = new Array();
arr3; // [];
arr3.length; // 0
const arr4 = new Array(5);
arr4; // [ <5 empty items> ]
arr4.length; // 5
const arr5 = new Array(1, 2, 3, 4, 5);
arr5; // [ 1, 2, 3, 4, 5 ]
arr5.length; // 5
ES6
에서 추가된 메서드Array()
의 인수 1개일 경우를 보완const arr6 = Array.of();
arr6; // [];
arr6.length; // 0
const arr7 = Array.of(5);
arr7; // [ 5 ]
arr7.length; // 1
const arr8 = Array.of(1, 2, 3, 4, 5);
arr8; // [ 1, 2, 3, 4, 5 ]
arr8.length; // 5
ES6
에서 추가된 메서드const arr9 = Array.from('Iterable'); // 이터러블
arr9; // ['I', 't', 'e', 'r', 'a', 'b', 'l', 'e'];
arr9.length; // 8
const arr10 = Array.from({ length: 2, 0: 1, 1: 2 }); //유사배열객체
arr10; // [1, 2]
arr10.length; // 2
length
와 콜백 함수를 사용해 배열을 만든다.length
만 전달하면 undefined
로 요소를 채운다.// 1부터 n까지를 요소로 갖는 배열 만들기
const n = 5;
const arr11 = Array.from({ length: n }, (_, i) => i + 1);
arr11; // [1, 2, 3, 4, 5]
arr11.length; // 5
// length 만 사용
const arr12 = Array.from({ length: n });
arr12; // [ undefined, undefined, undefined, undefined, undefined ]
arr12.length; // 5
// length만 사용 + 순회하기
const arr13 = Array.from({ length: n }).map((_, i) => i % 2 === 0 && i);
arr13; // [ 0, false, 2, false, 4 ]
arr13.length; // 5
const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(arr.length); // 3
arr.length = 5;
console.log(arr); // [1, 2, 3, <2 empty items>]
console.log(arr.length); // 5
arr.length = 2;
console.log(arr); // [1, 2]
console.log(arr.length); // 2
delete
연산자로 배열요소를 삭제하면, 성긴배열이 되고 length 값은 변하지 않는다.splice
를 사용하면 성긴배열을 만들지 않고 삭제할 수 있다.const arr = [1, 2, 3];
delete arr[0];
console.log(arr); // [ <1 empty item>, 2, 3 ]
console.log(arr.length); // 3
const arr = [1, 2, 3];
arr.splice(0, 1);
console.log(arr); // [ 2, 3 ]
console.log(arr.length); // 2
// 상태 값으로 배열이 있고, 해당 상태값(배열)에 요소가 추가되는 경우
state.push(element);
state = [...state, element]; // 원본 배열을 복사해 사용
length
프로퍼티를 갖고 객체의 키가 배열의 인덱스처럼 0부터 1씩 증가한다.HTMLCollection
, NodeList
같은 유사배열객체는 자체적으로 순회할 수 있는 forEach
메서드가 있다. Array의 forEach
메서드와 다르니까 주의.HTMLCollection
, NodeList
의 Live 속성 때문에 의도하지 않은 동작이 발생할 수 있다. 그래서 배열로 변환해서 사용하는 것을 추천한다.let obj = {
0: 'a',
1: 'b',
2: 'c',
3: 'd',
length: 4,
};
const arr = Array.from(obj);
console.log(arr); // [ 'a', 'b', 'c', 'd' ]
for...of 로 HTMLCollection을 순회하면서 DOM조작할 때 주의할 점🚨
유사배열객체인 HTMLCollection, NodeList로 돔을 조작하다가 만난 문제를 정리한 글이다.