[자바스크립트] 변수의 범위 : 지역 변수, 전역 변수

변수의 범위
자바스크립트에서는 객체, 함수 모두 변수(상수)입니다.

변수의 범위란 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다.

 

1. 지역변수
함수 내에서 선언된 변수를 가리킵니다. 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

 

2. 전역 변수
함수의 외부에서 선언된 변수를 가리킵니다. 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

---

1. 전역 변수

예제1)

1. 전역 변수 10을 만들기

var num1 = 10

2. 함수를 만들고(10출력, 20이 다시 전역 변수 num1에 들어가서 20이 된다. => 전역 변수 num1의 값을 재대입 10 -> 20)

function func1() {

console.log(num1)

num1 = 20

}

3. 함수 호출

func1()

4. 다시 console.log(num1)출력(20이 찍힘)

console.log(num1)

var num1 = 10

function func1() {
console.log(num1)
num1 = 20

func1()
console.log(num1)

 

예제2)

1. 새로 선언(지역 변수)을 했으니 함수를 호츨했을 때 "num2 : 40"이 찍힘

2. 콘솔에 찍으면 30이 찍힘 

var num2 = 30; //전역 변수

function func2() {
var num2 = 40; //새로 선언 - 함수 안에서 만들었기 때문에 - 지역 변수(전역 변수를 사용하지 않음)
console.log(`num2 : ${num2}`);  //지역 변수 출력
}
func2();
console.log(num2);    //전역 변수가 찍힘

 

- 제일 중요한 헷갈리는 부분 -

강의를 들어도 이해가 안가서 바로 이해 하려하는거 보다는 그냥 아 그렇구나 하고 넘어가기

결국 var를 이러한 이유 때문에 안 쓴다는 것.

 

콘솔에 찍으면 100이 출력 50이 찍혀야 맞지만 왠일인지 모르겠음. 그래서 var를 쓰지 않는 것.

var num3 = 50; //전역 변수

if (num3 == 50) {

//true

num3 = 100; //전역변수의 값이 바뀜, 전역변수 num3의 값을 재대입 : 50 -> 100

console.log(`num3 : ${num3}`);

}

console.log(num3);

 

이것 또한 100 출력

var num4 = 50;

if (num4 == 50) {

var num4 = 100;

console.log(`num4 : ${num4}`);

}

console.log(num4);

 

let으로 쓴다면

50이 찍히는 걸 확인(이게 정상)

 

위에 예제랑 분명 차이가 있다. 알아두기

let num5 = 50;

if (num5 == 50) {
let num5 = 100; //var의 버그
console.log(`num4 : ${num5}`);
}

console.log(num5);

---

결론 :  var를 쓰지 맙시다~!!!