JS 연습문제 4 - 간이 계산기 ver.4

▶ JS 연습문제 4 - 간이 계산기 ver.4

<h1>간이 계산기 만들기</h1>

첫 번째 값 : <input type="text" id="num1"><br>
두 번째 값 : <input type="text" id="num2"><br>
    
<!-- 
** 함수 호출 시 매개변수 this ** 
-> 이벤트가 발생한 요소 자체를 의미
(여기에서는 클릭된 연산자 버튼)  
-->
<button onclick="calculate(this)">+</button>
<button onclick="calculate(this)">-</button>
<button onclick="calculate(this)">*</button>
<button onclick="calculate(this)">/</button>
<button onclick="calculate(this)">%</button>

<br><br>
계산 결과 : <span id="result"></span>

<script>
   function calculate(btn){
   // btn 에는 this(클릭된 버튼 요소)가 전달되어짐

   const op = btn.innerText; // 버튼의 내용(+,-,*,/,%)를 얻어옴

   // input에 입력된 값을 얻어와서 바로 number 타입으로 변환
   const num1 = Number(document.getElementById('num1').value);
   const num2 = Number(document.getElementById('num2').value);

   // eval("코드 형식 문자열")
   // -> 작성된 문자열을 JS 코드로 해석
   // -> 속도 문제 및 보안 이슈로 사용하지 않는 것을 권장
   // span 태그에 결과 출력
   // document.getElementById('result').innerHTML = eval(num1 + op + num2);

   document.getElementById('result').innerHTML = new Function("return " + num1 + op + num2)();
   }
   /* new Function("return " + num1 + op + num2):
   - new Function은 동적으로 새로운 함수를 생성하는 방법
   - "return " + num1 + op + num2는 함수의 본문을 문자열로 작성
   - 예를 들어, num1이 5이고 op가 +이며 num2가 3이라면, 이 문자열은 "return 5 + 3"이 됨
     이 문자열을 함수로 변환하여 새로운 함수 객체를 생성 */
            
   /* ():
   생성된 함수 객체를 즉시 호출
   예를 들어, new Function("return 5 + 3")()는 8을 반환함*/
</script>

See the Pen 24-12-25 js review-pr4 by Namu (@Namu-the-sans) on CodePen.