Chapter 6: Limiting Scope Exposure - hochan222/Everything-in-JavaScript GitHub Wiki

지금까지 변수와 Scope에 대해 알아보았다. 기초를 쌓았으니 조금 더 큰 범위인 프로그램 전체 관점과 범위에서 보자! 다양한 로직에서 변수에대한 Scope 제한이 필요한 이유를 알아보자.

Least Exposure

함수가 자기 자신의 Scope를 가지는건 이해된다. 하지만 Scope를 생성하기위해 block이 필요한 이유는 무엇인가?

소프트웨어 엔지니어링은 일반적으로 소프트웨어 보안에 적용되는 "최소 권한의 원칙"(POLP)이라고하는 기본 원칙을 명확히 한다. 그리고 현재 논의에 적용되는 이 원칙의 변형은 일반적으로 "Least Exposure"(POLE)로 표시된다.

POLP는 소프트웨어 아키텍처에 대한 방어 태세를 표현한다. 시스템 구성 요소는 최소한의 권한, 최소한의 액세스, 최소한의 노출로 작동하도록 설계되어야한다. 각 부분이 최소한으로 필요한 기능으로 연결되면 한 부분의 손상이나 실패가 나머지 시스템에 미치는 영향을 최소화하기 때문에 보안 관점에서 전체 시스템이 더 강력해지기 때문이다.

POLP가 시스템 수준 구성 요소 설계에 대한것이라면, POLE Exposure variant은 더 낮은 수준에 초점을 맞춘 것이다.

왜 프로그램에서 전역 변수 선언을 하면 안될까? 이유에 대해 생각할 필요가 있다. 다음 세가지 문제가 있다.

• Naming Collisions
  • 식별자가 전역으로 선언 될 경우 겹칠 가능성이있고 버그의 가능성을 증가시킬 수 있다.
• Unexpected Behavior
  • 다른 개발자가 의도하지 않은 방향으로 사용할 수 있으므로 예상치 못한 동작이 일어날 수 있다.
• Unintended Dependency
  • 지금 당장은 문제가 없지만 나중에 다른 개발자들이 리팩토링할 때 함부로 건드릴 수 가 없다. 코드 복잡도가 커진다.

변수/함수 범위 지정에 적용되는 POLE은 기본적으로 필요한 최소값만 노출하고 나머지는 가능한 한 비공개로 유지한다.

function diff(x,y) { 

  if (x > y) {
    let tmp = x; 
    x = y;
    y = tmp;
  }

  return y - x; 
}

diff(3,7);      // 4
diff(7,5);      // 2

POLE 원칙에 따르면 가장 가능한 범위 내부에 숨겨져야 한다. 그래서 tmp는 if문 scope안에서 let으로 선언 됐다.

Hiding in Plain (Function) Scope

var cache = {};

function factorial(x) { 
  if (x < 2) 
    return 1; 

  if (!(x in cache)) {
    cache[x] = x * factorial(x - 1); 
  }

  return cache[x]; 
}

factorial(6);
// 720

cache;
// {
// "2": 2,
// "3": 6,
// "4": 24,
// "5": 120,
//     "6": 720
// }

factorial(7);
// 5040

팩토리얼 함수이다. dp사용을 위해 cache를 전역으로 설정했다. 아래 코드로 우리는 함수 scope로 제한하는 것이 왜 필요한지를 알 수 있다.

// outer/global scope

function hideTheCache() {
  // "middle scope", where we hide `cache` 
  var cache = {};

  return factorial;
    
  // **********************

  function factorial(x) { 
    // inner scope
    if (x < 2) return 1; 
    if (!(x in cache)) {
      cache[x] = x * factorial(x - 1); 
    }
    return cache[x]; 
  }
}

var factorial = hideTheCache();

factorial(6);
// 720

factorial(7);
// 5040

변수를 숨기기 위한 목적으로만 사용되는 함수는 새 함수를 정의하는 대신 함수 표현식을 사용하는 것이 더 나은 해결책 일 수 있다.

var factorial = (function hideTheCache() { 
  var cache = {};

  function factorial(x) { 
    if (x < 2) return 1; 
    if (!(x in cache)) {
      cache[x] = x * factorial(x - 1); 
    }
    return cache[x]; 
  }

  return factorial; 
})();

factorial(6);
// 720

factorial(7);
// 5040

와... 생각도 못했다. 깔끔하네...

Invoking Function Expressions Immediately

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)

// outer scope

(function(){
// inner hidden scope
})();

// more outer scope

단, 화살표, 비화살표 함수에 따라 this 바인딩 변경등 return, this, break, continue가 있는 경우 원하는 동작이 이뤄지지 않을 수 있으니 이 경우 조심하거나 쓰지 않는것을 추천한다.

Scoping with Blocks

모든 {..} 중괄호 쌍이 block을 생성하는 것은 아니다. let과 const가 있어야 block이 생성된다.

• 객체 리터럴은 {..} 중괄호 쌍을 사용하여 키-값 목록을 구분하지만 이러한 객체 값은 block이 아니다.
• 클래스는 본문에 {..} 중괄호를 사용하지만 이것은 block이나 scope가 아니다.
• 함수는 본문 주위에 {..}를 사용하지만 기술적으로는 block이 아니다. 함수 본문에 대한 단일 문이다. 그러나 function scope이다.
• switch 문의 {..} 중괄호 쌍은 block/scope를 정의하지 않는다.

명시 적 독립형 {..} 블록은 항상 유효한 JS 구문 이었지만 ES6의 let/const 이전에는 범위가 될 수 없었다.

블록 범위 지정을 지원하는 대부분의 언어에서 명시 적 블록 범위는 하나 또는 몇 개의 변수에 대해 좁은 범위 조각을 만드는 데 매우 일반적인 패턴이다. 따라서 POLE 원칙에 따라 JS에서도 더 널리 퍼진이 패턴을 수용해야한다. (명시적) 블록 범위 지정을 사용하여 식별자 노출을 가능한 최소한으로 줄이자.

if (somethingHappened) {
  // this is a block, but not a scope

  {
    // this is both a block and an
    // explicit scope
    let msg = somethingHappened.message(); 
    notifyOthers(msg);
  }

  // ..

  recoverFromSomething();
}

명시적 블록 범위가 있는 또 다른 예:

function getNextMonthStart(dateStr) { 
  var nextMonth, year;
  {
    let curMonth;
    [ , year, curMonth ] = dateStr.match( 
            /(\d{4})-(\d{2})-\d{2}/
        ) || [];
    nextMonth = (Number(curMonth) % 12) + 1;
  }

  if (nextMonth == 1) { 
    year++;
  }

  return `${ year }-${ 
            String(nextMonth).padStart(2,"0")
       }-01`;
}

getNextMonthStart("2019-12-25"); // 2020-01-01

위에 curMonth는 다음 부분밖에 사용하지 않았기때문에 명시적으로 범위를 좁혀주었다.
POLE 원칙의 이점은 기본적으로 범위 노출을 최소화하려는 마음가짐을 습관으로 채택 할 때 가장 잘 달성된다. 프로그램이 확장됨에 따라 이 원칙의 이점은 많이질 것이다.

var and let

function diff(x,y) { 
  if (x > y) {
    var tmp = x;  // `tmp` is function-scoped
    x = y;
    y = tmp;
  }

  return y - x; 
}

var는 나타나는 위치에 관계없이 가장 가까운 둘러싸는 함수 범위에 연결된다. var가 블록 내부에 나타나는 경우에도 마찬가지이다. 따라서, 위 예제의 tmp는 함수 범위이다.

우리는 let을 사용하지않고 var을 사용하므로써 시각적으로 var을 사용한 변수가 함수 범위임을 간접적으로 알릴 수 있다. 따라서, 가장 현명한 방법은 let과 var을 둘 다 적절히 사용해서 가독성을 높이는 것이다.

var와 let을 모두 사용하라는 이 책의 권고는 분명히 논란의 여지가 있으며 대다수와 모순된다. "var is broken, let fix it"및 "never use var, let is the replacement"와 같은 주장을 듣는 것이 훨씬 더 일반적이다. 하지만, 이건 책의 의견도 일리가 있긴하다. 저런 측면이면 var와 let을 섞어 쓰는것도 나쁘지 않다고 생각한다.

Where To let?

정보: ES6 이전에는 허용하지 않았으므로 실제로 블록 범위를 지정할 수 없었다.

function diff(x, y) { 
  if (x > y) {
    // `tmp` is still function-scoped, but 
    // the placement here semantically
    // signals block-scoping
    var tmp = x;
    x = y;
    y = tmp; 
  }

  return y - x; 
}

tmp가 명시적으로 if문안에서만 쓰이므로 let으로 정의해주는 편이 좋다.

또한, 반드시 let을 사용해야하는 곳이 더 있는데

for (var i = 0; i < 5; i++) { 
  // do something
}

for문에서 i를 선언할 때 항상 let을 사용해야한다. 루프가 정의 된 위치에 관계없이 i는 기본적으로 항상 루프 내에서만 사용해야한다. 이 경우 POLE은 var 대신 let으로 선언해야 한다.

for (let i = 0; i < 5; i++) { 
  // do something
}

var를 let으로 바꿀 때 문제점이 되는 경우는 다음과같은 한가지 경우 뿐이다.

for (var i = 0; i < 5; i++) { 
  if (checkValue(i)) {
    break; 
  }
}

if (i < 5) {
  console.log("The loop stopped early!");
}

하지만 딱 봐도 코드 구조가 안좋아 보인다. 따라서 이런 경우는 따로 변수를 두어서 해결하자. 밑에 코드 참조

var lastI;

for (let i = 0; i < 5; i++) { 
  lastI = i;
  if (checkValue(i)) { 
    break;
  } 
}

if (lastI < 5) {
  console.log("The loop stopped early!");
}

What’s the Catch?

지금까지 var 및 매개변수는 function scope이고 let과 const는 block scope라고 했다. 단, 한 경우에 예외가있는데 catch문에서 이다.

ES3(1999 년)에 try..catch가 도입 된 이후로 catch 절은 추가 블록 범위 선언 기능을 사용했다.

try { 
    doesntExist();
}
catch (err) {
    console.log(err);
    // ReferenceError: 'doesntExist' is not defined
    // ^^^^ message printed from the caught exception

    let onlyHere = true;
    var outerVariable = true; 
}

console.log(outerVariable); // true

console.log(err);
// ReferenceError: 'err' is not defined
// ^^^^ this is another thrown (uncaught) exception

catch 절에 의해 선언된 err 변수는 해당 블록에 대한 블록 범위이다. catch절 블록은 let을 통해 다른 블록 범위 선언을 보유 할 수 있다. 그러나 이 블록 내부의 var 선언은 여전히 ​​외부 함수/전역 범위에 연결된다.

Function Declarations in Blocks (FiB)

블록 안에 직접 나타나는 함수 선언을 FiB라고 한다.

if (false) { 
  function ask() {
    console.log("Does this run?"); 
  }
} 

ask();

위 프로그램의 동작은 다음 세가지 중에 하나로 예측 할 수 있다.

1. ask() 호출은 ReferenceError 예외와 함께 실패한다. if문 block안에서 선언 됐기 때문이다.
2. ask() 호출이 TypeError 예외와 함께 실패한다. ask 식별자가 존재하지만 정의되지 않았기 때문에(if 문이 실행이 되지 않기 때문이다.) 호출 가능한 함수가 아니다.
3. ask () 호출이 올바르게 실행되어 "Does it run?"이 출력된다.

혼란스러운 부분은 JS 환경에 따라 다 다르게 동작한다. 이것은 기존의 레거시 행동이 예측 가능한 결과를 배반하는 몇 안되는 미친 동작 중 하나이다.

참고: 크롬에서는 2번이 나온다!

JS 사양에 따르면 블록 내부의 함수 선언은 블록 범위이므로 답은 (1)이어야 한다.
그러나 대부분의 브라우저 기반 JS 엔진 (Chrome에서 제공되지만 Node에서도 사용되는 v8 포함)은 (2)처럼 동작한다. 즉, 식별자는 if 블록 외부에 있지만 함수 값은 자동으로 초기화되지 않는다.

따라서, 다음 코드가 가능하다.

if (typeof Array.isArray != "undefined") { 
  function isArray(a) {
    return Array.isArray(a); 
  }
} else {
  function isArray(a) {
    return Object.prototype.toString.call(a)
  } 
}

성능이 약간 떨어질 수 있지만 전반적으로 더 나은 접근 방식의 코드는 다음과 같다.

function isArray(a) {
  if (typeof Array.isArray != "undefined") {
    return Array.isArray(a); 
  }
  else {
    return Object.prototype.toString.call(a)
            == "[object Array]";
  } 
}

다음 코드를 보자.

if (true) { 
  function ask() {
    console.log("Am I called?"); 
  }
}

if (true) { 
  function ask() {
    console.log("Or what about me?"); 
  }
}

for (let i = 0; i < 5; i++) { 
  function ask() {
    console.log("Or is it one of these?"); 
  }
}

ask();

function ask() {
  console.log("Wait, maybe, it's this one?");
}

다음 코드의 동작은 어떻게 되는가? 가장 하단의 ask가 호이스팅 돼서 "Wait, maybe, it's this one?"이 출력될 것 같지만 "Or is it one of these?"이 출력된다. ㅋㅋㅋㅋㅋㅋ
확실하다. FiB는 피하자. 이점보다 결점이 많다.

절대로 블록 안에서 함수를 선언하지말자.