[ JavaScript ] 자바스크립트 배열의 실체: 배열이 아닙니다.

공부하게 된 이유?

동일한 자료형의 값만 할당해, 포인터 연산으로 각 원소에 접근하는 C언어 배열을 배우고 나니,

자료형 제한 없이 값을 할당하는 js 배열이 대체 어떻게 가능한지 의문점이 들었고, 

이를 해소하고자 공부하고, 본 포스팅을 작성하게 되었습니다.  

 

 

---

1. 배열의 정의

#데이터의집합  #자료구조 

배열은 연관된 데이터를 연속된 메모리 공간에 나열하는 자료구조입니다.

즉, 배열은 데이터의 집합이고, 하나의 변수로 많은 데이터를 관리한다고 생각하면 됩니다.

 

추가로, 배열을 이루는 각각의 데이터를 '원소'라고 하며, 인덱스를 통해 접근합니다.

Q. 어떻게 인덱스로 접근할까요? (C언어 기준) 
A. 인덱스로 배열의 원소에 접근할 수 있는 방법은, 포인터 연산인데요. 

원소의 주소값 = 배열 시작 주소 값 + 인덱스 * 배열의 자료형 크기(ex - int, 4byte) 
위의 계산을 통해, 원소의 주소값을 계산하고, 이 주소 값으로 원소의 값을 읽고, 쓸 수 있습니다. 
*배열 이름은 배열의 시작 주소 값을 포함하고 있습니다. 

 

 

 

2. 배열, 왜 필요한데? 

필요성을 생각할 땐, 항상 이 문장을 기억해주세요.

'기술은 결국 문제를 해결하기 위해 만들어집니다'

 

어떤 문제가 있을까요?

프로그래밍을 할 때, 데이터를 변수에 할당해서, 이용합니다. 

100개의 데이터를 이용하기 위해서는 100개의 변수를 선언해야 하죠. 

또, 변수명도 100개나 되니까, 이용할 때 쉽지 않습니다. 

 

연관된 데이터를 하나에 묶어 관리하고, 인덱스로 각각의 값에 접근한다면, 이전 방식보다 쉽고, 편하죠.

또, 연관된 데이터를 읽어오는 시간도, 몇 번의 연산으로 이루어지기에 오래 걸리지 않습니다. 

 

 

 

3. C언어 배열  vs  JS 배열 

배열의 각 원소에 접근할 때, 인덱스와 자료형의 크기를 이용하기 때문에, 

배열에 할당할 수 있는 데이터의 자료형이 정해져있습니다. 

(C언어) int arr의 경우, int 형만 해당 배열에 할당할 수 있습니다.

(JS) 하지만, js는 어떤 자료형이든 배열에 추가될 수 있습니다. 

let JSarray = ['string', 1,2, false, { }, [ ], function( ){ }, undefined];

 

어째서 가능한 걸까요? 궁금하지 않나요?

(전 너무 궁금했습니다)

*이 글을 작성하게 된 이유기도 하죠, 저의 궁금증

 

 

let test = [0, 1, 2, 3];
console.log(Object.getOwnPropertyDescriptors(test));

 

그 이유는 바로, 자바스크립트의 배열은 사실 객체이기 때문입니다. 

배열의 모든 property를 반환해주는 getOwnPropertyDescriptors로 확인해봅시다. 

아래는 위의 코드에서 console.log의 결과입니다. 

 

JS 배열은 사실 객체

배열은 사실, 인덱스를 key로 가지는 객체였습니다. 

배열의 값은 인덱스를 key로 하는 property입니다. 

(배열의 length는 아예 key로 존재했네요... 세상에) 

 

 

 

4. 정리 

JS 배열, 원소접근 방법 

자바스크립트 배열은 객체로, 인덱스를 키로 이용해 배열 내 원소에 접근합니다. 

 

자바스크립트 객체 property의 자료형에는 제한이 없기 때문에, 모든 값들을 배열에 담을 수 있는 것입니다.  

덧붙이자면, 배열은 해시 테이블로 구현된 객체라고 하는데요, 어떻게 구현됐는지 궁금해서 꼭 자바스크립트 엔진도 공부해보고 싶네요. 

 

---

내용 중, 잘못된 부분이 있다면 편하게 말씀해주세요

읽어주셔서 감사합니다.

 

 

---

참고

1) 자바스크립트 배열은 배열이 아니다 - https://poiemaweb.com/js-array-is-not-arrray

2) MDN > getOwnPropertyDescriptors - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors