[#2] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 고차함수 (코드 정리)

let num1 ='';
let num2 ='';
let operator ='';
const $result = document.querySelector('#result');

// #1
const onClickNum = (number) => {
    return () => { // return 안쓸 경우 'return undefined;'가 생략되어있기 때문에 결과 값이 'undefined'가 됨
      (event) => { // () => {} 함수를 return에 넣어주면 해당 함수가 바로 실행됨 => 고차함수
          if (operator) {
              Number(num2) += number;
          }else{
              Number(num1) += number;
          }
      $result.value = '';
    }
}

// #2 
const onClickNum = (number) => (event) => { // '{} + return' 은 생략 가능
     if (operator) {
        Number(num2) += number;
      }else{
        Number(num1) += number;
      }
   $result.value = '';
}

document.querySelector('#num-0').addEventListener('click', onClickNum('0'));

1-2. 고차함수 없이

let num1 ='';
let num2 ='';
let operator ='';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');

const onClickNum = (event) => {
     if (operator) {
        Number(num2) += event.target.textContent; // span 안에 글자를 가져오는 코드
      }else{
        Number(num1) += event.target.textContent;
      }
   $result.value = '';
}

document.querySelector('#num-0').addEventListener('click', onClickNum);

</br/>

2. if 문 중첩 피하기 (코드 정리)

a) if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

b) 분기점 중 짧은 코드가 먼저 실행되도록 if 문을 작성한다.

c) 짧은 절차가 끝나면 return;(함수 내부)이나 break;(for문 내부)로 중단한다.

d) else를 제거한다. (이때 중첩이 하나가 된다.)

아래의 코드를 가지고 a~d과정을 적용해보았다.

 const onClickNum = (event) => {
            if (operator) {
                if (!num2) {
                    $result.value = '';
                }
                num2 += event.target.textContent;
            } else {
                num1 += event.target.textContent;
            }
            $result.value += event.target.textContent;
 };

// a

            if (operator) {
                if (!num2) {
                    $result.value = '';
                }
                num2 += event.target.textContent;
                $result.value += event.target.textContent;
            } else {
                num1 += event.target.textContent;
                $result.value += event.target.textContent;
            }

// b
            if (!operator) {
                num1 += event.target.textContent;
                $result.value += event.target.textContent;
            } else {
                if (!num2) {
                    $result.value = '';
                }
                num2 += event.target.textContent;
                $result.value += event.target.textContent;
            }

// c
            if (!operator) {
                num1 += event.target.textContent;
                $result.value += event.target.textContent;
                return;
            } else {
                if (!num2) {
                    $result.value = '';
                }
                num2 += event.target.textContent;
                $result.value += event.target.textContent;
            }
// d
           if (!operator) {
                num1 += event.target.textContent;
                $result.value += event.target.textContent;
                return;

           if (!num2) {
                $result.value = '';
           }
           num2 += event.target.textContent;
           $result.value += event.target.textContent;