[JS] 자바스크립트 기본 (2) - 배열

🔷 배열

자바스크립트의 배열에는 몇 가지 특성이 있다.

1. 배열은 객체이다.
2. index: value 가 매핑되는 딕셔너리 형태이므로 인덱스에 구멍이 생길 수 있다.
3. arr.length = 0 으로 배열을 전부 삭제할 수 있다.

자바스크립트는… 신기하다. arr = [1, 2, 3] 인 배열이 있고, 배열에 arr[5] = 0 으로 값을 추가하면 다른 언어들에서는 인덱스 접근 오류가 뜨는데 자바스크립트에서는 작동한다. 배열의 결과는 [1, 2, 3, '2 empty array', 0] 이 된다.

배열의 length 메소드는 배열에서 가장 큰 인덱스 값을 의미한다. 위에서 예시를 들었던 저 구멍난 배열도 실제로 원소는 4개 뿐이지만 최대 인덱스가 5이므로 결과 값은 6 이 출력된다.

🔸 메소드

• .push()
  배열 마지막에 요소를 추가한다.
• .unshift()
  배열 제일 처음에 요소를 삽입한다.
• .indexOf('str')
str 값이 인덱스에 있는지 확인한다. 있으면 인덱스 값을, 없으면 -1을 출력한다.
• .includes('str')
str 값이 인덱스에 있는지 확인한다. 있으면 True를, 없으면 False를 반환한다.
• .shift()
  배열의 가장 앞 요소를 삭제한다.
• .pop()
  배열의 가장 마지막 요소를 삭제한다.
• '.splice({index}, {count})
index 부터 count 개의 요소를 삭제한다.

위의 메소드들을 사용하면 원본 배열이 훼손된다는 단점이 있다.

🔷 유사 배열 객체 (Array-like Object)

자바스크립트는 문법이 자유로워, Object를 사용해도 배열처럼 보일 수 있다.

아래와 같은 형태도 유사 배열이다. 유사 배열은 반드시 length를 가져야 하며, 값이 바뀔 때마다 length를 갱신해야 한다.

let arr = {
	0: 'a',
    1: 'b',
    2: 'c'
    length: 3
};

유사 배열은 Array.isArray() 로 유사 배열인지 아닌지 확인할 수 있다. 그런데 유사 배열의 경우 배열 메소드를 사용할 수 없다. .length() 나 map 같은 정말 진짜 배열만이 사용할 수 있는 메소드를 사용할 수 없는 것이다. 그러나 나는 사용하고 싶다. 그럴 때 해결 방법이 있다.

Array.from(nodeList) 는 유사 배열을 진짜 배열로 바꿔준다. 해당 기능은 ES2015에서 추가 되었다.