변수 (Variable)

- 어플리케이션에서 값에 상징적인 이름으로 변수를 사용한다.

 

전역 변수 : 함수의 바깥에서 선언한 수로, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있다.

지역 변수 : 함수 내부에서 선언한 변수로, 변수를 선언한 함수 내에서만 사용할 수 있다.

 

변수 선언

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = 10, b = 20, c;

console.log(c); // undefined - 초기값을 부여하지 않는 경우

// c = a + x; // ReferenceError 예외 발생
c = a + b;
console.log(c);
</script>

</head>
<body>

<h3>자바스크립트-변수 선언</h3>

</body>
</html>

 

변수 범위

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a=10; // 전역 변수

function fun() { // 함수 선언
	console.log(a); // 10
	
	if(true) {
		var x=5; // var로 선언한 변수의 범위는 if() 블록이 아니라 x가 선언된 함수이다.
	}
	console.log(x); // 5. 
	
	if(true) {
		let y=10; // let로 선언한 변수의 범위는 if() 블록이다.
	}
	// console.log(y) //ReferenceError
}

// 함수 호출
fun();
</script>
</head>
<body>

<h3>자바스크립트-변수 범위</h3>

</body>
</html>

 

변수 호이스팅(hoisting)

- 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 

- 변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다.

 

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function sub() {
	// console.log(a); // 에러 : ReferenceError
	console.log(x); // undefined. 자바스크립트는 나중에 선언한 변수를 참조 할 수 있다.
	var x = 3;
	console.log(x); // 3
	
/*
	// 위는 아래와 동일
	var x;
	console.log(x);
	x = 3;
	console.log(x);
*/
}

sub();

</script>
</head>
<body>

<h3>변수-호이스팅(hoisting)</h3>
<p>
 호이스트는 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미
</p>

</body>
</html>

 

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0924_Javascript : 상수 Constant  (0) 2021.09.25
0924_Javascript : 데이터타입 및 형  (0) 2021.09.25
0924_Javascript : 개요  (0) 2021.09.25
0923_CSS : Grid Layout  (0) 2021.09.23
0923_CSS : display:flex를 사용하지 않고 메뉴 상단 고정  (0) 2021.09.23

+ Recent posts

티스토리툴바