<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수와 자료형</title>
<style>
.area {
border: 1px solid;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h1>변수와 자료형</h1>
<h2>변수 선언시 var뿐만아니라 let, const를 이용하여 선언 가능</h2>
<h3>var, let, const의 차이점</h3>
<h4>1) 변수의 선언 방법</h4>
<button onclick="diffDeclare();">클릭</button>
<script>
function diffDeclare() {
// 1. var은 중복선언 가능(단점), 재할당 가능
var userId = "user01";
console.log(userId);
var userId = "user02";
console.log(userId);
userId = "user03"; // 재할당
console.log(userId);
console.log("------------------------------------");
// 2. let은 중복선언 불가능(function안에서), 재할당 가능
let userPw = "pass01";
console.log(userPw);
// let userPw = "pass02";
// console.log(userPw);
userPw = "pass03";
console.log(userPw);
console.log("------------------------------------");
// 3. const는 중복선언 불가능, 재할당 불가능(자바에서 상수와 같은 개념 == 한번 초기화된 값 변경 불가능)
// 그러나 객체안에 자료는 변경 가능
const userName = "홍길동";
console.log(userName);
// const userName = "김말똥"; // 중복선언 불가능
// userName = "김말똥"; // 재할당 불가능
// console.log(userName);
/*
* var은 자유롭게 변수 선언, 사용할 수 있다는 장점이 있지만
중복된 변수가 남발할 수 있고, 의도치 않게 값이 변경되어 있을 수 있음 => 가장 큰 단점
=> 단점을 보완하여 나온것이 let, const이다.
* 권장사항 : let, const를 위주로 사용
*/
}
</script>
<h4>2) 스코프(사용가능 범위)</h4>
<button onclick="diffScope();">클릭</button>
<script>
function diffScope() {
// 1. var : 변수가 선언되는 "함수 영역" 내에서 사용가능
var name = "홍길동";
console.log(name);
if(true) {
var age = 20;
}
console.log(age);
for(var i=0; i<10; i++) {
}
console.log(i);
console.log("------------------------------------");
// 2. let, const (block scope) == 변수가 선언된 블럭() 내에서만 사용 가능(자바와 유사)
let address = "서울";
if(true) {
let gender = "M";
const hobby = "운동";
}
// console.log(gender); // 사용불가
// console.log(hobby); // 사용불가
scopeTest();
}
function scopeTest() {
console.log(name);
}
</script>
<h3>* 변수 선언 위치에 따른 전역변수/지역변수</h3>
<script>
// 현재 문서가 다 로딩된 직후에 실행
// window.onload = function() { 현재 문서가 다 로딩된 직후에 실행시킬 코드 }
window.onload = function() {
console.log("문서 로딩 완료!");
}
// 특정 함수 영역 밖에 선언된 변수는 전역변수임(어디든지 사용 가능)
var declareVar = "var 전역변수";
let declareLet = "let 전역변수";
const declareConst = "const 전역변수";
declareNone = "그냥 전역변수"; // 변수명 앞에 아무런 키워드가 없으면 전역변수임
window.onload = function() {
// console.log(declareVar);
// console.log(declareLet);
// console.log(declareConst);
// console.log(declareNone);
// 전역변수와 동일한 이름으로 지역변수 선언
// 전역변수와 지역변수의 이름이 동일하면 지역변수가 우선순위가 더 높다.
var declareVar = "var 지역변수";
let declareLet = "let 지역변수";
const declareConst = "const 지역변수";
console.log(declareVar);
console.log(declareLet);
console.log(declareConst);
console.log(declareNone);
console.log("------------------------------------");
// 만약 전역변수에 접근하고 싶다면 window. 또는 this. 으로 접근 가능(var만 가능)
console.log(window.declareVar);
console.log(this.declareVar);
// let, const는 전역변수를 불러올 수 없음 undefined가 뜸
console.log(this.declareLet);
console.log(window.declareConst);
declareNone = "얘는 뭘까요?";
console.log(declareNone);
console.log(this.declareNone);
test();
}
function test() {
console.log("------------------------------------");
console.log(declareNone);
console.log(declareVar);
console.log(declareLet);
console.log(declareConst);
}
</script>
<h3>* 자료형</h3>
<p>
Dynamic Type : 변수 선언시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는건 아님)<br>
=> 변수별로 타입이 지정되지 않고, 대입되는 값에 의해 타입이 결정 됨
</p>
<h4>자바스크립트의 자료형</h4>
<ul>
<li>string(문자열)</li>
<li>number(숫자)</li>
<li>boolean(논리값)</li>
<li>object(객체)</li>
<li>function(함수)</li>
<li>undefined(초기화가 안된 변수)</li>
</ul>
<button onclick="typeTest();">자료형 테스트</button>
<div class="area" id="area1"></div>
<script>
function typeTest() {
// 문자열 : 쌍따옴표(""), 외따옴표(''), 백틱(``)
const name = '홍길동';
const age = 23;
const flag = true;
const hobby = ['영화', '음악감상', '낮잠']; // 배열 객체
const divE1 = document.querySelector('#area1'); // div요소 객체
// Javascript에서의 객체 선언
const user = {name: '김말똥',
age: 25,
id: 'user01'};
const testfn = function() {
alert('ㅎㅎㅎ');
}
// 상수는 초기화 하지 않으면 오류
// const noVal;
let noVal;
// typeof 변수명 : 자료형 확인시 사용하는 함수
console.log("------------------------------------");
console.log(typeof name, name);
console.log(typeof age, age);
console.log(typeof flag, flag);
console.log(typeof hobby, hobby);
console.log(typeof divE1, divE1);
console.log(typeof user, user);
console.log(typeof testfn, testfn);
console.log(typeof noVal, noVal);
// 문자열 : 쌍따옴표(""), 외따옴표(''), 백틱(``)
// 백틱(ES6) : 사용시 문자열과 변수 사용시 +기호 및 \n을 넣지 않고 사용 가능
let str = 'hello' + name +'나이 : ' + age;
let str1 = `hello ${name} 나이: ${age}`;
let str3 = '이름\n홍길동';
let str4 = `이름
홍길동`;
// divE1.innerHTML = typeof name + ', ' + name + '<br>';
divE1.innerHTML = `${typeof name}, ${name}<br>`;
divE1.innerHTML += `${typeof age}, ${age}<br>`;
divE1.innerHTML += `${typeof flag}, ${flag}<br>`;
divE1.innerHTML += `${typeof hobby}, ${hobby}<br>`;
divE1.innerHTML += `${typeof divE1}, ${divE1}<br>`;
divE1.innerHTML += `${typeof user}, ${user}<br>`;
divE1.innerHTML += `${typeof testfn}, ${testfn}<br>`;
divE1.innerHTML += `${typeof noVal}, ${noVal}<br>`;
// 화면에 출력(텍스트 출력되기 때문에 콘솔출력과 결과가 다를 수 있음)
}
</script>
</body>
</html>
