[레츠기릿JS] 계산기 만들기 / 고차함수로 중복 제거하기

함수가 함수를 반환하는 경우

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

 

func함수를 호출하면 함수를 반환한다

반환된 함수는 다른 변수에 저장될 수 있고 변수에 저장된 함수를 다시 호출할 수 있다

const innerFunc = func();
innerFunc(); // hello

 

 

func() 부분을 반환값(retunr문) 으로 대체해보면 이해하기 쉽다

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

반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다

바꾸고 싶은 자리를 매개변수로 만들어 주면 된다

 

 

 

const func = (msg) => {
  return () => {
    console.log(msg);
  };
};

========================
//고차함수에서의 { 와 return 생략

const func = (msg) => () => {
  console.log(msg);
};

hello 문자열을 msg 매개변수로 바꿔준다

 

 

 

const innerFunc1 = func('hello');
const innerFunc2 = func('javascript');
const innerFunc3 = func();
innerFunc1(); // hello
innerFunc2(); // javascript
innerFunc3(); // undefined
================================
const innerFunc1 = () => {
  console.log('hello');
};
const innerFunc2 = () => {
  console.log('javascript');
};
const innerFunc3 = () => {
  console.log(); // 빈값은 undefined
};

 

func함수처럼 함수를 만드는 함수를 고차 함수(high order function) 라고 한다

화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 { 와 return을 생략할 수 있다

 

 

 

 document.querySelector('#num-0').addEventListener('click', ()=> {
        if(operator){
            numTwo += '0';
        }else {
            numOne += '0';
        }$result.value += '0';
    });
    document.querySelector('#num-1').addEventListener('click', ()=> {
        if(operator){
            numTwo += '1';
        }else {
            numOne += '1';
        }$result.value += '1';
    });
    document.querySelector('#num-2').addEventListener('click', ()=> {});
    document.querySelector('#num-3').addEventListener('click', ()=> {});
    document.querySelector('#num-4').addEventListener('click', ()=> {});
    document.querySelector('#num-5').addEventListener('click', ()=> {});

이런식으로 이벤트리스너를 연결하는 코드에서 0~9까지의 숫자만 제외한 나머지 부분이 중복 되기 때문에

고차함수를 이용해 숫자를 지정하는 부분은 매개변수로 만들고, 나머지 부분은 함수로 만들어 준다

 

 

 

const onClickNumber = (number) => (event) => {
  if (operator) {
    numTwo += number;
  } else {
    numOne += number;
  }
  $result.value += number;
};

 

 

---

 

    const $operator = document.querySelector('#operator');
    const $result = document.querySelector('#result');
    const onClickNumber  = (number) => {
        if(operator){ //연산자 비어 있지 않을 때
            numTwo += number;
        }else { //연산자 비어 있을 때
            numOne += number;
        }$result.value += number;
    }

    document.querySelector('#num-0').addEventListener('click', onClickNumber(0));
    document.querySelector('#num-1').addEventListener('click', ()=> {});
    document.querySelector('#num-2').addEventListener('click', ()=> {});
    document.querySelector('#num-3').addEventListener('click', ()=> {});

중복되는 함수를 변수로 따로 빼내주고,

0~9까지 선택하는 이벤트 리스너의 함수 자리에

onClickNumber함수를 넣어주고 그 매개변수로 각각의 숫자를 넣는다

 

 

 

함수는 항상 return undefined를 생략하고 있는 상태

const onClickNumber  = (number) => {
        if(operator){ //연산자 비어 있지 않을 때
            numTwo += number;
        }else { //연산자 비어 있을 때
            numOne += number;
        }$result.value += number;
        //return undefined; 가 생략되어 있다고 생각해야 한다
    }

 

 

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

onClickNumber('0')

함수자리에 함수가 아니라 함수의 undefined를 넣은 셈이다

 

 

 

onClickNumber('0') 이 자리가 함수자리이므로, return에도 함수모양으로 자리를 맞춰줘야 한다

    const $operator = document.querySelector('#operator');
    const $result = document.querySelector('#result');
    const onClickNumber  = (number) => {
        if(operator){ //연산자 비어 있지 않을 때
            numTwo += number;
        }else { //연산자 비어 있을 때
            numOne += number;
        }$result.value += number;
        //리턴이 함수가 되도록
        return () => {
            
        }
    }

하지만 버튼 클릭이 실행되어도 return문 안에는 아무 값이 없어서 실행되지 않는다

그렇다면, 실제로 실행되는 부분인 return에 if문을 넣어줘야 된다

 

 

 

const onClickNumber  = (number) => {
    return () => {
        if(operator){ 
            numTwo += number;
        }else { 
            numOne += number;
        }$result.value += number;
    }
}
===========================================
//고차함수에서 { 와 return이 있으면 생략 가능하다
 const onClickNumber  = (number) =>  () => {
    if(operator){ //연산자 비어 있지 않을 때
        numTwo += number;
    }else { //연산자 비어 있을 때
        numOne += number;
    }$result.value += number;
}

 

(number) =>  () => { ...

이런식으로 화살표가 연달아 있는 모양이 되면 이렇게 해석해야 된다

 

함수안에 함수가 있다 

함수가 함수를 (리턴이 생략된 것) 리턴하고 있다 => 고차함수(high order function)

이렇게 리턴 값에 실제 실행하는 부분을 넣어야 중복도 줄이고 함수도 제대로 돌아가게 만들 수 있다