JavaScript에서 배열이면서 객체인 자료형? 배열 값 가져오기 여러 방법

- 이것은 배열인가 객체인가? -

자료형이 배열이면서 동시에 객체일 수 있을까요?
자바스크립트에서는 가능합니다.

저는 querySelector로 a태그를 하나 불러왔습니다.
그리고 그 태그 안에서 어떤 값을 얻고 싶었습니다.
내가 꺼내려는 그 값에 어떻게 접근할 수 있는지 알아야 했습니다.
그래서 일단 console.log로 a태그 요소를 출력한 뒤에 내부를 살펴보기로 했습니다.

let btn = document.querySelector('#putCartProduct');
console.log(btn);

그런데 이상한 부분이 있었습니다.
제가 출력한 a태그는 attributes 라는 속성으로 어떤 값들을 들고 있었는데,
어떤 부분은 배열(리스트)처럼 인덱스로 숫자를 갖고 있었고,
어떤 부분은 객체(오브젝트)처럼 속성과 값으로 짝을 이루고 있었습니다.

 

log에만 찍히는 정보인지, 아니면 실제로 내부에 들고 있는 데이터인지 궁금했습니다.
저는 두 가지 방식 모두를 사용해서 데이터를 꺼내 봤습니다.
그 결과, 배열과 객체, 두 가지 방식 모두 사용할 수 있었습니다.
즉, a 태그의 id 정보는 리스트처럼 접근할 수도 있었고, 객체처럼 접근할 수도 있었습니다.

console.log(btn.attributes[2]);     //id="putCartProduct"
console.log(btn.attributes.id);     //id="putCartProduct"

- Java 와 JavaScript 의 배열 차이 -

말도 안 되는 일이었습니다.
제가 처음 배운 프로그래밍 언어는 Java 입니다.
Java에서는 있을 수 없는 일입니다.
배열이면 배열이고, 객체면 객체입니다.
쓸 수 있는 함수도 다르고, 안에 가지고 있는 데이터들을 꺼내오는 방법도 다릅니다.

그럼 이 attributes라는 녀석은 데이터 타입이 무엇일까요?
log로 출력해 보았습니다.
결과는 object 였습니다.
혹시나 해서 따로 배열을 만들어 데이터 타입을 확인해 봤습니다.
결과는 배열이 아니라 object 였습니다.
그럼 설마 자바스크립트에서는 모든 데이터가 object인 걸까?
그렇지는 않았습니다.
대표적으로 boolean이나 number는 따로 있었습니다.

let arr =[1, 2, 3];
typeof(arr);    //'object'
let obj = {e:"fine", g:"happy", 3:"three"};
typeof(obj);    //'object'
let tf = true;
typeof(tf);     //'boolean'
let num = 3642;
typeof(num);    //'number'

- JavaScript 자료형 종류 - 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
위 사이트를 참고한 결과, JavaScript에는 애초에 '배열'이라는 자료형이 존재하지 않았습니다.
Boolean이나 Number등 기초 자료형들을 제외한 모든 데이터는 모두 '객체'로 분류되었습니다.
즉 자바스크립트에서 모든 데이터는, '기초 자료형' 또는 '객체' 둘 중 하나입니다.

프로그래밍 언어마다 자료 구조도 다릅니다.
자료 구조가 다르면 데이터를 다루는 방식도 바뀝니다.
애초에 '배열'과 '객체'를 따로 두고 생각하려던 방식이 틀렸던 걸지도 모르겠습니다.
Java와 JavaScript는 다른 언어니까요.

 

- 배열이면서 객체인 자료형 (값 꺼내오기) - 

다시 처음으로 돌아가 봅시다.
a 태그 안에 있던 attributes 라는 속성값은 객체였습니다.
객체이지만, 배열처럼 구성된 데이터도 들어 있었습니다.
그럼 이런 객체에서는 어떻게 접근해야 데이터들을 꺼내올 수 있을까요?
JavaScript는 다양한 방법들을 지원합니다.

let obj = {e:"fine", 3:"three", '4': "four"};
obj[3]; //'three'
let obj = {e:"fine", 3:"three", '4': "four"};
obj['3']; //'three'
let obj = {e:"fine", 3:"three", '4': "four"};
obj.3;  //unexpected number
let obj = {e:"fine", 3:"three", '4': "four"};
obj[4]; //'four'
let obj = {e:"fine", 3:"three", '4': "four"};
obj['4'];   //'four'
let obj = {e:"fine", 3:"three", '4': "four"};
obj.4;  //unexpected number
let obj = {e:"fine", 3:"three", '4': "four"};
obj['e']; //'fine'
let obj = {e:"fine", 3:"three", '4': "four"};
obj.e;  //'fine'
let obj = {e:"fine", 3:"three", '4': "four"};
obj[e]; // e is not defined

위에서 보면, 객체에서는 속성이 문자열이든 숫자든,
배열처럼 접근할 수 있습니다.
속성이 문자열인 경우에는 'obj.prop' 꼴로 접근할 수도 있습니다.
속성이 숫자인 경우에는 'obj.3' 꼴로 접근할 수 없습니다.

- 자료형이 너그러운 JavaScript -

그러고 보니 자바스크립트는 자료형에 매우 관대한 언어였습니다.
처음에 숫자로 변수를 선언했다고 하더라도, 나중에 문자열을 넣어도 됩니다.
자료형을 알아서 바꿔주기 때문입니다.
객체 안에 들어 있는 속성이나 index도 마찬가지로 
자료형이 숫자와 문자열을 왔다 갔다 하는 모습을 알 수 있습니다.

let num = 36;
num = 'sky';
num     //=> 'sky'

let obj = {e:"fine", 3:"three", '4': "four"};
obj[3]; //=> 'three'
let obj = {e:"fine", 3:"three", '4': "four"};
obj['3']; //=> 'three'

>덧붙임

그렇다고 배열이라는 자료형이 아예 없다거나,
배열과 객체가 완전히 같다는 뜻은 아닙니다.
기초 자료형에 string, number, boolean 등등 여러 가지가 있듯이,
객체 자료형 안에도 여러 가지가 있고, 그중 하나로 array가 있습니다.
아래처럼 배열에서만 사용할 수 있는 함수가 따로 있다는 사실로도 짐작할 수 있습니다.

let obj = {apple: 'red', banana: 'yellow', kiwi: 'green'};
obj.push('hello');  //=> obj.push is not a function
let arr = ['red', 'yello', 'green'];
arr.push('hello');  //=> ['red', 'yello', 'green', 'hello'];

-220403