제곱 함수 구하기

 

제곱 함수를 구하는 코드를 짜 보자

 

 

조건

 

1. prompt로 입력받는 두 개의 값 중 하나라도 1보다 작은 값을 받을 경우 다시 받는다. 

 

2. 두 개의 값을 받을 때 함수를 사용한다. 

 

3. 1 이상의 자연수를 받았다면 최종적으로 구하는 제곱 함수를 alert로 띄워준다. 

 

 

 

code

 <script>
        let x = prompt('x?');
        let y = prompt('x?');

        function checkNum(value){
            if(value < 1){
                alert("입력 값은 1이상의 자연수이어야 합니다.");
                return prompt('x?');
            }
            return value;
        }

        function pow(num1,num2){
            let result = num1;
            for(let i = 1; i< num2; i++){
                result *= num1;
            }
            return alert(`${num1}의 ${num2}승은 ${result}입니다.`);
        }
        pow(checkNum(x),checkNum(y));

</script>

 

 

결과:

 

 

 

개선점 1

 

checkNum() 함수는 오로지 파라미터 값이 1 이상인 자연수를 판단하는 기능을 하는 것만이 아닌, 새롭게 값을 받고 있다.  ( 함수는 하나의 기능만 수행하게 바꾸기 위해 새로운 함수를 사용한다. ) 

 

 

code

 <script>
 
        let x = prompt('x?');
        let y = prompt('x?');

        function checkNum(value){
            if(value < 1){
                alert("입력 값은 1이상의 자연수이어야 합니다.");
                return returnPrompt(value);
            }
            return value;
        }

        function returnPrompt(value){
            let lessThanOne = true
            while(lessThanOne){
                value = prompt('x?');
                if( value < 1){
                    return checkNum(value);      
                }
                lessThanOne = false;
            }
            return value;
        }

        function pow(num1,num2){
            let result = num1;
            for(let i = 1; i< num2; i++){
                result *= num1;
            }
            return alert(`${num1}의 ${num2}승은 ${result}입니다.`);
        }
        pow(checkNum(x),checkNum(y));
    
</script>

 

 

결과

 

 

 

 

---

 

 

개선점 2 

 

위의 코드는 함수 선언문으로 함수를 정의했다.

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장한다. 

 

즉, 함수 선언, 초기화, 할당이 한번에 이루어진다. 그렇기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출이 가능하다. 

 

 

다시 code를 보자

 

 <script>
 
        let x = prompt('x?');
        let y = prompt('x?');

        function checkNum(value){
            if(value < 1){
                alert("입력 값은 1이상의 자연수이어야 합니다.");
                return returnPrompt(value);
            }
            return value;
        }

        function returnPrompt(value){
            let lessThanOne = true
            while(lessThanOne){
                value = prompt('x?');
                if( value < 1){
                    return checkNum(value);      
                }
                lessThanOne = false;
            }
            return value;
        }

        function pow(num1,num2){
            let result = num1;
            for(let i = 1; i< num2; i++){
                result *= num1;
            }
            return alert(`${num1}의 ${num2}승은 ${result}입니다.`);
        }
        pow(checkNum(x),checkNum(y));
    
</script>

 

함수 선언문으로 함수를 정의하였고, 함수의 호출을 제일 아래에서 진행했지만, 

 

 <script>
 
        let x = prompt('x?');
        let y = prompt('x?');

        pow(checkNum(x),checkNum(y));
        
        function checkNum(value){
            if(value < 1){
                alert("입력 값은 1이상의 자연수이어야 합니다.");
                return returnPrompt(value);
            }
            return value;
        }

        function returnPrompt(value){
            let lessThanOne = true
            while(lessThanOne){
                value = prompt('x?');
                if( value < 1){
                    return checkNum(value);      
                }
                lessThanOne = false;
            }
            return value;
        }

        function pow(num1,num2){
            let result = num1;
            for(let i = 1; i< num2; i++){
                result *= num1;
            }
            return alert(`${num1}의 ${num2}승은 ${result}입니다.`);
        }
  
    
</script>

 

위의 코드와 같이 함수 호출을 위에서 해도 원하는 결과값을 얻을 수 있다.

 

결과:

 

 

이는 함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한 함수 호이스팅(Function Hoisting)이 일어나기 때문이다.

 

---

 

함수 선언문이 아닌 함수 표현식으로 바꿔보자 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="powStart()">click!</button>
  
    <script>
        function powStart() {
        let x = prompt('x?');
        let y = prompt('x?');
        
        
        let checkNum = function(value){
            if(value < 1){
                alert("입력 값은 1이상의 자연수이어야 합니다.");
                return returnPrompt(value);
            }
            return value;
        }

         let returnPrompt = function(value){
            let lessThanOne = true
            while(lessThanOne){
                value = prompt('x?');
                if( value < 1){
                    console.log(value);             
                    return checkNum(value);      
                }
                lessThanOne = false;
            }
            return value;
        }

       let pow = function(num1,num2){
            let result = num1;
            for(let i = 1; i< num2; i++){
                result *= num1;
            }
            return alert(`${num1}의 ${num2}승은 ${result}입니다.`);
        }
    
        pow(checkNum(x),checkNum(y));
    }
    
</script>
</body>
</html>

 

위의 code의 경우 pow(checkNum(x), checkNum(y)); 를 함수 표현식을 정의한 후에  호출을 했지만, 

만약 pow(checkNum(x), checkNum(y));  를 함수 표현식을 정의하기 전에 호출을 한다면 아래와 같은 오류가 발생한다.

 

 

 

이는 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생했기 때문이다.

 

변수 호이스팅은 아래 게시글을 참고하자

 

https://despiteallthat.tistory.com/46

[JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당

 

JavaScript: The Good Parts의 저자이며 자바스크립트의 권위자인 더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수 표현식만을 사용할 것을 권고하고 있다. 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다고 지적한다.

 

또한 함수 선언문으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하므로 애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의해야 할 필요가 있다.

 

개선점을 보완한 결과: