자바스크립트 배열은 배열이 아니다?

2023. 2. 20. 11:13· Language/javascript
목차
  1.  
  2. 1. 배열이란?
  3. 2. 자바스크립트 배열은 배열이 아니다?
  4. 3. length 프로퍼티
  5. 4. 배열 생성
반응형

 

1. 배열이란?

배열은 여러 개의 값을 순차적으로 나열한 자료구조이며, 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 원시값은 물론 객체, 함수, 배열 등 모든 값은 배열의 요소가 될 수 있다. 자바스크립트에 배열이라는 타입은 따로 존재하지 않으며, 배열은 객체 타입으로 일반 객체와 구별되는 독특한 특징을 가지고 있다.

 

구분 객체 배열
구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소
값의 참조 프로퍼티 키 인덱스
값의 순서 X O
length 프로퍼티 X O

 

배열이 일반 객체와 구분되는 가장 명확한 차이는 값의 순서와 length 프로퍼티인데, 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다. 배열은 인덱스, 값의 순서와 length 프로퍼티를 갖기 때문에  처음부터 순차적으로 요소에 접근할 수 있고, 마지막부터 역순으로 요소에 접근할 수도 있으며, 특정 위치부터 순차적으로 요소에 접근하는 것도 가능하다. 

 

2. 자바스크립트 배열은 배열이 아니다?

자바스크립트의 배열은 자료구조에서 말하는 일반적인 의미의 배열과는 차이가 있는데, 일반적인 배열의 개념은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조를 말한다. 즉, 배열의 요소는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접해 있는 구조로 이를 밀집 배열이라고 한다. 반면에, 자바스크립트에서의 배열은 배열의 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되며 연속적으로 이어져있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열이라고 하며, 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체 형태라고 볼 수 있다.

 

일반적인 배열은 인덱스 요소로 빠르게 접근할 수 있지만, 특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우에는 효율적이지 않다. 반면에 자바스크립트의 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느리지만, 특정 요소를 검색하거나 요소를 삽입, 삭제하는 경우에는 일반 배열보다 빠른 성능을 기대할 수 있다.

 

 

3. length 프로퍼티

length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0 이상의 정수를 값으로 갖으며, length 프로퍼티의 값은 빈 배열일 경우 0을 나타내고, 빈 배열이 아닐 경우 가장 큰 인덱스에 1을 더한 것과 같다.

 

const hello = [];
const number = [1, 2, 3];

console.log(hello.length); // 0
console.log(number.length); // 3

 

 

4. 배열 생성

배열은 객체와 같이 다양한 방식으로 생성할 수 있다. 가장 일반적인 방식은 배열 리터럴을 사용하는 것이다.

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

 

두번째 생성 방법은 Array 생성자 함수를 이용하는 것이다.

const arr = new Array(5);

console.log(arr); // [empth x 5]
console.log(arr.length); // 5
반응형
저작자표시 비영리 동일조건 (새창열림)
  1.  
  2. 1. 배열이란?
  3. 2. 자바스크립트 배열은 배열이 아니다?
  4. 3. length 프로퍼티
  5. 4. 배열 생성
'Language/javascript' 카테고리의 다른 글
  • [JS] 자바스크립트 이벤트 루프와 동시성, 이벤트 핸들러 등록 방법
  • 자바스크립트 String과 Symbol 타입
  • 자바스크립트 ES6 함수의 추가기능 살펴보기
  • appendChild로 여러개 추가, append vs appendChild 차이(+ prepend, after, before)
도잎
도잎
프론트엔드 개발 성장기록
도잎
JDevelog
도잎
전체
오늘
어제
반응형
  • 분류 전체보기 (149)
    • Web dev (48)
      • React (22)
      • Vue (8)
      • Next.js (6)
      • Node.js (2)
      • Springboot (2)
    • App dev (2)
      • Flutter (2)
    • Language (33)
      • javascript (30)
      • typescript (2)
      • java (1)
    • StyleSeet (3)
      • CSS (3)
      • Sass (0)
    • Database (2)
      • PostgreSQL (1)
    • DevOps (11)
      • Webpack (4)
      • Linux (3)
      • Docker (2)
      • Tomcat (1)
    • 개발지식 (2)
      • Web (1)
    • 항해99(6기) (20)
    • UXUI (0)
    • 알고리즘 (25)
    • 유용정보 (2)

최근 글

hELLO · Designed By 정상우.v4.2.1
도잎
자바스크립트 배열은 배열이 아니다?
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.