🔧
EPISODE 03
선언식 · 표현식 · 화살표 · 콜백
함수
함수의 3가지 작성 방식(선언식·표현식·화살표), 호이스팅 차이, 매개변수와 반환값, 기본값, 스코프, 그리고 콜백 함수의 개념을 익힙니다.
JavaScript함수콜백
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 js-02
결과물
재사용 가능한 함수와 콜백 패턴 작성
이 강의에서 배우는 것
- 1선언식·표현식·화살표 함수의 차이를 안다
- 2매개변수·반환값으로 재사용 가능한 함수를 작성한다
- 3기본값 매개변수를 사용한다
- 4전역/지역 스코프와 클로저를 이해한다
- 5콜백 함수를 인자로 전달한다
1. 함수 선언식
javascript
function greet(name) {
return `안녕하세요, ${name}님!`;
}
console.log(greet("홍길동"));
// 호이스팅: 코드 위치보다 먼저 호출 가능
console.log(sayHi()); // 작동
function sayHi() { return "안녕!"; }2. 함수 표현식
javascript
const greet = function(name) {
return `안녕하세요, ${name}님!`;
};
console.log(greet("홍길동"));호이스팅 없음 — 선언 전에 호출하면 오류.
3. 화살표 함수 (ES6+)
javascript
// 기본
const greet = (name) => {
return `안녕하세요, ${name}님!`;
};
// 매개변수 1개일 때 괄호 생략
const double = n => n * 2;
// 본문 1줄일 때 중괄호·return 생략
const triple = n => n * 3;
const add = (a, b) => a + b;4. 매개변수와 반환값
javascript
function calculateBMI(weight, height) {
const bmi = weight / (height * height);
return bmi.toFixed(1);
}
console.log(`BMI: ${calculateBMI(70, 1.75)}`);
// 반환값 없는 함수
function logMessage(msg) {
console.log(`[LOG] ${msg}`);
// return 없음 → undefined
}5. 기본값 매개변수 (ES6+)
javascript
function greet(name = "손님", lang = "ko") {
if (lang === "ko") return `안녕하세요, ${name}님!`;
return `Hello, ${name}!`;
}
greet(); // "안녕하세요, 손님님!"
greet("홍길동"); // "안녕하세요, 홍길동님!"
greet("John", "en"); // "Hello, John!"6. 스코프
javascript
const globalVar = "전역";
function outer() {
const outerVar = "outer";
function inner() {
const innerVar = "inner";
console.log(globalVar, outerVar, innerVar); // 모두 접근 가능 (클로저)
}
inner();
}7. 콜백 함수
javascript
function doTask(task, callback) {
console.log(`작업 시작: ${task}`);
callback(task);
}
doTask("파일 저장", (task) => {
console.log(`✅ ${task} 완료!`);
});
// setTimeout 같은 자주 쓰는 패턴
setTimeout(() => {
console.log("1초 후 실행");
}, 1000);