[코딩애플;JS]array와 object

값이나 자료를 여러개 저장하여 사용하고 싶다면?

일일히 변수로 적용하기 힘들기 때문에 이때 array와 object형을 사용한다!

 

1️⃣Array자료형 : 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형.

    ✔️var 배열 이름 = [ 자료1, 자료2,자료3...];

    ✔️ array자료에서 데이터 뽑을 땐 대괄호안에 자료index번호 붙이면 됨.

          ex)console.log(배열이름[index]);

    ✔️ 배열 자료 수정은 해당 배열이름[index],혹은 전체값을 변경하고 싶으면 배열이름에 값을 재지정 해주면 됨.

          ex)배열이름[index] = 6000;

           ex) var 배열 이름 = [ 자료1-1, 자료2-1,자료3-1...]

     ✔️ 배열자료 추가도 마찬가지. 배열 길이 다음의 숫자에 값을 지정하면 됨!

          ex) 배열이름[배열의길이값 + 1] = 6000;

 

2️⃣Object자료형 : 키와 값 형태로 자료가 저장된 형태.

    ✔️var 객체이름 : {키 : 값 , 키2 : 값2,...}

    ✔️객체형에서 자료를 뽑을 땐, 원하는 값을 가지고 있는 키이름을 적으면 됨

         ex)배열이름.키이름;

    ✔️객체형 자료를 수정하고 싶으면 등호 이용해서 수정 (배열과 비슷)

       ex)객체이름[키이름] = 새로운 값;

 

3️⃣array와 object자료형의 차이

  ✔️array에는 순서개념이 있다 : 가나다순 정렬, x번부터 x번 자료까지 자르기, 맨 앞,맨 뒤에 자료 넣기, 원하는 자료 있느         니 지 검색하기 등을 할 때 유용함.

      💡array 조작할 수 있는 기본함수들       

         -array자료.sort() 하면 가나다순 정렬

         -array자료.slice(x, y) 하면 x번부터 y번 전까지 자르기

         -array자료.push(x) 하면 x를 맨 뒤에 입력

  ✔️object는 순서개념이 없는 대신에 원하는 값을 뽑아오기 좋음(키이름만 기억하면 되니까!)

 

✍️숙제

 

<div class="container mt-3">

  <div class="card p-3">

    <span>상품명</span>

    <span>가격</span>

  </div>

</div>

<script>

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

</script>

 

여기서 저장된 상품명과 가격을 html에 넣어보기

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

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

var product = document.querySelector('.product');//상품명이 들어갈 요소

var price = document.querySelector('.price');//가격이 들어갈 요소

product.innerHTML = car2.name; //object에서 name키에 있는 값 넣기

price.innerHTML = car2.price;//object에서 price키에 있는 값 넣기