1. JavaScript의 데이터 타입, 변수
여러분은 스마트폰에서 동작하는 응용 프로그램부터 네이버, 다음과
같은 웹 포탈에 나타나는 연예 정보 기사들을 보여주는 프로그램, 그리고 여러분 컴퓨터에 기본적으로 설치되는
Windows XP, Windows Vista, Windows 7 같은 마이크로소프트 운영체제와 같이
복잡한 응용 프로그램들을
보았을 것입니다.
여러분이 간단한 웹 기반 메모장 프로그램부터 복잡한 학사관리 프로그램을 만든다면 아마도 “어떤
형태의 데이터가 발생할 수 있는가? 그리고 어떻게 사용될 것인가?” 라는
질문을 하게 될 것입니다.
간단하게 네이버나 다음의 웹사이트에 접속해 보면 “런닝맨”은
몇 시에 하는지, 소녀시대 멤버는 몇 명인지, 웹 페이지에
이미지는 어떻게 나타낼 수 있는지, 동영상은 어떻게 저장하고 어떻게 재생되도록 할 것인가 등과 같은
문제들은 다양한 데이터들을 어떻게 표현할 수 있는지에 대한 생각에서 시작하게 됩니다. 그러면 JavaScript를 이용해서 어떻게 데이터를 표현하는지에 대해서 알아볼까요?
1.1 데이터 타입(Data Type)
다양한 데이터들을 표현하는데 있어서 해당 데이터들이 어떠한 종류의 데이터인지를 나타내기 위해서
다른 프로그래밍 언어와 마찬가지로 JavaScript에서는 다음과 같은 데이터 타입이 정의되어 있습니다.
|
데이터 타입 |
설명 |
|
number |
11, 3.14 등과 같은 숫자를 나타내는데 사용 |
|
boolean |
참(true), 거짓(false)를 나타내는데 사용 |
|
string |
텍스트(문자열)를 나타내는데 사용 |
|
object |
복합 데이터 타입으로 하나 이상의 속성(property)들로 이루어짐. 속성은 하나의 값이 될 수도 있고 함수(function) 형태를 취할 수 있으며 특별히 함수 형태일 경우를 메서드(method)라고 부르며 JavaScript의 핵심적인 데이터 타입 |
|
undefined |
“undefined” 값을 가짐. 예를 들면 변수가 선언되었는데 선언된 변수에 값이 할당되지 않았을 때 해당 변수값은 “undefined” |
|
null |
객체(object)의 특수한 형태로 보통 변수의 값을 초기화할 때 사용 |
여러분이 뒤에 이어지지만 실제 코드에서 JavaScript를 이용하여 변수를 선언하여 사용할 때 다른 언어들처럼 “string Name”, “boolean sex”과 같이 명시적으로 데이터 타입을 나타낼 필요가 없습니다. JavaScript는 자동적으로 설정된 값에 따라 자동적으로 적용되며 위에서 문자열(string) 데이터 타입은 다음과 같은 특수 문자들을 포함할 수 있습니다.
|
특수 문자 |
설명 |
|
\b |
backspace |
|
\f |
Form feed |
|
\n |
새로운 라인 \r과 \f를 합친 기능을 함 |
|
\r |
Return |
|
\t |
Tab키 |
|
\’ |
단일 인용 부호 |
|
\” |
이중 인용 부호 |
|
\\ |
backslash |
다음으로 데이터 타입이 null 이라는 의미는 “값이 없음”, “객체(object)가
없음”을 의미합니다. 다시 말해서 뒤에서 데이터 타입을 이용하여
변수를 선언하고 그 값을 null로 할당할 경우 해당 변수에 값이 없다는 것입니다. JavaScript의 typeof 연산자를 이용하여 데이터 타입을 알아볼까요?
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>datatype 예제</title>
<style></style>
<script>
var numberData = 256;
var booleanData = true;
var stringData = "Korea";
var objectData = new Array("유럽 항공권", "노트북");
var undefinedData;
var nullData = null;
document.write("numberData의
데이터 타입 : " +typeof(numberData)+"<br />");
document.write("booleanData의
데이터 타입 : " +typeof(booleanData)+"<br
/>");
document.write("stringValue의
데이터 타입 : " +typeof(stringValue)+"<br
/>");
document.write("objectData의
데이터 타입 : " +typeof(objectData)+"<br />");
document.write("undefinedData의 데이터
타입 : " +typeof(undefinedData)+"<br />");
document.write("nullData의
데이터 타입 : " +typeof(nullData));
</script>
</head>
<body>
</body>
</html>
“datatypeEx.html”로 저장한 후 IE9로 열어보면 다음과 같이 입력된 데이터에 맞게 자동적으로 해당 데이터에 맞는 데이터 타입을 typeof 연산자를 이용하여 나타냅니다.
뒤에 설명하겠지만 objectData의 값으로 객체(object) 데이터 타입인 배열(Array)를 이용하여 나타내었고 나머지도 이해가 그리 어렵지 않을 것입니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 2. 연산자(Operators)와 변환(Convert) (0) | 2013.08.06 |
|---|---|
| 1.2 변수(Variable) (0) | 2013.08.06 |
| JavaScript (1) | 2013.08.06 |
| 8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin) (0) | 2013.08.04 |
| 8.1.4 background-attachment 속성 (0) | 2013.08.04 |
