자바스크립트 객체

        자바스크립트의 객체는 {}내에 K:V(map형식)가 모여있는 형태로 작성된다.
        
        {k:v, k:v, k:V} // 자바스크립트 객체

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

        - 자바스크립트에서 객체를 생성하는 방법

        1. {} : 객체 리터럴 표기법을 이용한 생성
        2. 생성자 + new 생성자() 를 이용한 생성
    

<button id="btn1">객체 생성1</button>
<div class="area" id="div1"></div>

<hr>

<button id="btn2">객체 생성2</button>
<div class="area" id="div2"></div>

<h1>JSON(Javascript Object Notation, 자바스크립트 객체 표기법)</h1>

<pre>
    JS 객체 : {"memberID":"user01","memberPw":"pass01","age":20}
    JSON 문자열 : '{""}'

    - 간단한 포멧
    괄호{} 내에 key:value 쌍으로 구성"key":value}
    key : 반드시 문자열 사용 ( "" 표기 필수)
    value : String, Number, Boolean, Array, Object, Null 데이터 저장 가능
    
    - 객체{} 또는 배열[] 데이터를 효율적으로 표시가 가능하다.

    - 경량데이터 교환 방식

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



<h2>JavaScript Json 내장 객체</h2>
<pre>
    JSON 포멧의 데이터를 간편하게 다룰 수 있는 내장된 객체

    JSON.stringify(JS객체) : JS객체 >> JSON문자열로 반환
    JSON.parse(JSON문자열) : JSON문자열을 다시 JS객체로 변환
</pre>

<button id="btn3">객체 생성2</button>

// 객채생성1

SCRIPT

document.getElementById("btn1").addEventListener("click", function () {
    // {} 객채 생성 및 다루기

    // **중요 **
    // JS객체 Key는 무조건 String (묵시적)
    // -> key 작성시 "", '' 를 작성안해도 String으로 인식한다.

    const brand = "스타벅스";

    const product = {
        "pName": "텀블러",
        brand: "투썸플레이스", //키값은 "brand"이기때문에 key밸류이지 전역변수가아님.
        color: ["red", "black", "silver"],
        price: 30000,
        'information': function () { // product 객체의 기능
            const brand = "메가커피"
            console.log(brand);

            // 객체 내부 함수에서 변수명을 작성 시
            // 해당 객체의 변수가 아닌 전역변수가 선택된다.
            // 같은 객체의 변수(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 + "
"
    div1.innerHTML += "product.brand :" + product.brand + "
"
    div1.innerHTML += "product.color :" + product.color + "
"
    div1.innerHTML += "product.price :" + product.price + "
"
    div1.innerHTML += "
"

    // product.price값 변경
    product.price = 25000;
    div1.innerHTML += "product.price :" + product.price + "
"
    div1.innerHTML += "
"

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

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

    // 객체명['key']방법으로 객체가 가지고 있는 모든 값 출력하기
    // -> for in 구문 ( 객체 전용 for문 )    
    div1.innerHTML += "product['capacity'] :" + product['capacity'] + "
"
    div1.innerHTML += "
"

    // for(let key in 객체명) : 매 바퀴마다 객체의 k를 하나씩 얻어와서 key 변수에 저장
    for (let key in product) {
        // 객체의 k는 모두 String == 'pName', 'price'
        div1.innerHTML += product[key] + "
"
    }
})

//생성자함수
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, 10, "김길동"));
    stdList.push(new Student(2, 5, "임형주"));
    stdList.push(new Student(4, 7, "정서윤"));

    div2.innerHTML = "";

    // for of : 배열 컬렉션 요소 반복접근용 for문
    for (let std of stdList) {
        // console.log['std::' + std]
        // for in : 객체의 키 반복 접근용 for문
        for (let key in std) {
            // console.log['key::' + key]
            //std[kye]의 자료형이 function이면 실행 후 출력
            if (typeof std[key] == 'function') {
                div2.innerHTML += " introduce : " + std[key]() +
"
            } else {
                div2.innerHTML += ":" + std[key] + "
"
            }
        }
        div2.innerHTML += "
";
    }
})

//1. 생성자함수정의 : 생성자 함수의 시작은 반드시 대문자!
function Student(grade, ban, name) {
    // JS함수의 매개변수는 let, const var를 적지않는다.
    // 안적어도 해당 함수의 지역변수로 취급

    // 생성자 함수에서의 this는 무엇인가?
    // == new 연산자를 통해서 만들어지는 객체(앞으로 만들어질 객체)

    // 속성
    this.grade = grade;
    this.ban = ban;
    this.name = name;

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

    }
}

document.getElementById("btn3").addEventListener("click", function () {

    const std = new Student(5, 7, "김영희");

    console.log(std); // 객체
    console.log(JSON.stringify(std)); // 객체에서 JSON문자열로 변환됨
    //** JSON 변환 시 객체의 기능은 포함하지 않는다!!! **/
    // JSON은 데이터 전달에 특화 된 형태

    const member = '{"memberID" : "user01", "membeerPw" : "pass01" , "age": 20}';

    console.log(member); // JSON 문자열
    console.log(JSON.parse(member)); // JSON >> 객체
})

DOM