JAVASCRIPT

[JavaScript]Array & Object 자료형

[JavaScript]Array & Object 자료형

자바스크립트에는 문자, 숫자, 블린, 어레이, 오브젝트 등의 자료형이 있다. 그 중에서 여러가지 자료형을 한 곳에 저장할 수 있는 어레이(Array)와 오브젝트(Object)에 대해서 배워보자.

Array

어레이 선언하는 방법

      var array = ["문자열", "520", 520, [1,2,3],false];
  1. 대괄호 안에 데이터를 넣는다.
  2. 콤마로 자료 간의 구분을 할 수 있다.

어레이 사용하는 방법

      console.log(array);
      console.log(array[0]);
결과 화면
  1. 어레이 변수명을 사용하여 전체 어레이를 출력할 수 있다.
  2. 변수명[숫자]로 필요한 번지의 자료를 출력할 수 있다.

 

Object

오브젝트 선언하는 방법

     var object = { brand : "BMW", model : 520};
  1. 중괄호 안에 데이터를 넣는다.
  2. 콤마로 자료 간의 구분을 할 수 있다.
  3. key=value 형태로 자료를 넣는다.

오브젝트 사용하는 방법

      console.log(object);
      console.log(object.brand);
결과 화면
  1. 오브젝트 변수명을 사용하여 전체 오브젝트를 출력할 수 있다.
  2. 변수명.key로 자료를 출력할 수 있다.

 

데이터 바인딩

어레이와 오브젝트에 저장된 데이터를 html에 가져오는 방법을 배워보자.

예제로 이해하기

html
    <h4 id="title">상품제목</h4>
    <p id="text">상품내용</p>
    <div style="margin-bottom: 500px;"></div>
js
      var array = ["BMW", 520];
      var object = { brand : "BMW", model : 520};

      //document.getElementById("title").innerHTML = array[0];
      $("#title").html(array[0]);
      $("#text").html(object.model);

 

응용하기

      var data = [{brand:"BMW"},{model:502}];

      $("#title").html(data[0].brand);
      $("#text").html(data[1].model);

 

반복문

Q. Array에서 철수라는 자료를 찾고 싶습니다.
var 출석부 = ['흥민', '영희', '철수', '재석'];

function 이름찾기( 구멍 ){
  for (var i = 0; i < 4; i++) {
    if ( 구멍 == 출석부[i]) {
      console.log('있어요')
    }
  }
}

이름찾기('철수');
Q. 구구단을 콘솔창에 출력하고 싶습니다.
function 목표량계산기(판매실적어레이, 평균월별판매량){
  var 실적5개월 = 0;

  for (var i = 0; i < 5; i++){
    실적5개월 = 실적5개월 + 판매실적어레이[i];
  }

  var 실적12월 =  6 * 평균월별판매량 - 실적5개월;
  console.log(실적12월)
}

 

최신글