자바스크립트 - 객체

객체는 여러 개의 자료형을 한 번에 저장하는 자료형입니다.

"배여로가 같네요?"

배열은 인덱스를 기반으로 자료를 저장하지만, 객체는 키를 기반으로 자료를 저장합니다. 곧바로 하나하나 자세하게 살폅조겠습니다.

8.1 객체 개요

객체를 살펴보기 전에 배열과 관련된 기본 내용을 다시 정리해 보겠습니다. 배열은 다ㅣ음 방법으로 생성합니다.

<script>

// 배열을 선언합니다.

var array = ['사과', '바나나', '망고', '딸기'];

</script>

배열에는 인덱스와 요소가 있습니다. 각 배열 요소를 사용하려면 다음과 같이 배열 이름 뒤에 인덱스를 입력해 요소에 접근합니다.

array[0] -> '사과'

array[2] -> '망고'

배열의 인덱스와 요소는 [표 9-13]과 같습니다.

표 9-13 배열

인덱스	요소
0	사과
1	바나나
2	망고
3	딸기

배열은 객체를 기반으로 만들었습니다. 따라서 배열과 객체는 상당히 유사합니다. 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용합니다. 우선 객체를 만드는 방법을 알아보고 다시 이야기하겠습니다.

<script>

// 객체를 선언합니다.

var product = {

제품명: '7D 건조 망고',

유형: '당절임'

성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',

원산지: '필리핀'

}

</script>

이처럼 생성한 객체의 키와 속성은 [표 9-14]와 같습니다.

표 9-14 객체 정보

키	속성
제품명	7D 건조 망고
유형	당절임
성분	망고, 설탕, 메타중아황산나트륨, 치자황색소
원산지	필리핀

[표 9-14]는 배열과 유사합니다. 객체의 요소에 접근하는 것도 배열과 비슷합니다. 다음과 같이 객체 뒤에 대괄호를 사용해 키를 입력하면 객체의 속성에 접근할 수 있습니다.

product['제품명'] -> '7D 건조 망고'

product.[유형]  -> '당절임'

product.[성분'] -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'

product.['원산지'] -> '필리핀'

다음 방법으로도 객체의 속성에 접근할 수 있습니다. 깔끔하고 입력하기 쉽기 때문에 이 방법을 더 많이 사용합니다.

product.제품명 -> '7D 건조 망고'

product.유형 -> '당절임'

product.성분 -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'

product.원산지 -> '필리핀'

NOTE_ 식별자로 사용할 수 없는 키

[코드 9-39]처럼 식별자 생성 규칙에 어긋나느 문자를 키로 사용할 때는 반드시 대괄호로 감싸야 객체의 요소에 접근할 수 있습니다. 대괄호가 아니라 점을 찍어 사용하면 자바스크립트 문법 오류가 발생합니다.

[코드 9-39] 식별자로 사용할 수 없는 키

<script>

// 객체를 선언합니다.

var object = {

'with space': 273,

'with ~!@#$%^&*()_+: 52

};

// 출력합니다.

alert(object['with space']);

alert(object['with ~!@#$%^&*()_+']);

</script>

TIP_ 식별자 생성 규칙은 자바스크립트 1.3의 식별자를 참고하세요.

NOTE_ 객체와 반복문

for in 반복문을 사용하면 객체의 요소를 하나씩 살펴볼 수 있습니다. 다음 형식 for in 반복문을 작성해 객체를 순환합니다. 코드를 실행하면 객체의 요소가 하나씩 차례로 출력됩니다.

코드 9-40 for in 반복문

<script>

// 객체를 선언합니다.

var product = {

제품명 : '7D 건조 망고',

유형 : '당절임',

성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소',

원산지: '필리핀'

};

// 출력합니다.

for (var i in product) {

alert(i + ':' + product[i]);

}

</script>

8.2 속성과 메소드

배열 내부에 있는 값 하나하나를 요소라고 합니다. 하지만 객체 내부에 있는 값 하나하나는 속성이라고 합니다.

NOTE_ 다른 프로그래밍 언어는 요소와 속성이 다르므로 구분해야 합니다. 하지만 자바스크립트는 요소와 속성이 같으므로 두 용어의 구분이 사실 의미가 없습니다. 다른 프로그래밍 언어에서 사용하던 용어 습관이 자바스크립트로도 넘어와 요소와 속성을 구분해서 사용합니다.

배열의 요소와 같이 객체의 속성에도 다음 코드처럼 다양한 자료형을 입력할 수 있습니다.

// 객체를 선언합니다.

var object = {

number: 273,

string: 'rintiantta',

boolean: true,

array: [52, 273, 103, 32],

method: function () {

}

};

객체의 속성 중 자료형이 함수인 속성을 특별히 메소드라고 합니다. 다음 코드에서 객체 person에는 name과 eat 속성이 있습니다. 이 중 eat 속성의 자료형이 함수이므로 특별히 eat() 메소드라고 합니ㅏㄷ.

// 객체를 선언합니다.

var person = {

name: '윤인성',

eat: function (food) {

alert(food + '을/를 먹습니다.');

}

};

// 메소드를 호출합니다.

person.eat('밥');

객체에 있는 속성을 메소드에서 사용하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 합니다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this 키워드를 사용합니다.

지금까지 살펴본 내용을 정리하면 [코드 9-41]과 같습니다.

코드 9-41 this 키워드 사용

<script>

// 객체를 선언합니다.

var person = {

name: '윤인성',

eat: function (food) {

alert(this.name + '이 ' + food + '을/를 먹습니다.');

}

};

// 메소드를 호출합니다.

person.eat('밥');

</scirpt>

eat() 메소드와 name 속성 모두 person 객체 내부에 있습니다. 같은 객체에 있는 속성이므로 this 키워드를 사용했습니다.

NOTE_ c++, 자바, C# 등 프로그래밍 언어에서는 this 키워드를 생략할 수 있습니다. 하지만 자바스크립트에서는 this 키워드를 사용하지 않으면 오류가 발생합니다. 반드시 this 키워드를 사용해야 한다는 점을 기억해 주세요.