자바스크립트 학습
프로퍼티(property)는 멤버 변수라고도 하며, 오브젝트에 연결되어 있는 변수를 의미한다. 즉 오브젝트를 보조하는 역할을 한다. 자바스크립트에서 프로퍼티는 매우 다양한 모습을 갖는다. 오브젝트의 속성을 나타내기도 하고, 오브젝트에 포함된 메서드를 지칭하기도 한다. 또한, 오브젝트 안에서 값을 갖는 변수를 지칭하는 경우도 있다.
var sport와 같이 독립적으로 선언하면 용도와 위치에 따라 변수도 될 수 있으며, 오브젝트도 될 수 있다. 아울러 변수 상태에서 오브젝트와 연결되면 프로퍼티가 되기도 한다. var가 없으면 전역변수를 나타내므로 모든 오브젝트에 유효하지만, var가 있으면 지역변수가 되어 변수를 선언한 오브젝트에서만 유효하다. 따라서 특별한 용도를 제외하고 var를 사용하여 변수를 선언해야 한다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>자바스크립트와 배열</title>
<link rel="stylesheet" href="../protoComm.css" type="text/css" />
<script language="javascript" type="text/javascript" src="../prototype.js"></script>
<script language="javascript" type="text/javascript" src="memberProperty.js"></script>
</head>
<body>
<h1>프로퍼티 형태 배열</h1>
<div id="firstDivision">
<div id="buttonArea">
<input type="button" id="okClick" value="프로퍼티 정의" />
</div>
<br />
<div id="showArea">
<div id="show1"></div><br />
<div id="show2"></div><br />
<div id="show3"></div><br />
<div id="show4"></div><br />
<div id="show5"></div><br />
<div id="show6"></div>
<div id="show7"></div>
</div>
</div>
</body>
</html>
Event.observe(window, 'load', function() {
Event.observe('okClick', 'click', Show.okClick);
});
var Show = {
okClick: function(event) {
var SportObject = new Object();
SportObject['12'] = '수영';
$('show1').innerHTML = "SportObject['12'] : " + SportObject[12];
SportObject[0.77] = '수영';
$('show2').innerHTML = 'SportObject[0.77] : ' + SportObject[0.77];
SportObject['swim'] = '수영';
$('show3').innerHTML = "SportObject['swim'] : " + SportObject['swim'];
SportObject.swim = '수영';
$('show4').innerHTML = 'SportObject.swim : ' + SportObject.swim;
// SportObject[tennis] = '테니스';
// $('show5').innerHTML = 'SportObject[tennis] : ' + SportObject[tennis];
var soccer = 'abcde'
SportObject[soccer] = '축구';
$('show5').innerHTML = 'SportObject[soccer] : ' + SportObject[soccer];
$('show6').innerHTML = "SportObject['abcde'] : " + SportObject['abcde'];
}
}
SportObject['12'] = '수영';
$('show1').innerHTML = "SportObject['12'] : " + SportObject[12];
SportObject['12']는 배열의 13번째에 ‘수영’을 설정하라는 것이 아니다. ‘12’라는 문자열이 의미하듯이 프로퍼티 ‘12’에 ‘수영’을 설정하라는 의미이다. show1에 ‘수영’을 출력하는 코드를 보면 SportObject[12]와 같이 숫자를 사용하였는데도 정상적으로 배열의 엘리먼트 값이 출력되었다. [12]라는 값만 보면 인덱스이지만, 배열에 13번째 엘리먼트는 없다. 이는 숫자 12가 아닌 문자 ‘12’인 프로퍼티로 사용하고 있다는 의미이다.
SportObject[0.77] = '수영';
$('show2').innerHTML = 'SportObject[0.77] : ' + SportObject[0.77];
SportObject[0.77]은 소수를 사용하고 있다. 통념적으로 소수를 배열의 인덱스로 사용하는 것은 있을 수 없는 일이다. show2에 출력하기 위해 SportObject[0.77]과 같이 소수를 인덱스로 사용하였지만, ‘show2’에 출력된 결과를 보면 정상으로 출력되었다. 따라서 [0.77]은 인덱스가 아니라 프로퍼티이다.
SportObject['swim'] = '수영';
$('show3').innerHTML = "SportObject['swim'] : " + SportObject['swim'];
앞에서 살펴보았지만, ‘swim’을 배열의 인덱스로 사용하여 값을 설정하고 이를 출력하는 코드이다. 그런데 [‘swim’] 형태로 사용하지 않고 아래와 같이 swim 형태로 사용할 수 있다.
SportObject.swim = '수영';
$('show4').innerHTML = 'SportObject.swim : ' + SportObject.swim;
show4에 출력된 결과는 ‘수영’이다. 이는 [‘swim’]과 ‘swim’이 같은 기능을 한다는 의미이다. 즉 [‘swim’]은 프로퍼티이다. 자바스크립트에서 특별한 경우를 제외하고 SportObject['swim'] 형태보다 SportObject.swim 형태를 사용한다. 여기서 SportObject.swim도 배열의 형태이며, SportObject 오브젝트에 프로퍼티를 배열 형태로 나열한 것이라고 볼 수 있다.
// SportObject[tennis] = '테니스';
// $('show5').innerHTML = 'SportObject[tennis] : ' + SportObject[tennis];
[tennis]와 같이 변수를 사용하여 프로퍼티를 지정할 수 있지만, 이때의 tennis는 다른 변수를 참조하여 그 값을 프로퍼티로 사용하겠다는 의도이다. 따라서 위의 코드를 실행하면 변수를 정의하지 않았으므로 에러가 발생한다. 어딘가에 var tennis = ‘프로퍼티 이름’과 같이 선언해야 한다.
var soccer = 'abcde'
SportObject[soccer] = '축구';
$('show5').innerHTML = 'SportObject[soccer] : ' + SportObject[soccer];
$('show6').innerHTML = "SportObject['abcde'] : " + SportObject['abcde'];
[soccer]는 변수로 선언한 soccer의 값을 프로퍼티로 사용한다. show5는 변수 soccer을 사용하여 출력하였고, show6은 변수의 값을 직접 지정하여 출력하였다. [‘abcde’]에서 문자열을 사용하고 있음을 주시할 필요가 있다.