Javascript에서의 객체(object)란?
사전적 의미
1. 물건, 물체 2. 욕망, 연구, 관심 등의 대상
많은 사람들이 객체에 대한 정의를 하는데 조금씩 다름을 느꼈습니다.
쉬운 정의가 있는 반면, 되게 심오하고 복잡하게 정의하신 분도 있었습니다.
때문에 제가 내린 정의도 다른 정의 중 하나라고 생각하시고 글을 봐주시기 바랍니다.
제가 정의한 객체란
1. 물건, 물체 2. 욕망, 연구, 관심 등의 대상
사전적 의미와 똑같습니다.
단! 차이점이 하나 있습니다. 바로 설명입니다.
만약 우리가 자전거라는 객체 정보를 친구에게 준다고 가정해봅시다.
나(25살) : 친구야 내가 자전거에 대해 알려줄게. 자전거는 바퀴가 3개이고 페달을 밟으면 앞으로 나갈 수 있고...
친구 : XX아
친구가 이미 자전거에 대한 정보를 알고 있고, 내가 아는 자전거에 대한 정보와 다를 수 있습니다. 친구는 말을 무시할 수도 있고, 자신이 생각하는 정보와 다르다면 그것을 비교하여 다시 재정의할 수 있습니다. 정보를 전달한다고 한들 그것을 받아들이는 것은 친구의 몫이죠.
그렇다면 컴퓨터에게 객체 정보를 준다고 가정해봅시다.
나 : 컴퓨터야 자전거에 대해 알려줄게. 자전거는 바퀴가 3개이고 페달을 밟으면 앞으로 나갈 수 있고...
컴퓨터 : 아하 자전거는 바퀴가 3개이고 페달을 밟으면 앞으로 나갈수 있고...
이처럼 컴퓨터는 자전거 객체에 대한 정보가 전~혀 없습니다.
따라서 알려주는 데로 정보를 받아들이게 됩니다. 정보가 잘못되었더라도 자전거라고 정의하게 되죠.
자전거가 멈추는 것을 알려주지 않으면, 컴퓨터에게 있어 자전거는 멈추지 않습니다. 마치 핸들이 고장 난 8ㅌ..
즉 설명에 따라 객체가 정의된다는 것입니다.
javascript에서 객체를 정의할 때에는 key값과 value값으로 나눠서 정의합니다.
바퀴 : 2개
소재 : 알루미늄
무게 : 10kg
가격 : 14만원
기능 : 앞으로 가기, 멈추기, 점프하기
또한 함수를 넣을 수 있습니다.
객체를 정의할 때 함수 또한 그 객체에 포함시킬 수 있다는 것이죠.
그렇다면 컴퓨터에게 객체를 정의하는 것이 얼마나 중요한가를 느끼실 수 있을 겁니다. 바로 소스코드를 보겠습니다.
소스코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<body>
<script type="text/javascript">
var bycycle={
wheel : '2개',
material : '알루미늄',
weight : '10kg',
price : '14만원',
func : function(){
document.write('앞으로가기 ');
document.write('멈추기 ');
document.write('점프하기 ');
}
}
</script>
</body>
|
bycycle이라는 객체에 wheel, material 등의 변수와 func라는 함수 데이터를 넣어주었습니다.
정의하는 방법은
변수는 'key : value' 형태로 저장해야 합니다. 객체의 값은 key값을 통해 참조할 수 있기 때문입니다.
함수는 'key : funciont(){ 데이터 }' 형태로 입력해야 합니다.
정의를 했으니 이제 호출하는 방법을 알아보도록 하겠습니다
소스코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<script type="text/javascript">
var bycycle={
wheel : '2개',
material : '알루미늄',
weight : '10kg',
price : '14만원',
func : function(){
document.write('앞으로가기 ');
document.write('멈추기 ');
document.write('점프하기 ');
}
}
for (name in bycycle){
document.write(name+': '+bycycle[name]+'<br>');
}
</script>
</body>
|
객체의 데이터를 출력하기 위해서는 반복문을 사용해야 합니다. 배열을 출력하는 것과 비슷한 맥락입니다.
다만 배열은 데이터에 대한 index값이 자동적으로 들어가고, 객체는 index값을 사용자가 정해줍니다.
array
| index | 0 | 1 | 2 | 3 |
| value | '핸들이' | '고장난 | '에이톤' | '퉉' |
for (int i=0;i<arr.length;i++){
print(value[i])
}
이처럼 index값을 i라는 변수로 지정하여 value값을 출력.
object(객체)
| index | wheel | material | weight | price | func |
| value | 2개 | 알루미늄 | 10kg | 14만원 | function() |
그렇다면 객체는 어떻게 할까요.
array처럼 index 값을 변수로 지정해주는 것이 아닌 객체에서 직접 가져와야 합니다.
15번 라인은 bycycle이라는 객체 안에 있는 데이터의 key값을 반복문이 돌 때마다 하나씩 name으로 넣어줍니다.
아까 말씀드렸던 'key:value' 의 형태가 이처럼 사용되는 것입니다.
그렇다면 16번 라인의 name에는 객체의 첫 번째 키값인 'wheel'이 출력되게 됩니다.
value값은 객체명['key값']을 통해 참조할 수 있는데요.
16번 라인의 bycycle[name]은 곧 bycycle ['wheel']가 됩니다. wheel의 value값인 '2개'가 출력됩니다.
다음 반복문에서는 두 번째 key값인 material이 들어가겠고, bycycle[name]에는 bycycle['meterial']이 들어가게 되겠죠?
출력 화면
출력을 시켰더니 뭔가 이상하죠?
func 키값은 func이고 value는 function(){~~~} 라서 그렇군요
그럼 보기 좋게 출력시켜보도록 하겠습니다.
소스코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<body>
<script type="text/javascript">
var bycycle={
info:{wheel:'2개',material:'알루미늄',weight:'10kg',price:'14만원'},
func:function(){
document.write('앞으로가기 ');
document.write('멈추기 ');
document.write('점프하기 ');
}
}
for (name in bycycle['info']){
document.write(name+': '+bycycle['info'][name]+'<br>');
}
document.write('func: ');
bycycle.func();
</script>
</body>
|
위처럼 객체 안에 또 다른 객체를 정의해주었습니다.
4번 라인에 bycycle이라는 객체 안에 info라는 객체의 이름으로 또다른 객체를 정의했습니다.
객체 안에 또다른 객체를 정의할 때는 key:{key:value,key:value ...} 형태로 해주시면 됩니다.
11번 라인에 bycycle['info']라는게 뭔지 아시겠죠? bycycle의 객체의 info 객체입니다.
아까와 마찬가지로 name에는 info 객체 안의 key값인 wheel, material, weight, price가 차례로 들어가게 되고
bycycle['info'][name] 은 bycycle['info']['whell'] -> bycycle['info']['material'] -> ... 이 되어 각각에 해당하는 value값이 출력되게 됩니다.
15번 라인에 bycycle.func(); 은 bycycle 객체 안에 있는 func 함수를 호출합니다.
func 함수는 앞으로 가기, 멈추기, 점프하기라는 문자열이 HTML 문서에 출력되게 하므로 보기 좋게 앞선 14번 줄에 'func:'라는 문자열을 출력시켰습니다.
출력 화면
(whell 오타)
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제 (0) | 2019.08.09 |
|---|---|
| [JavaScript] 상속, Prototype, 함수 및 생성자 (3) (0) | 2019.07.24 |
| [JavaScript] 상속, Prototype, 함수 및 생성자 (2) (0) | 2019.07.19 |
| [JavaScript] 상속, Prototype, 함수 및 생성자 (1) (0) | 2019.07.18 |
| [Javascript] 모듈의 정의, 장점 및 예제 (0) | 2019.07.01 |