[Javascript] 자바스크립트의 객체

객체의 개념

객체란 key와 value로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.

프로퍼티의 값으로 함수가 올 수 있고, 이러한 프로퍼티를 메서드(method)라고 한다.

var dog = {
    name : "깜장이",  // 프로퍼티
    age : 2, 
    color : "검정색", 
    info: function() { // 메서드
        return `${this.name}는 ${this.age}살 ${this.color} 개입니다.`;
    }
};

 

객체의 생성 방법

객체의 생성 방법에는 크게 세 가지가 있다.

1. 객체 리터럴 방식

중괄호 안에 key:value 를 쉼표로 구분하여 생성한다.

var dog = {
    name : "깜장이",  // 프로퍼티
    age : 2, 
    color : "검정색", 
    info: function() { // 메서드
        return `${this.name}는 ${this.age}살 ${this.color} 개입니다.`;
    }
};

 

2. 생성자 방식

new 연산자를 통해 Object 객체의 생성자 함수를 호출한다.

var dog = new Object();
dog.name = "깜장이";
dog.age = 2;
dog.color = "검정색";
dog.info = function () {
    return `${this.name}는 ${this.age}살 ${this.color} 개입니다.`;
};

직접 생성자 함수를 만들어 객체를 생성할 수도 있다.

var Dog = function (name, age, color) {
    this.name = name;
    this.age = age;
    this.color = color;
    this.info = function () {
        return `${this.name}는 ${this.age}살 ${this.color} 개입니다.`;
    }
}

var dog = new Dog("깜장이", 2, "검정색");

 

3. Object.create() 방식

Object.create() 메서드는 프로토타입 객체와 프로퍼티를 사용해 새로운 객체를 만든다.

var dog = Object.create(null, { // null 프로토타입을 사용
    name: {value: "깜장이"}, // 프로퍼티들 추가
    age: {value: 2},
    color: {value: "검정색"}
});

 

객체의 프로퍼티/ 메서드 참조

객체의 프로퍼티를 참조하는 방법은 다음과 같다.

console.log(dog.age); // 2
console.log(dog["age"]); // 2

 

객체의 메서드를 참조하는 방법은 다음과 같다.

console.log(dog.info()); // 깜장이는 2살 검정색 개입니다.
console.log(dog.info); // [Function: info]

메서드 뒤에 괄호를 붙이지 않으면, 메서드가 아닌 프로퍼티 그 자체를 참조하여 해당 메서드의 정의가 반환된다.

 

객체의 프로퍼티/메서드 생성과 삭제

이미 생성된 객체에 새로운 프로퍼티나 메서드를 다음과 같은 방법으로 추가할 수 있다.

var dog = {
    name : "깜장이", 
    age : 2, 
    color : "검정색", 

};

dog.family = "시고르자브종" // dog["family"] 로 생성 가능
dog.info = function() { // dog["info"] 로 생성 가능
    return `${this.name}는 ${this.age}살 ${this.color} 개입니다.`;
}

객체의 프로퍼티나 메서드를 다음과 같은 방법으로 삭제할 수 있다.

var dog = {
    name : "깜장이", 
    age : 2, 
    color : "검정색", 
    this.info = function () {
        return `${this.name}는 ${this.age}살 ${this.color} 개입니다.`;
    }
};

delete dog.color // dog["color"] 로 삭제 가능
delete dog.info // dog["info"] 로 삭제 가능

 

객체 프로퍼티의 순회

객체 프로퍼티의 순회 방법은 크게 세 가지가 있다.

var dog = {
    name : "깜장이",
    age : 2,
    color : "검정색",
};

 

1. for  in 문

객체의 열거할 수 있는 프로퍼티(enumberable properties)를 순회한다.

for (var dogKey in dog) {
    console.log(dogKey);
}

// name
// age
// color
// info

 

2. Object.keys()

객체가 가진 고유 프로퍼티 중 열거할 수 있는 프로퍼티의 이름을 배열에 담아 반환한다.

console.log(Object.keys(dog));
// [ 'name', 'age', 'color', 'info' ]

Object.defineProperty(dog, "color", {enumerable: false}); // color 프로퍼티의 enumerable 속성을 false로 설정
console.log(Object.keys(dog));
// [ 'name', 'age', 'info' ]

 

3. Object.getOwnPropertyNames()

해당 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환한다.

console.log(Object.getOwnPropertyNames(dog));
// [ 'name', 'age', 'color', 'info' ]

 

 

 

참조
http://www.tcpschool.com/
https://curryyou.tistory.com/189