자바스크립트 객체

자바스크립트 객체는 {} 내에 key:value 가 모여있는 형태로 작성된다.
(Map 형식)

중요

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

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

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

객체의 값을 얻어오고/대입하기

1) 얻어오기

• 객체명.key
• 객체명['key']

2) 대입하기

• 객체명.key = 값;
• 객체명['key'] = 값;

JS 객체에 없는 key에 값대입하기!
-> 객체에 추가된다!

객체의 key 제거 방법

delete 객체변수명.key

---

for(let key in 객체명)

매 바퀴마다 객체의 K를 하나씩 얻어와 key 변수에 저장

---

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

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 포맷 데이터를 핸들링 할 수 있는 라이브러리를 제공
  시스템간 객체 교환에 용이
  

---

Javascript JSON 내장 객체

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

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

---

// 생성자 함수
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 : 객체의 키 반복 접근용 fo문
        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
            }
        }
    }


})

// 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;
    }
}