JavaScript Variable

 

 Const 상수

* const는 재할당 불가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
	// 상수
	const n = 100;
	n = 200; // 변경 불가
    // Uncaught 
    // TypeError: Assignment to constant variable.
	
	
</script>
</head>
<body>
 
</body>
</html>

 

 Data 자동 형변환

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		// 1. 문자열과 산술연산자 연산
			console.log("10" + 3); // 연결
			console.log("10" - 3);
			console.log("10" * 3);
			console.log("10" / 3);
			
		// 2. true/false가 아닌 임의의 값도 논리값으로 처리 가능하다.
		// false로 처리되는 값 : 0, "", NaN, null, undefined
		// true로 처리되는 값 : 위 5가지를 제외한 나머지 값은 true로 처리된다.
		if(""){
			console.log("true");
		}else{
			console.log("false"); //0, "" 빈문자열, undefined, NaN false로 찍힌다.
		}
	
	</script>
 
</head>
<body>
 
</body>
</html>

 

 

 

 

 

 

 typeof 연산자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 
	var name ="홍길동";
	var age =20;
	var height= 179.9;
	var weight =69.5;
	var isMarried = true;
	var phone=["010","011"];
	var email=["naver@naver.com","naver@gmail.com"];
	var address = null;  // null은  값이 정해져 있지 않는 경우
	
	var pets={ 
			"cat":"야오옹",
			"dog":"멍머엉"
	};
	var f = function(){};
	var f2 = null;
	var f3;
	
	console.log(typeof name);		// "string"
	console.log(typeof age);		// "number"
	console.log(typeof height);		// "number"
	console.log(typeof weight);		// "number"
	console.log(typeof isMarried);		// "boolean"
	console.log(typeof phone);		// "object"
	console.log(typeof email);		// "object"
	console.log(typeof address);		// "object"
	console.log(typeof pets);		// "object"
	console.log(typeof cat);		// "object"
	console.log(typeof dog);		// "object"
	console.log(typeof f);			// "function"
	console.log(typeof f2);			// "object"
	console.log(typeof f3);			// "undefined"
 
 
 
</script>
</head>
<body>
 
</body>
</html>

 var

 

javascript ES5버전까지의 변수 선언 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// var 키워드
	
	// 변수 선언
	var num;
	console.log("var:", num); //undefined
	
	// 변수 초기화
	num = 10;
	console.log("var:", num); //10
	
	num = "홍길동";
	console.log("var:", num); //홍길동
	
</script>
</head>
<body>
 
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// var 키워드
	
	// 변수 선언
	// 변수 초기화
	// 1. var는 변수명 중복이 가능하다.
	var num = 10;
	var num = 10;
	console.log("var:", num); //undefined
	
	// 2. 함수 scope
	
	if(true){
		var m = 20;
		console.log("블럭안:", m);
	}
	console.log("블럭밖:", m);
 
	function fun() {
		var x = 10;
		console.log("fun:", x);
	}
	fun();
	// console.log(x); //에러 , 함수 블록 불러서
		
	console.log("///////////////////")
	// 3. 호이스팅
	console.log(n); // undefined
	var n = 10;
	console.log(n); // 10
	
	
	
	
</script>
</head>
<body>
 
</body>
</html>

 

 

 let

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// let 키워드 (ES6)
	
	// 변수 선언
	let num;
	console.log("let:", num); //undefined
	
	// 변수 초기화
	num = 10;
	console.log("let:", num); //10
	
	num = "홍길동";
	console.log("let:", num); //홍길동
 
</script>
</head>
<body>
 
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// let 키워드 (ES6)
	
	// 변수 선언
	// 변수 초기화
	// 1. let은 변수명 중복이 안된다.
/* 	let num = 10;
	let num = 20; // 에러 이유?
	console.log("let:", num);  *///undefined
	//Uncaught SyntaxError: Identifier 'num' has already been declared
	
	// 2. 블럭 scope
	
	if(true){
		let m = 20;
		console.log("블럭안:", m);
	}
	/* console.log("블럭밖:", m); 에러이유? 블럭 안에서 선언된 것은 안에서만 사용 가능*/
	// Uncaught ReferenceError: m is not defined
    // at let2.html:23
	
    function fun() {
		let x = 10;
		console.log("fun:", x);
	}
	fun();
	// console.log(x); // 에러이유? 블럭 안에서 선언된 것은 안에서만 사용 가능
 
 	console.log("///////////////////")			
	// 3. 호이스팅 불가 
	/* console.log(n); */ // 에러이유? hosting을 수행하지만 초기화 되기 전을 참조
	let n = 10;
	console.log(n);
 
</script>
</head>
<body>
 
</body>
</html>

 

 

 

 

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Data Type 기본형 & 참조형 & Class 정리  (0) 2022.01.29
[JavaScript] script 작성 위치 정리 2  (0) 2022.01.29
[JavaScript] script 작성 위치 정리  (0) 2022.01.29
deeprun딥런 님의 블로그입니다.

+ Recent posts

티스토리툴바