JS] 오브젝트란? / Constructor function

게임에서 호텔을 운영하게 되었다. 

직원을 뽑아야 한다.  

우선 벨보이를 뽑았다.

 

 

벨보이 한 명이 왔다

이름은 Jack이다. 

나이는 23세이다. 

워크퍼밋이 있다.

언어는 영어, 프랑스어를 한다. 

 

이 벨보이에 관한 정보를 입력해야 한다면

다음과 같이 적을 수 있을 것이다.

var bellBoy1Name = "Jack";

var bellBoyAge = 19;

var bellBoy1Has WorkPermit = true;

var bellBoy1Languages = "French","English";

 

 

호텔이 잘되서 벨보이 2명을 더 뽑았다.

직원 정보를 하나 하나 적어주었다.

 

var bellBoy1Name = "Alex";

var bellBoyAge = 22;

var bellBoy1Has WorkPermit = true;

var bellBoy1Languages = "Korean","English";

 

var bellBoy1Name = "Son";

var bellBoyAge = 23;

var bellBoy1Has WorkPermit = true;

var bellBoy1Languages = "Spanish","English";

 

name, age, hasWorkPermit, languages 이렇게

같은 properties를 공유하므로 

테이블이나 엑셀로 정리하면 더 편하긴 할 것이다. 

properties	bellboy1	bellboy2	bellBoy3
name	"Jack"	"Alex"	"Son"
age	19	22	23
hasWorkPermit	true	true	true
languages	["French","English"]	["Korean","English"]	["Spanish","English"]

 

---

 

자바스크립트 오브젝트 생성하기

다른 방법으로는 

위 사항을 가지고 자바스크립트로 object를 만들 수 있다. 

{컬리 브래이스} 안에 properties를 넣는다. 

 

오브젝트에 properties 넣기 

 

var bellBoy1 = {

    name: "Timmy",

    age: 19,

    hasWorkPermit: true,

    languages: ["French", "English"]

}

 

var bellBoy2 = {

    name: "Alex",

    age: 22,

    hasWorkPermit: true,

    languages: ["Korean", "English"]

}

 

var bellBoy3 = {

    name: "Son",

    age: 23,

    hasWorkPermit: true,

    languages: ["Spanish", "English"]

}

 

 

 

이제는 하우스키퍼가 필요하다.

하우스키퍼 1명도 뽑게 되었다면

그에 대한 object를 만들 수 있다. 

일하는 내용이 다르니

벨보이와는 properties가 좀 다를 것이다. 

 

var houseKeeper1 = {

    name: "Jane",

    yearsOfExperience: 12,

    CleaningRepertoire: ["bathroom", "lobby", "bedroom"]

}

source snippet

 

object의 모든 내용 알고 싶을 때

houseKeeper1에 대해 알고 싶을 때 전체 내용 보기 

houseKeeper1;

console

object의 properties 호출 

houseKeeper1의 이름만 알고 싶을 때 

dot notation으로 .name을 추가한다. 

 

 

 

오브젝트에 methods 넣기 

 

벨보이1에게 움직임을 주고 싶다.

methods를 넣은 함수를 만들어 짐 나르는 움직임을 준다.

 

이 properties와 methods를 합해서 

bellBoy1 오브젝트에 넣을 수 있다. 

익명함수 function()을 써서 외부에서 함수를 콜하지 않고

bellBoy1에 method를 호출해서 실행할 수 있다. 

 

object의 method 호출 

bellBoy1.moveSuitcase();

안에 있는 내용이 실행된다.

 

 

 

---

 

Constructor Function

 

호텔이 너무 잘되서 벨보이 100명, 하우스키퍼 100명을 더 뽑았다.

직원 한 명 한 명 오브젝트로 생성하는 방법은 일이 많아진다.

더 간단한 방법은 없을까?

 

팩토리를 만들어서 벨보이가 하루 종일 계속 나오게 하고 싶다.

이 팩토리는 자바스크립트에서는 이렇게 생겼다. 

 

 

Constructor Function 만들기 

벨보이 properties 입력

function BellBoy (name, age, hasWorkPermit, language) {
    this.name = name;
    this.age = age;
    this.hasWorkPermit = hasWorkPermit;
    this.language = language;
}

 

 

Constructor Function에 내용 입력하기

new 첫글자도 대문자인 함수 이름 (인풋을 순서대로 입력해준다) 

var bellBoy1 = new BellBoy("Timmy", 19, true, ["French", "English"]);

 

 

하우스 키퍼도 properties 입력

 

houseKeeper1의 properties 호출

입력된 내용이 나온다.

 

 

 

 

 

method까지 만들어보기

벨보이 한 명 내용 입력하고, 메소드를 불러보기 

alert가 떴다.

 

 

 

하우스 키퍼도 method 입력해보기 

일 잘하고 있군..