[JS ES6]-[6] 전역변수와 클로저 핵심만 이해하기

안녕하세요

이번 글에서는 자바스크립트에서의  전역변수와 클로저  핵심만 알려드리겠습니다.

 

썸네일

1. 전역변수 개념

자바스크립트에선 외부의 변수를 참조할 수 있는 개념을 클로저라고 합니다.

var name = 'kim';

function say_name(){
  console.log(name);  //kim
}

say_name();

 

say_name 함수 바깥에 있는 name 변수를 참조했습니다.

만약, say_name 함수 안에 name 변수가 있으면 그 변수를 참조했겠지만

없으면, 바깥에 변수를 참조하죠

이 클로저라는 개념을 이용해, 어디서든 참조할 수 있는 전역변수를 만들 수 있습니다.

 

2. 전역변수 예시

전역변수는 script태그 열고 변수를 만들면 됩니다.

<script>
  var age = 20;

  function say_age(){
    console.log(age);
  }
</script>

 

그럼 밑에 있는 함수, if , for 등에서 전부 age라는 변수를 사용 가능합니다.

var로 전역변수를 만들면 window객체에 저장됩니다. (let 말고 var만)

<script>
  var age= 20;

  console.log(age);  //20
  console.log(window.age);  //20
</script>

 

전역변수인 것을 더 명확하게 하고 싶으면 window객체로 저장하는 게 더 효과적입니다.

(node.js 환경에선 window객체 대신 global객체 사용)

<script>
  window.name= 'kim';  //전역변수 생성
  console.log(window.name);  //전역변수 출력
  window.name= 'sang';  //전역변수 변경
</script>

 

 

3. 전역변수 응용

let one = 1;
var two = 2;

window.one = 4;
window.two = 8;

console.log(a + b);  //9

위에 예시에서 9가 출력됩니다.

let은 블록범위를 가지고 var는 함수범위를 가지고 있습니다.

변수를 참조할 때는, 범위가 가깝고 작은 곳에서 참조하는데

let이 더 작은 범위를 가지고 있기 때문에 let변수를 먼저 참조합니다.