전역변수/지역변수
변수에는 '전역변수'와 '지역변수'가 있습니다. 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역변수'와 '지역변수'로 나누어집니다.
'전역변수'와 '지역변수'
'전역변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용이 가능하지만, '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다.
전역변수와 지역변수의 선언 위치
| 전역변수 | 지역변수 |
|---|---|
|
var 변수; function 함수() { } |
function 함수() { var 변수; } |
[ 예시 ]
var kor = 90;
function getScore() {
kor = 100; //전역변수
console.log(kor); //100
}
getScore();
console.log(kor); //100
var kor = 90;
function getScore() {
var kor = 100; //지역변수
console.log(kor); //100
}
getScore();
console.log(kor); //90
함수 블록{} 안에서의 지역변수는 반드시 var(먼저 선언한 함수와 같은 형식)을 붙여 선언하여야 합니다. 그러면 블록 밖의 전역변수와는 다른 별도의 변수가 됩니다. 블록 안의 지역변수는 블록 밖에서 사용할 수 없습니다.
function getScore() {
var kor = 100;
console.log(kor); //100
}
getScore();
console.log(kor); //에러.
//kor은 함수 블록 내에서만 작동하는 지역변수이기 때문에 함수 블록 밖에서 호출해도 값을 불러올 수 없다.
'함수 레벨 스코프'와 '블록 레벨 스코프'
변수의 스코프(scope)란 블록{}에 의해 변수의 범위가 달라지는 것을 뜻합니다.
| 변수 범위 | 변수 선언 | 특징 |
|---|---|---|
| 함수 레벨 스코프 | var |
- 변수를 중복해서 선언할 수 있습니다. - 함수 블록{} 내에서만 지역변수가 존재합니다. |
| 블록 레벨 스코프 | let |
- 변수를 중복해서 선언할 수 있지만, 같은 블록{} 안에서는 이미 선언한 변수를 중복해서 선언할 수 없습니다. - 함수 블록{}, 블록{}, 제어문 블록{}에서 지역변수가 존재합니다. |
| const |
- 같은 블록{} 안에서는 이미 선언한 변수를 중복해서 선언할 수 없으며, 저장된 값을 변경할 수 없습니다. - 함수 블록{}, 블록{}, 제어문 블록{}에서 지역변수가 존재합니다. |
var
var은 함수 블록{}에서만 지역변수가 존재하며, 블록{}이나 제어문 블록{}에서는 지역변수가 존재하지 않습니다.
var num = 10;
{
var num = 20; //var은 블록{}에서는 지역변수가 존재하지 않기 때문에, num은 전역 변수입니다.
console.log(num); //20
}
console.log(num); //20
let, const
ES6에서 새로 추가된 let과 const는 함수 블록{}, 블록{}, 제어문 블록{}에서 모두 지역변수를 선언할 수 있습니다.
let num = 10;
{
let num = 20; //let은 블록{}에서도 지역변수가 존재하기 때문에, num은 지역 변수입니다.
console.log(num); //20
}
console.log(num); //10
const num = 10;
{
const num = 20; //const는 블록{}에서도 지역변수가 존재하기 때문에, num은 지역 변수입니다.
console.log(num); //20
}
console.log(num); //10
제어문 블록에서의 변수
var sum = 10;
if (sum === 10) {
var sum = 20; //var은 제어문 블록{}에서 전역변수만 존재하기 때문에, sum은 전역변수입니다.
}
console.log(sum); //20
let sum = 10;
if (sum === 10) {
let sum = 20; //let은 제어문 블록{}에도 지역변수가 존재하기 때문에, sum은 지역변수입니다.
}
console.log(sum); //10
let과 const는 블록{} 제어문 블록{}에서 지역변수를 선언할 수 있기 때문에, 블록 안에서 선언된 지역변수를 블록 바깥에서 호출할 수 없습니다.
let num = 10;
if (num === 10) {
let sum = 20; //sum은 지역변수입니다.
}
console.log(sum); //에러
[ 예제 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수의 범위</title>
<script>
// 함수의 전역변수
var sum1 = 10;
function add1() {
sum1 = 20;
}
add1();
console.log("전역" + sum1); //전역20
// 함수의 지역변수
var sum2 = 30;
function add2() {
var sum2 = 40;
console.log("지역" + sum2); //지역40
}
add2();
console.log("전역" + sum2); //전역30
// 블록의 지역변수
var num1 = 50;
if (num1 === 50) {
var num1 = 60;
}
console.log("전역" + num1); //전역60
let num2 = 70;
if (num2 === 70) {
let num2 = 80;
console.log("지역" + num2); //지역80
}
console.log("전역" + num2); //전역70
</script>
</head>
<body>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 배열 메서드 : join() / push() / pop() (9) | 2022.08.11 |
|---|---|
| 요소 선택자 알아보기 (10) | 2022.08.05 |
| 함수 알아보기 (13) | 2022.07.26 |
| 자료형 알아보기 (15) | 2022.07.25 |
| 조건문 이해하기 (12) | 2022.07.25 |
댓글