![](https://blog.kakaocdn.net/dn/C5Z8q/btrIt6KO8L2/00OC5bqXq9cKqPrNQ3ar51/img.jpg)
전역 변수와 지역 변수
변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나누어진다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있다.
{
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
}
함수 블록 {} 안의 kro 변수를 var로 정의하였다. 함수 블록{}안에서 var로 선언된 변수는 지역 변수가 되며
함수 블록{} 밖의 전역 변수 kor과 다른 별도의 변수가 된다. 지역변수는 함수블록{}밖에서 사용X
{
function getScore() {
var kor = 100;
console.log(kor); // 100
}
getScore();
console.log(kor); //에러
}
블록{}에 의해 변수의 범위가 달라지는 것을 변수의 scrope라고 한다. 전역 변수는 블록{} 내외에서
사용할 수 있기 때문에 동일한 이름으로 덮어 써질 수 있는 문제점이 있다. 이런 이유로 지역변수가 전역변수보다 안전하다.
함수 레벨 스코프와 블록 레벨 스코프
var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에서는 지역변수가 존재X
ES6에서 새로 추가된 let과 const는 블록{}이나 제어문 블록{}에서도 지역변수를 선언가능O
{
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); 에러
}
But 제어문 블록{} 안에서 let으로 선언된 변수는 지역 변수이기 때문에 제어문 블록{} 밖에서 호출할 수 없다.
{
// 함수의 전역변수
var sum1 = 10;
function add1(){
sum = 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 num = 60;
}
console.log('전역' + num1);
let num2 = 70;
if (num2 === 70) {
let num2 = 80;
console.log('지역 + num2');
}
console.log('전역' + num2);
}
결과 확인하기
'Javascript' 카테고리의 다른 글
배열 객체 join() / push() / pop() (5) | 2022.08.11 |
---|---|
요소 선택 (7) | 2022.08.06 |
함수 (9) | 2022.07.26 |
데이터 타입 (8) | 2022.07.26 |
조건문 (8) | 2022.07.26 |
댓글