지역 변수 / 전역 변수

지역 변수 / 전역 변수

변수는 함수 블록{}을 기준으로써 선언 위치에 따라 전역 및 지역 변수로 나뉜다.
ps.전역 변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역 변수는 함수 블록{} 내에서만 가능

지역 변수와 전역 변수 선언 위치

지역 변수	전역 변수
function 함수() { var 변수; }	var 변수; function 함수() { }

함수 레벨 스코프

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

var num = 10;
if (num === 100) {
var sum = 20; // 전역 변수
}
console.log(sum); // 20

let num = 10;
if (num === 100) {
let sum = 20; // 지역 변수
}
console.log(sum); // 에러

var는 제어문 블록{}에서 전역 변수에 존재해 sum변수를 블록{} 밖에서도 호출가능
제어문 블록{} 안에서 let으로 선언된 변수는 지역 변수이기에 제어문 블록{} 밖에서 호출 불가능

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변수의 범위</title>
<script>
// 함수의 전역 변수
var sun1 = 10;
function add1() {
sum1 = 20;
}
add1();
console.log('전역' + sum1);

// 함수의 지역 변수
var sum2 = 30;
function add2() {
var sum2 = 40;
console.log('지역' + sum2);
}
add();
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>

var, let, const 비교 정리

변수 범위	변수 선언	특징
함수 레벨 스코프	var	1. 변수를 중복해서 선언 가능 2. 함수 블록{} 내에서만 지역 변수가 존재
블록 레벨 스코프	let	1. var와 같지만 같은 블록{}에서는 이미 선언한 변수를 중복해서 선언 불가능 2. 블록{}, 제어문 블록{}에서도 지역 변수가 존재
블록 레벨 스코프	const	1. 같은 블록{} 에서는 이미 선언한 변수를 중복해서 선언할 수 없으며 저장된 값을 변경할 수도 없다. 2. 블록{}, 제어문{}에서도 지역 변수가 존재