728x90
지역변수와 전역변수
변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역변수'와 '지역변수'로 나눌 수 있습니다. 전역변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 지역변수는 함수 블록{} 내에서만 사용할 수 있습니다.
01. 전역변수와 지역변수 선언 위치
| 전역변수 | 지역변수 |
|---|---|
|
var 변수; function 함수() { } |
function 함수() { var 변수; } |
[예시1]
var kor = 90;
function getScore() {
kor = 100; //전역변수 값이 바뀜
document.write(kor); // 100
}
getScore();
document.write(kor); //100
결과보기
[예시1]에서 함수 블록{}안에 있는 kor 변수는 전역변수입니다. 따라서 getScore() 함수를
호출하게 되면 kor 변수 값이 90에서 100으로 바뀌게 됩니다.
[예시2]
var kor = 90;
function getScore() {
var kor = 100; //지역변수
document.write(kor); // 100
}
getScore();
document.write(kor); //90
결과보기
[예시2]에서는 함수 블록{}안의 kor 변수를 var로 정의하였습니다. 함수 블록{}안에서
var로 선언된 변수는 지역 변수가 되며 함수 블록{} 밖의 전역 변수 kor과 다른 별도의
변수가 됩니다. 지역변수는 반드시 var로 선언해주어야 하며 함수의 지역변수는 함수 블록{}
밖에서 사용할 수 없습니다.
[예시3]
function getScore() {
var kor = 100;
console.log(kor); // 100
}
getScore();
console.log(kor); //에러
이렇게 블록{}에 의해 변수의 범위가 달라지는 것을 변수의 scope라고 합니다.
전역 변수는 블록{} 내외에서 사용할 수 있기 때문에 자칫 동일한 이름으로 덮어 써질 수 있습니다.
이런 이유로 전역변수보다 지역변수가 안전합니다.
02. 함수 레벨 스코프와 블록 레벨 스코프
var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에서는 지역변수가 존재하지 않습니다. 하지만, ECMAScript 2015(ES6)에서 새로 추가된 let과 const는 블록{}이나 제어문 블록{}에서도 지역변수를 선언할 수 있습니다.
[예시4]
//var 사용 하였을 때
var num = 10;
{
var num = 20; //num은 전역 변수입니다.
document.write(num); // 20
}
document.write(num); //20
//let 사용 하였을 때
let num = 10;
{
let num = 20; //num은 지역 변수입니다.
document.write(num); //20
}
document.write(num); //10
//const 사용 하였을 때
const num = 10;
{
const num = 20; //num은 지역 변수입니다.
document.write(num); //20
}
document.write(num); //10
결과보기
[예시4]처럼 블록{} 안에서 let과 const로 선언된 변수는 블록{}의 지역변수로 인식합니다.
[예시5]
var num = 10;
if (num === 10) {
var sum = 20; //전역 변수
}
console.log(num); //20
let num = 10;
if (num === 10) {
let sum = 20; //지역 변수
}
console.log(sum); //에러
var는 제어문 블록{}에서 전역 변수만 존재하기 때문에 [예시5]와 같이 sum 변수를 블록{} 밖에서도
호출할 수 있지만, 제어문 블록{} 안에서 let으로 선언된 변수는 지역 변수이기 때문에 제어문 블록{}
밖에서 호출할 수 없습니다.
[예시6]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수의 범위</title>
<script>
// 함수의 전역변수
var sum = 10;
function add1(){
sum1 = 20;
}
add1();
document.write('전역' + sum1);
// 함수의 지역변수
var sum2 = 30;
function add2(){
var sum2 = 40;
document.write('지역' + sum2);
}
add2();
document.write('전역' + sum2);
// 블록의 지역변수
var num1 = 50;
if (num1 === 50){
var num1 = 60;
}
document.write('전역' + num1);
let num2 = 70;
if (num2 === 70){
let num2 = 80;
document.write('지역' + num2);
}
document.write('전역' + num2);
<script>
</head>
<body>
</body>
</html>
결과보기
다음은 var, let, const를 비교, 정리한 표입니다.
| 변수 범위 | 변수 선언 | 특징 |
|---|---|---|
| 함수 레벨 스코프 | var | 변수를 중복해서 선언할 수 있습니다. |
| 함수 블록{}내에서만 지역 변수가 존재합니다. | ||
| 블록 레벨 스코프 | let | var와 같지만 같은 블록{}에서는 이미 선언한 변수를 중복해서 선언할 수 없습니다. |
| 블록{}, 제어문 블록{}에서도 지역 변수가 존재합니다. | ||
| const | 같은 블록{}에서 이미 선언한 변수를 중복해서 선언할 수 없고 저장된 값을 변경할 수도 없습니다. | |
| 블록{}, 제어문 블록{}에서도 지역 변수가 존재합니다. |
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]메서드 join(), push(), pop() (3) | 2022.08.11 |
|---|---|
| [javascript]요소선택 (9) | 2022.08.05 |
| [javascript]자바스크립트 함수 (6) | 2022.07.26 |
| [javascript]자바스크립트 데이터타입 (6) | 2022.07.25 |
| [javascript]자바스크립트 조건문 (6) | 2022.07.25 |
댓글