728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수와 자료형</title>
</head>
<body>
<h1>변수와 자료형</h1>
<h3>* 변수 선언 위치에 따른 전역변수/지역변수</h3>
<pre>
<script>
let 변수명; // 전역변수(global)
const 변수명; // 상수(값을 할당하면 바꿀수 없음)
var 변수명; // 전역변수(global) 과거에 쓰이던 키워드.
변수명; // 전역변수(global)
function 함수명(){
var 변수명; // 지역변수(local)
변수명; // 지역변수(local)
}
var 변수 문제점이 많아서 let, const로 대체됨.
하지만 아직도 많은 스크립트에서 var가 사용되고 있음
</script>
</pre>
<script>
// 1) 영역문제
if(true) {
var varTest = "var";
let letTest = "let";
}
// console.log(letTest); 에러발생(블록단위기준(자바와 스코프범위가 동일함))
console.log(varTest); // 에러 안남(전역에 남아있다.), 함수내에서 선언시 해당 함수에서만 쓰이고 , 그외는 전역변수
// 2) 중복문제
var user;
var user; // 에러안남.
//let user;
//let user; // 에러남(재사용하지 못함)
// 전역변수들은 자동으로 window객체의 필드로 등록된다.
str ="전역변수";
var str2 = "var 전역변수";
// let, const는 window객체의 필드로 등록되지 않음
let str3 = "let 전연벽수";
// window.onload == 현재 html문서가 다 로딩이 완료되고 나서 실행할 함수를 지정하는 이벤트속성
window.onload = function(){
return false;
//let str = "지역변수" , str4 = "또다른 지역변수"; , ; 권장하지 않는 방법
let str = "지역변수"; // 전역변수명과 중복
let str4 = "또다른 지역변수";
str5 = "???어떤스코프??";
console.log("=== str ===");
console.log(str); // 지역변수명과 전역병수명이 동일한 경우 지역변수가 우선권을 가진다.
// 이때 , 전역변수에 접근하고자 할때는? window or this를 작성
console.log(window.str);
console.log(this.str); // this의 기본 주소값은 window
console.log("=== str2 ===");
console.log(str2);
console.log(window.str2);
console.log(this.str2);
console.log("=== str4 ===");
console.log(str4);
console.log(window.str4);// undefined(정의되어있찌 않음)
console.log(this.str4);
console.log("=== str5 ===");
console.log(str5);
console.log(window.str5);
console.log(this.str5);
// 지역변수 선언시 키워드 생략시 전역변수로 취급된다.
}
</script>
<hr>
<h3>* 자료형</h3>
<p>
변수 선언시 자료형을 별도로 지정하지 않음(자료형의 개념이 없는건 아님) <br>
=> 변수에 대입되는 값(리터럴)에 따라서 알아서 자료형이 자동으로 결정됨
</p>
<h4>자바스크립트의 자료형</h4>
<ul>
<li>string(문자열)</li>
<li>number(숫자)</li>
<li>BigInt(진짜큰숫자)</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(){
//let name = `홍길동`;
//let name = '홍길동';
let name = "홍길동"; // 전부 문자열
const age = 20;
const flag = true;
const hobby = ["영화","유투브","낮잠"];
const user = {
name : '민경민',
age : 36,
id : 'alsrudals'
};
const testfn = function (){
alert("ㅎㅎ");
}
let noVal;
console.log(name , age, flag, hobby , user);
console.log(testfn);
console.log(noVal);
const divEl = document.querySelector("#area");
// 자료형 확인시 사용되는 함수 : typeof(변수명)
divEl.innerHTML = name+"의 자료형 : "+typeof(name)+"<br>";
divEl.innerHTML+= `${age}의 자료형 : `+typeof(age)+"<br>";
divEl.innerHTML+= `${flag}의 자료형 : `+typeof(flag)+"<br>";
divEl.innerHTML+= `${hobby}의 자료형 : `+typeof(hobby)+"<br>";
divEl.innerHTML+= `${user}의 자료형 : `+typeof(user)+"<br>"; // 객체의 경우 화면에 출력시[object Object]로 출력된다
divEl.innerHTML+= `${testfn}의 자료형 : `+typeof(testfn)+"<br>";
divEl.innerHTML+= `${noVal}의 자료형 : `+typeof(noVal)+"<br>";
// 객체 내부의 속성에 접근 => .으로 접근
divEl.innerHTML += user.name+"의 나이는 "+user.age+"이며 아이디는 "+user.id+"입니다.";
//특이케이스
console.log("null값의 자료형 ? ",typeof(null));
// null은 별도의 고유한 자료형을 가지는 특수한 값임. 즉, 객체가 아님
// 하지만, 하위호환성을 위해 오류를 수정하지않고 남겨둔 상황
}
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
728x90
반응형
LIST
'JavaScript > JavaScript' 카테고리의 다른 글
| JavaScript 자바스크립트 배열 선언 초기화,배열 반복문,배열 변형(indexOf,concat,reverse,sort,push,pop,unshift,shift,slice,splice,join,toString,foreach,includes,find, filter,map) (1) | 2023.05.30 |
|---|---|
| JavaScript 자바스크립트 문자열과 숫자(인덱스,강제형변환,덧셈) (0) | 2023.05.30 |
| JavaScript 자바스크립트 요소 가져오기 (0) | 2023.05.29 |
| JavaScript 자바스크립트 데이터 입출력 (0) | 2023.05.27 |
| JavaScript 자바스크립트의 개요 (0) | 2023.05.18 |
