출처 : Let's Get IT 자바스크립트 프로그래밍
최대한 프로그래밍을 이해하는데 집중을 하도록 하자,,,
1. 순서도 그리기
2. 계산기 화면 만들고 이벤트 달기
보통 디자인할 때 border까지 포함해서 계산한다. margin은 간격. 결과와 연산자는 사용자가 입력을 하면 안되기에 readonly 처리한다.
각 버튼에 이벤트 리스너를 달아야 한다. 맥 기준 option+shift+아래키를 누르면 위줄의 코드가 복사가 된다.
js 코드를 작성할 때 순서를 기억하면서(보면서) 진행하자.
이 코드를 분석해보면 0버튼을 눌렀을 때 operator가 비어 있지 않다면(사용자가 이미 연산자를 선택한경우) numTwo에 0을 저장하는 것이다. 비어있다면 numOne에 0을 저장하고, 결과값으로 0을 화면에 노출 시키는 것이다. += 연산자는 "덧붙여서 할당"하는 연산자이다. 이를 #num-9까지 복붙한다..
3. 고차함수로 중복 제거하기
함수에서 중복을 제거할 때 달라지는 부분을 매개변수를 만들어보자.
참고로 고차함수에서 {와 return은 생략이 가능하다.
const func = (msg) => () => {
console.log(msg);
};onClickNumber('숫자') 부분을 함수의 return 값으로 치환해보면 된다.
하지만 버트을 클릭할 때 버튼 내부의 문자를 event.target.textContent로도 가져올 수 있다. 다음과 같이 코드가 변경되어도 중복제거가 가능하다.
참고로 같은 위치에서 삭제를 할 때는 마우스 휠을 누르고 위치를 잡고 삭제하면 된다.
고차함수를 사용해도 되지만, event.target.textContent를 알았다면 이게 센스라고,,,
4. 중첩 if문 줄이기
지금까지 코드에서는 두 번째 숫자(numTwo)를 클릭하면 첫 번째 숫자와 합쳐지는 버그가 나타난다.
띠리사 numTwo에 값을 저장하기 전에 화면을 비우는 작업이 필요하다.
numTwo를 입력하는 상황이 되면 먼저 화면을 비우고 값을 입력하게 된다.
이때 코드를 보면 if 문 내부에 다시 is 문이 존재한다. 이런 상황을 if 문이 중첩됐다고 표현한다. if 문이 중첩될수도록 코드는 읽기가 점점 어려워줘서 아래와 같은 방법으로 중첩을 제거해보도록 하자.
- if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
- 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.
- 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.
- else를 제거한다(이때 중첩 하나가 제거된다.)
- 다음 중첩된 분기점이 나오면 1~4의 과정을 제거한다.
코드에 적용을 해보면
$result.value += event.target.textContent; 이 부분이 if 문과 상관없이 공통적으로 실행되는 부분이기에 이 부분을 각 분기점 안에 넣는다.
else 뒤 부분이 더 짧기에 operator에 올리면 !operator로 변경하면 위아래 코드를 변경하는 것처럼 된다.
!operator일 때의 절차가 마무리되면 return으로 함수를 종료시키고 return 아랫부분은 무조건 operator일 때만 실행되므로 else 문으로 감쌀 필요가 없다.
이게 코드정리라고 볼수 있다.
5. 결과 계산하기
이제 #calculate 태그에 이벤트 리스너를 달아 결과를 출력하자. 역시 순서도를 참고하자.
조건에 해당하는 변수가 operator로 계속 같으므로 swtich 문이 조금 더 깔끔해보이고 if문으로 바꾸면 아래와 같다.
if (numTwo) {
if (operator === '+') {
$result.value = parseInt(numOne) + parseInt(numTwo);
} else if (operator === '-') {
$result.value = numOne - numTwo;
} else if (operator === '*') {
$result.value = numOne * numTwo;
} else if (operator === '/') {
$result.value = numOne / numTwo;
}
} else {
alert('숫자를 먼저 입력하세요.');
}
numOne과 numTwo는 문자열이다. + 연산자를 사용할 때는 문자열은 숫자형으로 변환하기 위해서는 반드시 parseInt로 사용한다. -, *, / 는 자동으로 문자열을 숫자로 바꾼 후에 계산된다.
다만 문자열을 자바스크립트에서는 코드처럼 실행하는 방법이 아래처럼 되는데 크롬에서도 막혀있고 금기어라고 넘어가자.
eval('1 + 2'); // 36. 계산기 초기화하기
초기상태를 제일 위에 작성하고 그 순서대로 진행하면 빠짐없이 초기화할 수 있다. 참고로 alt 위아래 키를 누르면 코드 순서를 단축키로 바꿀수 있다.
요약
- 고차 함수 사용하기
함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차 함수(high order function)라고 한다.
const func = () => {
return () => {
console.log('hello');
}:
};반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다.
const innerFunc = func();
innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다.
const func = (msg) => {
return () => {
console.log(msg);
};
};화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다.
const func = (msg) => () {
console.log;
};- if 문 중첩 제거하기
여전히 프로그래밍적 사고를 하는게 쉽지는 않지만 최대한 이해하고 반복하고,,,그냥 합시다!
