자바스크립트 - 다른 언어에서 훔쳐보자!

나는 새로운 언어를 배우는 것을 좋아합니다. 비록 내가 그 언어를 결코 사용하지 못할 것이라고 확신하지만(최소한 생산 단계에서는 아님), 마침내 언어를 사용하게 되면 언어가 많이 달라질 것이라고 확신합니다.

프레임워크도 마찬가지이며 다른 언어와 프레임워크에서 훔쳐 훨씬 더 나은 훌륭한 예를 볼 수 있습니다.

할당하는 경우

Javascript에서 이를 수행하는 방법은 삼항을 사용하는 것입니다.

const thatIsTheQuestion = Math.random() > 0.5 ? 'to do or not to do' : 'maybe I need better examples';

그러나 때로는 이를 찾기 위해 더 강력한 것이 필요하며question 삼항이 이를 지원하지 않습니다.

자... 이것은 제가 Rust를 배우면서 상냥하게 느꼈던 것입니다.

let complex_question = if rand::random() {
  let something_complex = 1;
  something_complex * 2 // to return in rust just leave without `return` or semicolon!
} else {
  let another_complex_thing = 2;
  another_complex_thing * 3
};

이와 같은 경우에는 rust 예만큼 깔끔하지는 않지만 여러 가지 방법이 있습니다. IIFE를 사용하면…

IIFE(즉시 호출되는 함수 표현식)

Javascript를 사용하기 시작한 시기에 따라 Javascript를 많이 사용했을 수도, 조금 사용했을 수도 있고, Javascript가 무엇인지 모를 수도 있습니다.

한번에 선언하고 실행하는 함수입니다.

(() => {
  console.log('this will simply execute')
})()

이것에 대한 멋진 점은 반환값을 변수에 할당할 수 있다는 것입니다.

따라서 어떤 식으로든 if assignment를 만들 수 있습니다.

const complexQuestion = (() => {
  if (Math.random() > 0.5) {
    const somethingComplex = 1;
    return somethingComplex * 2;
  } else {
    const anotherComplexThing = 2;
    return anotherComplexThing * 3
  };
})()

예, 외부 함수에서 모든 것을 리팩토링하고 그렇게 하는 대신 호출할 수 있지만 IIFE를 수행하는 것이 훨씬 더 명확한 곳을 점점 더 많이 찾고 있습니다.

패턴 매칭

많은 용도가 있지만 Redux의 인기로 인해 리듀서에서 사용하는 switch가 패턴 매칭의 한 방법이라는 사실조차 깨닫지 못할 수도 있습니다.

하지만 더 우아한 방법이 있습니다.

const whatToEat = {
  breakfeast: 'bacon and eggs',
  lunch: 'hamburger',
  dinner: 'pizza',
}['what time is it?'] ?? 'junk food!';

옵션과 기본 케이스가 있습니다!

그리고 무엇을 알고 계십니까… 그것은 if assignment를 수행하는 또 다른 방법입니다.

const withBooleans = {
  true: 'it works!',
  false: 'nope'
}[Math.random() > 0.5];
// yes, it works for booleans too!

모든 것을 함께

const maybeTooMuch = (() => {
  const complicatedStuff = {
    true: () => 'after all, why not?',
    false: () => (() => {
      try {
        throw new Error("why shouldn't I?");
      } catch (error) {
        return error.message;
      }
    })(),
    default: null,
  }[
    (Math.random() > 0.66)
    || (
      (Math.random() > 0.33)
        ? false
        : 'default'
    )
  ] ?? 'I probably gone too far on this one...';

  try {
    return complicatedStuff();
  } catch {
    return complicatedStuff;
  }
})();

어쩌면... 좀 과했을지도...

그러나 기본적으로 변수에 항목을 할당하는 여러 가지 방법이 있습니다.

보너스!

지도에서 기본값을 처리하는 방법이 마음에 들지 않았을 수도 있습니다... 그래서...

function proxyfy(object, defaultValue) {
  return new Proxy(object, {
    get(target, prop) {
      if (Reflect.has(target, prop)) {
        return Reflect.get(...arguments);
      }
      return defaultValue;
    },
  });
}

const proxyfiedWhatToEat = proxyfy({
  breakfeast: 'bacon and eggs',
  lunch: 'hamburger',
  dinner: 'pizza',
}, 'junk food!')
['what time is it?'];

Proxy를 사용하면 default가 무엇이어야 하는지 더 깔끔하게 선언할 수 있습니다.


표지 사진 작성자: Janayara Machado on Unsplash