[javascript] 객체

1. 개요

 

프로그램의 대상이 되는 현실세계의 어떠한 것을 프로그램에 맞게 구체화(추상화) 시켜놓은 것을 객체라고 할 수 있습니다. 예컨대 '자동차'를 자바스크립트에서 객체화한다면 다음과 같이 할 수 있습니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

alert(myCar.car_name);

예제에서 객체는 중괄호를 통해 car_name등의 키와 승용차라는 속성으로 myCar라는 객체를 생성하였습니다. 이때 키는 '문자열' 형태로 표현하거나 특수문자, 공백 등을 포함할 수 있습니다. 그러나 그렇게 그런경우 대괄호로 키값을 묶어줘야 하는 경우도 있으니 주의해야 합니다.

---

2. 속성

 

위 예제에서 객체에 키와 속성을 어떻게 부여하는지를 알아봤습니다. 예컨데 car_name은 키고 '승용차'는 키의 속성입니다.

 

객체의 키에 해당하는 속성을 확인하려면 '객체.키'형식 이나 '객체[키]'형식으로 접근합니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

alert(myCar.car_name);
alert(myCar['car_name']);

만약 전체 속성을 순회해야 한다면 for in 반복문을 사용하면 됩니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

for (var key in myCar) {
	alert(key + ':' + myCar[key]);
}

for in을 통해 전체가 아닌 일부 몇개의 속성만 확인해야 한다면 '객체. 키'를 반복해서 사용할 수 있지만 with키워드를 사용하면 좀 더 편리하게 객체의 속성을 확인할 수 있습니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

alert(myCar.car_name);
alert(myCar.car_color);

//위에서 처럼 하는대신
//with을 사용

with (myCar) {
	alert(car_name);
}

반면 객체에 특정한 속성이 정의되어 있는지를 확인하려면 in 키워드를 사용할 수 있습니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

alert('car_name' in myCar);

예제에서 car_name은 myCar객체에 정의되어 있으므로 결과로 true를 표시하게 됩니다. 만약 car_name이라는 키가 존재하지 않으면 false를 반환할 것입니다.

 

속성은 필요하면 유동적으로 추가하는 것도 가능합니다. 방법은 간단한데 그저 '객체.필요한키 = 값'형태로 지정해 주기만 하면 됩니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

myCar.car_model = 'none';

alert(myCar.car_model);

반대로 속성을 제거하려면 delete 키워드를 사용합니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000'
};

myCar.car_model = 'none';

delete (myCar.car_model);

alert(myCar.car_model);

예제에서 delete로 car_model속성을 제거했기 때문에 결과로 undefined를 출력합니다.

---

3. 메서드

 

속성은 객체의 단순한 '값'에 해당하지만 메서드는 객체의 동작을 설정하는 것입니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000',
	accelerate	: function() {
		alert('속도를 높입니다.');
	}
};

myCar.accelerate();

예제는 accelerate라는 메서드를 추가한 내용을 보여주고 있습니다. 메서드의 동작은 function을 통해 지정하며 내부에 처리에 필요한 코드가 위치하게 됩니다.

 

메서드는 필요에 따라 매개변수를 가질 수 있으며 this키워드를 통해 내부의 값을 활용하는 것도 가능합니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000',
	speed		: 0,
	accelerate	: function(s) {
		this.speed += s;

		alert('속도를 ' + s + '만큼 높여 현재 ' + this.speed + '입니다.');
	}
};

myCar.accelerate(10);
myCar.accelerate(20);

메서드도 속성과 마찬가지로 동적추가가 가능합니다. 방법은 속성과 같습니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000',
	speed		: 0,
	accelerate	: function(s) {
		this.speed += s;

		alert('속도를 ' + s + '만큼 높여 현재 ' + this.speed + '입니다.');
	}
};

myCar.break = function () {
	this.speed = 0;

	alert('정지!');
};

myCar.break();

제거 또한 속성과 동일합니다.

myCar.break = function () {
	this.speed = 0;

	alert('정지!');
};

delete (myCar.break);

myCar.break();

---

4. 객체의 복사에 관한 사항

 

다음과 같이 변수에 값을 할당하고 변수끼리 복사한 뒤 둘 중 하나의 변수값을 바꿔도 다른 변수는 영향을 끼치지 않습니다.

var myValue1 = 10;
var myValue2 = myValue1;

myValue1 = 20;

alert(myValue1);
alert(myValue2);

이것은 변수를 복사할때는 깊은 복사를 수행하기 때문입니다. 깊은 복사는 변수의 값까지도 모두 복사해 개별적으로 저장하기 때문인데, 이 처럼 단순 변수는 큰 무리를 주지 않고 복사가 가능하지만 배열이나 객체의 경우 상대적으로 무겁기 때문에 복사되는 방식이 다릅니다.

var myCar = {
	car_name 	: '승용차',
	car_color 	: '파란색',
	car_number	: '00가0000',
	speed		: 0,
	accelerate	: function(s) {
		this.speed += s;

		alert('속도를 ' + s + '만큼 높여 현재 ' + this.speed + '입니다.');
	}
};

var myCar2 = myCar;

myCar.car_name = '자동차';

alert(myCar2.car_name);

상기 예제에서는 결과로 '자동차'를 표시합니다. 변수와 달리 한쪽의 값이 바뀌면 다른쪽도 동일하게 값이 바뀌는 것입니다. 이렇게 되는 이유는 소위 얖은복사를 수행하기 때문인데, 복사를 수행할 때 원본의 메모리 위치만을 복사하기 때문입니다. 즉, 원본과 복사본이 바라보는 메모리 주소가 같다는 것입니다.

 

따라서 만약 객체를 상대로 깊은 복사를 수행하려면 객체의 속성값을 순회하면서 일일이 모두 복사해야 합니다.

---

5. 문법변경 사항

 

ESCAScript6 부터는 객체를 다음과 같이 작성할 수 있습니다.

var radio = '133';
var myCar = {
    car_name      : '승용차',
    car_color     : '파란색',
    car_number    : '00가0000',
    speed         : 2,
    accelerate() {
        this.speed += s;

        alert('속도를 ' + s + '만큼 높여 현재 ' + this.speed + '입니다.');
    },
    radio
};

alert(myCar.radio);

우선 함수의 경우 function구분이 제외되었습니다. 그리고 속성명과 값이 같은 경우는 radio처럼 줄여서 표현할 수 있습니다.

---

6. 구조분해 할당

 

객체는 다음과 같이 변수명으로 대입할 수 있습니다.

var myCar = {
    car_name      : '승용차',
    car_color     : '파란색',
    car_number    : '00가0000',
    speed         : 2,
    accelerate() {
        this.speed += s;

        alert('속도를 ' + s + '만큼 높여 현재 ' + this.speed + '입니다.');
    }
};

var { car_name, car_color } = myCar;

car_name변수에 '승용차'와 car_color변수에 '파란색'이라는 값이 할당되어 alert(car_name); 처럼 사용할 수 있게 됩니다.