JavsScript 입문 : 계산기 만들기 - 숫자버튼 함수 및 고차함수 이용 중복제거

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

 

지난시간 만들어 보았던 계산기의 프레임입니다. 이제부터는 이 프레임을 이용하여 각각의 버튼에 자바스크립트 이벤트를 연결하여 실제 계산기가 작동하는 원리를 공부해 보고자 합니다.

 

CSS로 만들어진 계산기 프레임

 

1. HTML에 자바스크립트 파일 연결하기 

 

CSS파일처럼 <script>태그내에 다음과 같이 자바스크립트 파일을 연결해 줍니다.

이제는 script.js라는 파일을 깉은 폴더에 만들어서 사용해도 됩니다. VS Code 위 3가지 파일이 같은 폴더안에서 서로 연동이 된다고 보면됩니다. 

 

2. 기본과정 (변수만들기, 태그선택하기, 이벤트 활성화 준비)

 

순서도에 따라 시작에 대한 변수를 만들고 태그를 선택하고 각각의 ID를 이용하여 이벤트활성화 준비를 합니다. 가능한 초보인만큼 주석을 달아주는 것을 잊지 말자구요.

 

① 변수만들기

 

순서대로 입력되는 변수와 연산자에 대한 변수를 만들어줍니다. 

 

② 각 버튼 선택후 이벤트 활성화 준비

 

ID를 이용하여 버튼 태그를 선택하고, 버튼을 활성화 시킵니다. (addEventListner합수)

위 그림을 보면 지난시간까지 연습했던 기본 그림입니다. 여기서 거의 똑같은 문장을 복사해서 붙히는 경우 VS Code에서는 Alt + Shift + 화살표(원하는 방향)입니다.

 

3. 콜백함수에 고차함수를 이용한 중복제거

 

① 숫자함수 클릭시 함수

상기 이미지에서 숫자함수를 클릭했을 경우 작동되는 함수를 코딩해야 합니다.

순서도에 따르면 다음과 같습니다. 

이를 함수에 적용합니다. 

우선 '0'버튼에 함수를 적용합니다. 

변수에 저장을 하면 화면에 표시를 해주도록 합니다. 

 

전체에 적용을 합니다. 그런데 코드가 긴것은 문제가 되지 않으나 너무도 중복된 내용이 많습니다. 

이런 경우 고차함수를 이용하여 중복을 제거해 줍니다. 참고로 고차함수는 함수안에 매개변수를 이용하여 중복을 피하게 하는 방식입니다. 

 

② 매개변수 이용 중복 제거

 

코드를 보게되면 숫자외에는 나머지 코딩은 같습니다. 이럴 경우 숫자대신 공통으로 들어가게 매개변수를 만들어 주고 중복을 제거해 줍니다. (반복 타이핑을 하는 경우 중복의 제거대상이다 라고 일단 생각해야 합니다.)

 

즉, 숫자가 들어가는 항목에 매개변수를 만들어 주는데 강의에서와 같이 number라는 매개변수를 사용하고 밖으로 배치 시킵니다. 

춧자위치에 매개변수 number 사용

매개변수 사용 함수에 onClickNumber 변수에 저장

나머지 1 ~ 9까지 적용합니다. 

 

③ return값에 함수 반영하기

 

여기서는 조금 생각해야합니다. 

 

addEventListener('click', onClickNumber(  ));에서 addEventListener는 함수입니다. 함수가 작동할 때 click을 하면 return 값은 undefined입니다. 그런데 여기서는 click을 하면 onClickNumber(  )라는 함수가 실행이 되어야 하는데 undefined값이 들어가게 되서 에러가 납니다.  

 

따라서 undefined 대신 함수를 사용하도록 하면 됩니다. 

 

아래 첫번째 그림은 원래 return값이고 두번째 그림은 이 곳에 함수 모양을 가져다 씁니다.

함수의 원래 return 값

return값에 함수를 만들어 줌

이제는 return하는 곳에 함수 형태로 만들어 놓았기에 원래 매개변수 사용하는 동작을 return 함수값으로 이동합니다. 

 

④ 중괄호와 return은 생략 가능

 

화살표 함수에서는 중괄호와 return 이 같이 있으면 생략이 가능합니다. 

 

이렇게 함수의 함수 형태를 띄는 것, return 함수내 함수를 작동시키는 방식을 고차함수 방식이라고 합니다. 영어로 High Order Function이라고 하네요.