전역변수/지역변수
변수는 함수 블록{}을 기준으로 선언 위치에 따라 '전역변수'와 '지역변수'로 나뉩니다.
1) 전역변수_ 함수 블록{} 밖이나 안에서 자유롭게 사용 가능
2) 지역변수_ 함수 블록{} 내에서만 사용 가능
1. 변수 선언 위치
| 전역 변수 | 지역 변수 |
|---|---|
|
var 변수; function 함수() { } |
function 함수() { var 변수; } |
예시 1-1/
var kor = 90;
function getScore() {
kor = 100; //전역변수
console.log(kor); //100
}
getScore();
console.log(kor); //100
전역 변수 : 함수 블록{ } 안에 있는 kor 변수
>> getScore( ) 함수 출력 시, kor 변수 값 (90 => 100)
예시 1-2/
var kor = 90;
function getScore() {
var kor = 100; //전역변수
console.log(kor); //100
}
getScore();
console.log(kor); //90
전역 변수 : 함수 블록{ } 안에 var로 선언된 변수
>> 함수 블록{ } 밖의 전역 변수 kor과는 다른 변수가 됨
지역 변수는 함수 블록{ } 밖에서 사용할 수 없습니다.
function getScore() {
var kor = 100;
console.log(kor); //100
}
getScore();
console.log(kor); //에러
* 변수의 scope : 블록{}에 의해 변수의 범위가 달라지는 것을 의미
2. 함수 레벨 스코프(function level scope)와 블록 레벨 스코프(block level scope)
var num = 10;
{
var num = 20; //num은 전역 변수입니다.
console.log(num); //20
}
console.log(num); //20
let num = 10;
{
let num = 20; //num은 지역 변수입니다.
console.log(num); //20
}
console.log(num); //10
const num = 10;
{
const num = 20; //num은 지역 변수입니다.
console.log(num); //20
}
console.log(num); //10
1) var : 함수 블록{ }에서만 지역 변수가 존재, 블록{ }이나 제어문 블록{ }에서는 지역변수 존재X
2) let, const : 블록{ }이나 제어문 블록{ }에서도 지역 변수 선언 가능
var num = 10;
if (num === 10) {
var sum = 20; //전역 변수
}
console.log(sum); //20
let num = 10;
if (num === 10) {
let sum = 20; //지역 변수
}
console.log(num); //에러
제어문 블록{ } 안에서 let으로 선언된 변수는 지역 변수 => 제어문 밖에서 호출 불가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수의 범위</title>
<script>
// 함수의 전역변수
var sum1 = 10;
function add1() {
sum1 = 20;
}
add1();
console.log('전역' + sum1);
// 함수의 지역변수
var sum2 = 30;
function add2() {
var sum2 = 40;
console.log('지역' + sum2);
}
add2();
console.log('전역' + sum2);
//블록의 지역변수
var num1 = 50;
if (num1 ===50) {
var num1 = 60;
}
console.log('전역' + num1);
let num2 = 70;
if (num2 === 70) {
let num2 = 80;
console.log('지역' + num2);
}
console.log('전역' + num2);
</script>
</head>
<body>
</body>
</html>
'JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT | 배열 객체 (13) | 2022.08.11 |
|---|---|
| JAVASCRIPT | 요소 객체 (9) | 2022.08.06 |
| JAVASCRIPT | 함수 (8) | 2022.07.26 |
| JAVASCRIPT | 데이터 타입 (10) | 2022.07.26 |
| JAVASCRIPT | 조건문이란? (8) | 2022.07.26 |
댓글