자바 스크립트는 변수형이 전부 var로 선언된다.
이는 자바에서 Object 타입으로 생각하면 된다.
문자열, 숫자, 논리, 배열, 객체, 함수, 정의되지 않은 변수와 같이 있고
변수에 넣은 값에 따라서 자료형이 동적으로 바뀐다.
예제를 확인해보자
typeof는 변수와 함께 쓰여 변수가 어떤 자료형인지 출력한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 전역변수의 선언
// 자동으로 window 객체의 필드가 됨
str = "전역변수";
// 브라우져 개발자 모드에서 조회 가능
// 함수 외부에 선언한 변수는 var를 붙여도 전역변수이다.
var str2 = "var전역변수";
// window 객체가 로드 될 때 (페이지 로딩 시) 동작할 이벤트
// 참고로 window 객체는 js의 최상의 객체로 페이지 로딩 시 같이 로드 된다.
window.onload = function(){
// 지역변수 선언
// 지역변수 선언시 반드시 var를 붙여야 한다.
var str = "지역변수";
// 지역변수가 우선권을 가진다.
console.log(str);
// window를 붙여 전역변수 호출
console.log(window.str);
console.log(this.str);
// this는 여러가지 의미가 있지만 그 중 하나로 window 객체를 의미
// 함수 내에서 작성되어도 var 키워드를 사용하지 않으면 전역변수가 된다.
str3 = "난 뭘까요?";
console.log(str3);
console.log(window.str3);
console.log(this.str3);
what = "전역변수인지 확인"
showwhat();
}
function showwhat() {
console.log(what);
}
</script>
<style>
.area{
border: 1px solid black;
height: 150px;
}
</style>
</head>
<body>
<h1>변수와 자료형</h1>
<h3>변수 선언</h3>
<p>함수 내부에서 var 변수명; 으로 선언하면 지역변수가 된다.<br>
함수 내부에서 변수명; 으로 선언하거나, 함수 밖에서 변수명; 혹은 var 변수명;으로
선언하면 전역변수가 된다.<br>
지역변수와 전역변수가 동일한 이름인 경우 함수 내부에서 변수명을 호출하면
지역변수가 우선권을 가지기 때문에<br>
전역변수 사용시 window.변수명 혹은 this.변수명으로 표현하여
지역변수와 구분한다.<br>
전역변수는 해당 window 내에서 어디든 사용할 수 있으며,
지역변수는 해당 함수 내에서만 사용 가능하다.</p>
<hr>
<h3>자료형</h3>
<p>자바스크립트에서는 자료형별로 변수 타입이 지정되지 않고
리터럴에 의해서 동적으로 자료형이 결정된다.</p>
<button onclick="testType()">자료형 테스트</button>
<br><br>
<div id="area1" class="area"></div>
<script type="text/javascript">
function testType() {
// 문자열 변수
var name = 'abcd';
// 숫자 변수
var age = 20;
// 논리 변수
var check = true;
// 배열 변수
var hobby = ["축구", "농구", "야구"];
// 객체 변수
var user = {name:"abcd", age:20, id:"user01"};
// 함수 변수
var testFunction = function testFunction(num1, num2){
var sum = num1 + num2;
}
// 정의되지 않은 변수
var apple;
console.log(typeof(name) + " : " + name);
console.log(typeof(age) + " : " + age);
console.log(typeof(check) + " : " + check);
console.log(typeof(hobby) + " : " + hobby);
console.log(hobby);
console.log(typeof(user) + " : " + user);
console.log(user);
console.log(typeof(testFunction) + " : " + testFunction);
var area1 = document.getElementById("area1");
area1.innerHTML += "배열 : " + hobby + "<br>";
area1.innerHTML += "배열 인덱스[0] : " + hobby[0] + "<br>";
area1.innerHTML += "배열 인덱스[1] : " + hobby[1] + "<br>";
area1.innerHTML += "배열 인덱스[2] : " + hobby[2] + "<br>";
area1.innerHTML += "객체 : " + user + "<br>";
area1.innerHTML += "객체 속성 : " + user.name + ", " + user.age + ", " + user.id + "<br>";
area1.innerHTML += "함수 : " + testFunction + "<br>"
area1.innerHTML += "정의되지 않은 변수 : " + apple + "<br>"
}
</script>
<hr>
<h3>동적 타입 테스트</h3>
<p>자바스크립트에서 변수는 타입이 지정되는 것이 아닌, 동적으로 타입이 결정된다.</p>
<button onclick="testDynamicType();">실행확인</button>
<div id="area2"></div>
<script type="text/javascript">
function testDynamicType() {
// 들어온 값에 따른 type의 변화를 살펴보자
var testVariable = 123;
console.log(typeof(testVariable) + " : " + testVariable);
testVariable = "안녕하세요";
console.log(typeof(testVariable) + " : " + testVariable);
testVariable = [0, 1, 2, 3];
console.log(typeof(testVariable) + " : " + testVariable);
}
</script>
</body>
</html>