JavaScript - 글로벌 변수와 로컬 변수

- 글로벌 변수 : 함수 밖에 선언, 전역에서 사용이 가능

- 로컬 변수 : 함수 내에 선언, 함수 내에서만 사용 가능, 함수 종료와 함께 제거된다.

소스

var msg = "글로벌 변수";
console.log("msg", msg);

function fn() {
  var localMsg = "로컬 변수";
  console.log("msg - fn", msg);
  console.log("localMsg - fn", localMsg);
}

fn();
console.log("localMsg - fn", localMsg); // localMsg is not defined
// localMsg 값을 사용하기 위해서는 fn() 함수내에 정의된 localMsg가 리턴값이 있는 함수여야 함

결과

msg 글로벌 변수
msg - fn 글로벌 변수
localMsg - fn 로컬 변수
localMsg is not defined 에러발생

- 글로벌 변수와 로컬 변수는 각각 독립적으로 관리된다.

- 전역 컨텍스트 - 글로벌 변수
            - 함수내 선언된 로컬 변수에 없을 경우 전역에서 찾는다. (scopechain)

소스

// 전역 컨텍스트 영역
var msg = "글로벌 변수";
var msg2 = "글로벌 변수2";
console.log("msg", msg);

// fn 함수에 대한 컨텍스트 영역 생성
function fn() {
    var msg = "로컬변수"; // 글로벌변수에 영향이 가지 않는다. fn 함수 내에서만 사용, 
    console.log("msg - fn", msg)
    console.log("msg2 - fn", msg2) // fn 컨텍스트 영역에 없으니 전역 컨텍스트에서 찾는다
}

fn();

console.log("msg fn 호출 후", msg);

결과

msg 글로벌 변수
msg - fn 로컬변수
msg2 - fn 글로벌 변수2
msg fn 호출 후 글로벌 변수