[JS] 배열과 객체의 차이

Vue 공부를 하다보니, 그전에는 가볍게만 썼던 JS를 더 많이 보고 쓰게 되었다.

그 와중에 배열과 객체의 차이,

더 정확하게는 객체의 프로퍼티를 이용하는 것과 배열을 이용하는 것이 무엇이 다른지 궁금해졌다.

 

---

대부분의 객체지향 언어에서도 배열과 객체는 존재하고 그 차이는 명확하다.

배열은 주어진 자료형을 정해진 크기대로 넣어두고 인덱스를 이용해서 접근하는 방식으로 구성된다.

 

let arr = ['Javascript', 'is', 'Fun!'];

for (let i = 0; i < arr.length; i++) {
	console.log(i + ' : ' + arr[i] + '\n');
}

 

 

객체는 자바스크립트에서 리터럴 값을 제외한 모든 것이라고 할 수 있다. (심지어 함수 까지도!)

그리고 객체는 내부적으로 0개 이상의 데이터로 구성되어있는데, 이 때 데이터를 프로퍼티라고 한다.

프로퍼티는 키와 값으로 구성되어, 키를 통해서 접근할 수 있다.

(만약 프로퍼티가 문자열이 아니라면, 문자열로 변환이 된다.)

 

let obj = {
    name : 'js',
    fun : true
};

console.log(obj.name + ' ' + (obj['fun'] ? 'is fun!' : 'is not fun!'));

 

let arr = [1, 2, 3];
let obj = {
    1 : 1,
    2 : 2,
    3 : 3
};

console.log(`arr(${arr.length})`);
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// cause undefined error
// console.log(`\nobj(${obj.length})`);
console.log(`\nobj`);
for (let i = 1; i <= 3; i++) {
    console.log(obj[i.toString()]);
}

객체와 배열은 3가지로 구분이 가능하다.

 

1. 값의 참조 방식
   • 값의 참조는 배열의 경우 인덱스로 참조하기 때문에 number 가능하며, 객체는 문자열로만 가능하다.
2. 값의 순서
   • 배열은 연속되는 값들의 집합이기에 순서가 존재하지만, 객체에 순서는 존재하지 않다.
3. length 프로퍼티
   • 배열은 length 프로퍼티에 접근이 가능하지만, 객체는 length 프로퍼티에 접근이 불가능하다.

 

---

참고 : 모던 자바스크립트 Deep Dive

참고1 : Mozila MDN