[javascript] 배열(array)와 객체(object) 개념 및 차이

자료구조에 대해 공부해보고자 한다. 솔직히 제일 먼저 개념을 정확히 짚고 넘어갔어야 했는데 실무 하려면 꼭 알아야하는 중요 개념!!! 🙂

 

Object(객체)

mdn문서 
일단 mdn을 읽고 시작

자바스크립트에서 원시 타입을 제외한 모든 데이터 타입은 객체이다. 객체는 여러가지 값 혹은 함수도 가능하다.
객체가 보유한 값을 "프로퍼티"라고 하며, 객체가 보유한 함수는 "메서드"라고 한다.
key, value 구조의 자료구조이다. 객체의 프로퍼티와 메서드들은 "키값"으로 구분된다. 

 

🌼 객체의 생성 

1) 객체 리터럴

 let obj = {key:value, key2: value2, ...} 변수처럼 객체를 생성하는 방식으로 중괄호 {} 안에 key:value를 쉼표로 구분

2) 생성자 함수

 new 연산자를 통해 Object 객체의 생성자 함수를 호출한다.

 let Obj = new Object(); 

 

3) Object.create() 

프로토타입 상속을 통해 객체를 만드는 방식이다. 부모인 obj의 프로퍼티인 name을 참조하게 됨

 

🌼 객체  접근

1) 점 표기법

객체.key 로 프로퍼티에 접근한다.

let obj = {
	name: "혜미",
    age: 29
}

obj.name; // "혜미"
obj.age //29

 

2) 대괄호 표기법 = 객체['key'] 

대괄호 사이에 키 값을 문자열로 넣어 접근

obj["name"] //"혜미"
obj["age"] //29

 

Array(배열)

[] 대괄호로 생긴 자료구조로 , 많은 데이터를 순번을 가지고 저장할때 사용된다. 배열도 객체의 일종이다.

 

🌼 배열  생성

 

1) [] 대괄호로 생성

let arr = [1,2,3];

 

2) 생성자 함수로 생성

let arr = new Array();

 

🌼 배열 값 할당

 

1) 인덱스로 값 할당

  - 배열의 인덱스는 0부터 시작한다. 

let arr = [];

arr[0] = "떡볶이";
arr[1] = "피자";
arr[2] = "삼겹살";

console.log(arr);
//(3) ["떡볶이", "피자", "삼겹살"]

 

2) 생성과 동시에 할당

let foods = ["떡볶이","피자","치킨"];

 

🌼 배열 값 읽기

 - 배열 뒤 대괄호 안에 index를 넣어 원소에 접근하여 값을 읽을 수 있다.

let foods = ["떡볶이","피자","치킨"];

console.log(foods[0]); //떡볶이
console.log(foods[1]); //피자

 

- 배열 요소 갯수(길이) 확인하기

let foods = ["떡볶이","피자","치킨"];

console.log(foods.length)
// 3

 

🌼 배열 메서드

 - 배열에 사용할 수 있는 메서드들은 다양하다. (mdn 참조)

//배열 항목을 순환하며 처리
fruits.forEach(function (item, index, array) {
  console.log(item, index)
})
// 사과 0
// 바나나 1


//배열 끝에 항목 추가
let newLength = fruits.push('오렌지')
// ["사과", "바나나", "오렌지"]


//배열 끝에서부터 항목 제거
let last = fruits.pop() // 끝에있던 '오렌지'를 제거
// ["사과", "바나나"]

 

✨Array(배열)보다 Object를 써야하는 경우✨

 

배열의 길이가 매우 큰 경우, 배열 요소에 접근하기 위해 인덱스를 모르는 경우, 배열의 모든 요소를 순회해야하는 리소스가 든다. index를 알고 있더라도, index를 알기 위해 이미 사전의 배열 요소를 모두 순회한 셈이므로 동일한 리소스의 낭비가 있다.
결론적으로, 길이가 크고 탐색이 잦을 경우 배열보다는 객체를 사용하는 것이 좋다. 

실제 배열과 객체의 탐색 시간을 테스트 해 본 좋은 블로그가 있어서 이건 아래에 남기는 것으로 하겠다!

https://codingbroker.tistory.com/75

 

 

---

 

참고 블로그

https://curryyou.tistory.com/189

https://webclub.tistory.com/500