1. variable
<변수명의 정의>
1.키워드(예약어)를 사용하면 안 된다.
2.숫자로 시작하면 안 된다.
3.특수문자는 '_'와 '$'만 허용
4.공백 문자를 포함할 수 없다.
<식별자를 잘못 지정한 예>
break (키워드)
10alpha (숫자로 시작)
#num (특수문자 사용)
has space (공백 사용)
<식별자의 의미를 더 명확하게 하려고 사용하는 규칙>
1.생성자 함수의 이름은 항상 대문자로 시작
2.변수, 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
3.여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 함
<title>변수</title>
</head>
<body>
<script type="text/javascript">
//변수 선언
var num;
//변수에 값을 할당
num = 123;
document.write('num = ' + num);
document.write('<br>');
//변수를 선언하지 않고 출력
//alert(num2); //오류 발생
//변수 선언 후 값을 할당하지 않고 출력
var num3;
document.write('num3 = ' + num3); //undefined로 출력, 오류가 발생하지 않음
document.write('<br>');
//두개 이상의 변수를 한 번에 선언
var a, b;
a = 10;
b = 5;
document.write('a + b = ' + (a + b));
document.write('<br>');
//변수 선언과 초기화를 동시에
var c = 10, d = 3.5; //정수, 실수 구분없이 모두 숫자(var)타입이다.
document.write('c + d = ' + (c + d));
document.write('<br>');
//한글 사용 가능
var 번호 = 3;
document.write('번호 = ' + 번호);
</script>
</body>
</html>- 변수 사용시 주의사항
<title>변수 사용시 주의사항</title>
</head>
<body>
<script type="text/javascript">
var food = '김치찌개'; //변수 선언 및 초기화
document.write(food + '<br>');
food = '라면'; //데이터 변경
document.write(food + '<br>');
document.write('-----------<br>');
//변수명이 같게 선언되어도 오류가 발생하지 않음
var food = '냉면';
document.write(food);
</script>
</body>
</html>2. hoisting
- JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
- 변수와 함수의 선언부가 각자의 현재 스코프 영역 최상단으로 옮겨지는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 호이스팅</title>
</head>
<body>
<script type="text/javascript">
//score = 90;
document.write(score); //undefined
//변수 선언
var score;
</script>
</body>
</html>3. type
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 자료형</title>
</head>
<body>
<script type="text/javascript">
//변수 선언 및 초기화
var numberVar = 273; //숫자
var stringVar = '서울'; //문자열
var booleanVar = true; //boolean
//typeof 변수명 : 해당 변수에 저장된 데이터의 타입을 알아내는 연산자
document.write('numberVar : ' + typeof numberVar + '<br>');
document.write('stringVar : ' + typeof stringVar + '<br>');
document.write('booleanVar : ' + typeof booleanVar + '<br>');
var functionVar = function(){}; //함수(의 구조를 변수에 대입)
var objectVar = {}; //객체
var arrayVar = []; //배열
document.write('functionVar : ' + typeof functionVar + '<br>');
document.write('objectVar : ' + typeof objectVar + '<br>');
document.write('arrayVar : ' + typeof arrayVar + '<br>'); //배열을 객체로 인식
</script>
</body>
</html>4. cast
- 형변환
<title>형변환</title>
</head>
<body>
<script type="text/javascript">
//입력한 데이터를 string 타입으로 반환
var input = prompt('숫자를 입력하세요','숫자');
document.write(typeof(input) + ' : ' + input);
document.write('<br>');
document.write(input * 10); //곱셈은 자동적으로 형변환됨
document.write('<br>');
//prompt가 데이터를 string 타입으로 반환하기 때문에
//+ 연산자를 사용하면 문자열을 연결해서 새로운 문자열로 만듬
document.write(input + 10);
//형변환
//문자열 --> 숫자로 변환
var numberInput = Number(input); //문자열 --> 숫자
document.write('<br>형변환 이후<br>');
document.write(
typeof(numberInput) + ' : ' + numberInput);
document.write('<br>');
document.write(numberInput + 10);
</script>
</body>
</html>