📘 18.3.2 즉시 실행 함수 - 만들어지자마자 바로 작동하는 따뜻한 함수
안녕하세요, 여러분. 혹시 전기밥솥을 본 적이 있나요? 쌀과 물을 넣고 버튼을 누르면 스스로 밥을 짓고, 다 되면 자동으로 보온모드로 바뀌죠. 오늘 배울 '즉시 실행 함수'는 정말 그런 것과 같아요. 함수를 만드는 순간 바로 실행되는 특별한 함수거든요. 마치 레시피를 적는 순간 바로 요리가 시작되는 것처럼 말이에요.
🧠 새로운 단어들과 친해지기
코딩의 세계에서도 특별한 용어들이 있어요. 함께 차근차근 알아보죠.
| 단어 | 쉬운 설명 |
|---|---|
| 즉시 실행 함수 | 만들어지자마자 바로 실행되는 특별한 함수예요 |
| 함수 표현식 | 변수에 담거나 바로 실행할 수 있는 함수의 모습이에요 |
| 범위 격리 | 함수 안의 변수들을 다른 곳에서 건드릴 수 없게 보호하는 것이에요 |
| 클로저 | 함수가 만들어질 때의 환경을 기억하는 신기한 능력이에요 |
✨ 즉시 실행 함수의 핵심 개념
즉시 실행 함수는 정말 신기한 방법이에요! 여러분이 자동 조리기를 가지고 있다고 상상해보세요. 이 조리기는 특별한 능력이 있어요.
일반적인 함수는 여러분이 "이 함수야, 실행해줘!"라고 부를 때까지 기다리고 있어요. 하지만 즉시 실행 함수는 만들어지는 순간 바로 "안녕하세요! 저는 지금 바로 일을 시작할게요!"라고 하면서 작동을 시작해요.
가장 특별한 점은 이 함수가 실행되고 나면 마치 따뜻한 기억처럼 사라져버린다는 거예요. 하지만 사라지기 전에 중요한 일을 다 해놓고 가죠. 예를 들어, 설정을 다 해놓거나, 다른 사람들이 사용할 수 있는 도구를 만들어 놓고 사라져요.
또 다른 신기한 능력은 자기만의 아늑한 공간을 만든다는 거예요. 즉시 실행 함수 안에서 만든 변수나 함수는 밖에서 절대 볼 수 없어요. 마치 자기만의 아늑한 방을 가지고 있는 것처럼 말이에요.
비유로 이해하기: 자동 실행되는 장인의 작업실
즉시 실행 함수를 '자동 실행 장인의 작업실'에 비유해볼게요.
일반 장인은 손님이 주문을 해야 작업을 시작하죠? 하지만 자동 실행 장인은 작업실이 만들어지는 순간 스스로 작업을 시작해요!
작업실 안에는 여러 가지가 들어있어요. 비밀 도구들, 작업 지시서, 그리고 "이걸 다른 사람에게 전해주세요"라고 적힌 선물들이 있죠. 장인이 작업하면서 비밀 도구들은 숨겨지고, 작업을 하고, 선물만 밖으로 나와서 다른 사람들이 사용할 수 있게 돼요.
그리고 모든 일이 끝나면 장인과 작업실은 자연스럽게 사라져버려요. 하지만 남겨둔 선물은 계속 남아있어서 사람들이 사용할 수 있어요. 이것이 바로 즉시 실행 함수의 따뜻한 마음이에요!
🎯 왜 즉시 실행 함수를 사용할까요?
그렇다면 왜 이런 특별한 함수를 사용할까요? 정말 좋은 이유들이 많아요!
첫 번째, 깔끔한 정리정돈이 가능해요. 집안의 물건들이 여기저기 흩어져 있으면 찾기 어렵고 헷갈리죠? 즉시 실행 함수는 관련된 코드들을 한 곳에 모아두고, 다 사용한 후에는 깔끔하게 치워버려요. 전체 공간이 어지럽혀지지 않아서 정말 깔끔해요.
두 번째, 소중한 것들의 보호가 완벽해요. 일기장을 서랍 깊숙이 숨겨두는 것처럼, 즉시 실행 함수 안의 변수와 함수들은 밖에서 절대 볼 수 없어요. 중요한 정보를 안전하게 보호할 수 있죠.
세 번째, 이름 겹치는 문제가 해결돼요. 학교에서 같은 이름의 친구가 여러 명 있으면 헷갈리죠? 코드에서도 변수 이름이 겹치면 문제가 생겨요. 하지만 즉시 실행 함수를 사용하면 각각의 함수가 자기만의 공간을 가져서 이름이 겹쳐도 괜찮아요.
네 번째, 초기 설정을 한 번에 할 수 있어요. 새 게임을 시작할 때 캐릭터 설정, 배경 설정 등을 처음에 한 번만 하고 시작하잖아요? 즉시 실행 함수도 프로그램이 시작될 때 필요한 설정들을 한 번에 다 해놓고 시작할 수 있어요.
⚙️ 즉시 실행 함수의 기본 구조
이제 특별한 함수의 형태를 자세히 살펴볼까요? 즉시 실행 함수는 특별한 형태를 가지고 있어요.
// 기본적인 형태
(function() {
// 여기에 바로 실행될 코드를 써요
console.log("안녕하세요! 저는 바로 실행되는 함수예요!");
})();
// 값을 받아서 처리하는 형태
(function(이름) {
console.log("안녕하세요, " + 이름 + "님! 즐거운 하루 보내세요!");
})("철수");
// 화살표 함수로 만든 형태 (더 간단해요!)
(() => {
console.log("화살표로 만든 즉시 실행 함수예요!");
})();
// 결과를 돌려주는 형태
const 계산결과 = (function() {
const 숫자1 = 10;
const 숫자2 = 20;
return 숫자1 + 숫자2;
})();
console.log(계산결과); // 30이 특별한 구조를 보면, ()로 함수를 감싸고 맨 끝에 또 ()를 붙여서 바로 실행하는 거예요. 마치 조리법을 적고 나서 "지금 당장 요리해!"라고 부드럽게 요청하는 것과 같아요!
🧪 직접 해보면서 배우기
이제 실제로 즉시 실행 함수로 따뜻한 것들을 만들어보겠어요!
🔹 예제 1: 따뜻한 계산기 만들기
숫자를 세는 계산기를 만들어보겠어요. 이 계산기는 만들어지자마자 바로 작동을 시작해요!
// 따뜻한 계산기 만들기
const 따뜻한계산기 = (function() {
// 계산 결과를 기억하는 소중한 저장소
let 결과 = 0;
// 숫자가 올바른지 확인하는 친절한 도우미
function 숫자인지확인(숫자) {
return typeof 숫자 === 'number'; // 숫자인지만 확인
}
// 결과를 업데이트하고 알려주는 다정한 도우미
function 결과업데이트(새결과) {
결과 = 새결과; // 결과값 업데이트
console.log("계산 결과: " + 결과); // 결과 출력
return 결과; // 결과 반환
}
console.log("🎉 따뜻한 계산기가 만들어졌어요!");
// 모든 사람이 사용할 수 있는 기능들
return {
// 현재 결과 보여주기
현재숫자: function() {
console.log("📊 현재 저장된 숫자: " + 결과);
return 결과; // 현재 결과 반환
},
// 숫자를 하나씩 늘리기
하나증가: function() {
결과++;
console.log("⬆️ 숫자가 " + 결과 + "로 증가했어요!");
return 결과;
},
// 원하는 만큼 더하기
더하기: function(값) {
if (!숫자인지확인(값)) { // 숫자가 올바른지 확인
console.log("❌ 올바른 숫자를 입력해주세요!");
return 결과; // 현재 결과 반환
}
결과 += 값;
console.log("➕ " + 값 + "을 더해서 " + 결과 + "가 되었어요!");
return 결과;
},
// 처음으로 돌리기
초기화: function() {
결과 = 0;
console.log("🔄 숫자를 0으로 초기화했어요!");
return 결과; // 초기화된 결과 반환
}
};
})();
// 따뜻한 계산기 사용해보기
console.log("=== 따뜻한 계산기를 사용해볼게요! ===");
따뜻한계산기.현재숫자(); // 현재 저장된 숫자: 0
따뜻한계산기.하나증가(); // 숫자가 1로 증가했어요!
따뜻한계산기.더하기(5); // 5을 더해서 6가 되었어요!
따뜻한계산기.초기화(); // 숫자를 0으로 초기화했어요!
// 비밀 변수는 볼 수 없어요!
// console.log(따뜻한계산기.결과); // undefined (비밀이에요!)🔹 예제 2: 마음 따뜻한 메시지 도우미
페이지가 열릴 때 바로 실행되어서 환영 메시지를 보여주는 도우미를 만들어보겠어요!
// 메시지 도우미 (즉시 실행)
(function() {
// 페이지 제목을 바꾸는 다정한 함수
function 제목바꾸기() {
if (typeof document !== 'undefined') {
document.title = "✨ 자동으로 꾸민 페이지 ✨";
console.log("🎨 페이지 제목을 예쁘게 바꿨어요!");
}
}
// 환영 메시지를 보여주는 따뜻한 함수
function 환영메시지() {
console.log("💬 안녕하세요! 즐거운 시간 보내세요!");
// 간단한 환영 메시지 추가하기
if (typeof document !== 'undefined' && document.body) {
const 환영요소 = document.createElement('div');
환영요소.textContent = "🌈 자바스크립트 공부를 시작해보세요!";
환영요소.style.textAlign = 'center';
환영요소.style.padding = '20px';
환영요소.style.fontSize = '1.2em';
환영요소.style.backgroundColor = '#f0f8ff';
환영요소.style.border = '2px solid #87ceeb';
환영요소.style.borderRadius = '10px';
환영요소.style.margin = '10px';
// 페이지 맨 위에 추가
if (document.body.firstChild) {
document.body.insertBefore(환영요소, document.body.firstChild);
} else {
document.body.appendChild(환영요소);
}
}
}
// 도우미 시작!
console.log("🤖 메시지 도우미를 시작해요!");
제목바꾸기();
환영메시지();
console.log("✨ 메시지 준비가 완료되었어요!");
})();
// 위의 도우미 함수들은 실행이 끝나면 사라져요!
// 제목바꾸기(); // ReferenceError: 함수를 찾을 수 없어요🔄 즉시 실행 함수 사용 과정 정리
지금까지 배운 즉시 실행 함수 사용 과정을 차근차근 정리해보겠습니다.
첫 번째 단계는 필요성 확인하기입니다. "아늑한 공간이 필요한가요? 초기 설정을 한 번만 하면 되나요?"를 생각해보는 거예요. 즉시 실행 함수는 특별한 상황에서 쓰는 도구거든요.
두 번째는 특별한 틀 만들기입니다. (function() { ... })()라는 특별한 형태로 함수를 감싸요. 이것이 바로 즉시 실행의 비밀이에요.
세 번째는 소중한 요소들 정의하기입니다. 함수 안에 다른 곳에서 볼 수 없는 변수와 함수들을 만들어요. 이것들은 작업이 끝나면 사라져요.
네 번째는 공개할 것 결정하기입니다. 밖에서 사용할 수 있게 하고 싶은 기능들을 return으로 돌려줘요. 이것만 밖에서 사용할 수 있어요.
마지막은 결과 활용하기입니다. 함수가 남겨둔 기능들을 통해서만 상호작용해요.
✏️ 연습문제로 개념 다지기
연습을 시작하기 전에 잠시 생각해보세요. 여러분이 하루를 시작할 때 어떤 준비들을 하는지 말이에요. 세수를 하고, 옷을 입고, 아침을 먹죠. 즉시 실행 함수도 이런 일상의 준비처럼, 프로그램이 시작될 때 필요한 것들을 미리 준비해두는 거예요.
Q1. 간단한 카운터 관리자를 만들어보세요!
// Ex1) 숫자를 세는 카운터 관리자 만들기
const 카운터관리자 = (function() {
// 숫자를 기억하는 소중한 저장소
let 숫자 = 0;
return {
현재숫자보기: function() {
console.log("현재 숫자: " + 숫자);
return 숫자;
},
하나증가: function() {
숫자++;
console.log("숫자가 " + 숫자 + "로 증가했어요! 📈");
return 숫자;
},
하나감소: function() {
숫자--;
console.log("숫자가 " + 숫자 + "로 감소했어요! 📉");
return 숫자;
},
초기화: function() {
숫자 = 0;
console.log("숫자를 0으로 초기화했어요! 🔄");
return 숫자;
}
};
})();
// 카운터 관리자 사용해보기
카운터관리자.현재숫자보기(); // 현재 숫자: 0
카운터관리자.하나증가(); // 숫자가 1로 증가했어요!
카운터관리자.하나증가(); // 숫자가 2로 증가했어요!
카운터관리자.초기화(); // 숫자를 0으로 초기화했어요!Q2. 색깔 수집가를 만들어보세요!
// Ex2) 좋아하는 색깔들을 모아두는 수집가 만들기
const 색깔수집가 = (function() {
// 색깔들을 담는 아늑한 저장공간
const 색깔들 = [];
return {
색깔추가: function(색깔) {
if (!색깔 || typeof 색깔 !== 'string') {
console.log("올바른 색깔 이름을 입력해주세요! 🎨");
return false;
}
// 이미 있는 색깔인지 확인하기 (includes 대신 반복문 사용)
let 이미있음 = false;
for (let i = 0; i < 색깔들.length; i++) {
if (색깔들[i] === 색깔) {
이미있음 = true;
break;
}
}
if (이미있음) {
console.log(색깔 + "은 이미 수집했어요! 😊");
return false;
}
색깔들.push(색깔);
console.log("🎨 " + 색깔 + "을 수집했어요!");
return true;
},
모든색깔보기: function() {
if (색깔들.length === 0) {
console.log("아직 수집한 색깔이 없어요! 🌈");
return [];
}
console.log("🌈 총 " + 색깔들.length + "개의 색깔을 수집했어요:");
for (let i = 0; i < 색깔들.length; i++) {
console.log(" " + (i + 1) + ". " + 색깔들[i]);
}
// 복사본을 돌려줘요 (slice 사용)
const 복사본 = [];
for (let i = 0; i < 색깔들.length; i++) {
복사본.push(색깔들[i]);
}
return 복사본;
},
수집개수: function() {
console.log("📊 총 " + 색깔들.length + "개의 색깔을 수집했어요");
return 색깔들.length;
}
};
})();
// 색깔 수집가 사용해보기
색깔수집가.색깔추가("빨강"); // 빨간색 추가
색깔수집가.색깔추가("파랑"); // 파란색 추가
색깔수집가.모든색깔보기(); // 모든 색깔 보기
색깔수집가.수집개수(); // 수집 개수 확인🔥 심화 내용으로 더 깊이 알아보기
앞의 내용을 잘 이해했다면, 이제 조금 더 깊은 내용을 살펴보세요!
심화 Q1. 즉시 실행 함수의 장점과 단점 이해하기
장점:
- 이름 충돌 방지: 여러 라이브러리를 사용할 때 변수명이 겹치지 않아요
- 메모리 절약: 사용이 끝난 변수들이 자동으로 정리돼요
- 캡슐화: 중요한 변수와 함수를 외부에서 접근할 수 없게 보호해요
- 즉시 실행: 페이지 로드와 동시에 초기화 작업을 할 수 있어요
단점:
- 재사용 어려움: 한 번 실행되고 나면 다시 호출하기 어려워요
- 디버깅 복잡: 함수에 이름이 없어서 오류 추적이 어려울 수 있어요
심화 Q2. 문제가 있는 코드를 즉시 실행 함수로 개선하기
// 개선 전 코드 (문제점: 전역 변수 사용)
var userName = "철수";
var userScore = 100;
function showUserInfo() {
console.log("이름: " + userName + ", 점수: " + userScore);
}
// 개선 후 코드 (즉시 실행 함수 사용)
const 사용자관리자 = (function() {
// 비공개 변수들 (외부에서 접근 불가)
let 사용자이름 = "철수";
let 사용자점수 = 100;
console.log("👤 사용자 관리 시스템이 시작되었어요!");
// 공개 기능들만 반환
return {
정보보기: function() {
console.log("이름: " + 사용자이름 + ", 점수: " + 사용자점수);
},
점수업데이트: function(새점수) {
if (typeof 새점수 === 'number' && 새점수 >= 0) {
사용자점수 = 새점수;
console.log("점수가 " + 새점수 + "로 업데이트되었어요!");
return true;
} else {
console.log("❌ 올바른 점수를 입력해주세요!");
return false;
}
}
};
})();
// 안전하게 사용할 수 있어요!
사용자관리자.정보보기();
사용자관리자.점수업데이트(200);🔄 17단원 복습 - 모듈과 즉시 실행 함수
18단원에서 즉시 실행 함수를 배우고 있으니, 17단원에서 배운 모듈 시스템과 어떤 관계가 있는지 복습해보겠습니다!
복습 문제 1: ES6 모듈과 즉시 실행 함수의 차이점
17단원에서 배운 ES6 모듈과 오늘 배운 즉시 실행 함수는 어떤 차이가 있을까요?
// 17단원: ES6 모듈 방식 (여러 파일)
// utils.js 파일
export function 더하기(a, b) {
return a + b;
}
// main.js 파일
import { 더하기 } from './utils.js';
// ==========================================
// 18단원: 즉시 실행 함수 방식 (한 파일 안에서)
const 수학도구 = (function() {
// 비밀 도우미 기능 (ES6에서는 불가능!)
function 숫자확인(x) {
return typeof x === 'number';
}
return {
더하기: function(a, b) {
if (!숫자확인(a) || !숫자확인(b)) {
return "숫자만 입력해주세요!";
}
return a + b;
}
};
})();주요 차이점들:
- ES6 모듈: 파일 단위로 분리, import/export 사용
- 즉시 실행 함수: 한 파일 안에서 완전히 숨겨진 기능 만들 수 있음
복습 문제 2: CommonJS와 즉시 실행 함수 함께 사용하기
17단원에서 배운 Node.js의 CommonJS와 즉시 실행 함수를 함께 사용해보세요!
// 17단원 복습: calculator.js (Node.js 파일)
const 계산기모듈 = (function() {
let 기록 = []; // 계산 기록을 숨겨서 보관
function 기록추가(계산내용) {
const 현재시간 = "계산 시간: " + (new Date().getTime());
기록.push({
내용: 계산내용,
시간: 현재시간
});
}
return {
더하기: function(a, b) {
const 결과 = a + b;
기록추가(a + " + " + b + " = " + 결과);
return 결과;
},
기록보기: function() {
// 복사본 반환
const 복사본 = [];
for (let i = 0; i < 기록.length; i++) {
복사본.push(기록[i]);
}
return 복사본;
}
};
})();
// CommonJS로 내보내기 (17단원에서 배운 방법)
// module.exports = 계산기모듈;
// 다른 파일에서 사용하기
// const 계산기 = require('./calculator.js');
// 계산기.더하기(3, 5);
// 계산기.기록보기();지금까지 즉시 실행 함수에 대해 배워봤어요. 처음에는 어려울 수도 있지만, 계속 연습하다 보면 자연스럽게 이해하게 될 거예요. 즉시 실행 함수는 코드를 더 안전하고 깔끔하게 만들어주는 정말 유용한 도구랍니다!
다음 시간에는 또 다른 흥미로운 프로그래밍 개념을 배워볼 예정이에요. 오늘도 수고하셨어요! 🎁✨
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 즉시 실행 함수의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 17단원 복습 내용 | ✅ |
📂 마무리 정보
오늘 배운 18.3.2 즉시 실행 함수 내용이 여러분의 자바스크립트 지식 정리함에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.