[JavaScript] 함수 - 기본 (덧셈 계산기)

두 수의 합을 구하는 함수 addNumber()

  <script>
    // 1. 숫자를 더하는 함수 정의
    // 두 개의 숫자를 받아 합계를 계산하고 경고창으로 출력함
    function addNumber(a, b) {
      var sum = a + b; // 두 숫자의 합 계산
      alert("두 수의 합은 " + sum + "입니다."); // 계산 결과를 경고창으로 표시
    }

    // 2. 사용자 입력 받기
    // 사용자로부터 두 개의 숫자를 입력받아 변수에 저장함
    // prompt 함수는 문자열을 반환하므로 parseInt로 숫자로 변환함
    var num1 = parseInt(prompt("첫 번째 숫자를 입력하세요:"), 10); // 첫 번째 숫자 입력받음
    var num2 = parseInt(prompt("두 번째 숫자를 입력하세요:"), 10); // 두 번째 숫자 입력받음

    // 3. 입력값 유효성 검증
    // 입력값이 숫자인 경우에만 함수를 호출하여 합계를 계산함
    if (!isNaN(num1) && !isNaN(num2)) {
      // 두 입력값이 모두 유효한 숫자인 경우 함수 호출
      addNumber(num1, num2);
    } else {
      // 입력값 중 하나라도 유효하지 않은 경우 경고 메시지 표시
      alert("올바른 숫자를 입력해주세요.");
    }
  </script>

 

처음에는 함수 정의만 만들어 놓고 왜 동작하지 않는지 당황했는데, 

    function addNumber(a, b) {
      var sum = a + b; // 두 숫자의 합 계산
      alert("두 수의 합은 " + sum + "입니다."); // 계산 결과를 경고창으로 표시
    }

 

함수 호출을 해야 동작을 하는 것이었다. 

    // 2. 사용자 입력 받기
    // 사용자로부터 두 개의 숫자를 입력받아 변수에 저장함
    // prompt 함수는 문자열을 반환하므로 parseInt로 숫자로 변환함
    var num1 = parseInt(prompt("첫 번째 숫자를 입력하세요:"), 10); // 첫 번째 숫자 입력받음
    var num2 = parseInt(prompt("두 번째 숫자를 입력하세요:"), 10); // 두 번째 숫자 입력받음

    // 3. 입력값 유효성 검증
    // 입력값이 숫자인 경우에만 함수를 호출하여 합계를 계산함
    if (!isNaN(num1) && !isNaN(num2)) {
      // 두 입력값이 모두 유효한 숫자인 경우 함수 호출
      addNumber(num1, num2);
    } else {
      // 입력값 중 하나라도 유효하지 않은 경우 경고 메시지 표시
      alert("올바른 숫자를 입력해주세요.");
    }

 

함수의 선언 위치는 프로그램 흐름에 영향을 주지 않는다. 

 

아래는 ChatGPT로 리팩토링 한 버전인데, 아직 배우지 않은 개념들이 나온다. 

<script>
    // 두 숫자의 합을 계산하고 경고창에 표시하는 함수
    const addNumber = (a, b) => alert(`두 수의 합은 ${a + b}입니다.`);

    // 입력값을 받아 숫자로 변환
    const getNumber = (message) => parseInt(prompt(message), 10);

    // 두 숫자를 입력받아 합계 계산
    const num1 = getNumber("첫 번째 숫자를 입력하세요:");
    const num2 = getNumber("두 번째 숫자를 입력하세요:");

    // 유효한 숫자인 경우 합계 출력, 아니면 경고 메시지 표시
    !isNaN(num1) && !isNaN(num2) 
      ? addNumber(num1, num2) 
      : alert("올바른 숫자를 입력해주세요.");
  </script>