[JS] 14_01강 유효범위

전역변수 vs 지역변수

유효범위란? '변수의 수명'을 의미

지역변수는
함수 내에서 변수를 선언한 경우 (local)
전역변수는
함수 밖에서 변수를 선언한 경우
즉, 애플리케이션 전역에서 접근이 가능한 변수이다. (global)

// 지역변수 vs 전역변수
// Ex01
var vscope = 'global';
function fscope(){
    var vscope = 'local'
    alert(vscope); // local 출력, 가까운 곳에서 선언한 변수 출력
}
fscope();

// Ex02
var vscope = 'global';
function fscope(){
    var vscope = 'local';
    var lv = 'local variables';
    alert(lv); // local variables
}
fscope();
alert(lv); // Undefined, 지역변수이기 때문에 함수 내에서만 호출 가능함

// Ex03
var vscope = 'global';
function fscope(){
  // 1) var 사용O
    var vscope = 'local';
  // 2) var 사용X
 // vsscope = 'local'; -- 전역변수
}
fscope(); 
alert(vscope); // 1) global 2) local
// **var을 사용하지 않는 지역변수는 전역변수가 된다.

// Ex04
var vscope = 'global';
function fscope(){
// 지역변수 선언 후, 전역변수 선언했을 경우  
    var vscope = 'local';
    vsscope = 'local'; // 우선적으로 지역변수로 지정되었기 때문에, 해당라인에서 vsscope은 지역변수의 값을 할당하게 된다.
}
fscope(); 
alert(vscope); // global

cf. 전역변수는 사용하지 않는 것을 권장한다.
→ 여러가지 이유로 그 값이 변경될 수 있기 때문!

---

유효범위의 효용

// Ex01 
// Ex01과 Ex02의 차이점을 이해해보자.
function a (){
    var i = 0; // *지역변수
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i); // 01234
}

// Ex02
// 만약 함수a 내부의 지역변수를 선언할 때, var을 사용하지 않았다면? (아래 예제)
function a (){
    i = 0; // *전역변수
}
for(var i = 0; i < 5; i++){
    a();
    document.write(i); // 무한루프 발생
// 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.
}

---

전역변수의 사용

불가피하게 전역변수를 사용해야 하는 경우에는
1) 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용하거나,
2) 전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출한다.

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());
}())

---

JS에서의 유효범위의 대상

JS : 함수에 대한 유효범위를 제공
(=자바스크립트의 지역변수는 함수에서만 유효하다.)

// JavaScript
for(var i = 0; i < 1; i++){
    var name = 'coding everybody'; // 전역변수
}
alert(name); // coding everybody
// 즉, 자바스크립트의 지역변수는 함수에서만 유효하다.

// Java
for(int i = 0; i < 10; i++){
    String name = "sooyeon"; // for문에 대한 지역변수, for문의 중괄호{..}내에서만 유효
}
System.out.println(name); // error, 여기서 name은 존재하지 않는 변수이기 때문에

---

정적 유효범위

JS : 함수가 선언된 시점에서의 유효범위를 갖는다.
이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.

var i = 5;

function a(){
    var i = 10;
    b();
} 
function b(){
    document.write(i); // 5, 함수가 정의된 시점에서의 유효범위를 가짐
}
 
a(); 

---

📌 핵심포인트
- 전역변수 vs 지역변수 차이점 알 것
- var을 사용하지 않는 지역변수는 전역변수가 된다.
(전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제가 발생됨)