객체 {}

객체

- {}를 사용해 생성

- 배열과 상당히 유사

- 배열과 마찬가지로 모든 형태의 자료형을 가질 수 있다.

- 배열은 요소에 접근할때 인덱스를 사용 하지만 객체는 키를 사용한다.

객체의 생성

var ex = {

number:123,

string:'객체',

boolean:true,

array:[1,2,3,4,5],

method:function(){}

}

예) 자동차 객체 생성

var car = {

    brand : 'h',

    price : 3000,

    color : 'white',

    transmission : 'auto',

    option : 'ecs, tcs, wheel, sunroof '

}

위의 예제를 표로 나타내면 아래와 같다.

키	요소
brand	h
price	3000
color	white
transmission	auto
option	ecs, tcs, wheel, sunroof

객체의 요소에 접근하는 법은 객체뒤에 키를 표기하면 요소에 접근이 가능하다. 

car.brand

car.brand

위처럼 작성하면 아래 이미지에서 처럼 brand 키의 요소에 접근한 것을 확인할 수 있다.

객체의 속성 및 메서드

객체 내부에 있는 키의 값을 속성(property)이라 부르고 속성 중에서 자료형이 함수인것을 

메서드(method)라고 부른다. 

메서드 내에서 자신을 호출 할 때는 this키워드를 사용해서 확실히 표시해야 한다.

ex)

var car = {  // car 객체 생성

    owner :'ho',  // 키owner 에 ho 저장

    output : function(myCar){  // 메서드 output 에 매개변수로 mycar를 받는다.

// 화면에 출력

        console.log(this.owner + '는 ' + myCar + '를 탄다.');

    }

}

car.output('GENESIS');

객체의 속성을 확인하려면?

for in 문을 사용해서 객체의 속성을 모두 확인할 수 있고. 

for in 문에서 in 키워드만을 따로 빼내어 객체 안에 속성이 있는지 없는지 확인 할 수 있다.

배열과 다르게 for 반복문을 사용해서는 속성을 확인할 수 없다.

ex)  객체의 속성 확인

var car = {  // 객체 생성

    brand : 'h',  // brand 키에 h 값 대입

    price : 3000,  // price 키에 3000값을 대입

    color : 'white',  // color 키값으로 white

    transmission : 'auto',  // transmission 키값으로 auto

    // option 키 값으로 ecs, tcs, wheel, sunroof 

option : 'ecs, tcs, wheel, sunroof '  

}

var output = '';  // 변수 선언 및 초기화

// output 변수에 car 객체에 brand가 있는지 없는지,  sheet가 있는지 boolean 값으로 던진다.

output += ('brand' in car) + ', ' + ('sheet' in car); 

console.log(output);  // 화면에 출력

ex)  객체의 속성 모두 확인하기

var car = {  // 객체 생성

    brand : 'h',  // brand 키에 h 값 대입

    price : 3000,  // price 키에 3000값을 대입

    color : 'white',  // color 키값으로 white

    transmission : 'auto',  // transmission 키값으로 auto

    // option 키 값으로 ecs, tcs, wheel, sunroof 

option : 'ecs, tcs, wheel, sunroof '  

}

var output = ""; // 변수 선언

for (var key in car){  // key 갯수만큼 반복

    // output 변수에 key 와 키의값을 출력하고 줄바꿈

output += key + ' = ' + car[key] + '\n';

}

console.log(output); // 화면에 출력

with 키워드

복잡한 코드를 짧게 줄일때 사용한다. 

var car = {  // 객체 생성

    brand : 'h',  // brand 키에 h 값 대입

    price : 3000,  // price 키에 3000값을 대입

    color : 'white',  // color 키값으로 white

    transmission : 'auto',  // transmission 키값으로 auto

    // option 키 값으로 ecs, tcs, wheel, sunroof 

option : 'ecs, tcs, wheel, sunroof '  

}

var output = '';  // 변수 선언 및 초기화

// output 변수에 car 객체에 brand키 속성을 담고 줄바꿈

output += car.brand + '\n';

// output 변수에 car 객체에 price키 속성을 담고 줄바꿈

output += car.price + '\n';

// output 변수에 car 객체에 color키 속성을 담고 줄바꿈

output += car.color + '\n';

// 화면에 output출력

console.log(output);

위 코드는 그리 복잡해 보이진 않지만 더많은 내용또는 문자열을 추가해 출력 해야 할경우

car객체를 키속성 앞에 매번 붙여줘야 하는 불편함이 있다. 이것을 with() 키워드의 괄호안에 매개 변수로 객체를 던져서 키속성 앞에 붙이지 않게 할 수 있다.

with() 의 사용예)

var car = {  // 객체 생성

    brand : 'h',  // brand 키에 h 값 대입

    price : 3000,  // price 키에 3000값을 대입

    color : 'white',  // color 키값으로 white

    transmission : 'auto',  // transmission 키값으로 auto

    // option 키 값으로 ecs, tcs, wheel, sunroof 

option : 'ecs, tcs, wheel, sunroof '  

}

with(car){

    // output 변수에 car 객체에 brand키 속성을 담고 줄바꿈

output += brand + '\n';

    // output 변수에 car 객체에 price키 속성을 담고 줄바꿈

output += price + '\n';

    // output 변수에 car 객체에 color키 속성을 담고 줄바꿈

output += color + '\n';

}

console.log(output); // 화면에 output출력

객체의 속성 추가 하기

객체를 생성한 후에 동적으로 속성을 추가해서 정의할 수 있다.

ex)

var car = {  // 객체 생성

    brand : 'h',  // brand 키에 h 값 대입

    price : 3000,  // price 키에 3000값을 대입

    color : 'white',  // color 키값으로 white

    transmission : 'auto',  // transmission 키값으로 auto

    // option 키 값으로 ecs, tcs, wheel, sunroof 

option : 'ecs, tcs, wheel, sunroof '  

}

var output = ""; // 변수 선언

car.product = 'Grandeur';  // car 객체에 key 추가

for (var key in car){  // key 갯수만큼 반복

    // output 변수에 key 와 키의값을 출력하고 줄바꿈

output += key + ' = ' + car[key] + '\n';

}

console.log(output); // 화면에 출력

product 키에 Grandeur 값이 추가 된것을 확인할 수 있다. 

객체의 속성 제거 하기

속성을 제거할때는 delete() 를 사용하고 객체의 속성을 입력하면 된다.

ex)

var car = {  // 객체 생성

    brand : 'h',  // brand 키에 h 값 대입

    price : 3000,  // price 키에 3000값을 대입

    color : 'white',  // color 키값으로 white

    transmission : 'auto',  // transmission 키값으로 auto

    // option 키 값으로 ecs, tcs, wheel, sunroof 

option : 'ecs, tcs, wheel, sunroof '  

}

var output = ""; // 변수 선언

delete(car.brand);  // brand 속성 삭제

for (var key in car){  // key 갯수만큼 반복

    // output 변수에 key 와 키의값을 출력하고 줄바꿈

output += key + ' = ' + car[key] + '\n';

}

console.log(output); // 화면에 출력

코드를 실행 해 보면 brand 속성이 사라졋다.