응용-글로벌 변수와 클로져 함수

글로벌 변수

클로져 함수

캐싱으로 예를 들어보겠다.

function addTo80(n) {
  return n + 80; // 이 함수 실행에 10초가 걸린다고 가정해보자.
}

let cache = {};
function memoizedAddTo80(n) {
  if (n in cache) {
    return cache[n];
  } else {
    cache[n] = addTo80(n);
    return cache[n];
  }
}

위 코드의 문제는 let cache가 글로벌 변수로 선언되어 있기 때문에 접근을 방지해보자.

글로벌 변수를 클로져 함수 안으로

function addTo80(n) {
  return n + 80; // 이 함수 실행에 10초가 걸린다고 가정해보자.
}

function memoizedAddTo80() {
  let cache = {};
  return function(n) {
    if (n in cache) {
      return cache[n];
    } else {
      cache[n] = n+80;
      return cache[n];
    }
  }
}

const memoized = memoizedAddTo80();
memoized(5); // 85

고차함수와 클로져 함수를 이용하여 memoizedAddTo80 함수 내부에 cache 객체를 보관함과 동시에 다른 함수를 리턴 시키고있다. 그리고 리턴되는 함수에서 cache에 접근하고 있는데 리턴되는 함수는 memoizedAddTo80 함수의 child scope 이기 때문에 cache 변수에 접근 할 수 있다.
이처럼 글로벌 변수 환경의 오렴을 최소화 시키면서 캐싱을 이용 가능하다.

추가사항 ES2022

위의 내용에서 클로져 안의 let cache 변수는
조작해서 변경 될 수 없습니다.

이와 비슷한 기능을 소개하겠습니다.

const a = 'fo';
const b = 'mo';

class ZeroCho {
  name = '조현영';
  #age = 28;    // #은 private
  static isHuman = false; //static은 클래스로 직접 접근해야한다.

  static #isAlien = true;  // private static도 가능
  static [a + b] = 'yeah'; // computed 속성으로 [] 안에 사용
  [b + a] = 'wow'
}
ZeroCho.isAlient; // undefined
ZeroCho.fomo; // yeah
new ZeroCho().mofo // wow

ES2022로 정해진 기능으로
class 에서만 지원합니다.

클래스에서는 이제부터 속성들을 constructor를 사용 하지 않아도 됩니다.

getter와 setter도 됩니다.

class ZeroCho {
  static #is(type) {
    return type === 'alien';
  }
  #isHuman() {
    return ZeroCho.#is('human');
  }
  isMan() {
    return this.#isHuman();
  }
}
new ZeroCho().isHuman // undefined
ZeroCho.is // undefined
new ZeroCho().isMan() // false

출처

https://www.zerocho.com/category/ECMAScript/post/60b493850ffe7b0004bf001b

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields