04_변수와자료형.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>변수와 자료형</title>
</head>
<body>
<h1>변수와 자료형</h1>
<h2>변수 선언시 var뿐만 아니라 let, const를 이용해서 선언 가능</h2>
<h3>* var, let, const의 차이점</h3>
<h4>1) 변수 선언 방법</h4>
<button onclick="deiffDeclare();">클릭</button>
<h4>2) scope(사용가능 범위)</h4>
<button onclick="deiffScope();">클릭</button>
<script>
function deiffDeclare(){
// 1) var는 중복 선언이 가능하다. / 재할당도 된다!
var userId = 'user01';
console.log(userId);
var userId = 'user02';
console.log(userId);
userId = 'user03';
console.log(userId);
console.log('------------------------------');
// 2) let은 중복 선언이 불가능하다. / 재할당 가능
let userPwd = 'pass01';
console.log(userPwd);
/*
let userPwd = 'pass02';
console.log(userPwd);
*/
userPwd = 'pass03';
console.log(userPwd);
console.log('------------------------------');
// 3) const는 중복 선언이 불가능하다. / 재할당 불가능(상수같은 개념 == 한번 초기화된 값 변경 불가)
const userName = '홍길동';
console.log(userName);
/*
const userName = '김말똥';
console.log(userName);
*/
/*
userName = '홍말똥';
console.log(userName);
*/
// Uncaught TypeError: Assignment to constant variable.
// 상수 변수에 할당 불가능
// var는 자유롭게 변수 선언, 사용할 수 있다는 장점이 있다.
// 하지만, 중복된 변수가 남발 됨 / 의도치 않게 값이 변경되어 있을 수 있음
// => 가장 큰 단점
// 보안되서 나온게 let, const임!
// 권장사항은 : let, const를 위주로 사용
}
function deiffScope(){
// 1) var는 function scope == 변수가 선언된 "함수영역"내에서 사용 가능
var name = "홍길동";
console.log(name);
// scopeTest(); // 다른 함수 스코프내에서는 공백으로 뜸
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 == 변수가 선언된 블럭{} 내에서만 사용 가능
if(true){
let gender = 'M';
const hobby = '감기';
}
//console.log(hobby); // 로컬변수 사용 불가능
//console.log(gender); // 로컬변수 사용 불가능
let gender2 = 'M';
const hobby2 = '감기';
// scopeTest2(); // 다른 함수 스코프내에서 사용시 에러
}
function scopeTest(){
console.log(name);
}
function scopeTest2(){
console.log(gender2);
console.log(hobby2);
}
</script>
<h3>* 변수 선언 위치에 따른 전역변수 / 지역변수</h3>
<pre>
<script>
var 변수명;
변수명;
function 함수명(){
var 변수명;
변수명;
}
<script>
</pre>
<script>
// 전역변수들
str = '전역변수';
var str2 = 'var전역변수';
// window.onload = 해당 이 html문서가 다 로딩되고 나서
// 곧바로 실행할 함수를 지정하는 구문
window.onload = function(){ // 익명 함수
var str = '지역변수'; // 전역변수명과 중복
var str3 = '새로운 지역변수';
str4 = '내가 누구게?';
console.log('----str----');
console.log(str); // 지역변수명과 전역변수명이 동일한 변수 호출 시 지역변수 호출
// 그러면 전역변수에 접근하고자 할 경우에는??
console.log(this.str);
console.log(window.str);
console.log('----str2----');
console.log(str2); // var 전역변수
console.log(this.str2);
console.log(window.str2);
console.log('----str3----');
console.log(str3); // 새로운 지역변수
console.log(this.str3); // undefined(정의되어있지 않음)
console.log(window.str3);
console.log('----str4----');
console.log(str4);
console.log(this.str4);
console.log(window.str4); // 전역변수 확정
// 지역변수 선언 시 var을 생략할 경우 전역변수로 취급됨!
}
function test(){
console.log('전역변수 총출동~');
console.log(window.str + ' 또는 ' + this.str4);
console.log(str4);
console.log(str2);
// console.log(str3);
}
</script>
<button onclick="test();">전역변수 알아보기</button>
<hr>
<h3>* 자료형</h3>
<p>
변수 선언 시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는 건 아님)<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 id="area" style="border: 1px solid black"></div>
<script>
function typeTest(){
var name = '홍길동'; // string
var age = 20; // number
var flag = true; // boolean
var hobby = ['영화', '음악', '낮잠']; // object(array)
var user = {
name : '김말똥',
age : 40,
id : 'user01'
}; // object
var testFn = function(){
alert('abcdefg');
} // function
var noVal; // undefined
// 값 찍어보기
var divEl = document.getElementById('area');
divEl.innerHTML = name + '<br>';
divEl.innerHTML += age + '<br>';
divEl.innerHTML += flag + '<br>';
divEl.innerHTML += hobby + '<br>';
divEl.innerHTML += user + '<br>'; // [object Object]
divEl.innerHTML += testFn + '<br>'; // 함수 정의 내용 나옴
divEl.innerHTML += noVal + '<br><hr>'; // undefined
// 자료형 찍어보기
// 자료형 확인할 때 쓰이는 함수 : typeof(변수명);
divEl.innerHTML += typeof(name) + '<br>';
divEl.innerHTML += typeof(age) + '<br>';
divEl.innerHTML += typeof(flag) + '<br>';
divEl.innerHTML += typeof(hobby) + '<br>';
divEl.innerHTML += typeof(user) + '<br>'; // [object Object]
divEl.innerHTML += typeof(testFn) + '<br>'; // 함수 정의 내용 나옴
divEl.innerHTML += typeof(noVal) + '<br><hr>'; // undefined
// XXX의 나이는 XX살이며 아이디는 XXX입니다.
divEl.innerHTML += user.name+ '의 나이는 ' + user.age +
'살이며 아이디는 ' + user.id + "입니다.<br><hr>";
}
</script>
</body>
</html>
'개발 관련 > JavaScript' 카테고리의 다른 글
| [JavaScript] 요소 객체 가져오기 (0) | 2022.10.04 |
|---|---|
| [JavaScript] 데이터 입출력 (0) | 2022.10.04 |
| [JavaScript] 스크립트 언어란? (0) | 2022.10.04 |
| [JavaScript] 자바스크립트란? (0) | 2022.10.04 |
