블로그 이미지
소낑
혼자 정리하고 혼자 보는 초보개발자 소끼월드

calendar

1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

Notice

Tag

2017. 1. 13. 09:13 FRONT-END/Javascript

var methodName = function(){}    VS function methodName(){} 차이

  • 1번은 함수 선언 (function declatations)
    • 함수선언은 Function Statement 라고도 하며 말그대로 함수 문장이란 뜻이다. 이는 곧 실행가능한 코드블럭이 아니며 함수의 정의를 나타내는 문장으로 해석되며 따라서 코드해석에 따른 수행결과가 존재하지 않는다는 것을 의미한다.

      Statement 라는 개념을 잘 집고 넘어가야 한다. 함수 선언문이 Statement 라고 하는 말은 정의에서 밝힌것 처럼 코드블럭 자체는 실행가능 코드가 아니라는 것이다. 즉 해당 코드블럭을 콘솔에서 실행하여도 어떠한 결과도 return 되지 않는다. 그러한 이유로 함수선언문을 Class와 동일한 개념으로 이해해도 무방하다.

  • 2번은 함수표현 (function expressions)
    • 함수표현은 Function Literal 이다 이는 실행 가능한 코드로 해석 되어지거나 변수나 데이터구조에 할당되어지고 있음을 의미한다. 즉 해당 코드블럭이 실행코드로서 해석되어지며 동시에 코드실행에 따른 결과값을 가지거나 특정 변수에 할당된 값으로 존재한다.

      이처럼 함수표현은 함수리터럴로 특정변수에 할당되거나 즉시 실행가능한 코드 블럭으로서 존재하는 함수를 의미하는 것이다. 함수표현이 실행코드로서 해석되기 위해서는 ()를 이용하여 함수를 감싸 주어야 한다. 이를 자기호출함수(self invoking function) 라고도 한다. 자기호출함수는 재귀함수와는 다른 개념이다. 재귀함수는 함수 안에서 자신을 호출하는 형식이지만 자기호출함수는 해석과 동시에 실행되는 코드블럭을 말한다.

  • 그니까 1번처럼 하면 그냥 변수 선언하듯이 함수를 선언 만 해주는거고 필요한 데서 얘 호출해서 사용하면 돼,

  • 2번 처럼 하면 함수를 바로 사용 할 수 있도록 하는거야

    • 쟤는 함수를 표현한걸로 저 표현 자체가 함수 call이 될 수 있는건거야 얘는 실행이 가능해 

  • 그니까 function methodName(){...} => 얘는 선언 (statement)한거야
  • 이걸 var methodName = function(){...} 함으로써 객체가 생성되고 이러면서 할당이 되는거야
  • 호이스팅(hoisting)
    • 자바스크립트 -> 인터프리터가 한줄한줄 소스 읽으면서 번역?해석? 하잖아 이때 선언(statement) 되어있는 애를 global 영역에 가장 먼저 끌어올리는거를 말해 선언이 몇번째 줄에 위치해 있던 statement인 애들을 먼저 최상위 scope에 놓은거임ㅇㅇㅇ
    • 근데 이렇게 최상위 scope에 올려놓을때 선언(statement)는 올려놓을 수 있는데 할당은 올려놓을 수 없음
      • var method = function(){...} 이런식으로 있으면 function(){...} 쪽은 statement로 올릴 수 있는데 이 함수가 실행된 리턴값 같은건 올릴 수 없다는 뜻이야 그니까 이상황에서 method는 안올라가겠지? ㅇㅇㅇ
      • 그니까 설계도는 올릴 수 있어도 설계도로 만들어서 동작하는건 안된다 이고지
  • $(selector).on('이벤트명', function (){});
    • 요렇게 하면 document ready됐을때 실행안되자나 binding만 되고 요게 바로 선언이라서 그런거지 설명서만 저 이벤트에 넣어준거지 그래서 이벤트 발생하면 그때 저 설명서대로 움직이겠지
  • $(selector).on('이벤트명', 함수명());
    • 요렇게 하면 위에서 저 함수 선언해놓은거면 document ready 됐을때 그냥 실행되어버리자나 그게 저 함수를 실행'()'해서 그 반환값을 돌려주는거라 그래 다른 언어도 그렇자나 그거야
    • 그럼 바인딩만 하고 싶으면 어케 해야 할까?
      • $(selector).on('이벤트명', 함수명);
        • 요렇게하면 바인딩만 가능행
  • 참조


posted by 소낑