자바스크립트 객체와 배열

객체란?

객체는 property와 그안에 담긴 값(함수,배열,정규 표현식등)의 집합을 의미합니다.

배열이란?

배열은 어떤 타입의 값도 담을 수 있는 인덱스를 가진 객체입니다.

배열과 객체의 차이점

배열 또한 객체이지만 다음과 같은 차이점이 있습니다.

1. 선언 방식

배열: const array = []; , = new Array(); ()안에 length를 넣어도 되고, 아예 (1,2,3,4) 이렇게 값을 넣을 수도 있습니다. 객체: const object = {};, = new 함수();

2. 값을 넣을 때

array.push(값); 이러면 맨 뒤에 값이 추가가 되는데 초기화를 하고 싶을 때는 array[인덱스] = 값 으로 표현해줘야 합니다. object = 값; object[인덱스] =값 둘다 초기화 가능

3. property 접근

array[인덱스] : 배열은 순서가 중요합니다.인덱스값으로 접근합니다.

object.property명,objec[‘property명’] : 객체는 property 아름으로 접근합니다. 배열에선 []안에 인덱스를 넣었다면 객체는 property이름을 문자열로 받아 사용합니다. 이는 연관배열인데 동적으로 임의의 값과 임의의 문자열을 연관지어 저장할 수 있는 자료구조로 map과 비슷합니다. []안에 문자열이 들어가면 property이름을 조작하기가 쉽습니다. 런타임중에도 ‘property명’+변수값 이런식으로 값을 덧붙일 수도 있습니다.

4.property 삭제할 때

배열: delete사용시 완전히 삭제가 안됩니다 undefined만 할당. pop같은 Array의 내장함수를 사용해야 합니다. 객체: delete object.property명으로 해당 property명을 가진 object를 삭제합니다. (undefined할당이 아닌 완전 삭제)

5. 사이즈 측정

배열은 length()로 사이즈 측정이 가능하지만 객체는 따로 property에 넣어서 측정하거나 해야합니다.

배열은 따로 특정할 수 있는 property(id)가 없는 반면 객체는 대표값이 있어 순서를 모르는 경우에도 특정property(id)로 값을 찾을 수 있습니다.

즉, 순서를 알아야되는 배열의 경우 index를 모르는 요소를 찾고자 할 때 배열의 모든 요소를 순회하고 index를 안다고 해도 index를 뽑아내기 위해 사전작업으로 배열의 모든 요소를 순회해야되는데 객체는 대표값으로 값을 찾아 낼 수 있어 훨씬 효율적입니다.

그러므로 길이가 크고 불특정 데이터의 접근이 잦은 웹사이트, 앱이라면 배열보다 객체를 사용할 필요가 있습니다.

코드를 통해 데이터 접근 시간 테스트를 해보면

배열의 경우 (길이는 100만으로 설정, id,name에 property 부여)

’’’ let array =[]; for(let i=0; i <1000000;i++) { arr.push({id:i,name:’회원 ${i}’}); }

console.log(array);

console.time(“time-array”); const target = array.find(value => value.id ===200000); console.timeEnd(“time-array”); ‘’’

객체의 경우

’’’ let object = {}; for(let i =0; i<1000000;i++) { object[i] = { id:i, name:’회원${i}’ }; }

console.time(‘time-object’); const target= object[“20000”]; console.timeEnd(‘time-object’); ‘’’

둘의 4번의 실행결과를 비교

결과가 위와 같으므로, 객체를 호출하는 것이 훨씬 빠릅니다.

배열을 객체로 변환

for문 사용

’’’ let object = {}; for(let i=0; i<array.length;i++){ object[i] = array[i]; }

’’’

array.foreach 사용

’’’ array.foreach(value=> (object[value.id]=value)); ‘’’

참고

💻 https://opentogether.tistory.com/97

💻 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

💻 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics