03_함수(1)

#function.html

 

 

03_함수.pdf

0.38MB

---

함수 선언

•  반환 값 선언 없이 function 키워드만 이용하여 사용

•  function 키워드에 함수 명을 작성하여 사용하는 방법 (선언적 함수)

•  function 키워드에 함수 명을 작성하지 않고 변수에 대입하는 방법 (익명 함수)

•  스스로 동작하는 함수 (익명 함수)

 

---

   <button onclick="func1();">클릭1</button>
   <button onclick="func2('매개변수전달');">클릭2</button>
   <button onclick="func3('이번에도 매개변수 전달');">클릭3</button>

---

    <script>
        //매개변수도 없고 인자값도 없는 기본 함수
        function func1() {
            alert("기본함수");
        }

        //매개변수 전달
        function func2(msg) {
            alert(msg);
        }

        //매개변수가 맞지 않아도 동작
        function func3() {
            alert("test");
            //모든 함수의 내부에 arguments라는 배열이 자동으로 생성되어 매개변수를 저장
            alert(arguments[0]); //'이번에도 매개변수 전달' 팝업창 생김
        }
    </script>

---

[클릭1]버튼 클릭 시

 

[클릭2]버튼 클릭 시

 

[클릭3]버튼 클릭 시

---

func1() => function키워드에 함수명을 작성하여 사용하는 선언적 함수

선언적 함수는 만든 함수를 메모리에 바로 올려 놓기 때문에 코드의 순서와 상관없이 호출 가능

 

예시) <script> 내부 가장 상단에 작성

    <script>
        func1();
    
        //매개변수도 없고 인자값도 없는 기본 함수
        function func1() {
            alert("기본함수");
        }

        //매개변수 전달
        function func2(msg) {
            alert(msg);
        }

        //매개변수가 맞지 않아도 동작
        function func3() {
            alert("test");
            //모든 함수의 내부에 arguments라는 배열이 자동으로 생성되어 매개변수를 저장
            alert(arguments[0]); //'이번에도 매개변수 전달' 팝업창 생김
        }
    </script>

실행 시 바로 팝업 창

---

function 키워드에 함수 명을 작성하지 않고 변수에 대입하는 방법 (익명 함수)

변수에 담기는 익명함수는 함수 선언 이후에만 사용 가능

    <script>
        //test2(); // 에러 (test2 is not a function)

        var test2 = function() {
            alert("익명함수입니다.")
        }
        
        test2();//익명함수는 선언된 이후에 사용 가능
    </script>

실행 시 바로 팝업 창

---

스스로 동작하는 함수(익명함수)

호출 없이 바로 실행되며 한번만 실행되고 다시 실행할 수 없다.

    <script>
        //스스로 동작하는 함수(한번만 실행하고 끝남)
        (function() {
            alert("한번만 실행되고 다시 실행할 수 없는 함수");
        })();
    </script>

---

위에서 작성한 함수들을 func1()함수 안에서 호출 해보기.

    <script>
        var test2 = function() {
            alert("익명함수입니다.")
        }

        function func1() {
            alert("기본함수");

            //익명함수 호출 (전역변수라고 생각하면됨)
            test2();
            
            //func2함수에(매개변수)를 주어 호출
            func2('test');
        }

        function func2(msg) {
            alert(msg);
        }

        function func3() {
            alert("test");
            alert(arguments[0]);
        }
    </script>

[클릭1]버튼 클릭 시

 

---

func4(), func5() 함수 작성하고, func1()함수 안에서 호출하기

    <script>
        function func1() {
            
            //변수 returnValue 안에 func4()함수 return값 담기
            var returnValue = func4();
            alert(returnValue);

            func5();
        }

        function func4() {
            return 10;
        }

        function func5() {
            console.log(10);
        }
    </script>

 

[클릭1]버튼 클릭 시