ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 기본 - 함수
    JavaScript/생활코딩 2018. 11. 15. 17:11



    함수 - https://opentutorials.org/course/743/4729




    함수(function)는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.


    함수가 없다면? - 특정한 로직을 여러군데 사용하고 있다고 가정했을 때, 로직이 수정되면 사용되는 곳을 모두 다 수정해주어야 한다.

    하지만 특정한 로직을 함수로 만들어 놓고 사용되는 곳에 넣어놓는다면 함수안에 있는 로직을 변경하면 사용되는 곳에 있는 함수들도 다 수정이 된다. 즉 재사용성, 유지보수가 용이하다.





    a.함수의 형식


    function 함수명( [인자...[,인자]] ){

       코드

       return 반환값

    }


    문법만으로는 함수의 형식을 체감하기 힘드므로 직접 사용해보아야 한다.








    b. 함수의 정의와 호출


    예제


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>


    /*function 함수명( [인자...[,인자]] ){

       코드

       return 반환값

    }*/

    //함수를 정의한 것 

    function numbering(){

    i = 0;

    while(i < 10){

    document.write(i);

    i += 1;

    }   

    }

    numbering(); 

      //괄호 ()가 있어야 함수로 인식, 괄호가 없이 numbering만 쓰면 자바스크립트는 변수로 인식.

    //함수를 호출하기 때문에 함수numbering 중괄호가 실행됨.

    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.

    경고창 답

    0123456789











    c. 입력과 출력


    함수의 핵심은 입력과 출력이다. 입력에 따라 출력이 달라진다. return은 함수에서 입력과 출력의 역할을 한다





    • return

    제2


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>

    //return의 역할은 1.함수를 끝내는 것과 2.return뒤의 값을 해당 함수의 출력값으로 반환한다.

    function get_member1(){

    return 'egoing';

    }

     

    function get_member2(){

    return 'k8805';

    }

     

    alert(get_member1()); //함수가 실행되고 return값인 egoing값이 반환되어 alert('egoing');이 호출된다.

    alert(get_member2()); //함수가 실행되고 return값인 k8805값이 반환되어 alert('k8805');이 호출된다.

    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.

    경고창 답

    1. egoing

    2. k8805


    ※만약 함수안에 return값이 여러개라면 첫번째 있는 return값만 반환되고 나머지 값들은 무시된다. 






    • 인자

    인자(argument)는 함수로 유입되는 입력값이다.



    예제3


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>

    //주석의 순서대로 읽으면 이해하기 쉬움

    function get_argument(arg){ //1.arg는 함수내에서 매개변수, parameter로 선언된다. 

    return arg*1000; //3.arg=1 일 때 결과값으로 1000을 반환.

    }

     

    alert(get_argument(1)); //2.함수 괄호안에 있는 1은 인자. 함수가 호출되면서 arg=1 이라는 값이 함수내에 선언된다.

    //4.반환된 값 1000은 alert(1000);으로 호출된다.

    alert(get_argument(2));

    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.

    경고창 답

    1. 1000

    2. 2000


    ※인자는 예제처럼 1개가 아닌 2개 이상의 복수로도 사용할 수 있다. 하지만 함수내의 return값은 하나만 가질 수 있다.










    d. 함수를 정의 하는 다른 방법



    • 변수에 함수를 넣어서 정의하는 방법


    예제4


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>


    var numbering = function (){ // numbering 이라는 변수에 function으로 시작하는 값을 대입한 것

    i = 0;

    while(i < 10){

    document.write(i);

    i += 1;

    }   

    }

    numbering(); //변수는 함수를 갖게 되므로 함수처럼 정의하여 사용할 수 있음

    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.

    경고창 답

    0123456789





    • 함수의 정의와 호출을 함께하는 방법 (익명함수)

    일회성으로 호출하는 경우에 사용되는 방법


    예제5


    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <script>


    (function (){   // 이름이 없어도 되는 함수표현방식

    i = 0;

    while(i < 10){

    document.write(i);

    i += 1;

    }   

    })();  // 함수를 괄호로 감싼 다음 괄호를 붙여줌으로써 함수가 정의되고 호출됨. (function~)();


    </script>

    </body>

    </html>


    예제를 크롬에서 열게 되면 함수를 실행한 결과가 페이지에 나타난다.

    경고창 답

    0123456789

    댓글

Designed by Tistory.