[JavaScript] 함수, 계산기 만들기

 

함수 선언

어디서든 호출 가능

함수 선언은 다음과 같은 함수 키워드로 구성

• 함수의 이름
• 함수의 매개변수들, 괄호로 묶고 쉼표로 구분
• 함수를 선언하는 JavaScript 문으로 중괄호로 묶는다 { /* ... */ }

 

        function greet(name){

            console.log(`안녕하세요 저는 ${name}입니다.`);

        }

 

        greet('youngD');    인자를 파라미터에 전달 -> 입력된 매개변수를 활용

 

 

 

greet 이라는 간단한 함수 정의

greet() 함수에 정의된 매개변수는 name에 저장

 

함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.(= 선언 전에 호출돼도 정상 동작)

 

 

 

 

    <script>

        // 두 숫자를 연산하여 결과값을 출력하는 sum()함수 구현

 

        function sum(num1, num2){

            console.log(`${num1}과 ${num2}의 더한 결과 : ${num1+num2}`);

        }

        // 함수 호출

        sum(4, 8);

 

 

        function sum2(num3, num4){

            return num3+num4;

        }

 

        // 반환 값을 사용하려면 아래와 같이 사용할 수 있다.

 

        console.log(sum2(5,8));

 

        let result = sum2(5,10);

        console.log(`더한 결과 : ${result}`);

 

    </script>

 

 

 

 

 

 

    <script>

        function sum2(num3, num4){

            return num3+num4;

        }

        // 반환 값을 사용하려면 아래와 같이 사용할 수 있다.

        console.log(sum2(5,8));

 

        let result = sum2(5,10);

        console.log(`더한 결과 : ${result}`);

 

    </script>

 

 

 

 

 

< 계산기 만들기>

 

 

    <script>

        let num1 = parseInt(prompt('첫 번째 숫자 입력 : '));

        let num2 = parseInt(prompt('두 번째 숫자 입력 : '));

        let op = prompt('연산할 기호 입력 : ');

        function calculator(num1,num2,op){

            if(op === '+'){

                console.log(num1+num2);

            }else if(op === '-'){

                console.log(num1-num2);

            }else if(op === '*'){

                console.log(num1*num2);

            }else if(op === '/'){

                console.log(num1/num2);

            }else{

                console.log('잘못된 연산자 입력');

            }

        }

        calculator(num1,num2,op);

 

    </script>

 

 

 

 

 

함수표현식

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

유효범위: 함수 블록 { } 안에서 유효

함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들만 끌어올리는 것

var 변수 선언과 함수선언문에서만 호이스팅이 일어난다

var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.

let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

 

 

    <script>

 

        // 함수표현식

        // -> 함수 호이스팅이 발생하지 않는 구조

        const func = function(){

            console.log('함수표현식 실행!');

        }

        func();

        // 화살표 함수 : 기존의 함수 표현식에서 function 키워드를 삭제,

                                 인자를 받는 매개변수의 괄호()와 코드블럭({}) 사이에 화살표(=>)를 넣어줌

                                 인스턴트 생성할 수 X (prototype 속성이 없다)

        const func2 = ()=>{

            console.log('화살표 함수 실행!');

        }

       

        func2();

        // 화살표 함수 예제

        const greet = () =>{

            console.log('안녕하세요');

        }

        greet();

        const greet2 = (name) =>{

            console.log(`안녕하세요 저는 ${name}입니다.`);

        }

        greet2('youngD');

        const greet3 = name => `안녕하세요. 저는 ${name}.`;

        console.log(greet3('oldD'));

    </script>