Function

Namiya·2025년 7월 4일

JavaScript 연습

목록 보기
13/27
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
    <title>Function</title>
</head>
<body>
   
    <script>

        console.groupCollapsed('Ex-01');

        // 함수 선언
        function printName() {
            console.log('My name is Harry Potter');
        }
      
        // 함수 호출 표현식(함수의 식별자 + 함수 호출 연산자)으로 printName 함수를 호출
        printName();

        // 함수 printName을 변수에 대입
        var print = printName;

        print();

        console.log('typeof printName = ' + typeof printName);
        console.log('printName = ' + printName);

        console.groupEnd();

    </script>

    <script>
        console.groupCollapsed('Ex-02');

        /*
        // hello 함수를 변수 sayHello에 대입
        var sayHello = function hello() {
            console.log('Hello World!');
        }
        */

        // 익명 함수(Anonymous Function)을 변수 sayHello에 대입
        var sayHello = function () {
            console.log('Hello World!');
        };

        // 자료형이 function인 값은 함수 호출 연산자로 호출할 수 있다
        sayHello();

        console.log('typeod sayHello = ' + typeof sayHello);
        console.log('sayHello = ' + sayHello);

        console.groupEnd();

    </script>

    <script>
       
        console.groupCollapsed('Ex-03');

        // 함수 선언
        function printName(name) {
            // 함수의 매개 변수는 호출하면 선언되고, 인자로 초기화 된다.
            // var name = 'Harry Potter';
            // var name = 'Michael Jackson';
            console.log(`My name is ${name}.`);
        }

        // 함수 호출
        printName('Harry Potter');
        printName('Michael Jackson');

        console.groupEnd();

    </script>

    <script>

        console.groupCollapsed('Ex-04');

        function calc(func, x, y) {
            // var func = function add(x, y) {
            //     return x + y; 
            // };
            // var x = 3;
            // var y = 8;

            return func(x, y);
            // → return func(3, 8);
            // → return add(3, 8);
            // → return 11;
        }

        function add(x, y) {
            return x + y;
        }

        console.log('add(3, 8) = ' + add(3, 8));
        // console.log('add(3, 8) = ' + 11);
        console.log('calc(add, 3, 8) = ' + calc(add, 3, 8));

        console.groupEnd();

    </script>

    <script>

        console.groupCollapsed('Ex-05');

        var result = calc(function (x, y) {
            return x - y;
        }, 9, 4);

        console.log('result = ' + result);

        console.groupEnd();

    </script>

    <script>

        console.groupCollapsed('Ex-06');

        // 정수 2개를 전달받아, 두 정수의 평균을 구하는 getAverage 함수
        function getAverage(x, y) {
            // 함수의 매개 변수는 함수를 호출하면 선언되고 인자로 초기화된다.
            // var x = 31;
            // var x = 17;
            // 매개 변수 x와 y의 평균을 구해 반환
            return (x + y) / 2;
            // → return 24;
        }
       
        // 변수의 선언과 초기화
        var x = 31;
        var y = 17;

        var average = getAverage(x, y);

        // 템플릿 리터럴을 사용해 출력
        console.log(`The average of ${x} and ${y} = ${average}`);

        console.groupEnd();

    </script>
   
</body>
</html>

0개의 댓글