Koans- 04_Scope

• (1) 함수선언식(Function Declarations)과 함수표현식(Function Expressions)

  • 함수 선언식 (Function Declarations)
    일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다.
  • 선언식 형태:
    function 함수명() {}
  • 예시

  function funcDeclarations() {
  return 'declaration';
  }
  funcDeclarations(); //'declaration'

  • 함수 표현식 (Function Expressions)
    유연한 자바스크립트 언어의 특징을 활용한 선언 방식
  • 표현식 형태:
    const 함수명 = function () {};
  • 예시

  const funcExpression = function () {
    return 'expression';
    }
    funcExpression(); // 'expression'

• (2) 호이스팅

  • 정의: 런타임전에 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단!에 선언하는 것!
  • 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

  [koans 문제]
  let funcExpressed = 'to be a function';
  
    console.log(typeof funcDeclared)//'function';
    console.log(typeof funcExpressed)'string';
  
    function funcDeclared() {
      return 'this is a function declaration';
    }
  
    funcExpressed = function () {
      return 'this is a function expression';
    };

  • funcDeclared 선언식은 호이스팅으로 인해서 저 위치에서 console을 찍을때도 밑에 함수를 찾아서 타임(fucntion)으로 리턴합니다. 하지만 funcExpressed 표현식은 호이스팅을 안하기 때문에 위에 선언된 변수의 값의 타입(string)을 리턴합니다.

• (3) 함수표현식을 객체형태로 담을수가 있다.
  • funcContainer.func()변수.key() 값으로 실행이 가능하다.

    function funcDeclared() {
      return 'this is a function declaration';
    }

    funcExpressed = function () {
      return 'this is a function expression';
    };


    const funcContainer = { func: funcExpressed }; 
    console.log(funcContainer.func())//'this is a function expression';
    funcContainer.func() === funcExpressed();
    funcContainer.func === funcExpressed; 이것하고 같다.

    funcContainer.func = funcDeclared; 다시 재할당
    console.log(funcContainer.func())//'this is a function declaration';
  });

• (4) 변수를 선언하고 함수실행식을 담아도, 그 즉시 함수가 실행이 됩니다.

   let age = 27;
    let name = 'jin'; //'jimin'
    let height = 179;

    function outerFn() {
      let age = 24; //26
      name = 'jimin';
      let height = 178;

      function innerFn() {
        age = 26;
        let name = 'suga';
        return height;
      }

      innerFn();

      return innerFn;
    }

    const innerFn = outerFn();// 이것을 선언만 했어도 실행이 된다.
    // outerFn() 이래도 실행이 된다.
    const innerFn = outerFn // 이러면 실행이 되지 않는다.

출처 : 코드스테이츠