배열, 유사배열

he0o0nje·2024년 1월 17일
0

Javascript

목록 보기
13/15

배열, 유사 배열

자바스크립트에서의 배열의 요소는 원시값, 객체, 함수 배열 등 어떤 값이든 될 수 있다. 이러한 배열을 희소 배열(Sparse Array)이라 한다. 따라서 자바스크립트의 배열은 엄밀히 말해 일반적인 의미의 밀집 배열(Dense Array)이 아니며, 일반적인 배열의 동작을 흉내 낸 특수한 객체다.

  • 자바스크립트의 배열은 객체이지만, 일반 객체와 달리 index와 length 프로퍼티가 존재한다.
  • 희소 배열이기 때문에 length를 명시적으로 할당할 수 있으며, 연속적으로 위치하지 않으며 일부가 비어 있을 수 있다.
// 희소 배열
const num = [1, 2, 3]

num.length = 2
console.log(num) // [1, 2]

num.length = 5
console.log(num) // [1, 2, empty*3]

const num1 = [1, , 2, , 3]
console.log(num1) // [1, empty, 2, empty, 3]
희소 배열은 배열의 기본적인 개념(연속적인 값의 집합)에 맞지 않으며, 성능에도 좋지 않다. 따라서 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 좋다.

배열 생성

// 배열 리터럴
const arr = [1, 2, 3]

// Array 생성자 함수
const arr = new Array(3)

// Array.of
Array.of(1) // output: [1]
Array.of(1, 2, 3) // output: [1, 2, 3]

// Array.from
// 유사배열객체 또는 이터러블 객체를 인수로 받아 [배열로 변환]하여 반환
Array.from({ 0: 'shj', 1: 'heonje-shin', length: 2 }) // output: ["shj", "heonje-shin"]
Array.from('shj') // output: ["s", "h", "j"]

유사 배열

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고(key가 인덱스), length 프로퍼티를 갖는 객체를 말한다. querySelectorAll이나document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다.

const shj = {
  0: 'shj',
  1: 'heonje-shin',
  2: 'FE',
  length: 3,
}
// for 문으로 순회 가능
for (let i = 0; i < shj.length; i++) {
  console.log(shj[i]) // output: 'shj', 'heonje-shin', 'FE'
}

하지만 배열처럼 push, pop, join, map과 같은 메서드 사용은 불가, 일반 객체처럼 프로퍼티로 접근 불가하다.

0개의 댓글