상세 컨텐츠

본문 제목

[javascript] 객체

Web/Javascript

by 클리엘 2020. 4. 30. 03:26

본문

728x90

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); 처럼 사용할 수 있게 됩니다.

728x90

'Web > Javascript' 카테고리의 다른 글

[javascript] 기본 내장 객체 (표준 내장 객체)  (0) 2020.05.26
[javascript] 생성자 함수  (0) 2020.05.21
[javascript] 객체  (0) 2020.04.30
[javascript] 함수  (0) 2020.03.27
[javascript] 반복문  (0) 2020.03.24
[javascript] 조건문  (0) 2020.03.17

관련글 더보기

댓글 영역