11. JS객체

1. 자바스크립트 객체

자바스크립트 객체는 {} 내에 Key:Value가 모여있는 형태로 작성된다 { Map 형식 }
 { K:V , K:V , K:V } // 자바스크립트 객체

 (참고) 자바스크립트 객체 모양의 문제점
 == JSON(Javascript Object notation, 자바스크립트 객체 표기법)
 => "{K:V, K:V, K:V}"

자바스크립트 객체를 생성하는 방법
1) {} : 객체 리터럴 표기법을 이용한 생성
2) 생성자 + new 생성자()를 이용한 방법

1) {} 객체 생성

// {} 객체 생성 및 다루기

// ** 중요 **
// JS 객체의 key는 무조건 string(묵시적으로 string)
// => key 작성시, "", '', (따옴표X) 모두 string으로 인식

const brand = "투썸플레이스";

const product = {
  'pName' : "텀블러",
  "brand" : "스타벅스",
  color : ["red", "black", "silver"],
  price : 30000,
  'information' : function(){ // 객체의 기능
    const brand = "메가커피";
    console.log(brand); 
    // 메가커피가 없다면 "투썸" 있으면 "메가"
            
    // 객체 내부 함수에서 변수명을 작성하면 해당 객체의 변수(key)가 아닌
    // 전역 변수가 선택됨
    // 왜?? 같은 객체의 변수(key)를 선택하는 방법이 별도로 존재하기 때문에
    
    // ** 객체 내부에서 this == 현재 객체 **
    console.log(this.pName);
    console.log(this.brand);
    console.log(this.color);
    console.log(this.price);
  }
}

console.log(product);

// 객체 기능 호출하기
product.information();

// 객체가 가지고 있는 값 출력하기
const div1 = document.getElementById("div1");

div1.innerHTML = "";

// 객체의 값을 얻어오고 대입하기
// 1) 얻어오기 : 객체명.key
//			   객체명['key']

// 2) 대입하기 : 객체명.key = 값;
//				객체명['key'] = 값;

div1.innerHTML += "product.pName : " + product.pName + "<br>";  
div1.innerHTML += "product.brand : " + product.brand + "<br>";
div1.innerHTML += "product.color : " + product.color + "<br>";
div1.innerHTML += "product.price : " + product.price + "<br>";
div1.innerHTML += "<hr>";

// product price 값 변경
product.price = 25000;
div1.innerHTML += "product.price : " + product.price + "<br>";
div1.innerHTML += "<hr>";

// JS 객체에 없는 key에 값 대입하기
// ➡️ 객체에 추가된다
product.capacity = "550ml";
console.log(product);
div1.innerHTML += "product.capacity : " + product.capacity + "<br>";
div1.innerHTML += "<hr>";

// 객체의 key 제거 방법
// ➡️ delete 객체변수명.key
// delete product.capacity;
// console.log(product);

// 객체명['key'] 방법으로
// 객체가 가지고 있는 모든 값 출력하기
// ➡️ for in 구문(객체전용 for문)

// for(let key in 객체명) : 매 바퀴마다 객체의 K를 하나씩 얻어와서 
// key 변수에 저장
for(let key in product){
  div1.innerHTML += product[key] + "<br>";
}

2) new 생성자()

// 생성자 함수
document.getElementById("btn2").addEventListener("click", function(){
  const div2 = document.getElementById("div2");

  const stdList = []; // 비어있는 배열

  // 2. 생성자 함수 호출 : new 생성자 함수명(매개변수)
  stdList.push(new Student(1, 2, '홍길동'));
  stdList.push(new Student(3, 5, '김길동'));
  stdList.push(new Student(2, 7, '조미현'));
  stdList.push(new Student(1, 6, '박철수'));

  div2.innerHTML = "";

  // for of : 배열/컬렉션 요소 반복 접근용 for문
  for(let std of stdList){

    // for in : 객체의 키 반복 접근용 for문
    for(let key in std){

      // std[key]의 자료형이 function이면 실행 후 출력
      if(typeof std[key] == 'function'){
        div2.innerHTML += key + " : " + std[key]() + "<br>";
        // introduce()
      } else {
        div2.innerHTML += key + " : " + std[key] + "<br>";
        // grade, ban, name
      }
    }

    div2.innerHTML += "<hr>";
  }
})

// 1. 생성자 함수 정의 : 생성자 함수의 시작은 반드시 대문자!!
function Student(grade, ban, name){
  // 생성자 함수에서의 this??
  // == new 연산자를 통해 만들어지는 객체(앞으로 만들어질 객체)

  this.grade = grade;
  // 매개변수 grade 값을 생성되는 객체의 grade에 대입
  this.ban = ban;
  this.name = name;

  // 기능
  this.introduce = function(){
    return this.grade + "학년" + this.ban + "반" + this.name;
  }
}

2. JSON

JS 객체 : {"memberId":"user01","memberPw":"pass01","age":20}
JSON 문자열 : '{"memberId":"user01","memberPw":"pass01","age":20}'

- 간단한 포맷
괄호 {} 내에 key : value 쌍으로 구성 { "key" : value }
key : 반드시 문자열 사용(쌍 따옴표("") 표기 필수)
value : String, Number, Boolean, Array, Object, null 데이터 저장 가능

- 객체{} 또는 배열[] 데이터를 효율적으로 표시 가능

- 경량 데이터 교환 방식

- 간단한 포맷을 가지고 있어 이해하기 쉬움

- 순수 TEXT 기반
구조화된 TEXT 형식
대부분의 프로그래밍 언어에서 JSON 포맷 데이터를 핸들링 할 수 있는 라이브러리를 제공
시스템 간 객체 교환에 용이

1) Javascript JSON 내장 객체

JSON 포맷의 데이터를 간편하게 다룰 수 있도록 내장된 객체

JSON.stringify(JS객체) : JS 객체 => JSON 문자열 반환

JSON.parse(JSON문자열) : JSON 문자열 => JS 객체로 변환