생활코딩 자바스크립트 기본 - 함수지향(유효범위)

본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의

---

유효범위

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

var vScope = 'global'
function fScope(){
    document.write(vScope);
}
fScope();

var vScope = 'global'
function fScope(){
    var vScope ='local';
    document.write(vScope);
}
fScope();

둘의 차이는 왜 나타날까? document.write는 자신에게서 가까운 vsCope화면에 보이기 때문이다.

즉, 함수 내에서 정의된 변수를 출력한다.

함수 내에 vScope인 local은 함수 내에서만 영향을 줄수 있지만, 함수 밖에 vScope인 global은 코드 전체에 영향을 줍니다.
이러한 개념을 지역변수(local variable), 전역변수(global variable)라고 합니다. 

var vScope = 'global'
function fScope(){
    var vScope ='local';
    document.write(vScope);
    var lv='local variable';
}
fScope();
document.write(lv);

함수 내에서 선언한 변수인 lv는 함수 외부에서 참조할 수 없다.

다음코드는 오류가 난다.

 

var vScope = 'global'
function fScope(){
    vScope ='local';
}
document.write(vScope);
fScope();

다음 코드는 global이 출력된다.

var vScope = 'global'
function fScope(){
    vScope ='local';
}
fScope();
document.write(vScope);

다음 코드는 local이 출력된다. 여기서 우린 함수내에 var이 없는 vScope을 유심히 봐야한다.

fScope가 실행되고 var을 지정하지 않는 vSope이 전역변수 vScope에 영향을 줍니다.

 

코드에 영향을 줄수 있기 때문에 확실한 이유가 없다면 지역변수를 사용해야한다.

함수에 영향을 주지 않기 위해서 var사용을 자주해 코드에 영향을 주지 않아야 한다.

 

유효범위의 필요성

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

다음 경우 페이지에 0 1 2 3 4가 정상적으로 출력된다.

하지만 a함수에서 var i의 var을 제거하면 프로그램이 무한 로딩에 걸리게 된다.

 

이유는 for문 안에 i가 실행되고, 1을 증가해도, a함수를 만나면 다시 0이 되기 때문에 무한하게 반복된다.

var의 유무의 중요성이다.

함수내에 var가 지워진 변수는 같은 이름의 지역변수에 영향을 준다.

 

유효범위의 대상 (함수)

for (var i =0;i<10;i++){
    var name = "LeeWang";
}
document.write(name);

다음의 경우 페이지에 LeeWang이 출력된다.

for(int i = 0 ; i < 10 ; i++){
	String name = "LeeWang";
    }
System.out.println(name);

다음은 실행되지 않는다.

 

이유는 자바스크립트가 아닌 언어에서는 중괄호 안에 선언된 변수는 지역변수 여겨서 중괄호 외부에 영향을 끼칠수 없기 때문이다.

하지만 자바스크립트에서는 중괄호가 기준이 아니라 함수내부에서 선언 될 경우만 지역변수로 여긴다.

 

정적 유효범위

자바스크립트에서는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위를 정적 유효범위(static scoping)라한다.

var i= 5;

function a(){
    var i = 10;
    b();
}

function b(){
    document.write(i);
}
a();

다음의 출력 값은 어떻게 될까?

a가 실행되고 a함수 안에 b함수가 실행된다.

이때 document.write(i)는 함수 내부에 i가 있는지 확인합니다.

지역변수가 존재하지 않기 때문에 전역변수를 본다.

a함수에 i는 a함수 내에 지역변수 이기 때문에 b함수에 영향을 주지 않는다.

그래서 출력 값은 5이다.