자바스크립트 scope

2019-09-16
#javascript

es6문법 관련하여 정리를 하다가 어렴풋이 알고 있었던 scope에 대해 재정리를 해보았다.

scope는 범위라는 뜻으로 프로그래밍 언어에서 변수나 메소드의 참조 범위를 의미한다.
자바스크립트에는 전역 스코프와 지역 스코프가 존재한다.
전역 스코프(global scope): script 내 어느 곳이든 참조 가능
지역 스코프(local scope): 정의된 함수 내에서만 참조 가능, 함수 외부에서는 접근 불가


javscript scope의 특징은 다음과 같다.


  • 변수명 중복 허용

  • var 키워드 생략

  • function scope

  • lexical 특징

  • 변수 호이스팅


변수명 중복 허용

변수명이 중복되어도 에러가 나지 않는다.

1
2
3
4
5
6
7
8
function A() {
  let a = 10;
  if (true) {
    let a = 3;
    console.log(a); // 3
  }
  console.log(a); // 10
}


var 키워드 생략

var 키워드 생략시 전역변수로 정의가 된다.

1
2
3
4
5
6
var x = 'global';
function ex() {
  x = 'change';
}
ex();
alert(x); // 'change'


function scope

자바스크립트는 블록 단위가 아닌 함수단위로 scope를 정의한다. (var 해당)
함수 스코프 레벨의 변수인 var는 메모리 누수, 디버깅이 어렵고 가독성이 떨어지는 문제점이 있다.
이러한 문제점울 피하고자 블록 스코프 변수인 let,const가 탄생했다.
블록 스코프는 {}로 경계를 구분하여 자신이 정의한 블록과 하위 블록에서만 접근이 가능하다.

1
2
3
4
5
6
7
8
9
10
11
function A() {
  var a = 0;
  if (true) {
    var b = 10;
    for (var c = 0; c < 5; c ++) {
        console.log(c); // 0,1,2,3,4
    }
    console.log(c); // 5
  }
  console.log(b); // 10
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function A() {
  let a = 0;
  if (true) {
    let b = 10;
    for (let c = 0; c < 5; c ++) {
        console.log(c); // 0,1,2,3,4
    }
    console.log(c); // Uncaught Reference Error: c is not defined
  }
  console.log(b); // 10
}


let foo = "I'm foo";
if(true) {
    let bar = "I'm bar";
    console.log(foo);   //I'm foo
    console.log(bar);   //I'm bar
}

console.log(foo);   //I'm foo
console.log(bar);   //Uncaught ReferenceError: bar is not defined.


lexical 특성

스코프는 함수 실행 시점이 아닌 정의 시점에서 생성된다.
정적 스코프라고 한다.

1
2
3
4
5
6
7
8
function A() {
  var a = 10;
  B();
}

function B() {
  return a; // Uncaught Reference Error
}


변수 호이스팅

변수의 정의가 선언과 할당으로 분리되는 것을 의미한다.
변수가 함수내에 정의되면 선언이 함수 최상단으로 이동
변수가 전역에서 정의되면 선언이 컨텍스트 최상단으로 이동
호이스팅은 함수 선언 방식에서만 적용가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function A() {
  console.log(name); // undefined
  let name = 'ji';
  console.log(name); // ji
}


// 실제로 코드 실행시 
function A() {
  let name;
  console.log(name); // undefined
  name = 'ji';
  console.log(name); // ji
}

추가적으로 변수 외에도 함수 선언문만 호이스팅이 가능하다.
함수 표현식은 호이스팅이 되지 않는다. 그 이유는 마찬가지로 변수에 함수를 초기화 시키기 때문에
선언문이 호이스팅 되어 상단으로 올려진다 해도 함수가 아닌 변수로 인지되기 때문이다.

1
2
3
4
5
// 함수 선언문
A();
functio A() {
  console.log('hi');
}

1
2
3
4
5
// 함수 표현식
hositing(); // hositing of object is not a function
let hoisting = functio A() {
  console.log('hi');
}