함수(Function) 는 특정 작업을 수행하는 코드 블록을 의미합니다. 같은 코드를 반복해서 작성하지 않고, 재사용할 수 있도록 도와주는 핵심 개념입니다.
1. 함수 선언 방식
(1) 함수 선언문 (Function Declaration)
- 코드 실행 전에 메모리에 로드(호이스팅 O)
- 어디서든 호출 가능
function greet(name) {
return `안녕하세요, ${name}님!`;
}
console.log(greet("홍길동")); // 안녕하세요, 홍길동님!
(2) 함수 표현식 (Function Expression)
- 변수에 함수 저장
- 호이스팅 X (정의 이후에만 호출 가능)
const greet = function(name) {
return `안녕하세요, ${name}님!`;
};
console.log(greet("이몽룡"));
(3) 화살표 함수 (Arrow Function)
- 간결한 문법
- this 바인딩이 없음 → 콜백 함수로 자주 사용
const greet = (name) => `안녕하세요, ${name}님!`;
console.log(greet("성춘향"));
2. 매개변수와 인자
기본 매개변수
function greet(name = "Guest") {
return `안녕하세요, ${name}님!`;
}
console.log(greet()); // 안녕하세요, Guest님!
나머지 매개변수(Rest Parameters)
function sum(...numbers) {
return numbers.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
3. 반환값 (return)
function multiply(a, b) {
return a * b;
}
let result = multiply(3, 4);
console.log(result); // 12
4. 함수의 범위(Scope)
- 지역 변수(Local): 함수 안에서만 유효
- 전역 변수(Global): 어디서나 접근 가능
let x = 10; // 전역 변수
function test() {
let y = 20; // 지역 변수
console.log(x, y);
}
test(); // 10 20
console.log(x); // 10
// console.log(y); // 오류 발생
5. 콜백 함수 (Callback Function)
함수를 인자로 전달받아 실행하는 함수
function processUserInput(callback) {
let name = "홍길동";
callback(name);
}
processUserInput(function(user) {
console.log(`환영합니다, ${user}님!`);
});
6. 고차 함수 (Higher-Order Function)
다른 함수를 인자로 받거나, 함수를 반환하는 함수
function makeMultiplier(x) {
return function(y) {
return x * y;
};
}
let double = makeMultiplier(2);
console.log(double(5)); // 10
7. 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)
정의와 동시에 실행되는 함수
(function() {
console.log("즉시 실행됨!");
})();
8. 재귀 함수 (Recursive Function)
자기 자신을 호출하는 함수
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
9. 화살표 함수와 this
- 일반 함수: 호출한 객체에 따라 this 바뀜
- 화살표 함수: this가 상위 스코프에 고정
const person = {
name: "홍길동",
normal: function() {
console.log(this.name);
},
arrow: () => {
console.log(this.name);
}
};
person.normal(); // 홍길동
person.arrow(); // undefined (전역 this 참조)
마무리
JavaScript 함수는 크게 다음과 같이 분류됩니다.
- 정의 방식: 선언문, 표현식, 화살표 함수
- 활용 방식: 콜백, 고차 함수, 즉시 실행, 재귀
- 핵심 개념: 스코프, this
함수를 제대로 이해하면 재사용성, 가독성, 유지보수성이 높은 코드를 작성할 수 있으며, JavaScript의 비동기 처리(이벤트, Promise, async/await) 를 다룰 때도 필수적인 기반이 됩니다.
'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글
| JavaScript map() 정리 (0) | 2025.10.23 |
|---|---|
| JavaScript forEach() 정리 (0) | 2025.10.23 |
| JavaScript 반복문 정리 (0) | 2025.09.23 |
| JavaScript 배열(Array) 정리 (0) | 2025.09.23 |
| JavaScript 조건문 정리 (0) | 2025.09.23 |