Array 와 Object

여러 데이터를 변수에 저장하려면 지금까지 배웠던 방식으로는 이렇게 해야한다.

var car = '셀토스';
var carPrice = 2700;
var carColor = 'white';

세개만 해도 벌써 귀찮은데 만약 100개라면??

다행히 하나의 변수에 여러개의 데이터를 저장하는 방법이 있다.

Array 자료형

var car = ['셀토스', 2700, 'white'];
    console.log(car);     //출력 결과  ['셀토스', 2700, 'white']
    console.log(car[0]);  //출력 결과  '셀토스'

    //데이터 변경
    car[0] = '페라리';
    console.log(car[0]);  //출력 결과 '페라리'
    
    //데이터 추가
    car[3] = '엉차';   
    console.log(car[3]);  //출력 결과 '엉차'

Object 자료형

var car2 = {name:'셀토스', price:2700, color:'white'};
    console.log(car2['name']);  //출력결과 '셀토스'
    console.log(car2.price);    //출력결과 2700
    
    //데이터 변경
    car2.name = '포르쉐';
    //데이터 추가 
    car2.option = '엉차';
    console.log(car2.name, car2.option); //출력결과 '포르쉐' , '엉차'

Object는 key: value 형태로 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입

Array 와 Object는 이렇게도 쓸 수 있다.

var carCollection = [{name:'셀토스', price : 2700},
      {name:'포르쉐',price: 10000},
      {name:'람보르기니',price: 10000}]

var collection = {car : ['셀토스', 2700, 'white'],
               coin : ['대한민국', 50]}


    console.log(carCollection);
    console.log(collection);

Array와 Object 차이

데이터를 저장하고 뽑아서 사용할 때의 차이

array는 저장 할 때에는 간단하지만 자료를 뽑아낼 때 불편하다.

var car = ['셀토스', 2700, 'white', '엉차', '엉뜨', 'HUD', '전방추돌방지'];

var car2 = {name:'셀토스', price:2700, color:'white', option1: '엉차',
            option2: '엉뜨', option3: 'HUD',option4: '전방추돌방지'};

예를 들어 이런 Array와 Object가 있다고 한다면

Array에서 색상을 뽑으려면 색상 데이터가 몇번째에 있었지를 생각해야하지만

Object에서는 color 키값만 기억하면 된다.

순서 개념

array에는 순서 개념이 있고 object에는 없다.

array 자료는 순서개념이 있다보니

가나다 순 정렬
n번 자료부터 n1번 자료까지 자르기
n번 자료 바꾸기
맨뒤나 맨 앞에 자료 넣기
원하는 자료가 들어있나 검색

이런 것들을 할 수 있다.

지금은 이런 것들이 있다라고 알고 필요할 때 검색해서 사용해보자.

Array.prototype[@@iterator]() - JavaScript | MDN

✨ 과제. js011.html에서 생성한 car2에 저장된 name과 price를 상품명과 가격 부분에 넣어보자.

js011.html

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

carCollection이나 collection 처럼 복잡한 구조에 데이터는 어떻게 뽑을 수 있을까?

var carCollection = [{name:'셀토스', price : 2700},
      {name:'포르쉐',price: 10000},
      {name:'람보르기니',price: 10000}]

    var collection = {car : ['셀토스', 2700, 'white']
                     ,coin : ['대한민국', 50]}

console.log(carCollection[0].name);  //출력 결과 '셀토스'
console.log(collection.coin[0]);     //출력 결과 '대한민국'

지금까지 배운게 어디에 쓰이는가?

쇼핑몰 사이트를 보면서 얘기해보자.

✨과제. js013.html을 생성하고 아래의 코드를 붙여넣은 뒤 각 상품의 title 과 price를 html에 넣어서 완성해보자. (반복문 사용)

js013.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

</head>
<body>
    <div class="card-group container">
        <div class="card">
            <img src="https://via.placeholder.com/600">
            <div class="card-body">
                <h5>Card title</h5>
                <p>가격 : 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>Card title</h5>
                <p>가격 : 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>Card title</h5>
                <p>가격 : 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>
</body>
</html>

밑에 보고 따라치지 말고 혼자서 해보자

 for(var i =0; i< products.length; i++){
            cardChange(i);
        }

function cardChange(num) {
    document.querySelectorAll('.card-body h5')[num].innerHTML = products[num].title;
    $('.card-body p').eq(num).html(products[num].price);
}

💎javascript 변수 활용

자바 스크립트에선 덧셈기호로 문자를 연결할 수 있다.

console.log(1+"3");      //'13' 출력 된다.

숫자 + 숫자는 덧셈

숫자 + 문자는 숫자를 문자로 바꿔서 연결해준다.

var a = '풀스택개발자';
console.log('문자' + a + '문자'); // '문자풀스택개발자문자' 출력된다.

이렇게 문자 사이에 변수를 넣어서 활용할 수 있다.

변수 양옆에 + 쓰는게 귀찮다면

console.log(`문자 ${a} 문자`);// '문자 풀스택개발자 문자' 출력된다.

이렇게 백틱 기호 ` 사이에 문자열과 ${변수}를 사용하면 된다.

백틱기호는 숫자1 왼쪽키 ~ 밑에 있는 키다.

Previousdataset NextSelect

Last updated 1 year ago