변수가 참조될 수 있는 범위를 말한다.
글로벌 스코프(전역) : 스크립트 전체에서 접근이 가능
로컬 스코프(지역) : 정의된 함수 내에서만 접근이 가능
scope1test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>스코프</title>
</head>
<body>
<pre>
<script type="text/javascript">
var scope = 'Global Variable';
function getValue() {
var scope = 'Local Variable';
return scope;
}
document.writeln(getValue());
document.writeln(scope);
</script>
</pre>
</body>
</html>
|
cs |
변수에 var선언이 없다면 var선언 없이 변수 선언이 가능하므로 동작에 문제는 없다.
scope2test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>스코프</title>
</head>
<body>
<pre>
<script type="text/javascript">
scope = 'Global Variable';
function getValue() {
scope = 'Local Variable';
return scope;
}
document.writeln(getValue());
document.writeln(scope);
</script>
</pre>
</body>
</html>
|
cs |
var를 사용하지 않는 변수는 모두 전역 변수로 취급하므로 동일한 이름으로 사용된 변수는 덮어 씌운 것 처럼 동작된다.
즉 지역변수를 선언하는 경우 반드시 var선언이 필요하다.
지역 변수의 유효 범위는 정확하게 표현해서 정의된 함수전체에서 유효하다.
scope3test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>스코프</title>
</head>
<body>
<pre>
<script type="text/javascript">
var scope = 'Global Variable';
function getValue() {
document.writeln(scope);
var scope = 'Local Variable';
return scope;
}
document.writeln(getValue());
document.writeln(scope);
</script>
</pre>
</body>
</html>
|
cs |
위 예제에서 중요한 의미는 지역 변수는 해당 함수의 가장 위에서 먼저 선언(초기화)하도록 한다.
가인수의 범위 - 기본자료형과 참조자료형의 차이를 주의
가인수(매개변수)란 함수 호출 시 전달되는 값을 저장하는 변수이다.(parameter)
매개변수는 기본적으로 지역변수로 처리된다.
reference1test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>스코프</title> </head> <body> <pre> <script type="text/javascript"> var value = 10; function decrementValue(value) { value--; return value; } document.writeln(decrementValue(100)); document.writeln(value); </script> </pre> </body> </html> | cs |
reference2test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>스코프</title> </head> <body> <pre> <script type="text/javascript"> var value = [1, 2, 4, 8, 16]; function deleteElement(value) { value.pop(); return value; } document.writeln(deleteElement(value)); document.writeln(value); </script> </pre> </body> </html> | cs |
위의 두 예제를 이해하도록 한다.
자바스크립트에서 블록 레벨의 범위는 존재하지 않는다.
if나 for와 같은 제어문 블록에서 정의된 변수가 블록이 끝나도 없어지지 않는다.
다음 코드는 자바라면 에러가 발생된다.
|
if (true) { var i = 5; } System.out.println(i); |
자바스크립트에서는 정상적으로 동작함.
compareScope.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>스코프</title>
</head>
<body>
<pre>
<script type="text/javascript">
if (true) {
var i = 5;
}
document.writeln(i);
</script>
</pre>
</body>
</html>
|
cs |
함수리터럴 또는 Function 생성자로 생성 시 범위의 차이
scope4test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>스코프</title>
</head>
<body>
<pre>
<script type="text/javascript">
var scope = 'Global Variable';
function checkScope() {
var scope = 'Local Variable';
var f_lit = function() { return scope; };
document.writeln(f_lit());
var f_con = new Function('return scope;');
document.writeln(f_con());
}
checkScope();
</script>
</pre>
</body>
</html>
|
cs |
Function생성자로 함수를 정의하는 경우 전역 변수를 참조함.
생성자로 함수를 정의하는 경우 정의하는 함수 영역이 아닌 글로벌 객체로부터 스코프를 받는다.
따라서 로컬 변수에 접근할 수 없는 형태로 정의된다.
Pass in a scope chain consisting of the global object as the Scope parameter
Function생성자를 이용하는 일이 적으므로 크게 신경쓸 필요는 없으나 기억하고 있자.
'교육자료 > Javascript' 카테고리의 다른 글
| 15-5. 자바스크립트 함수의 활용 (0) | 2019.05.09 |
|---|---|
| 15-4. argument 객체 (0) | 2019.05.09 |
| 15-2. 함수 사용 시 주의 (0) | 2019.05.09 |
| 15-1. 자바스크립트 함수 (0) | 2019.05.09 |
| 14. Global 내장객체 (0) | 2019.05.09 |