5. 객체

JavaScript에서 객체는 다양한 데이터와 기능을 하나의 단위로 묶을 수 있는 중요한 구조입니다.
객체는 속성(key)과 값(value)을 갖는 형태로 정의됩니다.
이번 글에서는 객체의 선언 및 사용, 메소드 속성, 그리고 객체 배열을 사용한 데이터 관리 방법에 대해 살펴보겠습니다.

1. 객체 선언 및 사용

객체는 중괄호 {}를 사용하여 생성되며, 속성명과 속성값을 key: value 형식으로 정의합니다. 속성값은 문자열, 숫자, 배열 등 다양한 자료형을 가질 수 있습니다.

예제 코드

function test1(){
    const product = {
        pName : "Dry Mango",
        price : 4000,
        kind : "pickle",
        ingredient :["mango", "sugar"]
    }

    const area1 = document.getElementById("area1");
    area1.innerHTML += "pName : " + product['pName'] + "<br>";
    area1.innerHTML += `price : ${product.price}<br>`;
    area1.innerHTML += `ingredient : ${product.ingredient[0]}, ${product.ingredient[1]}`;
}

• 객체 product는 속성 pName, price, kind, ingredient를 가집니다.
• 객체의 속성에 접근하는 방법은 두 가지가 있습니다:
  1. 객체명["속성명"]으로 접근
  2. 객체명.속성명으로 접근

2. 객체의 메소드 속성

객체의 속성 중에서 함수 자료형을 가지는 속성을 메소드라고 부릅니다. 메소드는 객체 내부에서 동작하는 함수를 의미하며, this 키워드를 사용하여 객체 자신의 속성에 접근할 수 있습니다.

예제 코드

function test2(){
    const dog = {
        name : "복실이",
        kind : "비글",
        eat : function(food){
            area2.innerHTML += `${this.kind} 종류인 ${this.name}가 ${food}를 먹고 있습니다.<br>`;
        }
    }
    dog.eat("사과");
}

• dog 객체의 메소드 eat은 this 키워드를 사용하여 객체 자신의 속성 name과 kind에 접근합니다.
• 메소드 호출 시 객체의 속성을 기반으로 동작하는 것을 확인할 수 있습니다.

3. 객체 배열을 사용한 다량의 데이터 관리

객체 배열을 사용하면 다량의 데이터를 효율적으로 관리할 수 있습니다. 각 객체는 특정한 데이터를 포함하고 있으며, 배열을 통해 반복적으로 객체의 속성에 접근하고, 메소드를 호출할 수 있습니다.

예제 코드

function test3(){
    const studentList = [
        {name: "전제민1", java: 85, db: 70, front: 60},
        {name: "전제민2", java: 70, db: 65, front: 75},
        {name: "전제민3", java: 65, db: 50, front: 65},
        {name: "전제민4", java: 50, db: 70, front: 100},
        {name: "전제민5", java: 100, db: 65, front: 65}
    ];

    for(let i in studentList){
        studentList[i].getSum = function(){
            return this.java + this.db + this.front;
        }

        studentList[i].getAvg = function(){
            return this.getSum() / 3;
        }
    }

    const area3 = document.querySelector("#area3");
    for(let student of studentList){
        area3.innerHTML += `이름: ${student.name}, 총점: ${student.getSum()}, 평균: ${student.getAvg()}<br>`;
    }
}

• studentList는 객체 배열로, 각 객체는 학생의 정보와 성적을 담고 있습니다.
• getSum과 getAvg 메소드를 각 객체에 추가하여 총점과 평균을 계산합니다.
• 반복문을 통해 각 학생의 정보를 출력합니다.