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) #01 본문

MEMO／기술 자료/Javascript

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

Kinesis 2013. 4. 10. 00:08
보통 대개의 프로그래밍 언어는 변수를 선언함에 있어, 해당 변수가 가지는 자료형이 명확하게 구분이 되어 있습니다.

Programming : Char, String, Int, Long, Double, Float, ……
Database : char, varchar, int, text, varbinary ……

이런 식으로 자료형이 나누어지는 이유는 명확성을 높여 오류나 문제의 발생을 최소화시키기 위함입니다. 불편함이 있다면 변수의 사용에 있어서는 물론, 모든 함수 사용이나 반환 값에 있어서 각 자료형을 모두 올바르게 매칭을 시켜주어야만 한다는 것입니다.

반면, 자바스크립트는 다음과 같은 자료형 선언만이 있습니다.

var

이 키워드 하나로 자바스크립트에서는 모든 변수를 정의하고 사용할 수 있습니다. 그렇다고 내부적으로 자료형이 아예 구분이 되어 있지 않은 것은 아닙니다. typeof 및 instanceof를 이용하면 변수들의 자료형을 확인해 볼 수 있습니다. 하지만 기본적으로는 var 하나를 통해 모든 자료형의 변수를 정의할 수 있기 때문에, 자료형을 명확하게 하지 않은 상태에서도 변수를 정의하고 사용할 수 있다는 편의성이 있습니다.

제가 이번 챕터에 있어 여러분에게 주의할 부분을 가리켜 드린다면 바로 이 부분입니다. 어떤 의미로 자바스크립트의 var 키워드는 스크립트 개발자에게 매우 편한 편의성을 제공합니다. 단순한 스크립트 제작으로 끝낼 것이라면 커다란 문제는 없습니다만, 수준이 높아지면서 보다 높은 수준의 스크립트 작성의 단계로 들어서게 될수록 이 편의성은 스크립트 개발자의 발목을 붙잡는 골치 덩이로 변해가게 됩니다.

그럼 점점 실력이 발전해 감으로 인해서 보다 더 높은 개발을 하게 되어갈 때, 이러한 골치 아픈 문제 발생건수를 줄이려면 어떻게 하는 것이 좋을까요? 바로 처음부터 변수와 자료형에 대한 개념을 명확하게 잡아가는 것입니다.

자, 그럼 실제로 자바스크립트 변수를 생성해보는 과정을 통해 확인을 해 볼까요?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<script>
	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(Variable_1);
	alert(Variable_2);
	alert(Variable_3);
	alert(Variable_4);
</script>
</head>

<body>
</body>
</html>

위의 코드를 그대로 따라 작성하여 “파일명.html” 로 저장한 뒤에 Internet Explorer 나 Chrome 또는 Firefox 브라우저로 열어봅시다. 4번 정도의 메시지 박스가 Valiable_n 값을 보여주고 끝날 것입니다. 메시지 박스로 보았던 값을 잘 기억하고 코드내용을 풀어봅시다.

7번 줄부터 10번 줄 까지가 변수를 선언한 부분입니다. 그리고 12번째 줄부터 15번째 줄까지는 앞서 선언한 변수들의 값을 메시지박스를 통해 보여주게 될 것입니다. 7번 줄부터 10번 줄까지 한 줄씩 살펴볼까요?

우선 7번 줄입니다.
var Variable_1 = 'This is "String" Type.';
var 키워드를 이용해 Variable_1 이라는 변수명을 생성하면서 초기 값으로 ‘This is ”String“ Type.‘ 라는 문자열 값을 넣어주었습니다.

8번 줄입니다.
var Variable_2 = 2013;
var 키워드를 이용해 Variable_2 이라는 변수명을 생성하면서 초기 값으로 ‘2013‘ 라는 정수 값을 넣어주었습니다.

일반적인 프로그래밍 언어에서는 Variable_1 의 경우 선언키워드는 string 이 될 것이고, Variable_2 의 경우에는 int 가 되었을 것입니다. 이제 더 재미있는 부분은 9번 줄과 10번 줄입니다.
var Variable_3 = Variable_1 + Variable_2;
var Variable_4 = Variable_2 + 1000000;
일반적인 프로그래밍 언어인 C, C#, Java 등에서는 통용되지 않을 사용 방식인 문자열 데이터와 숫자형 데이터를 가지고 + 연산을 시키고 있는 모습을 9번 줄에서 볼 수 있습니다. 재미 있는 부분은 바로 이 부분에서 오류를 일으키지 않는다는 점입니다.

오히려 정상적인 연산 처리의 결과로 'This is "String" Type.2013' 라는 문자열 값을 Variable_3 에 대입하여 줍니다. 즉, 문자열 연산으로 인식하고 처리해준다는 것이죠.

10번째 줄에서는 숫자형인 Variable_2 의 값인 2013과 1000000을 + 연산하여 1002013 이라는 정수 값을 Variable_4 에 대입하며 초기화를 시켜줍니다. 참 편한 연산 처리를 제공해주고 있다고 볼 수 있겠습니다.

- 다음 글에서 계속
저작자표시 비영리 변경금지

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

플래시를 자바스크립트로 호출하는 부분에 대한 이슈  (0) 2014.02.28
JS Lv1 - 변수와 자료형 (Variable and Data Type) #02  (0) 2013.04.12
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