javascript기초(Array 와 Object자료형)

Array(배열)이란

여러 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 높으므로

배열 베서드를 능숙하게 다룰 수 있다면 코딩에 많은 도움이 된다.

 

const arr = ['사과', '바나나','오렌지'];

 

배열이 가지고 있는 값을 요소 element라고 하며, 자바스크립트의 모든 값은 배열의 요소가 될 수 있다.

(원시값은 물론 객체,함수,배열 등 자바스크립트에서 값으로 인정하는 모든 것)

 

arr[0] // '사과'
arr[1] // '바나나'
arr[2] // '오렌지'

 

다음과 같이 배열의 요소는 배열에서 자신의 위치를 나타내는 0이상의 정수인 인덱스(index)를 갖는다.

인덱스는 배열의 요소에 접근할 때 사용한다.

 

arr.length // 3

 

배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.

 

**배열의 장점은 처음부터 순차적으로 요소에 접근할수 있고, 역순으로도 요소에 접근할 수있다.

이는 배열이 인덱스, 즉 값의 순서와 length 프로퍼티를 갖기 때문에 가능한 것이다.

 

---

 

Object 자료형

array(배열)과는 다르게 {}안에 데이터를 저장한다.

 

var obj = { name : 'hjin', age : 22 };

 

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

여기서 name = key, 저장된 자료'hjin'은 value 라고 부른다.

 

console.log(obj['name']);
console.log(obj.name);

 

다음과 같이 object에 저장된 자료를 불러올수 있다.

 

---

응용예제)

 

<div class="card-group container">
        <div class="card">
          <img src="https://via.placeholder.com/600">
          <div class="card-body">
            <h5 class="card-title title-1" data-id="0">Card title</h5>
            <p class="price">가격 : 70000</p>
            <button class="btn btn-danger">주문하기</button>
          </div>
        </div>
        
        <div class="card">
          <img src="https://via.placeholder.com/600">
          <div class="card-body">
            <h5 class="card-title title-2" data-id="1">Card title</h5>
            <p class="price">가격 : 70000</p>
            <button class="btn btn-danger">주문하기</button>
          </div>
        </div>
        
        <div class="card">
          <img src="https://via.placeholder.com/600">
          <div class="card-body">
            <h5 class="card-title title-3" data-id="2">Card title</h5>
            <p class="price">가격 : 70000</p>
            <button class="btn btn-danger">주문하기</button>
          </div>
        </div>
      </div>
      
      <script>
        var products = [
          { id : 0, price : 70000, title : 'Blossom Dress' },
          { id : 1, price : 50000, title : 'Springfield Shirt' },
          { id : 2, price : 60000, title : 'Black Monastery' }
        ];
      </script>

 

products Array안에 있는 자료를 html에 데이터 바인딩을 해보자.

 

 

Card title 안에 products 안에있는 title 자료를, 그리고 가격에는 price자료를 넣어보자

 

    function 데이터바인딩(){
            for(let i = 0; i < 3; i++){
                document.querySelectorAll('.card-title')[i].innerHTML = products[i].title;
                document.querySelectorAll('.price')[i].innerHTML = '가격 : ' + products[i].price;
            }
        }
    데이터바인딩();

 

 

for문을 이용해 title 부분(h5태그)과 가격(p태그)의 요소를 찾고 그순서를 i로 인덱싱하여 값을 찾고

products array 요소의 값또한 i로 값을 구해 반복되는 코드의 양을 줄여 작성해보았다.

 

**참고)

${ } 이건 문자안에 변수넣어주는 간단한 문법이다.

일반 따옴표안에선 사용불가능하고 백틱안에서 사용할수 있다.(`문자${변수명}문자`)

필요할때 쓰도록하자.

 

 

결과)