Scope ( 스코프 )

Scope

프로그래밍 언어에서의 스코프의 기원을 찾기 위해선 우선 변수의 기원 부터 알아야한다.

초창기 프로그래밍 언어에서의 변수라함은 어떠한 값을 가지고 있는 메모리의 주소를 나타내는 것 이었다.

메모리의 주소라함은 0xFExx.... 등과 같이 사람에겐 매우 불친절한 표기법으로 이를 조금더 인간친화적으로 나타내기위해 도입된 개념이 바로 변수라는 개념이다.

변수는 메모리의 주소값을 프로그래밍을 하는 사람이 특정 이름으로 지정하여 저장해두는 값으로 프로그래밍 중 어디에서나 이 이름을 호출함으로서 특정 메모리에 저장되어 있는 값을 참조할 수 있게 되었다.

그리고 같은 프로그래밍 내의 변수 이름의 중복된 사용을 방지하기 위해 프로그램 전체에서 사용하는 변수 값들을 모아두는 변수 리스트 같은 것을 작성하여 변수명의 중복을 미연에 방지하도록 하였다.

그렇지만, 프로그래밍 전체의 변수명을 하나의 리스트만을 가지고 중복을 방지하기엔 프로그래의 규모가 커져감과 동시에 점점더 힘들어 졌고, 그래서 도입된 개념이 스코프라는 개념이다.

즉, 스코프는 이 변수, 함수가 사용 가능한 일정 영역, 공간을 일컫는 말이다.

스코프는 javascript 이외에도 C, JAVA, PHP 등과 같은 여타 다른 언어들도 가지고 있는 개념이다.

이 포스팅에서는 javascript의 스코프에 대한 이야기를 다뤄볼까 한다.

javascript 에서의 Scope

javascript에서 scope는 2가지 종류가 있다.

• Function Level Scope
• Block Level Scope

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

우리가 가장 일반적으로 사용하고 있는 스코프이며, 가장 많이 알고 있는 스코프이다.

var 키워드를 사용하여 생성된 변수는 해당 함수 안에서라면 어디서든 사용 가능하다.

간단하게 아래의 예제를 살펴보자

var name = "seongjookim";
function test(){
    var name = "suzy";
  console.log(name);  // suzy;
}
console.log(name) // seongjookim;

이 예제에서의 결과가 함수 레벨의 스코프를 가장 쉽게 보여주는 예제이다.

javascript를 사용함에 있어 가장 주의해야하는 점이 전역변수와 지역변수의 구분 및 올바른 사용이다.

또다른 예제를 하나 더 보자

var name = "seongjoo";
function test(){
    name = "suzy";
  console.log(name); // suzy
}
test();
console.log(name); // suzy

이 예제에서 3번 라인을 보면 첫번째 예제와는 다르게 var 키워드 없이 바로 변수를 만들고 있다.

javascript 에서 var 없니 변수를 생성하게 되면 Global 변수를 만든다는 의미가 된다.

즉 javascript 전체에서 사용할 수 있는 변수를 만들게 되고, 기존에 1번라인에서 정의해둔 값을 덮어써 버리게 된다.

이것이 javascript 에서 변수를 생성할 시에 var 키워드 사용을 권장하는 이유이자, 주의해야하는 이유이다.

Block Level Scope ( 블럭 레벨 스코프 )

블럭 레벨 스코프라함은 기존의 함수 레벨보다 조금더 세분화 하여 for, if 등과 같이 작은 분기별로 스코프를 사용하는 것이다.

이 개념은 기존의 javascript 에서는 없었던 개념이며, 이변에 새롭게 도입된 ECMA Script 6( 이하 ES6 ) 에서부터 사용 가 능하다.

let 이라는 키워드를 사용함으로써 기존의 함수레벨보다 조검더 세세한 변수의 스코프 지정이 가능하게 되었다.

function test(){
    var i = 100;
    for( let i = 0; i < 10; i++ ){
      console.log(i); // 0 ~ 9
  }
  console.log( i ); // 100
}
test();

위 예제 3번 라인에서 보이는 let 키워드가 이번에 새롭게 도입된 블럭 레벨 스코프를 지원해주는 키워드이다.

기존에 선언된 100 있지만 for 문안에서만  사용가능한 함수를 새롭게 만들어 사용하는 것이다.

이번 포스팅에서는 javascript의 두가지 scope 에대하여 알아보았다. ES6가 출범한 이후로 let 키워드를 점점더 권장하는 추세이기는하나, 아직 모든 표준브라우저가 ES6를 완벽하게 대응하지 않는 현실상 아직까진 var와 let의 그 어딘가에서 적절하게 사용해 가는 것이 좋지 않을까 싶다. 아 물론 Global이 무조건 나쁜건 아니니, 어찌됫건 사용자가 사용하기 나름이라는 의미이다.