📝 자바스크립트 객체

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

📌 자바스크립트 객체 모양의 문자열

== JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)
-> "{ K:V , K:V , K:V }"

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

💡 {} : 객체 리터럴 표기법을 이용한 생성

🔎 코드로 살펴보기

• html

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

• js

// 객체 생성
document.getElementById("btn1").addEventListener("click", function(){
    
    const div1 = document.getElementById("div1");

    // {} 객체 리터럴 표기법으로 객체 생성
    
    // ** (중요) **
    // 자바스크립트 객체의 Key는 무조건 string(묵시적)
    // "Key" 또는 'Key'
    // 또는 Key (따옴표 없어도 String으로 인식)

    const brand = "할리스";
    const product = {

        "pName" : "텀블러",
        'brand' : '스타벅스',
        color : ["white", "black", "silver"],
        price : 35000, 

        // 기능(메소드)
        mix : function(){
            console.log("섞기 시작합니다.");
        },

        information : function(){
            // 같은 객체 내부의 다른 속성을 호출하고 싶은 경우
            // 현재 객체를 뜻하는 this를 앞에 붙여야 된다!
            console.log(this.pName);
            console.log(this.brand);
            console.log(this.color);
            console.log(this.price);

            // this 미작성 시 객체 외부 변수 호출 
            console.log(brand);
        }
    }

    // 결과 출력
    div1.innerHTML = ""; // div1 내부 내용 삭제

    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>";

    // 자바스크립트 객체용 향상된 for문 (for ... in)
    // -> 객체 내부에 작성된 key를 순서대로 하나씩 꺼내옴
    for(let key in product){
        div1.innerHTML += product[key] + "<br>";
                        // 배열의 인덱스 선택하듯이
    }

    // 객체 메소드 호출
    product.mix();

    product.information();
})

🔎 출력 화면

• 라이브 서버
  

• 콘솔창
  

---

💡 생성자 + new 생성자()를 이용한 생성

1. 생성자 함수 정의 (생성자 함수명은 대문자로 시작!)
2. 생성자 함수 호출(new 연산자)

🔎 코드로 살펴보기

• html

    <button id="btn2">객체 생성 2(생성자 함수)</button>

• js

// 생성자 함수 (자바의 생성자를 함수로 작성하는 모양)

// 1. 생성자 함수 정의 (생성자 함수명은 대문자로 시작!)
function Student(name, grade, ban){

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

    // 기능(메소드)
    this.intro = function(){
        console.log(grade + "학년 " + ban + "반 " + name + "입니다.");
    }
}

// 2. 생성자 함수 호출(new 연산자)
document.getElementById("btn2").addEventListener("click", function(){

    const std1 = new Student("홍길동", 3, 1);
    const std2 = new Student("홍길순", 2, 7);
    const std3 = new Student("김길동", 1, 9);
    console.log(std1);
    console.log(std2);
    console.log(std3);

    // 생성자 함수 사용 이유 : 같은 형태의 객체가 다수 필요한 경우에 사용
    // (코드 길이 감소, 재사용성 증가)

    console.log(std1.name);
    std1.intro();
})

🔎 출력 화면

• 콘솔창
  

---