본문 바로가기
[JavaScript]

[JavaScript] 변수의 유효 범위

by 북방바다코끼리표범 2023. 8. 24.

복습

https://shins99.tistory.com/54

 

[JavaScript] 함수

복습 https://shins99.tistory.com/53 [JavaScript] 유용한 자바스크립트 내장 함수들 복습 https://shins99.tistory.com/52 [JavaScript] 객체 (Object) 복습 https://shins99.tistory.com/51 [JavaScript] 배열 (Arrays) 복습 https://shins99.ti

shins99.tistory.com


변수의 유효 범위(variable scope)

- 자바스크립트에서 객체나 함수는 모두 변수(variable).

- 변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미.

- 자바스크립트에서 변수는 유효 범위에 따라 다음과 같이 구분

 

1. 지역 변수(local variable)

2. 전역 변수(global variable)

 

지역 변수(local variable)

- 지역 변수(local variable)란 함수 내에서 선언된 변수

- 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

- 함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작합니다.

 

팁 :

자바스크립트에서는 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류를 발생시키지만

선언되지 않은 변수에 대한 typeof 연산자의 결괏값은 undefined 값을 반환

1
2
3
4
5
6
7
예제
function localNum() {
    var num = 10// 지역 변수 num에 숫자 10을 대입함.
    document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number
}
localNum();       // 함수 localNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다."); // undefined
cs

 

전역 변수(global variable)

- 전역 변수(global variable)란 함수의 외부에서 선언된 변수

- 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라짐

1
2
3
4
5
6
7
8
예제
var num = 10// 전역 변수 num을 선언함.
function globalNum() {
    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10
    num = 20// 전역 변수 num의 값을 함수 내부에서 변경함.
}
globalNum();  // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 20
cs

자바스크립트에서 지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 함

함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언됨

1
2
3
4
5
6
7
예제
function globalNum() {
    num = 10// var 키워드를 사용하지 않고 변수 num을 선언함.
    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10
}
globalNum();  // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10
cs

 

전역 변수와 같은 이름의 지역 변수를 선언하면, 해당 블록에서는 해당 이름으로 지역 변수만을 호출가능

1
2
3
4
5
6
7
8
예제
var num = 10// 전역 변수 num을 선언함.
function globalNum() {
    var num = 20// 같은 이름의 지역 변수 num을 선언함.
    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 20
}
globalNum(); // 함수 globalNum()을 호출함.
document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 10
cs

 

'[JavaScript]' 카테고리의 다른 글

[JavaScript] DOM (Document Object Model)  (0) 2023.08.27
[JavaScript] 함수의 유효범위  (19) 2023.08.26
[JavaScript] 함수  (23) 2023.08.23
[JavaScript] 유용한 자바스크립트 내장 함수들  (13) 2023.08.22
[JavaScript] 객체 (Object)  (19) 2023.08.22