자바스크립트(javascript) 객체란 무엇인가?

객체(Object)는 어떠한 상황이나 추상체에 관련된 데이터와 함수(객체에 들어있을 때에는 주로 프로퍼티와 메소드라고 부름)의 집합입니다. 

 

Number,  Boolean을 비롯한 원시 자료형들은 하나의 값을 저장할 수 있지만, 우리가 일반적으로 접하는 상황들은 하나의 정보만을 필요로 하지 않고, 여러 가지의 정보를 모아서 처리해야하는 경우가 많습니다.

 

그러한 상황에 수십 가지의 원시 자료형 변수들을 선언하면 코드의 가독성은 점점 낮아지고 복잡해질 것입니다. 

이럴 때 여러 변수들을 한번에 접근할 수 있도록 해주는 것이 바로 객체입니다.

 

객체를 만드는 방법은 표현식으로 중괄호 {}를 사용하면 됩니다.

중괄호 안에는 키(Key)와 값(Value)을 한 쌍으로 정의한 속성(Properties)들을 넣을 수 있습니다.

• let object = {};
• {Key : Value}

 

아래는 curriculum 이라는 객체를 생성하여 정보를 저장하는 예제입니다.

let curriculum = {
    subjects: {},
    addSubject: function(name, studentCount) {
        this.subjects[name] = {
            name: name,
            studentCount: studentCount
        };
    },
    getSubjectCount: function() {
        return Object.keys(this.subjects).length;
    }
};

curriculum.addSubject('Math', 20);
curriculum.addSubject('English', 30);

console.log(curriculum.subjects['Math'].studentCount); // 20
console.log(curriculum.subjects['English'].studentCount); // 30
console.log(curriculum.getSubjectCount()); // 2

객체 안에 subjects 프로퍼티와 addSubject 메소드, getSubjectCount 메소드를 정의한 후 addSubject 메소드로 subjects 프로퍼티에 'Math', 'English' 키와 각각 20, 30이라는 값을 추가하고 로그로 출력하는 것을 볼 수 있습니다. 

 

getSubjectCount 에서는 curriculum 객체의 key을 배열화하여 그 길이를 반환합니다.

---

그리고 다음 예제는 객체 속성을 따로 추가하고 삭제하는 코드를 추가하였습니다.

let curriculum = {
    subjects: {},
    addSubject: function(name, studentCount) {
        this.subjects[name] = {
            name: name,
            studentCount: studentCount
        };
    },
    getSubjectCount: function() {
        return Object.keys(this.subjects).length;
    }
};

curriculum.addSubject('Math', 20);
curriculum.addSubject('English', 30);

curriculum.subjects['Social'] = {name: 'Social', studentCount: 40};
curriculum.subjects.Science = {name:'Science', studentCount: 10};
delete curriculum.subjects['Math']; // 또는 delete curriculum.subjects.Math

for(key in curriculum.subjects) 
    console.log('과목 - '+curriculum.subjects[key].name + ' 학생 수 - '+curriculum.subjects[key].studentCount);
/*
과목 - English 학생 수 - 30
과목 - Social 학생 수 - 40
과목 - Science 학생 수 - 10
*/

객체의 속성을 접근하거나 추가하려면 콤마 .를 사용하거나 대괄호 [] 안에 키 값을 문자열로 작성하면 됩니다.

보통은 콤마를 사용하는 것이 선호됩니다.

 

속성의 삭제는 delefe 키워드를 앞에 두고 해당 속성을 작성하면 이루어집니다.

예제에서 delete 키워드로 'Math' 키를 가진 속성을 삭제함으로써, 마지막의 for문에서 출력되지 않았음을 확인할 수 있습니다.

물론 삭제할 때에도 콤마 .와 대괄호 [] 모두 사용할 수 있습니다.