day07

📌 함수란?

• 함수의 사용은 함수의 정의(선언과) 과 함수의 호출로 나뉜다.

• 함수의 정의(선언)방법

  	function 함수이름(){
  		... 실행할 구문..
  	}

• 함수 호출 방법

  	함수이름();

📢 함수 기본 예제

: 함수의 선언 방법

<script>
        // 함수의 선언
        function sayHello(){
            document.write("<h1>안녕하세요</h1>")
            document.write("<h1>자바스크립트</h1>")
        }

        // 함수의 호출 (여러번 재사용 가능)
        sayHello();
        sayHello();
        sayHello();
    </script>

💡 결과값

📌 파라미터(Parameters)

• 자바스크립트에서는 함수의 이름뒤에 위치한
  괄호() 안에 파라미터를 기술한다.

  function 함수이름(파라미터){
  	.. 실행할 구문..
  }

• 파라미터가 있는 함수 호출

  	함수이름(파라미터);

📢 함수 기본 예제 (2)

: (x) 값만 있는 함수

	<script>
        function f(x){
            var y = x + 1;
            document.write("<h1>" + y + "</h1>")
        }

        f(2); // 2 + 1 = 3
        f(3); // 3 + 1 = 4
        f(10); // 10 + 1 = 11
    </script>

💡 결과값

📌 다중파라미터

• 자바스크립트 함수의 다중 파라미터

  	function 함수이름(파라미터1, 파라미터2){
  		... 실행할 구문..
  	}

• 다중 파라미터가 있는 함수 호출

  	함수이름(파라미터1, 파라미터2, ...);

📢 함수 기본 예제 (3)

	<script>
        function f(x,y) {
            var z = x + y;
            document.write("<h1>" + z + "</h1>")
        }

        f(2 , 1);
        f(5,  7);
        f(20, 10);
    </script>

💡 결과값

📌 리턴값

• 결과값 되돌려 주는 값

  	function f(x){
  		return x + 1;
  	}

• 호출

  	var y = f(5);

📢 함수 기본 예제 (4)

<script>
        // 함수선언
        function f(x, y){
            var z = x + y;

            // 조건 (10보다 작으면 끝내고 10보다 크거나 같으면 다시 리턴함)

            if( z < 10) {
                return;
            }

            return z;
        }

        // 함수의 호출
        var a = f(2, 1);
        var b = f(5, 7);
        var c = f(10, 5);


        document.write("<h1>" + a + "</h1>"); // if문에서 끝났기때문에 값이 오지 않아 undefined값 출력
        document.write("<h1>" + b + "</h1>");
        document.write("<h1>" + c + "</h1>");
    </script>

💡 결과값

📌 함수의 실행 중단

• 자바스크립트 함수는 처리 도중 return 문을
  만나게 되면 그 즉시 실행을 중단한다.
• 이러한 특성을 이용하여 특정 조건이 충족되지
  않을 경우 등에 대한 처리중단을 목적으로
  return 문을 사용할 수 있으며, 리턴값 없이 처리를 중단하고자 하는 경우에는 returun 키워드만 사용한다.
• 이때, 값이 없이 리턴 결과를 변수에 대입한 경우, 정의되지 않은 값인 "undefined"가 대입된다.

📢 함수 기본 예제 (5)

	<script>
        function sum(x, y){
            var z = x + y;
            return z;
        }

        function printResult(x, y){
            var result = sum(x , y);
            document.write("<h1>" + result + "</h1>" );
        }

        printResult(7, 10);
    </script>

📌 함수간의 호출

• 자바스크립트에서도 어떤 함수 안에서 다른 함수를 호출 할 수 있다.
• 현재 함수 안에서 호출한 다른 함수의 리턴값을
  현재 함수 안에서 다른 계산을 처리하는데 활용할 수 있다.

📢 함수 기본 예제 - Numbering (6)

   	<script>
        /*
            function numbering(){ .. }
        */
       // numbering 이라는 변수가 함수를 갖게된다.
        let numbering = function(){
            let i = 0;
            while ( i < 10){
                document.write(i);
                i += 1;
            }
        }

        numbering();
    </script>

💡 결과값

📢 함수 기본 예제 - 익명함수 (7)

	<script>
        // 익명함수
        // 일회성 호출
        (function(){
            let i = 0;
            while (i<10){
                document.write(i);
                i +=1;
            }
        })();
    </script>

💡 결과값

📢 함수 기본 예제 - 화살표 함수 (8)

	<script>
        /*
          화살표 함수
          - 함수 표현식보다 단순하고 간결한 문법으로
          함수를 만들 수 있는 방법이 있다. 
          
          매개변수를 지정하는 방법
        -  () => { .... }
                : 매개변수가 없는 경우
        -   x => { ... }
                : 매개변수가 한 개인 경우, 소괄호
                생략할 수 있다.
        - (x, y ) => {...}
                : 매개변수가 여러 개인 경우 소괄호
                를 생략할 수 없다.
            
        함수 몸체 부분
        - x => { return x *  x}
        - x => x * x
            : 함수 몸체가 한줄의 구문이라면 중괄호를
            생략할 수 있으며, 암묵적으로 return된다.
        - () = > {
                const x = 10;
                return x;
        }
        */
       // 매개변수가 없는 경우
       let foo = () => { console.log('foo function')}
       foo();

       // 매개변수가 하나인 경우
       let foo2 = x => document.write(x);
       foo2('user');

       let sayHi = () => alert("안녕하세요");
       sayHi();
    </script>

💡 결과값

다음 출력값

📢 함수 기본 예제 - 매개변수가 여러 개인 경우 (9)

<script>
        // 매개변수가 여러 개인 경우
        let user = (a,b) => a + b;

        document.write(user(1,3));

        document.write('<br>');
        let user2 = (a, b) => {return a + b}
        document.write(user2(3,4));

        document.write('<br>');
        let user3 = (a, b) => {return a + b}
        document.write(user2(8,4));

        document.write('<br>');
        let user4 = (a, b) => {
            let c = 3;
            return a + b + c;
        }
        document.write(user4(10,11));

        document.write('<br/>');
        let user5 = n => n*2;
        /*
        function user5(n){
            return n * 2;
        }
        */
       document/write(user5(3));
     </script>

💡 결과값

📢 함수 기본 예제 (10)

<script>
        let age = prompt("나이를 알려주세요", 18);

        let welcome = (age < 18 ) ? 
        () => alert ('안녕') : 
        () => alert ('안녕하세요');

        welcome();
    </script>

💡 결과값

18살보다 높을시

18살보다 낮을시

📢 함수 기본 예제 (11)

	<script>
        function confirmFun(){
            if( confirm("확인(예) 또는 취소(아니오)를 선택해 주세요") ){
                alert("확인(예)을 눌르셨습니다");
            } else {
                alert("취소(아니오)를 눌르셨습니다");
            }
        }

        confirmFun();
  </script>

💡 결과값
처음 출력

예 눌렀을시

취소 눌렀을시

📢 함수 기본 예제 (12)

<script>
        /*
            익명함수
                function(){....}
                () => {....}
            
            1. 기능 구현
            2. function() 익명함수
            3. () => 익명함수
        */
        
        function ask(question, yes, no){
            if( confirm(question)){ // 확인
                yes();
            } else { //취소
                no();
            }
        }

        ask('동의하십니까?',
            function(){alert('동의하셨습니다.')},
            function(){alert('취소 버튼을 누르셨습니다.');});
    </script>

💡 결과값

확인 결과

취소 결과

📢 함수 기본 예제 (13)

<script>
        /*
            익명함수
                function(){....}
                () => {....}
            
            1. 기능 구현
            2. function() 익명함수
            3. () => 익명함수
        */
        
        function ask(question, yes, no){
            if( confirm(question)){ // 확인
                yes();
            } else { //취소
                no();
            }
        }

        ask('동의하십니까?',
            () => alert("동의하셨습니다."),
            () => alert("취소 버튼을 누르셨습니다."));
    </script>

결과값은 12와 같다.