[JS] 5. 객체, 객체 배열, 생성자

1. 객체

속성명과 속성값으로 구성된 요소를 관리하는 객체(key=property name, value=property value)

• 속성명 : only "문자열"로 작성 가능. 속성값을 관리하는 식별자의 역할을 함
• 속성값 : 모든 타입의 값으로 작성 가능

---

1.1. 객체 생성

(1) 중괄호 안에 속성명과 속성값 작성하는 방법

• var 객체명 = {
  속성 : 값,
  속성 : 값
  };

var obj1 = {
		name : '홍길동',
		age : 33,
		married : true,
		hobby : ['축구', '게임'],
		pet : { 
                    name : '꽃분이', 
                    breed : '말티즈'
                },
                111 : 456, // 여기서 속성명 111은 숫자로 이루어진 문자열로 취급
                'foo-bao' : '푸바오' // 속성명에 특수문자 쓰고 싶으면 따옴표로 막아줘야함
            };

• 속성값은 모든 타입으로 작성할 수 있으므로 예시의 pet 속성의 속성값도 객체 형태로 작성

(2) 속성값 접근, 추가, 삭제

• dot natation(점 표기법) : 온점(.)을 통해 속성에 접근 및 추가 방법
• bracket notation(브래킷 표기법) : 브래킷[]을 통해 속성에 접근 및 추가 방법
• 속성 및 메서드를 동적으로도 추가/삭제가 가능하다.
  =>

var obj2 = new Object();

obj2.pName = '말린 망고'; // obj1으로 치면 obj2 = {pName : '말린망고'}; 가 된다.
obj2.price = 3000;  // dot notation(점 표기법) 
obj2['origin'] = '필리핀';  // bracket notation(브래킷 표기법)
obj2['ty-pe'] = '피클'; // dot notation으로는 특수문자 포함된 속성명을 넣을 수 없다.

• 삭제 : delete(객체명.속성명);

delete(obj2.price);

접근 및 추가	삭제

(3) 객체 배열 활용

• 생성된 객체를 배열에 넣어 활용 가능

var 변수 명 = [ ]; // 배열 생성
데이터 대입 : 변수 명.push({속성 명: “값“, 속성 명: “값”, …});

var pets = [
		{
                    name : "꽃분이",
                    breed : "말티즈",
                    weight : 4.5,
                    bark : function() {
                        return this.weight > 10 ? '멍멍': '왈왈';
                    }
                },
                {
                    name : "고망쨩",
                    breed : "비숑",
                    weight : 7,
                    bark : function() {
                        return this.weight > 10 ? '멍멍': '왈왈';
                    }
                },
                {
                    name : "모모",
                    breed : "리트리버",
                    weight : 25,
                    bark : function() {
                        return this.weight > 10 ? '멍멍': '왈왈';
                    }
                }
            ];
            
            console.log(pets);

            for(var pet of pets) {
                console.log(pet.name + '이/가' + pet.bark() + '짖는다.');  
		}   
}

console

1.2. 메서드

메서드와 함수는 어떤 차이가 있을까?

메서드 : 객체 안에 포함된 기능
함수 : 객체와 관계없이 함수로써 존재,
=> 객체의 속성값이 function인 경우 method라고 정의한다.

• 속성에는 모든 자료형이 올 수 있으며 그 중 함수 자료형인 요소를 메서드라고 한다.
• 객체 내에서 자신의 속성을 호출할 때는 반드시 this 키워드를 사용하여 호출한다.

var pet = {
	petName : '코코',
	eat : function(food) {
		console.log(this.petName + '이/가 ' + food + '를 먹습니다. 냠냠');
		// this 키워드를 통해 petName으로 접근해야 한다.(메서드만의 독특한 실행방법)
		}
};
console.log(pet);

pet.eat('츄르'); // 도트 노테이션으로 접근
pet['eat']('갈비'); // 브래킷 노테이션으로 접근

console

1.3. 객체 순회(for in 반복문)

• 객체의 모든 속성을 출력하기 위해서는 basic loop문이나 while문으로는 출력이 불가능하고 for in문으로 출력해야한다.
• bracket 표기법으로만 객체 속성에 접근 가능하다.

game = {
                title : 'BROTATO',
                price :  8000,
                lang : ['ko', 'eng', 'cn']
};

for (var propertyName in game) { 
        console.log(propertyName + ' : ' + game[propertyName]); 
}

console

1.4. toString 메서드

자바스크립트에서는 모든 객체가 Object객체를 상속받는다. 따라서 Java와 유사하게 Object 객체의 메서드를 사용하고 재정의(오버라이딩)하여 사용할 수 있다. (prototype chain을 활용하여 java의 상속기능을 모방)

• toString = function() {
  return '백킥기호()' this.속성명 '백킥기호';
  }
  백킥기호 = `

var notebook = {
		title : '오늘의 일기',
		content : '오늘은 자바스크립트와 재밌고 즐거운 하루를 보냈다 ^^;;',
		date : new Date(),
		toString : function() {
                    return `title = ${this.title}, content=${this.content}, date=${this.date}`;
                }
		};
        
console.log('notebook : ' + notebook); // toString 오버라이딩 전: 문자열 + 객체 = [object Object] 출력 

console

1.5. 함수 활용 객체 생성

함수의 매개변수에 필요한 속성 값을 받아서 객체 생성 후 리턴하는 함수

function 함수 명(value1, value2, value3, …){
	var 변수 명(객체 명) = {
	속성 명: ‘value1’;
	속성 명: “value2”;
	…
	}
	return 변수 명(객체 명);
}

---

2. 생성자

2.1. 생성자 함수

this키워드를 사용하여 속성을 생성하는 자바스크립트에서 객체지향 프로그래밍을 지원하는 기능이다.
함수를 클래스처럼 정의하기 위해 사용하며 생성자 함수는 호출(call) 시 new 연산자를 함께 사용해야 한다.

• 생성자 함수의 첫 글자는 대문자로 작성하는 것이 관례
• 모든 함수는 prototype이라는 속성을 가지고 있어 prototype을 통해 상속관계를 정의한다.
• 생성자 함수의 코드가 실행되기 전에 빈 객체가 생성되는데, 이 후 생성자 함수 내에서 사용되는 this는 이 빈 객체를 바인딩한다.

function 생성자 명(value1, value2, value3, …){
	this.속성 명 = ‘value1’,
	this.속성 명 = ‘value2’,
	…
}

function Pet(kind, name, breed, weight) {
            // () 보이진 않지만 빈 객체 들어가 있음
            this.kind = kind;
            this.name = name;
            this.breed = breed;
            this.weight = weight;

            this.bark = function () {
                return this.weight > 10 ? '멍멍' : '왈왈';
            }
}

 function test8() {
            var coco = new Pet('고양이', '코코', '브숏', 5);
            console.log(coco);
        }

console

2.2. prototype(원형, 원래의 형태)

함수를 정의 시 prototype에는 함수의 원형을 유지하고 있는 "부모객체"가 생성되어 저장된다. 부모객체 미정의 시 prototype에는 최상위 Object()객체가 저장된다.

• prototype에 저장된 객체(부모객체) 내부에는 생성자 함수가 또 존재한다.
• 함수는 prototype 안의 정보를 통해 부모객체의 속성, 메서드에 접근하여 호출할 수 있다.

function Pet(name, breed, weight) { 
		this.name = name;
		this.breed = breed;
		this.weight = weight;
} 

function Animal(kind) {
		this.kind = kind;
		this.bark = function() {
				return '멍멍';
		}
}

Pet.prototype = new Animal(); // 상속
...

• Pet -> Animal -> Object의 상속구조를 갖게 된다.

function test9() {
            var pets = [
            new Pet('엔젤', '사모예드', 18),
            new Pet('까미', '요크셔', 3),
            new Pet('콩돌', '리트리버', 20)
        ];
        
        console.log(pets);
        ...

• test9 함수를 실행하여 동적으로 pets 객체배열 생성

		...
        for(var pet of pets) {
            console.log(pet.name + '이/가' + pet.bark() + ' 짖는다.'); 
        }

• bark() 메서드는 Pet객체가 아닌 상속받은 Animal객체에 존재하므로 .bark()를 통해 접근

		...
        var pet = new Pet('모모', '시바견', 13);
        console.log(pet.__proto__); 
};

• .언더바2proto언더바2 : Pet객체에 저장된 Animal 객체의 주소값 접근(부모객체 직접 접근)

console

Prototype chain

• 객체 내부 프로퍼티인 prototype을 이용하여 부모 객체의 주소값에 접근할 수 있다.
• 자바스크립트는 찾고자 하는 속성/메서드가 현재 객체에 '없는' 경우 prototype을 이용하여 상위요소로 가서 찾아본다.
• 이 특징을 이용하여 JS는 상속관계를 설정하고 객체 간의 속성/메서드를 공유하는 prototype chain을 형성할 수 있다.