JS의 기능과 사용 사례

함수 유형

함수 선언

함수 표현

화살표 함수

즉시 호출된 함수 표현식

함수 선언

function foo(){
     console.log("Do not use var");
}

함수 선언은 스크립트가 로드되기 전에 로드됩니다. 즉, 함수 선언 전에 함수를 호출할 수 있습니다.

foo();    //Function will be invoked

function foo(){
     console.log("Please use strict in JS");
}

함수 선언이 호이스팅되기 때문입니다(JS에서 호이스팅은 스크립트 실행 전에 함수, 변수 또는 클래스를 해석 범위의 맨 위로 이동하는 과정을 말합니다.)

함수 선언에는 "use strict" 모드에서도 블록 범위가 있습니다.

"use strict";

if(x>18){

   foo();     //Will be invoked

   function foo(){
       console.log("Pineapples on pizza should be illegal.")
   }

   foo();     //Will be invoked
}

foo();     //Line 10

10행은 ReferenceError를 발생시킵니다.

"use strict"없이 동일한 경우를 고려하십시오.

foo();     //Will not be invoked

if(x>18){

   foo();     //Will be invoked

   function foo(){
       console.log("Pineapples in pizza should be illegal.")
   }

   foo();     //Will be invoked
}

foo();     //Will be invoked only when if block is executed.

함수foo 선언은 전역 범위에서 호이스팅되지 않고 지역 범위(if 블록 내) 내에서 호이스팅됩니다.

호출 범위 전체에서 함수를 사용할 수 있도록 하려는 경우 함수 선언이 선호됩니다.

함수 표현식

let foo=function(){
     console.log("Elon Musk");
}

함수 표현식은 기본적으로 변수에 함수를 할당하는 것을 의미합니다. (foo 변수는 익명 함수를 참조합니다) 함수 선언과 달리 함수 표현식은 호이스트되지 않습니다.

foo();     //Will not be invoked

let foo=function(){
     console.log("Elon Musk.");
}

foo();     //Will be invoked

인터프리터가 할당 연산자(=)의 오른쪽을 읽을 때 함수가 선언됩니다.

프로그램 전체에서 함수가 전역 범위 대신 제한된 범위를 갖도록 하려는 경우 함수 선언보다 함수 표현식을 선호합니다.

화살표 함수

foo=()=>{
     console.log("Web3");
}

화살표 함수는 함수 작성의 줄임말입니다. setTimeout() 의 도움으로 이해합시다.

setTimeout(foo(),2000);     //Calls foo() after 2 seconds

function foo(){
     console.log("Mark is the watcher");
}

이제 이것을 확인하십시오.

setTimeout(()=>{
     console.log("DC is underrated");
},2000);

두 코드 조각 모두 기능은 동일하지만 후자는 코드 줄이 적고 가독성이 좋습니다.

let mulTwo = number => number * 2  

/*If the arrow function has only one line in the body, there is no need for curly braces.*/

mulTwo(2);     //4

Arrow Functions의 "이것"

화살표 함수에는 this 가 없습니다. 사용되는 경우 외부 범위의 컨텍스트를 사용합니다.

const obj={
     name:"Spiderman",

     foo(){
          setTimeout(()=>{
               console.log(this);
          },1000);
     }
};

obj.foo();                //Output is object obj.

여기서 this는 foo()의 this를 나타냅니다.

함수 표현식 및 함수 선언의 경우 this 값은 동적입니다(이 값은 함수가 호출되는 위치에 따라 다름).

const obj={
     name:"Spiderman",

     foo(){
          setTimeout(function(){
               console.log(this);  
          },1000);                              
     }
};

obj.foo();          //Window object

/*Output is the window object because the function is called in the global scope.*/

함수가 범위와 동일한 컨텍스트를 가지려면 현재 컨텍스트에 바인딩되어야 합니다.(바인드 함수 사용).

const obj={
     name:"Spiderman",

     foo(){
          setTimeout(function(){
               console.log(this);  
          }.bind(this),1000);                              
     }
};

obj.foo();
/*Output is the object obj because the function 
is now bound to the current context.*/

화살표 함수에는 this 가 없으므로 상위 범위의 this 값을 사용합니다.

즉시 호출되는 함수 표현식(IIFE)

IIFE는 함수가 생성된 직후에 호출됩니다. 그것은 스스로를 불러일으키는 것입니다.

(function(){
    console.log("Daredevil");
})();

이 시나리오를 고려하십시오.

let sum = (function(a,b){
    return a + b;
})(5, 10);

console.log(sum);       //15

console.log(sum());     //Error

위의 시나리오에서 sum는 할당된 함수의 반환 값만 저장하므로 다른 곳에서 함수를 호출할 수 없습니다.

IIFE는 이름을 지정할 수도 있지만 호출할 수는 없습니다.

(function NWH() {
    console.log("I am a very good lawyer");
})();

NWH();      //NWH is not defined

함수를 한 번만 사용하려는 경우 IIFE를 사용할 수 있습니다. 클로저에도 사용됩니다(자세한 기사는 here를 클릭하십시오).

이 기사가 도움이 되었기를 바랍니다. 나는 프로그래밍에 익숙하지 않으며 이것은 내 첫 블로그입니다. 아래 댓글에서 개선할 수 있는 방법을 알려주세요!:D