코딩 팁 : If 문없이 코드 작성

더 나은 솔루션을 발견 할 수 있습니다

Facebook 프로젝트의 코드 고소하지 마십시오.
업데이트 :이 기사는 이제 내 책“현대 JavaScript로 코딩 배우기”의 일부입니다.
jscomplete.com/no-ifs에서 업데이트 된 버전을 읽으십시오.

초보자에게 코드 문제를 프로그래밍하고 제시하도록 가르치면 내가 가장 좋아하는 후속 과제 중 하나는 다음과 같습니다. 이제 if 문 (또는 삼항 연산자 또는 스위치 문)을 사용하지 않고 동일한 문제를 해결합니다.

왜 이것이 도움이 될지 물을 수 있습니까?

글쎄, 나는이 도전이 당신의 두뇌가 다르게 생각하고 어떤 경우에는 다른 해결책이 더 좋을 것이라고 생각합니다.

if 문을 사용하는 데 아무런 문제가 없지만,이를 피하면 때때로 사람이 코드를 좀 더 읽기 쉽게 만들 수 있습니다. if 문을 피하면 코드를 읽기 어렵게 만들 수 있기 때문에 이것은 일반적인 규칙이 아닙니다. 당신은 판사입니다.

if 문을 피하는 것은 가독성에 관한 것이 아닙니다. 이 개념 뒤에는 과학이 있습니다. 아래의 과제에서 알 수 있듯이 if 문을 사용하지 않으면 데이터 코드 개념에 더 가까워 지므로 코드가 실행될 때 코드를 수정하는 등 고유 한 기능을 사용할 수 있습니다!

모든 경우에 조건을 사용하지 않고 코딩 문제를 시도하고 해결하는 것이 항상 재미 있습니다.

다음은 if 기반 솔루션 및 if-less 솔루션의 몇 가지 예를 보여줍니다. 모든 솔루션은 JavaScript로 작성되었습니다.

어떤 솔루션이 더 읽기 쉽다고 생각하십니까?

과제 # 1 : 배열에서 홀수를 세어보세요

정수 배열이 있고이 정수 중 몇 개가 홀수인지 세고 싶습니다.

테스트 할 예제는 다음과 같습니다.

const arrayOfIntegers = [1, 4, 5, 9, 0, -1, 5];

if 문을 사용하는 솔루션은 다음과 같습니다.

카운터 = 0;
arrayOfIntegers.forEach ((정수) => {
  const 나머지 = Math.abs (정수 % 2);
  if (나머지 === 1) {
    카운터 ++;
  }
});
console.log (카운터);

if 문이없는 솔루션은 다음과 같습니다.

카운터 = 0;
arrayOfIntegers.forEach ((정수) => {
  const 나머지 = Math.abs (정수 % 2);
  카운터 + = 나머지;
});
console.log (카운터);

참고 : 위 예제는 forEach를 사용하고 카운터 변수를 변경합니다. 대신 불변의 방법을 사용하는 것이 더 깨끗하고 안전합니다. 그러나이 기사는 그 주제에 관한 것이 아닙니다. 불변성과 기능적 프로그래밍을 다루는 더 많은 코딩 팁 기사를 계속 지켜봐 주시기 바랍니다. 또한 David Nagli가 지적했듯이 if-less 솔루션은 정수에만 작동하지만 if-based 솔루션은 10 진수를 포함한 모든 숫자를 처리 할 수 ​​있다는 이점이 있습니다.

if-less 솔루션에서는 계수 2 연산의 결과가 항상 1 (홀수) 또는 0 (짝수)이라는 사실을 이용하고 있습니다. 이 결과는 데이터입니다. 우리는 그 데이터를 직접 사용했습니다.

정수조차 세는 것은 어떻습니까? if 문을 사용하지 않고 그렇게하는 방법을 생각할 수 있습니까?

과제 # 2 : weekendOrWeekday 함수

날짜 개체 인수 (예 : new Date ())를 사용하고 문자열“weekend”또는“weekday”를 반환하는 함수를 작성하십시오.

if 문을 사용하는 솔루션은 다음과 같습니다.

const weekendOrWeekday = (inputDate) => {
  const day = inputDate.getDay ();
  if (day === 0 || day === 6) {
    '주말'을 반환;
  }
  
  '평일'을 반환;
  // 또는 삼진 팬의 경우 :
  // return (일 === 0 || 일 === 6)? 'weekend': '평일';
};
console.log (weekendOrWeekday (new Date ()));

if 문이없는 솔루션은 다음과 같습니다.

const weekendOrWeekday = (inputDate) => {
  const day = inputDate.getDay ();
  weekendOrWeekday.labels [일] ||
         weekendOrWeekday.labels [ 'default'];
};
weekendOrWeekday.labels = {
  0 : '주말',
  6 : '주말',
  기본 : '평일'
};
console.log (weekendOrWeekday (new Date ()));

if 문 조건에 일부 데이터가 있음을 알았습니까? 주말이 어느 날인지 알려줍니다. if 문을 피하기 위해 수행 한 작업은 해당 데이터를 객체로 추출하여 해당 객체를 직접 사용하는 것입니다. 또한 우리는 그 데이터를보다 일반적인 수준으로 저장할 수 있습니다.

업데이트 : Harald Niesche는 || 위의 트릭은 기술적으로 조건적인 것입니다. 나는 "평일"을 다섯 번 반복하지 않도록 사용하기로 결정했습니다. 7 일 전체를 라벨 객체에 넣으면 쉽게 제거 할 수 있습니다.

도전 과제 # 3 : 두 배의 기능 (여기서는 용)

입력 유형에 따라 다음을 수행하는 doubler 함수를 작성하십시오.

  • 입력이 숫자이면 두 배가됩니다 (예 : 5 => 10, -10 => -20).
  • 입력이 문자열이면 모든 문자를 반복합니다 (예 : 'hello'=> 'hheelloo').
  • 입력이 함수이면 두 번 호출합니다.
  • 입력이 배열이면 해당 배열의 모든 요소를 ​​호출합니다.
  • 입력이 객체 인 경우 해당 객체의 모든 값을 호출합니다.

switch-statement를 사용하는 솔루션은 다음과 같습니다.

const doubler = (입력) => {
  스위치 (입력 유형) {
    사례 '숫자':
      리턴 입력 + 입력;
    케이스 '문자열':
      리턴 입력
        .스플릿('')
        .map ((문자) => 문자 + 문자)
        .어울리다('');
    사례 '개체':
      Object.keys (입력)
            .map ((key) => (입력 [키] = 더블 러 (입력 [키])));
      리턴 입력;
    사례 '기능':
      입력();
      입력();
  }
};
console.log (doubler (-10));
console.log (doubler ( 'hey'));
console.log (doubler ([5, 'hello']));
console.log (doubler ({a : 5, b : 'hello'}));
console.log (
  더블 러 (함수 () {
    console.log ( 'call-me');
  }),
);

switch-statement가없는 솔루션은 다음과 같습니다.

const doubler = (입력) => {
  doubler.operationsByType [입력 유형] (입력)을 리턴합니다.
};
doubler.operationsByType = {
  숫자 : (입력) => 입력 + 입력,
  문자열 : (입력) =>
    입력
      .스플릿('')
      .map ((문자) => 문자 + 문자)
      .어울리다(''),
  기능 : (입력) => {
    입력();
    입력();
  },
  객체 : (입력) => {
    Object.keys (입력)
          .map ((key) => (입력 [키] = 더블 러 (입력 [키])));
    리턴 입력;
  },
};
console.log (doubler (-10));
console.log (doubler ( 'hey'));
console.log (doubler ([5, 'hello']));
console.log (doubler ({a : 5, b : 'hello'}));
console.log (
  더블 러 (함수 () {
    console.log ( 'call-me');
  }),
);

다시 한 번, 데이터 (어떤 입력 유형에 대해 어떤 작업을 수행해야하는지)가 switch 문에서 오브젝트로 추출되었는지를 주목하십시오. 그런 다음 객체를 사용하여 올바른 작업을 선택하고 원래 입력으로 호출했습니다.

몇 가지 예를 보았으므로, 당신의 생각은 무엇입니까? 이 두 가지 코딩 스타일 중 하나에 찬성하거나 반대되는 주장이 있습니까?

읽어 주셔서 감사합니다.