다연이네

[days05] 변수, var /let /const 키워드 본문

Web/JavaScript

[days05] 변수, var /let /const 키워드

　다연　 2020. 12. 15. 18:29
반응형

전역변수와 지역변수

 

1) 1. 100출력

<script>
var n = 100; //전역변수
test();

function test() {
	document.write("1."+n+"<br>");
}
</script>
<script>
test();

function test() {
	var n=100; //지역변수
	document.write("1."+n+"<br>");
}
</script>

 

2) 1.undefined 출력

함수선언보다 함수호출이 위에있어도 되지만, 변수가 함수호출보다 밑에 있으면 안된다.
  왜 ? 자동으로 브라우저가 함수선언을 호출 위로 올린다. 
  [ js hoisting ] : 변수선언, 함수선언 부분을 자동으로 맨 위로 이동시킨다.

<script>
test();
function test() {
	document.write("1."+n+"<br>");
}
var n = 100;
</script>

 

3)

1.undefined
2.100  출력

<script>
test();
function test() {
	document.write("1."+n+"<br>");
}
var n = 100;
document.write("2."+n+"<br>"); 
</script>

밑의 2. n은 n이 함수 안의 지역변수라면 찍히지 않는다.

<script>
test();
function test() {
var n = 100;
	document.write("1."+n+"<br>");
}
document.write("2."+n+"<br>"); 
</script>

 

 

"use strict";

엄격한 모드 (변수를 선언후 사용하겠다 (var 선언하고 사용하겠다는 뜻))

<script>
"use strict"; //엄격한 모드 (변수를 선언후 사용하겠다 (var 선언하고 사용하겠다는 뜻))
	var form = "admin";
	//name ="aaa";
	function test() {
		//
		//
		//
		from = "hong";//철자실수로   form => from
		document.write(form+"<br>");
	}
	test();
</script>

만약 전역변수로 form ="admin"을 선언한 후,

함수 내에서 form값을 변경하기 위해 다시 선언하는 과정에서 오타를 내

from = "hong"으로 작성했다. 그리고 출력은 form으로 하면 admin으로 출력된다.

이를 방지하기 위해 "use strict"; 를 위에 선언해준다. 이는 var 변수를 선언해야 오류가 나지 않는다.

from 앞에 var를 붙히지 않은 경우

 

 

var 키워드 : 함수 영역 안에서 사용되는 변수
let 키워드 : 그{} 블럭영역(scope)에서만 사용되는 변수
const 키워드 : 블럭영역(scope) 변수를 선언 ==let 개념 동일  /  상수(값 재할당 불가)

 

전역변수로 hong 선언 -> 같은 이름으로 지역변수 kim 선언

<script>
var name ="hong";
function test(){
	document.write("1."+name+"<br>"); //전역변수 인식을 못했음
    //그러나 만약 지역변수 kim을 지우면 전역변수 인식함
	
	var name= "kim"; //같은 이름으로 선언된 지역변수
	document.write("2."+name+"<br>");
}
	document.write("3."+name+"<br>");
test();

</script>

 

전역변수 선언하지 않고 지역변수hong만 선언

<script>

function test(){
	document.write("1."+name+"<br>");
	{
	var name= "hong";
	document.write("2."+name+"<br>");
	}
	document.write("3."+name+"<br>");
}
test();

</script>

지역변수로 var 대신 let 사용

let() 변수를 선언하게 되면 그{} 블럭영역(scope)에서만 사용되는 변수가 된다.

<script>

function test(){
	{
		let name ="admin";
		document.write("1."+name+"<br>");
	}
	document.write("2."+name+"<br>");
}
test();

</script>

 

위의 let을 var로 바꾸면 블럭영역이 아니라 함수 전체에서 사용 가능하게되니 다음과 같이 출력된다.

 

const 블럭영역(scope) 변수를 선언 ==let 개념 동일하다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>

var x = 10;
{
	const x= 20; //const {} 블럭영역(scope) 변수를 선언 ==let 개념 동일하다
	document.write(x+"<br>");  //20
	}
	document.write(x+"<br>");  //10
</script>
</body>
</html>

 

const - 값 재할당 불가 (상수)

<script>
function test() {
	
		try {
			const PI = 3.141592; //상수 : 값 재할당 불가
			//
			//
			//
			PI = 3.14;
		} catch (e) {
			document.write(e);
		}
		
	
	}
	
	test();
</script>

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days05] 1) js 클래스 + constructor 2) form태그 유효성 검사  (0) 2020.12.15
[days05] Arrow Function (화살표 함수)와 this  (0) 2020.12.15
[days05] js try~catch  (0) 2020.12.15
[days05] 정규표현식 (을 사용해 입력값 유효성 확인 외)  (0) 2020.12.15
[days05] insertRow,insertCell 구구단 표 만들기  (0) 2020.12.15
'Web/JavaScript' Related Articles more
Comments