제로초 자바스크립트 4장 (계산기)

▤ input 태그의 readonly 속성

<input type="text" value="only read" readonly>

 

결과화면 : 읽기만 가능할 뿐 값 변경은 불가능.

 

▤ input 태그의 disabled 속성.

<input type="text" value="only read" disabled>

 

결과화면 : 읽기만 가능할 뿐 값 변경은 불가능.

 

▤ readonly 와 disabled 의 차이

form 으로 값을 보낼때 disabled의 값은 전송되지 않는다.

 

 

 

 

출처: https://heojju.tistory.com/75

 

 

 

 

=> 사용자들은 글자를 쓸 수 없지만 자바스크립트로는 글자를 쓸 수 있다.

 

 

 

 

---

고차 함수로 중복 제거하기

 

// 0의 경우만 보였다. 0-9까지 이런 식

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

 

이렇게 쓰면 각 숫자마다 함수가 중복되는 현상이 발생한다. 이는 좋지 않다.

 

 

 

해결방법은 다음과 같다. 

 

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

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

 

그러나 에러가 발생한다. return undefined 가 숨어있기 때문이다. 이는 undefined 를 리턴한 셈이므로 에러가 발생한다.

 

 

 

그래서 () => { } 가 반환값, 즉 함수가 반환값이 되도록 만들어준다.

 

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

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

 

 

 

위에 있는 코드에서 retrun 을 생략하는 방법도 있다. ★★★★★

 

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

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

 

함수 안에 함수가 있다.

즉 함수가 함수를 리턴하는 형태이다. 이를 고차함수라고 부르는 것이다. (high order function)

 

 

화살표가 연달아 나온다고 해서 당황하지 말자.

 

 

 

 

 

 

 

 

 

참고로 고차 함수를 사용하지 않고도 중복을 제거할 수 있습니다. 앞의 코드에서 고차 함수를 사용한 이유가 뭐였죠?

 

onClickNumber 함수 내부의 다른 코드는 똑같은데 0~9 라는 숫자만 다르기 때문입니다. 숫자를 같게 만들 수 있다면 모든 코드가 똑같아지므로 쉽게 중복을 제거할 수 있습니다.

 

 

어떻게 숫자 부분을 같게 만들 수 있을까요? 숫자들의 공통점을 찾으면 됩니다. 숫자는 모두 버튼 안에 들어 있는 문자입니다. 버튼을 클릭할 때 버튼 내부의 문자를 event.target.textContent 로 가져올 수 있습니다. 따라서 onClickNumber 함수의 코드를 같게 만들 수 있습니다.

 

 

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

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

 

const a = (event) => { console.log(event.target.value)   };

document.querySelector('#plus').addEventListner('click',a);

// a(event); ----> 인수로 클릭에 대한 정보를 전달해준다

 

이렇게 쉽게 중복을 제거할 수 있는데 왜 어려운 고차함수를 소개했을까요? 앞에서 설명한 것처럼 '모든 내부 코드가 같은' 함수보다 '대부분 다 비슷한데 특정 부분만 다른' 함수가 실무에서는 더 많이 나오기 때문입니다.

 

이럴 때는 고차함수를 사용해 함수의 중복을 제거해야 합니다.

 

 

 

 

 

 

---

if 문 중첩 줄이기

 

1. if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

2. 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.

3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.

4. else 를 제거한다. (이때 중첩 하나가 제거된다)

 

 

 

 

---

계산기 만들어보고 개인적으로 느낀점

 

처음부터 1+2+4 를 만드는 계산기를 머릿속으로만 생각했다면 못 만들었을 것 같다. (예를 들어 number 변수를 추가해야 하나 이런 생각이 들었을 것 같다. 하지만 실제로는 결과의 값을 numOne 에 저장하고 numTwo, operator 를 계속 비우는 방식을 반복하는 것이었다. )

무조건 공책에 차근차근 어떻게 절차가 이어지는지 써보도록 하자.