변수란?
변하는 데이터(값)를 저장할 수 있는 메모리 공간이다. 변수에 저장할 수 있는 데이터의 종류로는 문자형(String),
숫자형(Number), 논리형(Boolean) 그리고 빈(Null)데이터가 있다.
변수에는 데이터가 오직 한개만 저장되기 때문에 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서
지워진다.
ex)
<script>
var box;
box = 100;
box = 30;
document.write(box);
</script>
출력화면
변수선언
변수를 선언할 때는 var 키워드를 변수명 앞에 붙인다. 변수명에는 한글을 사용할 수 없으며, 영문과 숫자 그리고 일부 특수문자(_, $)만 포함할 수 있다. 변수명은 의미에 맞게 만드는 것이 좋다.
문자형(String)
문자형 데이터는 문자나 숫자를 큰따옴표(" ")또는 작은따옴표(' ')로 감사고 있다. 또한 문자형 데이터에 HTML 태그를
포함하여 출력하면 태그로 인식한다.
ex)
<script>
var s = "javascript";
var num = "100";
var tag = "<h1>String</h1>;
document.write(s, "<br>");
document.write(num);
document.write(tag);
</script>
출력화면
숫자형(Number)
숫자형 데이터는 단어 의미 그대로 숫자를 의미한다. 만약 "100"과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌
문자형 데이터이다. 이 경우에는 Number("100")를 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있다.
ex)
<script>
var s = 100;
var t = Number("500");
document.write(s, "<br>");
document.write(t);
</script>
출력화면
논리형(Boolean)
논리형 데이터는 true(참) 또는 false(거짓)가 있다. 이 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과다. 예를 들면
'100보다 10이 크다'는 잘못된 비교이므로 false라는 결과를 반환한다.
ex)
<script>
var a = 10>5;
var b = Boolean(0);
var c = Boolean("hello");
var d = Boolean(null);
document.write(a, "<br>");
document.write(b, "<br>");
document.write(c, "<br>");
document.write(d);
</script>
출력화면
※Boolean()메서드는 숫자 0과 null, undefined, 빈 문자(" ")를 제외한 모든 데이터에 대해 true를 반환한다.
typeof
typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용한다.
ex)
<script>
var num = 100;
var str = "자바스크립트";
document.write(typeof num, "<br>");
document.write(typeof str);
</script>
출력화면
※ 변수 선언 시 주의 사항
1. 변수명 첫 글자로는 $, _(언더바), 영문자만 올 수 있다.
var 1num = 10; (X)
var $num = 10; (O)
2. 변수명 첫 글자 다음은 영문자, 숫자, $, _(언더바)만 포함할 수 있다.
var 100num = 10; (X)
var num100 = 10; (O)
3. 변수명으로는 예약어(document, location, window 등)를 사용할 수 없다. 예약어란 이미 자바스크립트에서
사용 중인 단어를 말한다.
var document = 10; (X)
var num = 10; (O)
4. 변수명을 지을 때는 되도록 의미를 부여해 작성하는 것이 좋다.
var num = "hello"; (X)
var num = 10; (O)
5. 변수명을 사용할 때는 대 · 소문자를 구분해야 한다.
var num = 10;
document.write(Num); (X)
var num = 10;
document.write(num); (O)
'JavaScript' 카테고리의 다른 글
JavaScript 비동기 처리 (0) | 2023.08.17 |
---|---|
JavaScript 배열 메서드 정리 (0) | 2023.08.15 |
마우스 이벤트(client, page, offset, screen)의 차이점 (0) | 2023.04.07 |
반복문 (0) | 2020.07.20 |
연산자 (0) | 2020.06.17 |