함수 지향

유효 범위(Scope)는 변수의 수명을 의미한다.

자바스크립트의 핵심적인 도구는 함수다. 또한, 자바스크립트에서 함수는 객체를 이해하는데 가장 중요한 기초를 이룬다.

1. 유효범위

아래의 코드에서 함수 fscope은 함수 밖의 vscope에 접근할 수 있음을 보여준다.

var vscope = 'global';//전역변수
function fscope(){
    alert(vscope);
}
fscope();

아래의 코드에서 변수 vscope을 확인해보면, alert는 자기 자신이 속해있는 함수 안에 있는 vscope 값을 출력한다.

var vscope = 'global';//전역변수
function fscope(){
    var vscope = 'local';//지역변수
    alert(vscope);
}
fscope();

지역변수는 함수 안에서만 접근한다. 함수 밖에서 지역변수를 사용하면 undefined 라고 뜬다.

var vscope = 'global';//전역변수
function fscope(){
    var vscope = 'local';//지역변수
}
fscope();
alert(vscope);//실행결과는 'global'이다.

아래의 코드는 전역변수를 함수내에서 변경한 경우이다.

var vscope = 'global';//전역변수
function fscope(){
    vscope = 'local';//전역변수를 변경하는 것을 의미한다!
}
fscope();
alert(vscope);//실행결과는 'local'이다.

아래의 코드는 전역변수를 조작하는 코드이다.

var vscope = 'global';//전역변수
function fscope(){
    var vscope = 'local';
    vscope = 'local';//지역변수에 값을 할당하는 것을 의미한다.
}
fscope();
alert(vscope);

전역변수를 사용하는 이유를 분명히 이해하고, 그렇지 않다면 전역변수를 사용하는 것을 지양해야한다.그러므로 변수를 선언할 때는 언제나 var를 사용하는 것이 바람직하다.

유효범위의 필요성

1. 지역변수의 사용

function a (){
    var i = 0;
}
for(var i = 0; i < 5;i++) {
    a();
    document.write(i);
}

실행결과

01234

2. 전역변수의 사용

function a (){
    i = 0;//전역변수를 의미한다.
}
for(i = 0; i < 5;i++) {//여기서 i는 전역변수를 의미한다.
    a();
    document.write(i);
}

실행결과는 전역 변수 i가 0이라는 값에서 변하지 않기 때문에 for문은 무한루프에 빠지게 된다

전역변수를 사용하는 법

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

var MYAPP = {}
MYAPP.calculator = {
    'left' : null,
    'right' : null
}
MYAPP.coordinate = {
    'left' : null,
    'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum() {
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());

익명함수 사용(모듈화 기법)

(function() {
var MYAPP = {}//함수 안의 변수가 되기 때문에 지역변수가 된다.
MYAPP.calculator = {
    'left' : null,
    'right' : null
}
MYAPP.coordinate = {
    'left' : null,
    'right' : null
}
MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;
function sum() {
    return MYAPP.calculator.left + MYAPP.calculator.right;
}
document.write(sum());
}();//함수 정의와 호출을 동시에 한다.)

함수 이름을 명명하고 호출해도 되지만, 함수를 호출할 때 변수 안에 함수가 들어가있는 것이기 때문에 결국 이것 자체가 전역변수가 되게 된다.

유효번위의 대상(함수)

자바스크립트는 함수에 대한 유효범위만을 제공한다. 즉, 함수 내에서 정의된 변수만이 지역변수이고, for문이나 if문에서 사용되는 변수는 전역변수의 의미이다.

for(var i = 0; i < 1;i++) {
    var name = 'coding everybody';
}
alert(name);//실행 결과 : coding everybody

하지만, 자바에서는 허용되지 않는다. name은 지역변수로 for문 안에서 선언되었는데 이를 for문 밖에서 호출하고 있기 때문이다.

for(var i = 0; i < 1;i++) {
    String name = 'coding everybody';
}
System.out.println(name);

정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 랙시컬(lexical scoping)이라고 한다.(클로저와 연관된 개념이다.)

아래의 코드에서 함수a 내에서 호출된 함수 b는 어떤 i값을 가져올 것인가?

자바스크립트의 정적 유효범위에 따라, 함수 b가 정의된 시점에서 전역변수 var i = 5; 의 5 값을 가져오게 된다. (함수가 사용될 때가 아니라 정의된 시점이다.)

var i = 5;
function a (){
    var i = 10;
    b();
}
function b() {
    document.write(i);
}

a();