코딩자율학습단 19기 | 14일차 학습일지 – 스코프/호이스팅/IIFE(즉시 실행 함수)

오늘 학습 정보

• 날짜/Day: 2026/01/29 (Day14)
• 교재 범위: ~10.5 즉시 실행 함수 사용하기 (p.406~417)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 스코프(scope)
• 핵심 키워드 2: 함수 호이스팅(hoisting)
• 핵심 키워드 3: 즉시 실행 함수(IIFE)

개념 정리

2-1) 스코프: “어디서 선언했는가”가 접근 범위를 결정

역할: 식별자(변수/함수)를 어느 범위에서 참조할 수 있는지 결정하는 규칙

핵심 포인트:

• 전역 스코프(global scope): 어디서든 접근 가능
• 지역 스코프(local scope): 해당 범위 안에서만 접근 가능
• 자바스크립트는 기본적으로 함수 스코프(function scope)를 기준으로 보되, ES6의 let/const는 블록 스코프(block scope)를 가짐
• 같은 이름이면 가까운(더 안쪽) 스코프의 식별자를 우선 참조함(참조 우선순위)

짧은 예시(코드):

let a = 10; // 전역

function sum() {
   let a = 50; // 지역(함수 스코프)
   console.log(a); // 50 (지역 a 우선)
}

sum();
console.log(a); // 10 (전역 a)

2-2) 호이스팅: “선언이 위로 끌어올려진 것처럼” 동작

역할: 코드 실행 전에 선언 정보를 미리 처리해, 실행 흐름에 영향을 주는 동작

핵심 포인트:

• var 변수 호이스팅: 선언이 끌어올려져 초기값이 undefined인 상태로 먼저 잡힘
• 함수 선언문(function declaration): 함수 자체가 호이스팅되어, 정의 위치보다 먼저 호출 가능
• 함수 표현식(function expression)/화살표 함수(arrow function): 변수에 “함수를 대입”하는 구조라서 변수 선언만 먼저 처리되고, 대입 전 호출하면 오류가 날 수 있음(특히 var일 때)

짧은 예시(코드):

// var 호이스팅 예시
console.log(num); // undefined
var num = 10;

// 함수 선언문 호이스팅
printHello(); // "Hello"
function printHello() {
   console.log("Hello");
}

// 함수 표현식(var) - 대입 전 호출은 위험
printHi(); // TypeError: printHi is not a function
var printHi = function () {
   console.log("Hi");
};

2-3) 즉시 실행 함수(IIFE): “한 번만 쓰고, 전역을 더럽히지 않기”

역할: 함수를 정의하자마자 즉시 실행해서 임시 범위(스코프)를 만들고, 전역 스코프 오염을 줄임

핵심 포인트:

• IIFE는 실행 후 내부 변수/함수는 밖에서 접근 불가 → 전역 네임 충돌 방지
• 매개변수도 전달 가능, 필요하면 반환값을 받아서 외부에서 사용 가능
• 기본 형태: (function(){ … })();

짧은 예시(코드):

(function init() {
   console.log("initialized!");
})();

// 매개변수 전달
(function (a, b) {
   console.log(a + b);
})(10, 20);

이슈 로그

• 함수 선언문은 “먼저 호출돼도 된다”는 게 직관과 달라서 헷갈렸는데, 호이스팅 차이를 코드로 비교하니 정리되 었습니다.
• var/let/const의 스코프 차이는 실수로 전역을 건드릴 수 있어서, 실습할 때 IIFE나 블록 스코프를 의식적으로 써보면 좋을 것 같네요.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」