JavaScript 반복문장 제거 질문

JournalistClive · 4월 12, 2020, 1:46오후

안녕하세요. 자바스크립트를 공부하고있는 초보입니다.

현재 책을 보며 공부중인데 자바스크립트로 계산기를 만드는 부분을 보고 덧셈만이 아닌

사칙연산을 해보고싶어 작성했는데 함수내의 반복되는 부분을 정리할수는 없을까요?

<head>

    <meta charset="utf-8">

    <title>js_계산기</title>

    <script>

        /* plus */

        function sum() {

            var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            var value;

            value = parseInt(a) + parseInt(b);

            document.getElementById('value').value = value;

        }

        /* minus */

        function minus() {

            var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            var value;

            value = parseInt(a) - parseInt(b);

            document.getElementById('value').value = value;

        }

        /* multiplication */

        function multiplication() {

            var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            var value;

            value = parseInt(a) * parseInt(b);

            document.getElementById('value').value = value;

        }

        /* division */

        function division() {

            var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            var value;

            value = parseInt(a) / parseInt(b);

            document.getElementById('value').value = value;

        }

    </script>

</head>

<body>

    <h1>js_계산기입니다.</h1>

    첫번째 계산 숫자 : <input type="text" id="a"> <br>

    두번째 계산 숫자 : <input type="text" id="b"> <br>

    <input type="button" value="+" onclick="sum();">

    <input type="button" value="-" onclick="minus();">

    <input type="button" value="*" onclick="multiplication();">

    <input type="button" value="/" onclick="division();"> <br>

    결과 : <input type="text" id="value">

</body>

코드안의 부분인 변수 a,b,value를 작성하는 부분이 반복되는데 좀더 중복을 줄여보고 싶습니다.

          { var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            var value; }

livelikeabel · 4월 12, 2020, 2:12오후

이 코드가 정답은 아니지만, 이런 방식으로도 중복을 줄여볼 수 있을거 같아요 ㅎㅎ

두가지 포인트를 개선했는데요,

element reference를 변수로 선언해 놓기(매번 레퍼런스를 가져오지 않아도 될거 같아요!)
script 태그가 영역의 맨 아래에 놓여야 getElementById 메서드가 DOM에 접근할 수 있어요

부족한 부분이 있거나, 궁금한 부분이 있으면 답글 남겨주세요!

JournalistClive · 4월 12, 2020, 2:24오후

감사합니다!
이제 겨우 걸음마단계이지만 앞으로도 열심히 하겠습니다!

한가지 궁금한것이 있는데 저는 처음에는 이 중복 해결을 함수로 중복되는 부분을 작성해서

함수안에서 함수를 선언하는 방법으로 써보려했는데

            function test() {

            var a = document.getElementById("a").value;

            var b = document.getElementById("b").value;

            var value;

        }

        /* plus */

        function sum() {

            test();

            value = parseInt(a) + parseInt(b);

            document.getElementById('value').value = value;

        }

이런 방식으로 계산을 진행하면 Nan 숫자가 아니다 라고 출력되는데

함수로는 이런 변수선언을 할수없는건가요?

그리고 함수안에서 함수를 선언할수는 없을까요?

gsts007 · 4월 12, 2020, 2:52오후

var로 선언한 변수는 함수단위 scope를 가지기 때문에, test 함수에서 var로 선언한 변수는 다른 함수인 sum에서 접근할 수 없습니다.

그리고 자바스크립트에서는 함수 안에서 함수를 선언할 수 있습니다.

function A() {
  var a = 1;
  function B() {
    var b = 2;
    return a + b;
  }

  var c = 3;
  return c + B();
}

처럼 사용이 가능합니다.

gamwizard · 4월 22, 2020, 10:57오후

반대로 해보는건 어떨까요?

function test()
{
    var a = 1;
    var b = 2;
    sum(a, b);
}

function sum(a, b)
{
    val value = a+b;
}

qazxsw1240 · 4월 22, 2020, 11:34오후

<html>
<head>
    <meta charset="utf-8">
    <title>js_계산기</title>
    <script type="text/javascript">
        function calc(type) {
            let first = document.getElementById('first').value;
            let second = document.getElementById('second').value;
            let value = document.getElementById('value');

            let num1 = parseFloat(first);
            let num2 = parseFloat(second);

            switch (type) {
                case 'sum': value.value = num1 + num2; break;
                case 'sub': value.value = num1 - num2; break;
                case 'mul': value.value = num1 * num2; break;
                case 'div': value.value = num1 / num2; break;
            }
        }
    </script>
</head>

<body>

    <h1>js_계산기입니다.</h1>

    첫번째 계산 숫자 : <input type="text" id="first"> <br>
    두번째 계산 숫자 : <input type="text" id="second"> <br>

    <input type="button" value="+" onclick="calc('sum');">
    <input type="button" value="-" onclick="calc('sub');">
    <input type="button" value="*" onclick="calc('mul');">
    <input type="button" value="/" onclick="calc('div');"> <br>

    결과 : <input type="text" id="value">

</body>
</html>

저는 이렇게 하는 게 좋다고 생각됩니다.

Joonseok_Hu · 4월 24, 2020, 3:54오후

<html>
<head>
    <meta charset="utf-8">
    <title>js_계산기</title>
    <script>
        function initialize(left, right, result) {
          var leftElement = document.querySelector(left);
          var rightElement = document.querySelector(right);
          var resultElement = document.querySelector(result);
          
          function calculate(calc) {
            return function () {
              var leftValue = leftElement.value;
              var rightValue = rightElement.value;
              var resultValue = calc(leftValue, rightValue);
              resultElement.value = resultValue;
            };
          };
        }
    </script>
</head>
<body>
    <h1>js_계산기입니다.</h1>
    첫번째 계산 숫자 : <input type="text" id="a"> <br>
    두번째 계산 숫자 : <input type="text" id="b"> <br>
    <input type="button" value="+" onclick="add();">
    <input type="button" value="-" onclick="substract();">
    <input type="button" value="*" onclick="multiply();">
    <input type="button" value="/" onclick="divide();"> <br>
    결과 : <input type="text" id="value">
    <script>
      var calculate = initialize('#a', '#b', '#value');

      var add = calculate(function(a, b) {
        return a + b;
      });

      var substract = calculate(function(a, b) {
        return a - b
      });

      var multiply = calculate(function(a, b) {
        return a * b
      });

      var divide = calculate(function(a, b) {
        return a / b
      });
    </script>
</body>
</html>