💭 고차함수
- high order function
- 함수를 호출할 때마다 반환 함수를 생성하는 함수
- func 처럼 함수를 만들어내는 함수
- 함수의 본문에서 바로 return 되는 값이 있으면
{와return생략 가능
const func = () => {
return () => {
console.log('hello');
};
// { , return 생략
const func = (msg) => {
console.log('hello');
};- func 함수 호출시 함수를 반환.
반환된 함수는 다른 변수에 저장 가능
변수에 저장된 함수를 다시 호출 가능
const innerFunc = () => {
console.log('hello');
};
innerFunc(); // hello- hello 라는 문자열을 바꾸고 싶다면 바꾸고 싶은 자리를 매개변수로 변경
const func = (msg) => {
return () => {
console.log(msg);
};
};💭 if 문 중첩 제거
- if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣음
- 분기점에서 짧은 절차부터 실행도록 if 문 작성
- 짧은 절차 끝나면 return (함수 내부의 경우) 이나 break (for 문 내부의 경우) 로 중단
- else 제거 ( 중첩 하나 제거됨 )
계산기
- 계산기 모양 틀 잡기
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>계산기</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<input readonly id="operator" />
<input readonly type="number" id="result" />
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">C</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">X</button>
</div>순서도
변수선언
- 숫자1, 연산자, 숫자2 저장할 변수 선언 및 할당
document.getElementById를 통해 order 과 result 아이디를 찾아 변수에 가져오기
let numOne = "";
let operator = "";
let numTwo = "";
$order = document.getElementById("operator");
$result = document.getElementById("result");숫자 버튼 클릭
함수 중복 없도록 하나의 함수를 변수로 선언해 사용(?)
방법 1 : 고차함수 이용
const onclickNum = (number) => {
return (event) => {
if (!operator) {
numOne += number;
} else {
numTwo += number;
}
$result.value = number;
};
};
document
.getElementById("num-0")
.addEventListener("click", onclickNum("0"));
document
.getElementById("num-1")
.addEventListener("click", onclickNum("1"));
document
.getElementById("num-2")
.addEventListener("click", onclickNum("2"));
document
.getElementById("num-3")
.addEventListener("click", onclickNum("3"));
document
.getElementById("num-4")
.addEventListener("click", onclickNum("4"));
document
.getElementById("num-5")
.addEventListener("click", onclickNum("5"));
document
.getElementById("num-6")
.addEventListener("click", onclickNum("6"));
document
.getElementById("num-7")
.addEventListener("click", onclickNum("7"));
document
.getElementById("num-8")
.addEventListener("click", onclickNum("8"));
document
.getElementById("num-9")
.addEventListener("click", onclickNum("9"));방법 2 : event 사용 (고차함수X)
const onClickNum = (event) => {
if (!operator) {
numOne += event.target.textContent;
} else {
numTwo += event.target.textContent;
}
$result.value = event.target.textContent;
};
document.getElementById("num-0").addEventListener("click", onClickNum);
document.getElementById("num-1").addEventListener("click", onClickNum);
document.getElementById("num-2").addEventListener("click", onClickNum);
document.getElementById("num-3").addEventListener("click", onClickNum);
document.getElementById("num-4").addEventListener("click", onClickNum);
document.getElementById("num-5").addEventListener("click", onClickNum);
document.getElementById("num-6").addEventListener("click", onClickNum);
document.getElementById("num-7").addEventListener("click", onClickNum);
document.getElementById("num-8").addEventListener("click", onClickNum);
document.getElementById("num-9").addEventListener("click", onClickNum);연산자 버튼 클릭
// 연산자 입력
const onClickOperator = (op) => {
return () => {
if (numTwo) {
switch (operator) {
case "+":
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case "-":
$result.value = parseInt(numOne) - parseInt(numTwo);
break;
case "/":
$result.value = parseInt(numOne) / parseInt(numTwo);
break;
case "*":
$result.value = parseInt(numOne) * parseInt(numTwo);
break;
default:
break;
}
numOne = $result.value;
numTwo = "";
}
if (numOne) {
operator = op;
$operator.value = op;
} else {
alert("숫자를 입력해주세요.");
}
};
};
document
.getElementById("plus")
.addEventListener("click", onClickOperator("+"));
document
.getElementById("minus")
.addEventListener("click", onClickOperator("-"));
document
.getElementById("divide")
.addEventListener("click", onClickOperator("/"));
document
.getElementById("multiply")
.addEventListener("click", onClickOperator("*"));
document.getElementById("clear").addEventListener("click", () => {
numOne = "";
numTwo = "";
operator = "";
$operator.value = "";
$result.value = "";
});
document.getElementById("calculate").addEventListener("click", () => {
if (numTwo) {
switch (operator) {
case "+":
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case "-":
$result.value = parseInt(numOne) - parseInt(numTwo);
break;
case "/":
$result.value = parseInt(numOne) / parseInt(numTwo);
break;
case "*":
$result.value = parseInt(numOne) * parseInt(numTwo);
break;
default:
break;
}
numOne = $result.value;
numTwo = "";
operator = "";
$operator.value = "";
} else {
alert("숫자를 입력해주세요.");
}
});