TIL- 22.02.11 금

ca es6 강의 사전지식 부족부분 : forEach(array메소드임.)

4-4 중첩 if문 줄이기
고차함수를 만들고 외부에서 변수로 함수를 호출하면(고차함수를 안에 품고 있는 상위의 함수) 외부에서 변수로 함수를 호출했던 함수 표현식이 고차함수를 안에 품고 있는 함수의 return값이 된다.

const func () => {
  return () => {
    console.log('hello')
  };
};
const innerFunc = func();
innerFunc(); // hello

const func = (msg) => {
  return () => {
    console.log(msg)
  };
};
const innerFunc1 = func('hello');
const innerFunc2 = func('javascript');
const innerFunc3 = func();

innerFunc1(); // hello
innerFunc2(); // javascript
innerFunc3(); // undefined

if문 중첩 제거하기 - 수정 전 코드

const onClickNumber = (event) => {  
  if (operator) {
      if(!numTwo) {
      $result.value = '';
    }
    numTwo += event.target.textContent;
  } else {
    numOne += event.target.textContent;
  }
  $result.value += event.target.textContent; // 현재 중복되는 절차
};

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

const onClickNumber = (event) => {  
  if (operator) {
      if(!numTwo) {
      $result.value = '';
    }
    numTwo += event.target.textContent;
    $result.value += event.target.textContent; // 공통된(현재 중복되는) 절차를 각 분기점 내부에 넣는다.
  } else {
    numOne += event.target.textContent;
    $result.value += event.target.textContent; // 공통된(현재 중복되는) 절차를 각 분기점 내부에 넣는다.
  } 
};

2단계. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.

const onClickNumber = (event) => {
      if (!operator) {
        // 아래 if문(더 짧은 절차)이 위로 올라오고 조건이 바뀜.
        numOne += event.target.textContent;
        $result.value += event.target.textContent;
        return;
      } else {
        // 위의 if문이 아래로 내려오고 조건이 바뀜.
        if (!numTwo) {
          $result.value = '';
        }
        numTwo += event.target.textContent;
        $result.value += event.target.textContent;
      }
    };

3단계. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.

const onClickNumber = (event) => {
      if (!operator) {       
        numOne += event.target.textContent;
        $result.value += event.target.textContent;
        return; // 함수 내부라 return으로 절차를 중단시킨다.
      } else { // return 이후 else는 더이상 실행되지 않기 때문에 else문을 제거해야 한다.
        if (!numTwo) {
          $result.value = '';
        }
        numTwo += event.target.textContent;
        $result.value += event.target.textContent;
      }
    };

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

const onClickNumber = (event) => {
      if (!operator) {       
        numOne += event.target.textContent;        
        $result.value += event.target.textContent;
        return; // 함수 내부라 return으로 절차를 중단시켰으므로 else를 제거하여 한단계를 줄였다.
      }
      // 이 아래로는 operator가 존재하는 경우에만 실행되기 때문에 else문으로 감쌀 필요가 없다.
      if (!numTwo) {
        $result.value = '';
      }
      numTwo += event.target.textContent;
      $result.value += event.target.textContent;
    };

5단계. 다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다.