scope
유효한 영역을 의미한다.
변수의 scope
선언한 변수가 유효한 영역을 의미한다.
function scope
선언된 변수는 선언된 함수 안에서만 접근이 가능하다.
선언된 함수 안에서 선언된 함수에서도 접근이 가능하다.
실습을 살펴보자
scope.html
<html>
<head>
<meta charset="utf-8">
<script src="scope.js"></script>
</head>
<body>
scope
</body>
</html>scope.js
function a(){
var v_a="a";
function b(){
var v_b="b";
console.log("b :", typeof(v), typeof(v_a), typeof(v_b));
}
b();
console.log("a :", typeof(v), typeof(v_a), typeof(v_b));
}
var v="v";
a();
console.log("o :", typeof(v), typeof(v_a), typeof(v_b));해당 코드를 실행시키면 콘솔창에는 다음과 같은 결과가 출력된다.
b는 함수 a 안의 함수 b 에서 호출되었기 때문에 모든 변수의 타입이 출력된다.
a는 함수 a 안이지만 함수 b의 밖이기 때문에 v_b의 변수의 타입이 undefined이다.
o는 함수 a 밖이고 물론 함수 b의 밖이기 때문에 변수 v의 타입만 출력된다.
shadowing
변수의 shadowing
함수 안에서 밖에서 선언된 같은 이름의 변수를 사용하는 경우 함수 밖의 변수는 잠시 가려놓고 해당 함수 안에 선언된 변수로만 인식하여 사용하게 된다. 이를 shadowing이라 한다. 이 때 같은 이름을 가진 함수 밖의 변수의 값은 변하지 않는다.
함수에서 빠져나오면 다시 해당 변수에 접근할 수 있다.
따라서 함수 안에서만 값이 유지되어야 하는 경우에는 함수 안에서 var 키워드를 사용해 선언하고 사용한다.
여러 함수에서 값이 유지되면서 사용되어야 하는 변수의 경우에는 함수를 포괄하는 곳에서 선언하고 사용한다.
코드를 보면서 확인해보자
shadowing.html
<html>
<head>
<meta charset="utf-8">
<script src="shadowing.js"></script>
</head>
<body>
shadowing
</body>
</html>shadowing.js
function shadowing_example(){
var val = 5;
console.log("F", val);
val++;
}
var val = 0;
shadowing_example();
console.log("O", val);결과를 확인하면 다음과 같다.
shadowing_example 함수의 안과 밖에서 모두 val 변수를 사용하고 있다. 함수가 호출된 경우에는 그 안에서 선언된 값을 사용하고
밖에서는 밖에서 선언된 값을 사용하는 것을 확인 할 수 있다.
'Computer Science > Javascript' 카테고리의 다른 글
| Javascript -11- method, this, closure (0) | 2020.01.25 |
|---|---|
| Javascript -9- 반복문 (0) | 2020.01.25 |
| Javascript -8- 조건문 (0) | 2020.01.23 |
| Javascript -7- 배열, 주석 (0) | 2020.01.23 |
| Javascript -6- String (0) | 2020.01.23 |