데이터 타입 종류
number
string
boolean
undefined
null
object
symbol
변수 선언 방법
자바스크립트는 느슨한 타입 (loosely typed) 언어, 동적 (dynamic) 언어다. 즉, 변수의 타입을 미리 선언 할 필요가 없고 내부적으로 자동으로 파악한다. 그리고 같은 변수에 여러 타입의 값을 넣을 수 있다.
변수를 선언하려면 var 변수명 = 값; 형태로 작성하면 된다. 이때, var 조차 쓰지 않아도 변수가 선언된다. 엄밀히 말하면 var 선언한 것과 안 한 것의 차이는 있다. (아직 나는 잘 모름)
<script >
var a = 10;
var b = "hello";
c = 12.34;
alert(typeof a);
alert(typeof b);
alert(typeof c);
</script>
자바스크립트는 값을 초기화하면서 변수를 선언한다. 변수를 선언만 해놓고 값을 초기화하지 않으면, 데이터 타입이 'undefined' 상태다.
<script >
var a = 10;
var b = "hello";
c = 12.34;
var d;
alert(typeof d);
alert(typeof undefined);
alert(typeof a);
alert(typeof b);
alert(typeof c);
</script>
작은 따옴표와, 쌍 따옴표에 대한 차이가 없다. 그러나, 'A" 등으로 쓰면 안된다. 'A', "A" 등은 가능하다.
변수 타입 비교 및 호이스팅 개념
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
for (var i = 1; i <= 1; i++) {
var one = 10;
let two = 20;
const three = 30;
}
alert('var 타입의 one 나올까요?')
alert(one); // 나옵니다. 호이스팅 되기 때문입니다. 즉, 지역변수로 선언해도 전역변수로 쓰일 수 있지요.
alert('let 타입의 two 나올까요?')
alert(two); // 안나옵니다. 여기서 undefined 에러가 발생해서, 아래 문장들이 실행되지 않습니다.
alert('const 타입의 three 나올까요?')
alert(three); // 안나옵니다.
</script>
</head>
<body>
</body>
</html>
var 형만 호이스팅이 일어난다. 그래서 아래와 같은 형태로 사용 가능하다.
>>> 호이스팅 문제를 해결하기 위해 나온 타입이 let, const 이다.
>>> var 스코프: function
>>> 아래의 코드를 실행하고 console에 tags 치면 인식할 수 없음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
var tags = document.getElementsByTagName('td')
console.log(tags)
tags[0].innerHTML = '아이디'
// let nodes = document.querySelector('td')
// 왜 td 태그 중 첫번째 요소만 나오냐? 그게 특징이야.
let nodes = document.querySelectorAll('td')
console.log(nodes)
nodes[1].innerText = '패스워드'
}
</script>
</head>
<body>
<table border="1" style="width:100px; height: 100px">
<tr>
<td>ID</td>
</tr>
<tr>
<td>PASSWORD</td>
</tr>
</table>
</body>
</html>
var a = 10;
var a = 100;내부적으로는 아래와 같이 처리된다.
var a;
a = 10;
a = 100;
const는 상수이기 때문에 값을 바꿀 수 없다.
let은 재선언이 금지되어있다.
>>> let 스코프: block
>>> const 스코프 : 확인필요
아래의 코드에서 오류 나는 곳을 찾아보자. (f12 개발자모드로 확인 가능)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var a = 10;
let b = 10;
const c = 10;
alert(`a = ${a}, b = ${b}, c = ${c}`);
a = a * 5;
b = b * 5;
c = c * 5;
alert(`a = ${a}, b = ${b}, c = ${c}`);
var a = 100;
let b = 100;
alert(`a = ${a}, b = ${b});
</script>
</head>
<body>
</body>
</html>
const 형과 let 형은 블록 스코프를 가진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var a = 10;
let b = 10;
const c = 10;
alert(`a = ${a}, b = ${b}, c = ${c}`);
a = a * 5;
b = b * 5;
/* c = c * 5; */
alert(`a = ${a}, b = ${b}, c = ${c}`);
var a = 100;
/* let b = 100; */
alert(`a = ${a}, b = ${b}`);
{
var temp = 1000;
let letTemp =2000;
alert(`temp = ${temp}, letTemp = ${letTemp}`);
}
alert(`temp = ${temp}`);
/* let, const는 블록스코프를 가진다. 따라서 마지막 문장이 실행되지 않는다. */
/* let형 사용을 권장한다고 함 */
alert(`temp = ${temp}, letTemp = ${letTemp}`);
</script>
</head>
<body>
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 백틱(backtick) 사용 예제 (0) | 2020.06.16 |
|---|---|
| [JS] 자바스크립트 디버깅 방법(JS는 에러가 나도 실행이 된다. 화면에 나타나지 않을 뿐! 그럴 땐 console 확인) (0) | 2020.06.16 |
| [JS] 출력 함수 document.write(), alert(), confirm(), prompt(), console.log() (0) | 2020.06.16 |
| [JS] 자바스크립트를 위한 태그 <script> (0) | 2020.06.16 |
| [JS] 자바스크립트란? (정적 문서 VS 동적 문서) (0) | 2020.06.16 |
