[JavaScript] 10. 객체(Object)

# 객체(Object) 

키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합입니다. 프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값을 담을 수 있습니다.

 

* 프로퍼티(property)

프로퍼티 키(이름)와 프로퍼티 값으로 구성됩니다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있습니다. 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자이며 프로퍼티 값으로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 symbol 값입니다.

 

ex) 
const dog = {
        name: '덜라',
        family: '사모예드',
        age: 1,
        weight: 9.0,
        play: function(){
            console.log('뛰어놉니다.');
        }
}

 

console.log(dog.name)    // 덜라
dog.play();       // 뛰어놉니다.
console.log(dog.play)   //   function(){ console.log('뛰어놉니다.'); }

 

 

● 객체를 생성하는 방법  

1. 리터럴 표기법을 이용한 객체의 생성 

자바스크립트에서 객체를 생성하는 가장 쉽고, 간단한 방법입니다.

 

        const 객체명 = {
                프로퍼티명1: 값1,
                프로퍼티명2: 값2,
                프로퍼티명3: function(){ },
                ...
        }

 

예시 )

<script>
	'use strict'
        let a; // 변수
        let b = {}; // 객체
        
        const dog1 = "뽀미"; // "": 배열 {}: 객체
        const dog2 = {
            name: '덜라',
            family: '사모예드',
            color: 'white',
            age: 1,
            weight: 9.0,
            play: function(){
                console.log('뛰어놉니다.');
            }
        };

        console.log(`dog1: ${dog1}`);
        console.log(`dog2: ${dog2}`);
        console.dir(dog2);

        console.log(`dog2.name : ${dog2.name}`);
        console.log(`dog2.family : ${dog2.family}`);
        console.log(`dog2.color : ${dog2.color}`);
        console.log(`dog2.age : ${dog2.age}`);
        console.log(`dog2.weight : ${dog2.weight}`);
        console.log(`dog2.play : ${dog2.play}`);
        dog2.play();
</script>

 

 

2. 생성자를 이용한 객체의 생성

new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있습니다. 이 때 사용되는 메소드를 생성자라고 하며, 이 메소드를 새롭게 생성되는 객체를 초기화하는 역할을 합니다.

 

        function 생성자명(매개변수1, 매개변수2 ..){
                프러퍼티명1 = 값1;
                프러퍼티명2 = 값2;
                프러퍼티명3 = function(){ };
                ...
        }

 

const 객체명1 = new 생성자이름(값1, 값2 ...);
const 객체명2 = new 생성자이름(값1, 값2 ...);

 

* 리터럴과 차이점 : 객체를 여러개 생성이 가능하다

 

예시 1)

<script>
        'use strict'
        function triangle(b, h){
            this.base = b;
            this.height = h;
            this.area = function(){
                return this.base * this.height / 2;
            }
        }
        const tg1 = new triangle(10, 10);
        console.log(`tg1.base : ${tg1.base}`);
        console.log(`tg1.height : ${tg1.height}`);
        console.log(`tg1.area() : ${tg1.area()}`);
        console.dir(tg1);
</script>

예시 2)

<script>
        'use strict'
        function triangle(b, h){
            this.base = b;
            this.height = h;
            this.area = function(){
                return this.base * this.height / 2;
            }
        }
        const tg2 = new triangle(20, 5);
        console.log(`tg2.base : ${tg2.base}`);
        console.log(`tg2.height : ${tg2.height}`);
        console.log(`tg2.area() : ${tg2.area()}`);
</script>

 

* 프로토타입(prototype)

자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있습니다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이 때 상속되는 정보를 제공하는 객체를 프로토타입이라고 합니다.

 

const tg1 = new triangle(100, 100); // --> tg1의 객체의 프로토타입은 triangle.prototype 입니다.

 

* 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype와 자신의 생성자 객체를 프로토타입으로 가집니다.

 

tg1 <--- triangle.prototype
     <--- Object.prototype
     두가지 타입을 상속받는다.

 

예시 1)

<script>
        'use strict'
        function Dog(color, name, age){
            this.color = color;
            this.name = name;
            this.age = age;
        }
        let dollar = new Dog("white", "덜라", 1);
        console.log(dollar);
        console.log(dollar.color);
        console.log(dollar.name);
        console.log(dollar.age);
</script>

 

<script>
        'use strict'
        function Dog(color, name, age){
            this.color = color;
            this.name = name;
            this.age = age;
        }
        dollar.family = '사모예드';     // dollar 객체에 추가
        dollar.breed = function(){  // 객체 직접적 추가
            return this.color + ' ' + this.family;
        }
        console.log(dollar);
</script>

 

<script>
        'use strict'
        function Dog(color, name, age){
            this.color = color;
            this.name = name;
            this.age = age;
        }
        let ppomi = new Dog("white", "뽀미", 4);
        console.log(ppomi);
</script>

 

<script>
        'use strict'
        function Dog(color, name, age){
            this.color = color;
            this.name = name;
            this.age = age;
        }

        let dollar = new Dog("white", "덜라", 1);

        dollar.family = '사모예드';     // dollar 객체에 추가
        dollar.breed = function(){  // 객체 직접적 추가
            return this.color + ' ' + this.family;
        }
        console.log(dollar.family);
        console.log(dollar.breed());
</script>

 

<script>
        'use strict'
        function Dog(color, name, age){
            this.color = color;
            this.name = name;
            this.age = age;
        }

        let ppomi = new Dog("white", "뽀미", 4);
        console.log(ppomi.family); // undefined
        console.log(ppomi.breed()); // error
</script>

* family, breed 는 dollar 객체에 직접적으로 추가 했기 때문에 ppomi 에는 적용되지 않는다.

 

예시 2)

<script>
        'use strict'
        function Dog(color, name, age){
            this.color = color;
            this.name = name;
            this.age = age;
            // this.family = "포메리안";
            // this.breed = function(){
            //     return this.color + " " + this.family;
            // } 밑에와 같은 의미
        }

        Dog.prototype.family = '사모예드';
        // 생성자 자체에 객체 추가 
        Dog.prototype.breed = function(){
            return this.color + " " + this.family;
        }

        let dollar = new Dog('white', '덜라', 1);
        console.log(dollar);
        console.log(dollar.color);
        console.log(dollar.name);
        console.log(dollar.age);
        console.log(dollar.family);
        console.log(dollar.breed());

        let ppomi = new Dog('white', '뽀미', 4);
        console.log(ppomi);
        console.log(ppomi.color);
        console.log(ppomi.name);
        console.log(ppomi.age);
        console.log(ppomi.family);
        console.log(ppomi.breed());
</script>

 

 

3. 클래스를 이용한 객체의 생성(ECMA6 추가)

● 클래스 선언식 

class 클래스명 { 
        constuctor(매개변수1, 매개변수2 .. ){
                프러퍼티명1 = 값1;
                프러퍼티명2 = 값2;
                ...
        }
}

const 객체명 = new 클래스명(값1, 값2 ..);

* 객체를 무조건 만들어야한다. 
* 클래스는 호이스팅이 되지 않는다.

 

● 클래스 표현식 

let 변수명 = class {
        프러퍼티명1 = 값1; // public
        #프러퍼티명2 = 값2; // private
        static 프러퍼티명3 = 값3 // static 
        constuctor(매개변수1, 매개변수2 .. ){
                프러퍼티명1 = 값1;
                프러퍼티명2 = 값2;
                ...
        }
}

const 객체명 = new 변수명(값1, 값2 ..);

* 익명클래스로 대부분 사용한다. 

 

● 메소드 정의  

let 변수명 = class { 
        constuctor(매개변수1, 매개변수2 .. ){
                프러퍼티명1 = 값1;
                프러퍼티명2 = 값2;
                ...
        }
        메소드명(매개변수1, 매개변수2 ..){
                실행문;
                return(옵션)
        }
        set 메소드명(매개변수1, 매개변수2 ..){
                실행문;
                // * set 반드시 매개변수가 있어야한다.
        }
        get 메소드명(){
                실행문;
                return 값;
                // * get 반드시 return 있어야한다.
        }
}

 

예시 )

<script>
        'use strict'
        class Dog{
            weight = 20.0;          // public
            #family = '사모예드';   // # : private
            static x = 0;
            constructor(name, color, age){
                this.name = name;
                this.color = color;
                this.age = age;
            }
            play(){ 
                console.log(`${this.name}가 놉니다.`);
            }
            get getAge(){
                return this.age;
            }
            set setColor(color){
                this.color = color;
            }
        }

        const dollar = new Dog('덜라', 'white', 1);
        dollar.play();
        console.log(dollar instanceof Dog);
        console.log(dollar.getAge);
        dollar.setColor = 'balck';
        console.log(dollar.color);
        console.log(dollar.weight);     // public
        console.log(dollar.family);     // private
</script>