[JavaScript]기명함수(NFE) 재귀함수(RF) 즉시 실행함수(IIFE) 콜백함수(CF) 고차 함수(HOF)

iberis2·2023년 1월 3일
0

기명 함수 (Named Function Expression)

기명 함수란 이름 있는 함수이며,
함수 표현식으로 만든 함수에 이름을 붙여주면 기명 함수 표현식이라고 한다.

함수 표현식으로 함수가 할당된 변수에는 자동으로 'name'이라는 프로퍼티를 가지게 된다.
이 때, 함수에 이름을 정해주지 않으면 변수 이름 자체를 값으로 가지고,

const sayHi = function (){ //이름을 정해주지 않음
	console.log('Hi');
}
console.log(sayHi.name); // sayHi (변수명이 프로퍼티 value)

함수에 이름을 붙여주면 함수 이름을 값으로 갖는다.
❌하지만 이 함수 이름으로 함수 외부에서 함수를 호출할 때는 사용할 수 없다.

const sayHi = function printHi (){ // 이름 정해줌
	console.log('Hi');
}
console.log(sayHi.name); // printHi 
sayHi();// Hi
printHi(); //ReferenceError (함수 이름으로 함수를 호출할 수 없다)

대신 기명 함수 표현식에서 이 함수 이름으로는 함수 내부에서 함수 자체를 가리킬 때 사용할 수 있다.

재귀 함수 (Recursive Function)

재귀 함수는 함수 안에서 자기 자신을 호출하는 함수이다.
기명 함수 표현식에서의 함수 이름은 이러한 재귀함수를 복사할 때 사용할 수 있다.

let countdown = function(n){
  console.log(n);
  
  if (n ===0){
    console.log('End!');
  } else {
    coountdown(n - 1) // 자기 자신을 호출
  }
};

재귀 함수를 복사할 때, 변수명으로 재귀함수를 만들어 사용할 경우 변수가 바뀌면 TypeError가 발생한다.

let countdown = function (n) {
  console.log(n);
  n === 0 ? console.log("End!") : countdown(n - 1);
};

let copyCountdown = countdown;
countdown = null; // 변수 countdown 재할당
copyCountdown(5); // TypeError: countdown is not a function 
//자기 자신을 호출하는 부분에서 countdown이 더이상 함수가 아닌 null이기 때문에 error가 발생한다

변수 이름 대신 함수 이름을 사용하면 이러한 error을 방지할 수 있다.

let countdown = function namedCountdown (n) {
  console.log(n);
  n === 0 ? console.log("End!") : namedCountdown(n - 1);
};

let copyCountdown = countdown;
countdown = null; // 변수 countdown 재할당
copyCountdown(5); // 5, 4, 3, 2, 1, 0, "End!"

즉시 실행 함수(표현)(Immediately Invoked Function Expression)

즉시 실행 함수란 선언과 동시에 즉시 실행되는 함수를 말한다.
(function ( ) { 동작 부분;})()
함수 선언 부분을 소괄호로 감싸고, 그 뒤에 함수를 실행하는 소괄호를 한번 더 붙이는 형식이다.

  • 즉시 실행 함수는 함수 이름을 정해주더라도, 함수 외부에서 재사용할 수 없다.
    그래서 일반적으로는 익명 함수를 사용한다.
    (다만, 재귀 함수를 만들기 위해 이름을 지어줄 수 있다.)
let name = '이코딩';
(function printName() {
  console.log(name);
})() 		 // 이코딩

printName(); //ReferenceError: printName is not defined
  • 프로그램 초기화 기능 또는 재사용이 필요 없는 일회성 동작 구성, 함수의 리턴값을 바로 변수에 할당할 때 등에 활용한다.
  • 즉시 실행 함수에서 사용한 변수들은 함수 내에서만 유효하므로, 일시적으로 사용할 변수 이름으로 보다 자유롭게 작성할 수 있다는 장점이 있다.
const name = '김코딩';

const greeting = (function () {
  name ??= 'please write your name'; // name이 nullish 하면 name에 'please write your name' 할당
  return `Hello! ${name}`;
})();
  
  console.log(greeting) // Hello! 김코딩
  

콜백함수(Callback Function)

다른 함수의 파라미터로 전달된 함수

function makeQuize(quiz, answer, success, fail) {
  if (quiz === answer) {
    console.log(success);
  } else {
    console.log(fail);
  }
}

function getSuccess() {    
  return "정답입니다";
}

function getFail() {
  return "오답입니다";
}

const question = 5 + 3;

makeQuize(question, 8, getSuccess(), getFail()); // 정답입니다. 
//getSuccess() 와 getFail()이 콜백함수이다.

고차 함수(Higher Order Function)

고차 함수란 함수를 리턴하는 함수를 말한다.
이중 괄호를 이용해서 바로 호출할 수 있다.

function printHi(){
  console.log('first function');
  return function(){
    console.log('hi');
  };
};



printHi(); // first function
printHi()(); // first function hi
profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글