ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 7 Expression vs Statement
    Computer Science/JavaScript 2019.04.25 22:57

    자바스크립트 핵심 컨셉 33가지

     

    Chapter 7 Declaration vs Expression

     

    7장에서 다루는 내용은

     

    함수 선언과 표현이다.

     

    자바스크립트에서 함수를 생성할 때

     

    사용하는 방법은 세 가지가 있다.

     

    1. 함수 선언식

     

    function [name](param1, param2, ...param3) {
    
    }

     

    function 키워드를 함수 이름 앞에 놓으면 된다.

     

    함수 선언식의 특징은 호이스팅된다.

     

    이 때문에 함수를 선언하기 전에

     

    함수를 실행할 수 있다.

     

    const num1 = 10;
    const num2 = 20;
    
    const result = sum(num1, num2);
    
    console.log(result); // 30 (sum 함수 선언 전에 실행)
    
    function sum(param1, param2) {
    	return param1 + param2;
    }

     

    위 사례의 자바스크립트 호이스팅에 의존하는 대신

     

    함수를 먼저 선언을 하고 실행하는 것이 좋은 방법이다.

     

    2. 함수 표현식

     

    const [name] = function(param1, param2, ...param3) {
    
    }

     

    익명 함수가 생성되고 변수에 지정을 한다.

     

    const num1 = 10;
    const num2 = 20;
    
    const result = sum(num1, num2); // sum is not defined
    
    const sum = function(param1, param2) {
    	return param1 + param2;
    }
    
    console.log(result);

     

    표현식의 한계는

     

    함수가 정의될 때까지 실행할 수 없다.

     

    const num1 = 10;
    const num2 = 20;
    
    const sum = function(param1, param2) {
    	return param1 + param2;
    }
    
    const result = sum(num1, num2); // 30

     

    위의 표현식 사례는 정상적으로 작동한다.

     

    3. Named function expressions

     

    1번과 2번 접근 방식의 결합

     

    const num1 = 10;
    const num2 = 20;
    
    const sumVariable = function sumFunction(param1, param2) {
    	return param1 + param2;
    }

     

    익명 함수가 아니고 sumFunction 이름을 가진 함수를

     

    sumVariable 변수에 할당해주었다.

     

    const result = sumFunction(num1, num2); // sumFunction is not defined

     

    function 키워드에 이름을 추가했기 때문에

     

    sumFunction 해당 이름으로 실행되지 않는다.

     

    const result = sumVariable(num1, num2); // 30

     

    할당된 변수명 sumVariable만이

     

    참조하고 실행할 수 있다.

     

    const num1 = 10;
    const num2 = 20;
    
    const sumVariable = function sumFunction(param1, param2) {
      let sum = param1 + param2;
    
      if (sum === 30) {
        sum = sumFunction(sum, 10);
      }
    
      return sum;
    }
    
    const result = sumVariable(num1, num2)
    
    console.log(result) // 40

     

    sumFunction 함수 안에서는

     

    sumFunction 사용이 가능하다.

     

    세 가지 방식 중 어떤 방식만

     

    사용하라는 건 없지만

     

    각각의 방식의 특징을 잘 알고

     

    사용하는 게 중요한 것 같다.

    댓글 0