함수 표현식

    자바스크립트에서 함수는 특별한 종류의 값으로 취급한다.

    구조로 취급되지 않는다.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <script>
          //함수 선언문 방식
          function showHi1(){
            alert("Hi");
          }
    
          //함수선언 방식위에 함수 표현식 사용
          let showHi = function() {
            alert("Hi");
          };
    
          alert(showHi);
          showHi();
        </script>
      </body>
    </html>

     

    함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

     

    함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.

     

    스코프

    함수 표현식은 블록 밖에서도 동작한다.

     

    함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다.

     

     


    콜백 함수

    함수를 함수의 인수로 전달하고, 필요하면 인수로 전달한 함수를 나중에 호출하는 것

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <script>
          function ask(question, yes, no) {
            if (confirm(question)) yes()
            else no();
          }
    
          ask(
            "동의?",
            function() { alert("동의"); },
            function() { alert("취소"); }
          );
        </script>
      </body>
    </html>


    화살표 함수 기본 (arrow function)

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <script>
          //함수표현식 사용
          let sum = (a, b) => a + b;
    
          /* 위 화살표 함수는 아래 함수의 축약 버전
            let sum = function(a, b) {
              return a + b;
            };
          */
    
          alert( sum(1, 2) ); // 3
        </script>
      </body>
    </html>

     

    동적인 화살표 함수 사용 예제

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <script>
          let age = prompt("나이를 알려주세요.", 18);
    
          let welcome = (age < 18) ?
            () => alert('안녕') :
            () => alert("안녕하세요!");
    
          welcome();
        </script>
      </body>
    </html>

     

    중괄호를 사용할 경우 리턴값을 표시해주어야 한다.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <script>
          let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려준다.
            let result = a + b;
            return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 한다.
          };
          
          alert( sum(1, 2) ); // 3
        </script>
      </body>
    </html>

     

    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기
    loading