JS - Array 와 Object 자료형

Array 자료형

여러가지 자료를 한 곳에 저장하고 싶을때 사용하는 자료형

let car = ['소나타', 50000, 'white'];

대괄호를 열고 자료를 콤마로 구분해서 집어넣기
(엑셀처럼 저장 가능)

let car = ['소나타', 50000, 'white'];
console.log(car[1]);

-> 50000 출력
array 자료에서 데이터를 뽑을 때 대괄호를 뒤에 붙인 후 [x] 라고 쓴다
-> x번째 자료 출력해주세요 (참고: array 의 순서는 0부터 시작)

let car = ['소나타', 50000, 'white'];
car[1] = 60000;
console.log(car[1]);

array 자료 수정가능 등호는 항상 오른쪽을 왼쪽에 집어넣는다는 것 기억하기

Object 자료형

Array와 마찬가지로 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형

let car2 = { name : '소나타', price : 50000 };

중괄호를 열고 자료를 콤마로 구분해서 넣으면 되는데 자료 왼쪽에 자료의 이름을 붙여서 저장해야한다

자료의 이름 -> key , 실제 자료 -> value 라고 불린다
따라서 object의 자료형은 key:value 형태로 자료를 저장할 수 있다

let car2 = { name : '소나타', price : 50000 };
console.log(car2['name']);
console.log(car2.name);

-> 소나타 출력

let car2 = { name : '소나타', price : 50000 };
car2['name'] = '그랜저';
console.log(car2['name']);

object 자료도 수정 가능하다

Array/Object 차이

상품명, 가격, 연식, 색상, 옵션여부 어쩌구...
이런 데이터들으 변수 하나에 저장한다면 ? ?
object 가 꺼내쓰기 편하다 -> 만약 array 사용 시 자료를 뽑을 때 자료의 위치를 기억해야하기 때문

Array/Object 차이2

array는 순서개념이 있고 object 는 순서개념이 없다
따!라!서!

• 가나다순 정렬 : array자료.sort()
• x번 자료부터 x번 자료까지 자르기 : array자료.slice(x, y)
• x번 자료 바꾸기 : array자료.push(x)
• 맨 뒤, 맨 앞에 자료 넣기
• 원하는 자료가 들어있나 검색
  이렇게 순서개념이 필요할 땐 array를 사용한다

---

오늘의 숙제

: JS를 사용하여 car2에 있던 데이터들을 html에 꽂아서 보여주기

<div class="card p-3">
	<span>상품명</span><span>가격</span>
</div>
<script>
	let car = ["소나타", 50000, "white"];
	let car2 = { name: "소나타", price: 50000 };
	$(".card span:first").html(car2.name);
	$(".card span:last").html(car2.price);
</script>