전역변수와 지역변수
변수는 함수 블록{}을 기준으로 변수와 선언 위치에 따라 '지역 변수'와 '전역 변수'로 나누어집니다.
'전역변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다.
전역변수와 지역변수 선언 위치
| 전연변수 | 지역변수 |
|---|---|
| var 변수; function 함수() { } |
function 함수(){ var 변수; } |
전역변수, 지역변수 예시
var kor = 90;
function getScore() {
kor = 100; // 전연 변수
console.log(kor); // 100
}
getScore();
console.log(kor); // 100
함수 블록 안에 있는 kor 변수는 전역변수입니다. 따라서 getScore 함수를 호출하게 되면 kor 변수의 값이 90에서 100으로 바뀌게 됩니다.
var kor = 90;
function getScore(){
var kor = 100; // 지역 변수
console.log(kor); // 100
}
getScore();
console.log(kor); // 90
함수 블록 안에 있는 kor 변수를 var로 정의하였습니다. 함수블록 안에서 var로 선언된 변수는 지역변수가 되어 함수 블록 밖의 전역 변수 kor과 다른 별도의 변수가 됩니다.
함수 블록 안에 지역 변수는 반드시 var로 선언해 주어야 하며 함수의 지역 변수는 함수 블록 밖에서 사용할 수 없습니다.
function getScore(){
var kor = 100;
console.log(kor); // 100
}
getScore();
console.log(kor); // 에러
블록에 의해 범위가 달라지는 것을 변수의 scope라고 합니다. 전역변수는 블록 내외에서 사용하기에 동일한 이름으로 덮어질 위험으로 지역변수가 더 안전합니다.
함수 레벨 스코프(function level scope)와 블록 레벨 스코프(block level scope)
var는 함수 블록에서만 지역변수가 존재하며 블록이나 제어문 블록에서는 지역변수가 존재하지 않습니다.ES6에서 추가된 let과 const는 블록이나 제어문 블록에서도 지역변수를 선언할 수 있습니다.
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
블록 안에서 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(sum); //에러
var는 제어문 블록에서 지역 변수만 존재하기 때문에 sum 변수를 블록 밖에서도 호출 할 수 있지만, 제어문 블록{} 안에서 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 배열 메서드 - join() / push() / pop() (4) | 2022.08.11 |
|---|---|
| JavaScript 요소 선택 (5) | 2022.08.05 |
| JavaScript 함수 (6) | 2022.07.26 |
| JavaScript 조건문 (8) | 2022.07.26 |
| JavaScript 반복문 (7) | 2022.07.25 |
