스코프

Achievement Goals

• 스코프의 의미와 적용 범위를 이해할 수 있다
• 스코프의 주요 규칙을 이해할 수 있다
  • 중첩 규칙
  • block scope와 function scope
  • 전역 스코프와 지역 스코프
  • 전역 변수와 지역 변수간의 우선 순위
  • let, const, var 의 차이
  • 전역 객체(window)의 이해

 

스코프의 정의와 규칙

  변수 접근 규칙에 따른 유효 범위

   -> 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가

 

let name = '애플콕';

function showName() {
  let name = '코카콜라'; // 지역 변수
  console.log(name); // 두번째 출력
}

console.log(name); // 첫번째 출력
showName();
console.log(name); // 세번째 출력

이 예제의 출력의 결과는 

애플콕

코카콜라

애플콕

의 순서대로 출력이 된다.

 

그렇다면 아래의 예제는 어떨까?

 

let name = '애플콕';

function showName() {
  name = '코카콜라'; // 지역 변수
  console.log(name); // 두번째 출력
}

console.log(name); // 첫번째 출력
showName();
console.log(name); // 세번째 출력

이 예제의 출력 결과는

애플콕

코카콜라

코카콜라

 

의 출력을 갖는다. 위의 예제와는 다르게 함수내에 let 을 선언하지 않았기 때문이다. 이는, '애플콕'이라는 값으로 할당하고 있는 name 변수는 전역에 선언된 name 변수를 그대로 사용하겠다는 의미입니다.

 

var키워드와 let 키워드

var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다. 따라서, var 보다는 let 으로 변수 선언을 하는 것을 권장합니다.

var 키워드보다 let 키워드가 안전한 이유는 또 있습니다. let 키워드는 재선언을 방지합니다. 실제로 코딩할 때에 변수를 재선언해야 할 필요가 있을까요? 대부분 이런 경우는 버그입니다.

 

const 키워드

const 라는 키워드도 있습니다. 변하지 않는 값, 곧 상수(constant)를 정의할 때에는 const를 이용합니다. const는 값의 재할당이 불가능합니다. 값을 재할당할 경우 TypeError를 내므로, 의도하지 않은 값의 변경을 막을 수 있습니다.