[JS] Array & Object

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

<script>
    var car = ["소나타", 50000, "white"];
	var car2 = {name: "소나타", price : 50000};
</script>

• car2는 Key : Value 형태로써 object 자료형이다.
  • key는 자료의 이름일 뿐이다.
  • car2.price 등으로 접근, 수정이 가능하다.
• array는 순서대로 자료를 저장할 수 있다.
• object는 순서 개념이 없다. (indexing 불가)
• car.slice(1, 3);
  • 1부터 3 전까지 slice 해준다.
• car.sort() 정렬 기능도 있다.
• array는 여러 메서드를 사용 가능하다. 필요할 때 찾아서 쓰면된다.

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

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

  document.querySelector('.car-title').innerHTML = car2.name;
  document.querySelector('.car-price').innerHTML = car2.price;

</script>

• 이런식으로 응용도 가능하다.
• object의 value는 array든, object든 어떤 자료형이든 될 수 있다.
• front-end에서는 데이터를 꺼내는 경우가 많다.
• server side rendering : 서버에서 모든 HTML, data 처리 후 전송 (서버가 귀찮)
• client side rendering : HTML, data 만 보내고 완성은 client js가 처리 (서버가 편함)
• 위 코드 같은 경우가 데이터바인딩을 사용한 것이다.