[JavaScript ES6]유효범위 (지역변수와 지역변수), 정적 유효범위

✨유효 범위(Scope)란?

자바스크립트에서 객체나 함수는 모두 변수(variable)입니다.

변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다.

 

🌟지역(local) 변수와 전역(global) 변수

하단의 코드를 통해 지역변수와 전역 변수를 비교해보자

let vscope = 'global';  // 전역변수
// 애플리케이션 전역에서 접근 할 수 있는 변수
function fscope(){
  let vscope = 'local'; // 지역변수
  //함수의 중괄호 내에서만 접근 할 수 있는 변수
  console.log(vscope);
}
fscope();
//fscope 함수는 같은 함수 안에 있는 vscope를 출력하게된다.

🟣전역 변수(global)

let vscope = 'global';
function fscope(){
  console.log(vscope);
}
function fscope2(){
  console.log(vscope);
}
fscope();//출력 : global
fscope2();//출력: global

🟣지역변수(local)

let vscope = 'global';
function fscope(){
  let vscope = 'local';
  let lv = 'local variables';
  console.log(vscope);
}
fscope();//출력 local
console.log(lv);//출력: undefined. 이유는 lv(지역변수)는 함수의 중괄호 내에서만 접근이 가능하다.

📢이때 중요한 점은 전역 변수와 지역변수 앞에 (let)을 선언해주는 것이다.

만약 함수 내의 변수에 var을 빼고, 변수만을 선언하면 전역 변수의 값을 가져올 것이다.

하단의 코드를 한번 보자

let vscope = 'global'; //전역에 변수를 생성해줌(전역변수)
function fscope(){
  let vscope = 'local';//지역내에 변수를 생성해줌(지역변수)
  console.log(vscope);
}
fscope();

📢변수를 선언할 때는 꼭 let을 붙이는 것을 습관화해야 한다.

전역 변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용해야 한다.

그게 아니라면 지역변수를 이용해 프로그래밍을 작성하는 것이 좋다.(버그를 막고 로직의 재활용을 위함)

---

❗ 유효 범위의 필요성

이름의 충돌, loigic의 충돌을 막기 위함

function a(){
  let i =0; //let을 제거하게된다면 i 값은 전역변수가된다.
}
for(let i = 0 ; i <5 ; i++){
  a();
  console.log(i);
}//함수 i의 값과 for문 안의 i값은 동일하기때문에 i는 계속 0으로 초기화된다. 때문에 프로그램은 멈추지 않고 계속 돌아갈 것이다.

상단 함수 안에 i 앞에 let이 제거된다면 for문 안의 i 값은

어떤 함수에도 소속되지 않은 코드가 되기 때문에 전역 변수가 된다.

---

❗ 전역 변수의 사용

전역 변수를 불가피하게 사용해야 하는 경우는 하나의 객체를 전역 변수로 만들고

객체의 속성으로 변수를 관리하는 방법을 사용한다.

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;
}
console.log(sum());

(하단) 제이쿼리에서 많이 사용하는 라이브러리 방식

//전역변수를 사용하고 싶지 않다면 하단과 같이 익명함수를 호출한다.
(function(){
    let 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;
    }
    console.log(sum());//함수 선언을 통해 전역 변수가 아닌 지역변수로 변경된 것을 볼 수 있다.
}())

📢여기서 잠깐!📢 

잠시 유효 범위의 대상(함수)을 알아보자

지역 범위를 선언할 수 있는 곳은 함수로 제한된다.(다른 언어와 차별된 점이다.)

JS에선 함수의 중괄호 내에서 선언된 변수만이 지역변수가 되는 것이다.

for문 while문 등에서 선언되는 변수는 지역변수가 되지 않는다.

---

❗ 정적 유효 범위란?

자바스크립트는 함수가 선언된 시점에서 유효 범위를 가진다.

이러한 유효 범위의 방식을 정적 유효 범위(static scoping), 혹은 렉시컬(lexicla scoping)이라고 한다.

let i =5;

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

function b(){
  console.log(i);//b함수내에 지역변수 i가 없기 때에 전역 변수를 찾아 사용한다.
}
a();

변수가 사용될 때가 아닌 변수가 정의될 때 고정적으로 전역 변수가 사용되게 된다.(정적 유효 범위)

 

출처: 드림코딩 엘리, 생활코딩, DeepDive