JavaScript | 자바스크립트의 유효 범위, 스코프 (Scope)

유효범위(Scope)

 

변수나 함수는 이름을 부여하여 의미를 갖게 됩니다. 만약 이름이 없다면, 변수나 함수는 그저 하나의 메모리 주소에 지나지 않습니다. 그래서 "이름:값"의 대응표를 만들어 사용합니다. 이 대응표의 이름을 가지고 값을 저장하고 가져와 사용합니다. 이 대응표의 충돌을 막기 위해 유효범위(Scope)라는 규칙을 만들어 사용하게 됩니다.

 

자바스크립트 또한 스코프 규칙을 가지고 있는데, 자바스크립트(ES6)는 함수 레벨, 블록 레벨의 렉시컬 스코프 규칙을 따릅니다.

 

 

1. 함수 레벨 스코프 (Function Level Scope)

 

자바스크립트에서 var 키워드로 선언된 변수나, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 갖습니다. 즉 함수 내부 전체에서 유효한 값을 가지게 됩니다.

function functionLevelScrop() {     if (true) {         var myScope = "function level scope";     }     console.log(myScope); // 출력: function level scope }   functionLevelScrop();

코드 1 실행 결과에서 보시는 것 처럼 if 안에서 생성한 myScope가 console.log로 출력 되는 것을 확인 할 수 있습니다.

 

만약 var myScope가 블록 레벨 스코프라면, if문이 끝날 때, myScope가 없어지고, console.log에서 에러가 발생할 것입니다. 하지만 var myScope는 함수 레벨 스코프이기 때문에 functionLevelScope 함수 내부 어디에서든 사용할 수 있습니다.

 

 

2. 블록 레벨 스코프 (Block Level Scope)

 

ES6에서 let, const 키워드는 블록 레벨 스코프 변수를 만들어 줍니다.

function blockLevelScrop() {     if (true) {         let myScope = "block level scope";         console.log(myScope); // 출력: block level scope     }     console.log(myScope); // Error }   blockLevelScrop();

let myScope를 if 문 안에 선언하였기 때문에, if 문 안 console.log로 값이 출력이 되지만, if 문 밖에서는 console.log로 출력 하자 에러가 나타나는 것을 확인 할 수 있습니다.

 

 

3. 렉시컬 스코프 (Lexical Scope)

 

렉시컬 스코프는 정적 스코프(static scope) 라고도 합니다.

 

렉시컬 스코프는 소스코드가 작성된 그 문맥에서 결정됩니다. 예를 들어보겠습니다.

var x = "global";   function func1 () {     var x = 'local';     func2(); }   function func2() {     console.log(x); }   func1(); // 출력: global func2(); // 출력: global