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

iberis2·2023년 1월 3일

기명 함수 (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
자동화와 기록으로 더 효율적으로 일하는 으른 개발자가 되려고 합니다.

0개의 댓글