728x90
반응형
전역 변수와 지역 변수
변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나누어집니다.
'전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있습니다.
전역 변수와 지역 변수 선언 위치
| 전역 변수 | 지역 변수 |
|---|---|
| var 변수; function 함수 () { } |
function 함수() { var 변수; } |
예시3-14 전역변수
var kor = 90; //함수 블록안에 있는 kor변수를 호출한다. kor의 값은 90>100으로 변경된다
function getScore() {
kor = 100; //전역변수
console.log(kor); //100
}
getScore();
console.log(kor); //100
}
예시3-15 지역변수
함수 블록{}안에 지역 변수는 반드시 var로 선언해 주어야 하며
함수의 지역 변수는 함수 블록{} 밖에서 사용할 수 없습니다.
var kor = 90;
function getScore() {
var kor = 100; //지역변수 : 블록안에서 kor 변수를 var로 설정하여서 지역 변수가 되었다.
console.log(kor); //100
}
getScore();
console.log(kor); //90 지역변수는 블록안에 함수에만 영향을 미치기 때문에 지역변수와 전역변수는 별도의 변수가 된다.
}
이렇게 블록{}에 의해 변수의 범위가 달리지는 것을 변수의 scope라고 합니다.
전역변수는 블록 {} 내외에서 모두 쓸 수 있기 때문에 동일한 이름으로 덮혀질 수 있어서 지역변수를 쓰는 것이 안전하다.
function getScore(){
var kor = 100;
console.log(kor); //100
}
getScore();
console.log(kor); //error
▶함수 레벨 스코프(function level scope)와 블록 레벨 스코프(block level scope)
var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에선은 지역 변수가 존재하지 않습니다.
ECMAScript 2015(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); //20
const num = 10;
{
const num = 20; //num은 전역 변수
console.log(num); //20
}
console.log(num); //20
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); // error
var는 제어문 블록{}에서 전역 변수만 존재하기 때문에 [예시3-17]과 같이 sum변수를 블록 밖에서도 호출 할 수 있지만,
제어문 블록{}안에서 let으로 선언된 변수는 지역 변수이기 때문에 제어문 블록{} 밖에서 호출할 수 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수의 범위</title>
<script>
// 함수의 전역변수
var suml = 10;
function add1() {
suml = 20;
}
add1();
console.log('전역' + suml);
// 함수의 지역변수
var sum2 = 30;
function add2() {
var sum2 = 40;
console.log('지역' + sum2);
}
add2();
consolelog('전역' + sum2);
//블록의 지역변수
var numl = 50;
if (numl ===50) {
var numl =60;
}
console.log('전역' + numl);
let num2 = 70;
if (num2 === 70) {
let num2 = 80;
console.log('지역'+ num2);
}
console.log('전역' + num2);
</script>
</head>
<body>
</body>
</html>
결과 확인하기
전역20 전역40 전역30 전역60 전역80 전역70
var, let, const비교정리
| 변수 범위 | 변수 선언 | 특징 |
|---|---|---|
| 함수레벨스코프 | var | 1.변수를 중복해서 선언할 수 있습니다. 2.함수 블록{}내에서만 지역변수가 존재합니다. |
| 블록 레벨 스코프 | let | 1.var와같지만 같은 블록{}에서는 이미 선언한 변수를 중복해서 선언할 수 없습니다. 2.블록{}, 제어문{}에서도 지역 변수가 존재합니다. |
| const | 1.같은 블록{}에서는 이미 선언한 변수를 중복해서 선언할수 없고 저장된 값을 변경할 수도 없습니다. 2.블록{}, 제어문 블록{}에서도 지역 변수가 존재합니다. |
반응형
'Javascript' 카테고리의 다른 글
| 배열 메서드(method) (7) | 2022.08.11 |
|---|---|
| 요소와 객체 (9) | 2022.08.06 |
| 데이터 타입 (5) | 2022.07.27 |
| 함수 (7) | 2022.07.26 |
| if문 이해하기 (7) | 2022.07.25 |
