계산기 만들기 | 함수 중복 제거 하기 (고차함수)

readonly 읽기 전용으로 글자가 쓰여지지 않고 보여지는 역할을 함

✅ vs code 코드 복사하는 방법
mac : opt + shift + ⬇️

---

🧑🏻‍💻 : code

let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('result');
document.querySelector('#num-0').addEventListener('click', ()=>{
  if (!operator){
    numOne += '0';
  } else {
    numTwo += '0';
  }
});
$result.value += '0';
document.querySelector('#num-1').addEventListener('click', ()=>{
  if (!operator){
    numOne += '1';
  } else {
    numTwo += '1';
  }
});
$result.value += '1';
document.querySelector('#num-2').addEventListener('click', ()=>{
  if (!operator){
    numOne += '2';
  } else {
    numTwo += '2';
  }
});
$result.value += '2';
document.querySelector('#num-3').addEventListener('click', ()=>{
  if (!operator){
    numOne += '3';
  } else {
    numTwo += '3';
  }
});
$result.value += '3';
document.querySelector('#num-4').addEventListener('click', ()=>{
  if (!operator){
    numOne += '4';
  } else {
    numTwo += '4';
  }
});
$result.value += '4';
document.querySelector('#num-5').addEventListener('click', ()=>{
  if (!operator){
    numOne += '5';
  } else {
    numTwo += '5';
  }
});
$result.value += '5';
document.querySelector('#num-6').addEventListener('click', ()=>{
  if (!operator){
    numOne += '6';
  } else {
    numTwo += '6';
  }
});
$result.value += '6';
document.querySelector('#num-7').addEventListener('click', ()=>{
  if (!operator){
    numOne += '7';
  } else {
    numTwo += '7';
  }
});
$result.value += '7';
document.querySelector('#num-8').addEventListener('click', ()=>{
  if (!operator){
    numOne += '8';
  } else {
    numTwo += '8';
  }
});
$result.value += '8';
document.querySelector('#num-9').addEventListener('click', ()=>{
  if (!operator){
    numOne += '9';
  } else {
    numTwo += '9';
  }
});
$result.value += '9';
document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

---

똑같은 코드를 계속 쓰니 비효율적이며, 코드가 길어져 보기 불편하다. 🤔
중복된 코드가 많을 경우 매개변수 를 이용하여 코드를 간결화해 보자.
중복되는 코드마다 달라지는 값을 매개변수로 설정하면 된다.

---

let numOne = '';
let operator = '';
let numTwo = '';
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', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));
document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

---

🚨 오류 발생

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

---

✅ 이유

return 은 항상 undefined 이기 때문이다.
document.querySelector('#num-0').addEventListener('click', undefined);
를 한 것과 다름 없다.

---

💡 해결

undefined 에 함수를 넣어주면 함수가 반환된다.

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

---

💟 고차함수

위의 코드를 더 간결하게 바꿀 수 있다.

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

📍 고차함수에서 {} 와 return 생략

함수 안에서 함수를 return 하는 것을 고차함수 (High order function) 이라고 한다.

---

🔗 고차 함수 알아가기

---

💟 고차함수를 쓰지 않고 중복 제거하기

・ textContent : 문자열

let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('result');
const onClickNumber = (event) => {
  if (operator){ // 비어 있지 않다
    numTwo += event.target.textContent;
  } else {	// 비어 있다
    numOne += event.target.textContent;
  }
  $result.value += event.target.textContent;
}
document.querySelector('#num-0').addEventListener('click', onClickNumber);
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-4').addEventListener('click', onClickNumber);
document.querySelector('#num-5').addEventListener('click', onClickNumber);
document.querySelector('#num-6').addEventListener('click', onClickNumber);
document.querySelector('#num-7').addEventListener('click', onClickNumber);
document.querySelector('#num-8').addEventListener('click', onClickNumber);
document.querySelector('#num-9').addEventListener('click', onClickNumber);
document.querySelector('#plus').addEventListener('click', ()=>{});
document.querySelector('#minus').addEventListener('click', ()=>{});
document.querySelector('#divide').addEventListener('click', ()=>{});
document.querySelector('#multiply').addEventListener('click', ()=>{});
document.querySelector('#calculate').addEventListener('click', ()=>{});
document.querySelector('#clear').addEventListener('click', ()=>{});

---

📍 이해하고 넘어가기

console.log(third) 의 값은 ?

const hof = (a) => (b) => (c) => {
	return a + (b * c);
};

const first = hof(3);
const second = first (4);
const third = second(5);

console.log(third);	// 23

✅ 풀어서 생각하기

// first
(b) => (c) => {
 return 3 + (b * c); 
}

// second
(c) => {
	return 3 + (4 * c);
}

// third

3 + (4 * 5);