[JS] IIFE - 즉시 호출 함수 표현식

IIFE [Immediately Invoked Function Expression]

즉시 실행 함수 표현은 정의되자마자 즉시 실행되는 JS 함수

📌기본적인 형태

(function () {
  // 이 안에 코드를 쓰면
  console.log("즉시 실행!");
})(); // 여기에 바로 () 붙여서 '즉시 실행'!

원래는 함수 만들고 호출을 해줘야 실행되는데
즉시 호출 함수 표현식은 만들자마자 호출 되는 것📢

1️⃣ 첫번째 소괄호 : 전역 선언 막고,
IIFE 내부 안으로 다른 변수 접근 막기✋

2️⃣ 두번째 소괄호 : 즉시 실행 함수를 생성하는 괄호
이를 통해 JS 엔진은 함수를 즉시 해석 및 실행

🎯IIFE 주된 사용 목적

• 변수를 전역으로 선언하는 것을 피하기 위해
• IIFE 내부 안으로 다른 변수들이 접근하는 것을 막기 위해

🐱‍💻

(
  function () {
  
  }
)()

기본적인 구조

(
  function () {
  	var aName = 'Barry'
  }
)();

console.log(aName);

첫번째 소괄호의 역할이 뭐였지❓
✋IIFE 내부에서 정의된 변수 외부 범위 접근❌

var result = (
  function () {
   var name = "Barry";
    return name;
  }
)()
// console.log(result());
console.log(result);  // Barry 출력

호출한게 아닌데도 잘 출력되는 걸 볼 수 있음
👉 두번째 소괄호 덕분에 바로 즉시 실행할 수 있는 것⚡

function (a, b) {
  return a - b;
}

❌이름 없는 함수 이렇게 하면 안 됨❌

✅ 이름 없는 함수 두가지 조건

1. 함수를 할당 받을 변수 지정

const minus = function (a, b) {
  return a - b;
}

2. 함수 즉시 호출

(function (a, b) {
  return a - b;
})(1, 2)

const Score = () => {
  let count = 0;
  return {
    current: () => { return count },
    increment: () => { count++ },
    reset: () => { count = 0 }
  }
}

console.log(typeof Score);
console.log(Score);

👇

const Score = (() => {
  let count = 0;
  return {
    current: () => { return count },
    increment: () => { count++ },
    reset: () => { count = 0 }
  }
})()

console.log(typeof Score);
console.log(Score);

IIFE 하기 전엔 Score 자체가 리턴된 게 함수였고 함수 자체를 출력했었음

🥴IIFE로 변경해서 출력해보면 이젠 function이 아닌 object❗❓

❌IIFE 변수에 할당하면 함수 자체 저장❌
👉 함수만 실행된 결과만 저장⭕

이런식으로 사용하면 됨