자바스크립트 - 함수 사용하기
계산기
1. 고차함수로 중복 제거
- 중복 제거 시 함수를 사용한다. 함수에서는 달라지는 부분을 매개변수로 만들면 된다.
document.querySelector('#num-0').addEventListener('click', () => {
if (operator) {
numTwo += '0';
} else {
numOne += '0';
}
$result.value += '0';
});
// 고차 함수 사용
const onClickNumber = (number) => () => {
if (operator) {
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
});
document.querySelector('#num-0').addEventListener('click', (onClickNumber('0'));
// 고차 함수
const 함수 = (매개변수) => () => {
// return 생략한 형태
}
- 고차 함수(high order function): 함수가 함수를 리턴하는 함수. 함수를 만드는 함수
- 고차함수를 사용하지 않고 중복을 제거할 수도 있다.
button 안에는 텍스트가 들어있기 때문에 event.target.textContent를 이용한다.
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);
2. 중첩 if 문 줄이기
- if 문이 여러 번 중첩될수록 코드 읽기가 점점 어려워지므로 피하는 것이 좋다.
- if 문 줄이는 방법
1) if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
2) 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.
3) 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.
4) else를 제거한다 (이때 중첩 하나가 제거된다).
5) 다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다.
3. 결과 계산하기
- 문자열끼리 더하게 되면 문자열을 나란히 정렬하게 되므로 parseInt를 사용하여 더해주어야 한다.
- 더하기 외의 사칙연산은 문자열을 계산해도 숫자로 인식하게 되므로 parseInt 생략 가능하다.
- eval 함수를 사용하게 되면 문자열을 숫자로 더할 수 있으나, 이는 해커가 악용할 가능성이 있기 때문에 실무에서는 사용하지 않는 것이 좋다.
4. Self-check
- numOne에 음수 넣기
- 연산자 버튼 클릭 시 매개변수의 값이 -인지 확인하는 로직을 추가한다.
- numOne과 numTwo가 입력되지 않은 상태에서 $operation.value가 -1 일때의 로직을 추가한다.
numOne의 값에 -1을 곱해주고 operator를 비운다.
- 연달아 계산하기: = 버튼 누르지 않고 결과값 나타내기
- numTwo가 있고, 연산자 버튼을 클릭했을 때 계산하는 로직을 추가한다. (calculator에서 사용한 로직)
5. 코드 및 후기
document.querySelector('#num-0').addEventListener('click', () => {
if (operator) {
numTwo += '0';
} else {
numOne += '0';
}
$result.value += '0';
});
// 고차 함수 사용
const onClickNumber = (number) => () => {
if (operator) {
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
});
document.querySelector('#num-0').addEventListener('click', (onClickNumber('0'));
// 고차 함수
const 함수 = (매개변수) => () => {
// return 생략한 형태
}
button 안에는 텍스트가 들어있기 때문에 event.target.textContent를 이용한다.
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);
1) if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
2) 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.
3) 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.
4) else를 제거한다 (이때 중첩 하나가 제거된다).
5) 다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다.
numOne의 값에 -1을 곱해주고 operator를 비운다.
- 계산기를 구현하면서 함수의 개념에 대해 조금 더 이해할 수 있게 되었다. 이해가 가지 않으면 교재와 강의를 반복해서 듣다보니 얼추 개념이 잡혀가고 있는 것 같다.
- 미리 구현해보는 건 안 배운 개념들이 있어서 어렵지만 뭔가 지금은 복붙 양이 많다 보니 아직은 내가 코드를 구현한다는 생각은 들지 않는다. 우선 강의를 들으며 개념을 이해하는 데 집중하고, 셀프 체크를 착실하게 해야할 것 같다.😇👍
Author And Source
이 문제에 관하여(자바스크립트 - 함수 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@theseda2s/자바스크립트-함수-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)