coyojo10의 개발블로그!
프론트엔드 - 자바스크립트 전역변수,지역변수 본문
1. 함수 밖에서 선언하는 경우 - 전역변수
: 함수끼리 변수를 공유해서 사용하거나 함수에서 변경한 값을 문서 전체에서 사용하는 경우 선언
2. 함수 내부에서 변수를 선언하는 경우 - 전역변수(글로벌변수 )
3. 함수 내부에서 var 키워드를 이용하여 함수 내부에서 변수를 선언 - 지역변수(로컬변수)
=> 함수 안에서만 사용할 수 있는 함수!!
즉, var를 사용하여 함수 밖에서 선언하면 전역변수,
var 없이 함수 내부에서 변수 선언하면 전역변수
<example>
var num2 = 20 // var 키워드를 썼어도 함수 밖에 선언했으니 num2 는 전역변수
function ( ){
var num1 = 10 // 함수 안에서 var 키워드를 써서 변수 선언했으니 num1은 지역변수 !!
}
[ 실습 예제!!]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
num1 = 100; // 전역변수
var num4 = 400; // 전역변수 (함수 밖에서 var 썼으니까! )
function test1(){
num2 = 200; // 전역변수
var num3 = 300; // 지역변수 (함수 안에서 var를 사용했으니! )
document.write("test1에서 num1을 사용 ==> " + num1 + "</br>")
document.write("test1에서 num2을 사용 ==> " + num2 + "</br>")
document.write("test1에서 num3을 사용 ==> " + num3 + "</br>")
document.write("test1에서 num4을 사용 ==> " + num4 + "</br>")
}
function test2(){
document.write("test2에서 num1을 사용 ==> " + num1 + "</br>")
document.write("test2에서 num2을 사용 ==> " + num2 + "</br>")
document.write("test2에서 num3을 사용 ==> " + num3 + "</br>")
// num3는 test1()함수 내에서 var로 선언된 함수로서
// test1()내부에서만 사용할 수 있으므로 test2()에서 사용하면
// 결과값이 나오지 않고 오류가 발생한다.
document.write("test2에서 num4을 사용 ==> " + num4 + "</br>")
}
</script>
</head>
<body>
<script type="text/javascript">
test1();
document.write("body에서 num1을 사용 ==> " + num1 + "</br>");
document.write("body에서 num2을 사용 ==> " + num2 + "</br>");
document.write("body에서 num3을 사용 ==> " + num3 + "</br>");
// num3는 test1()함수 내에서 var로 선언된 함수로서
// test1()내부에서만 사용할 수 있으므로 body태그에서 사용하면
// 결과값이 나오지 않고 오류가 발생한다.
document.write("body에서 num4을 사용==> " + num4 + "</br>");
document.write("<hr/>")
test2();
</script>
</body>
</html>
실행 결과 !
'프론트엔드' 카테고리의 다른 글
| 프론트엔드 - css 적용 방법 3가지 (0) | 2023.01.18 |
|---|---|
| <input> 태그 속성 - type="hidden" (0) | 2022.12.12 |
| 자바스크립트 내장 객체 (0) | 2022.10.01 |
| 자바스크립트 함수 실습 (0) | 2022.10.01 |
| <자바스크립트> 함수 (0) | 2022.10.01 |