[JS] array 와 object 자료형 & 데이터바인딩 (1)

자료형

변수등 여러가지 자료를 한곳에 저장하고 싶을 때 사용

---

array 자료형
- 대괄호 []
- [숫자] = 인덱스 

var car = "소나타";
var carPrice = 50000;
var carColor = "white";

이와 같은 변수들을

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

다음과 같이 한 곳에 저장

자료 꺼내기 - 숫자

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

50000만 꺼내고 싶은 경우

인덱스를 사용해 꺼낼 수 있음.

인덱스 - 0부터 시작 

자료 수정

var car = ['소나타', 50000, 'white'];
car[1] = 8000;

자료 수정도 인덱스로 함.

자료 추가

var car = ['소나타', 50000, 'white'];
car[3] = "아반떼"

---

Object 자료형
- 중괄호 {}
- 왼쪽에다가 꼭 이름 써주기
 key : value 형태로 자료를 저장
- ['이름'] / .이름

// Object
var car2 = { name: "소나타", price: 50000 };

자료 꺼내기 - 이름

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

[자료이름] / .자료이름  쓰기

- 인덱스 아님

자료 수정 

var car2 = { name : '소나타', price : 50000 };
car2['name'] = '그랜저';

인덱스 아님

대괄호 + 이름 사용

자료 추가

var car2 = { name: '소나타', price: 50000 };
car2.color = 'white'; // 새로운 속성 color를 추가
car2.model = '아반떼'; // 새로운 속성 model을 추가

console.log(car2);
// 출력: { name: '소나타', price: 50000, color: 'white', model: '아반떼' }

var car2 = { name: '소나타', price: 50000 };
car2['color'] = 'white'; // 새로운 속성 color를 추가
car2['model'] = '아반떼'; // 새로운 속성 model을 추가

console.log(car2);
// 출력: { name: '소나타', price: 50000, color: 'white', model: '아반떼' }

---

array와 object 자료형 차이

array는 순서개념이 있다

object는 순서개념이 없다

---

데이터바인딩

 car2 에 저장된 소나타라는 상품명과 50000이라는 가격을 뽑아서 html에 집어넣기

<div class="container mt-3">
  <div class="card p-3">
    <span class="car-title">상품명</span>
    <span>가격</span>
  </div>
</div> 

<script>
  var car2 = { name : '소나타', price : 50000 } 
</script>

셀렉터로 html 요소 찾기

document.querySelector(".car-title").innerHTML = car2["name"];

내부 HTML  바꿔주니까 innerHTML 사용

car2.name 도 가능

 

또는 대괄호 안에 변수 넣기도 가능하다.

car2[변수] - 대괄호 썼을 때만 가능

 

---

 

복잡한 자료일 경우

object 자료형 안에 array 넣어진 경우

var car2 = { name: "소나타", price: [50000, 3000, 2000] };

object 안에 object / array 넣을 수 있다.

array 안에도 가능

50000데이터 <span>가격<span> 안에 넣기.

  <div class="container mt-3">
      <div class="card p-3">
        <span class="car-title">상품명</span>
        <span>가격</span>
      </div>

- 셀렉터(html 요소 찾아줌)가 찾기 쉽게 하기위해

span 태그에 클래스 부여.

---

1)  console.log 써서 복잡한 자료를 출력부터 해보기 - 출력 후 시작기호 확인

console.log(car2);

 { = 이거면 무조건 object 자료형

 [ =  array 자료형

차례로 꺼내기

console.log(car2.price[0])

object(이름) 속에 있는 array(인덱스)  꺼내기

console.log(car2["price"][0]);

이렇게도 가능

이름 써주고 (object) 인덱스 (array)

꺼내기 끝

document.querySelector(".car-title").innerHTML = car2.price[0];