[생활코딩] JS문법(함수)- 유효범위: 전역변수와 지역변수

• 자바스크립트를 함수형 언어라고도 합니다.
• 자바스크립트에서 함수란 모듈화의 근간이다. 
• 유효범위(scope)는 변수의 수명을 말합니다. 

함수를 사용할 때에는 전역변수와 지역변수를 제대로 사용해야합니다. 

• 함수 밖에서 변수를 선언하면 전역변수 - 애플리케이션 전역에서 사용가능한 변수이기 때문에 함수 내부에서 전역변수에 접근이 가능합니다. 
• 함수 내부에서 변수를 선언하면 지역변수- 애플리케이션 전역에서 사용불가능한 변수이며 함수 밖에서는 접근이 불가능합니다. 
• 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다
• const, let, var 이 쓰여있지않은 지역변수는 전역변수가 된다. -> 하지만 내부에 한번 const, let, var로 선언된 적이 있는 변수는 그 다음에 함수 내부 코드에서 사용할 때, 선언부를 적지 않아도 지역변수로 인식된다.

   const lv = "global variable";// 함수 소속되어있지 않기때문에 lv는 전역변수입니다.
        function lscope1() {
          let lv = "local variable";
          lv = "this is still local variable";
          alert(lv);
        }
        lscope1(); //output: this is still local variable
        alert(lv); //output: global variable

   

★전역변수는 웬만하면 사용하지 않는 것이 좋다. 전역변수를 사용해야한다면 명확한 이유가 있을 때만 사용하고 그 이유가 불분명할 경우는 지역변수를 사용하는 것이 바람직하다. 

function a() {
        const i = 0;
      }
      //for문의 조건식에 있는 변수 i는 함수 내부코드가 아니기때문에 전역변수이다.
      for (let i = 0; i < 5; i++) {
        a();
        document.write(i);
      }

• for문()안에 있는 조건식은 함수 내부에 있는 코드가 아니라서 여기서 변수 i는 전역변수를 나타낸다.
• 만일 a()함수 내부의 i변수가 const로 선언되어있지않고 i = 0; 으로 돼있다면 지역변수가 아닌 전역변수로 0이 설정된 것이다. 그렇게되면 for문 내부의 i값은 증가하지않고 계속 0으로 초기화돼서 무한반복을 발생시키다.

전역변수의 사용

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

   const MYAPP = {}; //MYAPP이라는 전역변수 하나만 생성했음
   //left, right의 의미가 calculator 과 coordinate에서 다르다. 
   //사용하기 전에 값을 초기화하는 작업
        MYAPP.calculator = {
          left: null,
          right: null,
        };
        MYAPP.coordinate = {
          left: null,
          right: null,
        };
       //calculator의 left는 좌항이고 right는 우항이다 
        MYAPP.calculator.left = 10;
        MYAPP.calculator.right = 20;
        function sum() {
          return MYAPP.calculator.left + MYAPP.calculator.right;
        }
        const result = sum();
        document.write(result);​

• 위의 코드는 전역변수 하나만을 생성해서 MYAPP 객체 내부에 속성으로 또 다른 객체를 만들고, 만들어진 속성을 사용하여 관리하고 있습니다. 

 

• 만들어진 코드에서 단 한줄의 전역변수도 싫다면 익명함수를 사용하여 실행하면 됩니다.

•   (function () {
          const MYAPP = {}; //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;
          }
          const result = sum();
          document.write(result);
        })();
        
        //익명함수 작성법
        // 1. 전체 코드를 function (){}에 묶어줍니다. 
        // 2. 전체를 () 소괄호로 다시한번 묶어줍니다.
        // 3. 맨뒤에 실행한다는 의미로 ()를 붙여줍니다.

• 주의: function 에 이름을 붙여서 함수명(); 으로 호출하게 되면 변수안에 함수가 들어가 있는 것으로 함수명이 전역변수가 되어버립니다. 
• 위와 같은 방법은 자바스크립트에서 로직을 모듈화하는 일반적인 방법입니다. 

유효범위의 대상(함수)

• 자바스크립트는 함수에 대한 유효범위만 제공합니다.
• 많은 언어들이 블록(대체로{,})에 대한 유효범위를 제공하는 것과 다른 점
• 아래의 코드는 JAVA의 코드이다. 이 코드는 잘못된 코드인데 그 이유가 for문 내부에 선언된 String 타입의 변수 name 이 for문 내부에서는 존재하지 않는 지역변수이기 때문이다.

//JS가 아닌 JAVA의 코드입니다!
for(int i = 0; i < 10; i ++ ){
        String name= "cong";     
    }
    System.out.println(name);

• JS(자바스크립트)의 지역변수는 함수의 {}중괄호 내부에서만 유효합니다.
• 그렇기 때문에 for문이나 if문 {}중괄호 내부에 쓰여진 변수는 지역변수가 아님을 의미하게 되고 해당 문의 {}중괄호 밖에서도 호출이 가능합니다. 
•  ※이슈: var가 아닌 let과 const 를 사용하니 chrome브라우저에서는 메세지가 blank(공백)로 뜨기도했습니다. 하지만 중괄호 밖에서 변수 name의 타입을 확인할 수 있었고 string 으로 제대로 결과가 나왔습니다. 이것으로 for문 밖에서도 변수 name 이 접근가능하다는 것을 알 수 있습니다. 

  for (let i = 0; i < 10; i++) {
  const name = "conding everyBody!"; 
  }
  console.log(name);

정적 유효 범위(static scoping or lexical scoping)

-자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위 혹은 렉시컬이라고 한다.

• 아래의 코드처럼 전역변수 i가 있고 지역변수 i가 있을 때, 지역변수를 갖고있는 a()함수를 실행시켰을 때 과연 함수b()는 어떤 값을 화면상에 표시할까? 정답은 전역변수 i인 5를 화면상에 출력한다. 
• 이유는 함수가 사용될 때가 아니라 정의될 때의 변수를 사용하기 때문이다. b()함수 내부에는 i라는 지역변수가 없고 그렇다면 다른 사용가능한 변수 i(전역변수)를 찾게된다. 그게 바로 전역변수 i(값이 5)이고 비록 function a()의 내부에 지역변수 i가 존재한다 할지라도 그것은 함수가 사용될 때의 흐름을 따라가는 것이므로 함수b()의 동작과는 무관하다.
• 누가 어떤 맥락에서 사용하든 정의된 시점에서의 변수를 바라본다면 똑같은 결과를 얻기 때문에 그것이 바로 정적 유효 범위인 것입니다.

   const i = 5; // 전역변수 i
      function a() {
        const i = 10; //지역변수 i
        b();
      }
      function b() {
        document.write(i); //그렇다면 여기의 변수 i 는 지역인가 전역인가?
      }
      a(); //정답은 전역변수 i