Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴


Kinesis´s Open Document

JS Lv1 - 변수와 자료형 (Variable and Data Type) #02 본문

MEMO／기술 자료/Javascript

JS Lv1 - 변수와 자료형 (Variable and Data Type) #02

Kinesis 2013. 4. 12. 00:20

여기까지의 진행으로 가볍게 자바스크립트에서 변수를 초기 값을 지정하는 방법으로 선언하는 것은 확인해 보았습니다. 그럼, 실질적으로 자바스크립트 내부에서 사용하는 자료형은 무엇들이 있을까요?

문자열 : String
숫자 : Number
배열 : Array
오브젝트 : Object
함수 : function

통상적으로 자바스크립트에서는 위와 같은 자료형을 사용하게 됩니다. 이제 앞서 작성했던 코드를 조금 변형하여 앞서 만든 변수들의 자료형을 확인 해 보도록 합시다.

<!doctype html&rt;
<html&rt;
<head&rt;
<meta charset="utf-8"&rt;
<title&rt;무제 문서</title&rt;
<script&rt;
	var Variable_1 = 'This is "String" Type.';
	var Variable_2 = 2013;
	var Variable_3 = Variable_1 + Variable_2;
	var Variable_4 = Variable_2 + 1000000;
	
	alert(typeof(Variable_1));
	alert(typeof(Variable_2));
	alert(typeof(Variable_3));
	alert(typeof(Variable_4));
</script&rt;
</head&rt;

<body&rt;
</body&rt;
</html&rt;

위의 코드는 12번째 줄부터 15번째 줄까지 typeof 함수를 이용해 변수의 Type 값을 얻어오도록 변형한 코드입니다. 결과 값으로는 총 4번에 걸쳐 “string”, “number”, “string”, “number” 값이 메시지 박스 형태로 보이게 될 것입니다.

그럼 위의 변수 선언을 통해서 문자열(String) 및 숫자(Number) 형에 대한 변수 선언은 확인하였는데, 나머지 배열(Array), 오브젝트(Object), 함수(Function) 형은 어떻게 선언할 수 있을까요? 다음의 코드를 보도록 합시다.

…중략…
	var Variable_5 = []; // Array
	var Variable_6 = {}; // Object
	var Variable_7 = function() { } // Function
…중략…

위에서 보는 것과 같이 배열은 대괄호 []를 쌍으로 사용하여 초기화 하게 되며, 오브젝트는 중괄호 { } 쌍을 사용합니다. 함수는 function() { } 과 같은 형태로 초기화 하는 것을 볼 수 있습니다.

String 형이나 Number 형과는 다르게, Array 및 Object 와 Function의 사용 방식은 매우 다양하고 자세히 다루기 위해서는 많은 내용을 필요로 하므로 자세한 내용은 뒤로 미루고 넘어가도록 하겠습니다.

여기까지는 직접적으로 자료형을 대입시켜 초기화 한 방법이었습니다. 그러나 참고로 말씀드리면 이 외에도 다음과 같은 초기화 방법도 사용할 수 있음을 알아두면 좋습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<script>
	var Variable_1 = new String();
	var Variable_2 = new Number();
	var Variable_3 = new Array();
	var Variable_4 = new Object();
	var Variable_5 = function() { };
</script>
</head>

<body>
</body>
</html>

변수를 초기화 하는 방법에 있어서, 어떠한 방식을 통해 초기화하여 사용할 것인지는 개인의 자유입니다만, 사실상 후자의 방법은 가독성을 높이기 위한 방법일 뿐, 별도로 커다란 의미를 가지고 있는 것은 아닙니다.

실제로 위의 방법으로 초기화 한 객체들을 아무런 값도 할당하지 않은 상태에서 typeof 함수를 사용하여 형태를 확인해보면 “object” 형태라는 값만을 나타내게 됩니다. 궁금하신 분들께서는 아래와 같은 코드를 작성해서 확인해보시면 결과를 눈으로 확인 해 보실 수 있으실 것입니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<script>
	var Variable_1 = new String();
	var Variable_2 = new Number();
	var Variable_3 = new Array();
	var Variable_4 = new Object();
	var Variable_5 = function() { };

	alert(typeof(Variable_1));
	alert(typeof(Variable_2));
	alert(typeof(Variable_3));
	alert(typeof(Variable_4));
	alert(typeof(Variable_5));
</script>
</head>

<body>
</body>
</html>

총 5번에 걸쳐 object 라는 값을 표현할 텐데요. 그럼 왜 이런 방법을 사용해서 초기화를 할까요? 이 부분은 Level 1 이 아닌 더 높은 레벨의 강의를 이해할 수 있게 되셨을 때 진행을 하도록 하겠습니다.

- 다음 글에서 계속


저작자표시 비영리 변경금지

'MEMO／기술 자료 > Javascript' 카테고리의 다른 글

플래시를 자바스크립트로 호출하는 부분에 대한 이슈  (0) 2014.02.28
JS Lv1 - 변수와 자료형 (Variable and Data Type) #01  (0) 2013.04.10
JS Lv1 - 준비하기 (Are you ready?)  (0) 2013.04.10
JS - Introduce  (1) 2013.04.09
자바스크립트 문자열의 한글 문자 코드값 체크 함수  (0) 2013.03.15
자바스크립트 문자열 아스키 코드값 체크 함수  (0) 2013.03.15
자바스크립트 문자열이 비어있는지 체크하는 함수 (공백포함)  (0) 2013.03.15
자바스크립트 문자열이 비어있는지 체크하는 함수  (0) 2013.03.15
공유하기 링크
'MEMO／기술 자료/Javascript' Related Articles more


Comments