6. 객체 (Object)

객체 (Object - 복합데이터, 그룹화)

-속성(property) : 객체내의 변수, 특징 (key와 value로 구성)

-매서드(method) : 객체의 일부로 선언된 함수, 작업명령

 

1.객체 생성방법

1)object literal {key:value}

 

script

1. object literal {

    key:value,

    key:value,

    method

    }

 

key - 문자, 숫자, 심볼...

value - 원시값(문자, 숫자...), 객체(함수)

 

const apple={

    name : 'apple',

    price : 1000,

    3 : 1004,

    'apple-color' : 'red',

    display : function(){

        console.log(`사과는 영어로?${apple.name}`);

    }

}

 

// apple-color : -특수문자를 쓸 수 없음 / but, ''(문자열)의 형태로 가능

// key값에 숫자를 쓰는 경우 제일 위로 올라감

 

console.log(apple);

console.log(apple.name);               //마침표 표기법 (dot notation)

console.log(apple['apple-color']);      //대괄호 표기법 (bracket notation)

//문자열''은 .생략후 대괄호[]로 호출

apple.display();

 

 

 

2)new Object()   -Object클라스를 이용

 

script

  <script>

    // 객체 생성

    let hotel = new Object;     //Object클라스를 이용해서 hotel객체 생성

    hotel.hotelName = '신라호텔';     //property 속성 정의

    hotel.rooms = 40;

    hotel.booked = 25;

    hotel.binRoom = ()=>{

      return free = hotel.rooms - hotel.booked

    };

  </script>

 

 

 

3)Object.create()   -Object클라스 안의 create함수 이용

 

2.정적 접근과 동적 접근

 

script

const obj={

    name:'누리',

    age:4,

}

// 코딩하는 시점, 정적으로 접근이 확정

console.log(obj);      

console.log(obj.name);          //특정 value값 추출

obj.name='삼색이';              //value값 수정

console.log(obj.name);

obj.color='cheese';             //property(key,value) 추가

console.log(obj);

// 동적으로 속성에 접근하고 싶을때는 대괄호 표기법 사용

function getValue(obj,key){

    // return obj.key;             //key가 먼지 몰라서 불가능

    return obj[key];

};

console.log(getValue(obj,'color'));

//동적으로 추가할 때도 대괄호 표기법 사용

function addKey(obj,key,value){

    obj[key]=value;

}

addKey(obj,'kind','cat');

console.log(obj);

addKey(obj,'character','신경질적인');

console.log(obj);

 

 

 

3.축약형

 

script

 

const x = 0;

const y = 0;

/* --- 기본 방식 --- */

// const ccc={

//     x : x,

//     y : y,

// }

/* --- 축약형 ---  */

// 키 이름과 밸류(참조하고 있는 변수)의 이름이 같으면 생략 가능

const ccc={

    x,

    y,

}

console.log(ccc);           // { x: 0, y: 0 }    

function ddd(name,age){

    return{

        // name:name,      //키와 밸류가 같을때

        // age:age,        

        name,

        age

    }

}

console.log(ddd('누리','5'));       // { name: '누리', age: '5' }

 

 

 

 

4.생성자함수 (construction function)

: 객체를 만드는 역할을 하는 함수

 

script

// 생성자함수 템플릿

function Fruit(name,color,emoji){               //함수명은 대문자로 시작!!!!

    this.name=name;

    this.color=color;

    this.emoji=emoji;

    this.display=function(){

        console.log(`${this.name}:${this.emoji}`);

    }

    return this;    //생략가능, 생성자함수에서는 자동으로 리턴

}

const cherry=new Fruit('cherry','red','🍒');

const grape=new Fruit('grape','purple','🍇');

const melon=new Fruit('melon','light green','🍈');