자바스크립트에서 함수는 코드의 재사용성과 구조화를 위해 필수적인 요소입니다. 함수는 입력을 받아서 처리를 한 후 결과를 반환하거나, 특정 작업을 수행하는 코드 블록입니다. 자바스크립트의 함수에 대해 아주 상세히 설명하겠습니다.
1. 함수 선언
자바스크립트에서 함수를 선언하는 방법은 여러 가지가 있습니다.
1.1 함수 선언식 (Function Declaration)
함수 선언식은 function 키워드를 사용하여 함수를 선언합니다.
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!1.2 함수 표현식 (Function Expression)
함수 표현식은 변수를 사용하여 함수를 정의합니다.
const greet = function(name) {
return `Hello, ${name}!`;
};
console.log(greet('Bob')); // Hello, Bob!1.3 화살표 함수 (Arrow Function)
화살표 함수는 => 문법을 사용하여 간결하게 함수를 정의합니다.
const greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet('Charlie')); // Hello, Charlie!
// 중괄호와 return을 생략할 수 있습니다.
const greetShort = name => `Hello, ${name}!`;
console.log(greetShort('Dave')); // Hello, Dave!2. 함수의 매개변수와 인자
함수는 매개변수(parameter)를 통해 입력을 받을 수 있으며, 함수 호출 시 인자(argument)를 전달합니다.
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 52.1 기본 매개변수 (Default Parameters)
매개변수에 기본값을 설정할 수 있습니다.
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!2.2 나머지 매개변수 (Rest Parameters)
나머지 매개변수는 가변 인자를 배열 형태로 받습니다.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 153. 함수의 반환값
함수는 return 키워드를 사용하여 값을 반환합니다. return이 없는 함수는 undefined를 반환합니다.
function multiply(a, b) {
return a * b;
}
console.log(multiply(2, 3)); // 6
function noReturn() {
console.log('No return statement');
}
console.log(noReturn()); // No return statement
// undefined4. 함수 스코프와 클로저
4.1 함수 스코프
함수는 자체 스코프를 가집니다. 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.
function scopeExample() {
let localVar = 'I am local';
console.log(localVar); // I am local
}
scopeExample();
// console.log(localVar); // ReferenceError: localVar is not defined4.2 클로저 (Closure)
클로저는 함수와 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)을 기억하는 함수입니다. 내부 함수는 외부 함수의 변수를 참조할 수 있습니다.
function outerFunction(outerVar) {
return function innerFunction(innerVar) {
console.log(`outerVar: ${outerVar}, innerVar: ${innerVar}`);
};
}
const inner = outerFunction('outside');
inner('inside'); // outerVar: outside, innerVar: inside5. 함수 호출 방식
함수 호출 방식에 따라 this의 값이 달라질 수 있습니다.
5.1 일반 함수 호출
일반 함수 호출에서는 this가 전역 객체를 가리킵니다. (엄격 모드에서는 undefined)
function showThis() {
console.log(this);
}
showThis(); // 브라우저 환경에서는 Window 객체, Node.js 환경에서는 전역 객체5.2 메서드 호출
메서드 호출에서는 this가 해당 메서드가 속한 객체를 가리킵니다.
const obj = {
value: 42,
showThis: function() {
console.log(this);
}
};
obj.showThis(); // obj 객체5.3 생성자 함수 호출
new 키워드를 사용하여 함수를 호출하면 새로운 객체가 생성되고, this는 그 새로운 객체를 가리킵니다.
function Person(name) {
this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // Alice5.4 call, apply, bind
함수의 this 값을 명시적으로 설정할 수 있습니다.
function showName() {
console.log(this.name);
}
const user = { name: 'Bob' };
showName.call(user); // Bob
showName.apply(user); // Bob
const boundShowName = showName.bind(user);
boundShowName(); // Bob6. 즉시 실행 함수 표현식 (IIFE)
즉시 실행 함수 표현식은 정의와 동시에 실행되는 함수입니다. 주로 스코프를 분리하기 위해 사용됩니다.
(function() {
console.log('This is an IIFE');
})();
(() => {
console.log('This is an arrow function IIFE');
})();7. 고차 함수 (Higher-order Function)
고차 함수는 함수를 인자로 받거나, 함수를 반환하는 함수입니다.
function higherOrderFunction(callback) {
const message = 'Hello, World!';
callback(message);
}
higherOrderFunction(msg => {
console.log(msg);
});
function createMultiplier(multiplier) {
return function(num) {
return num * multiplier;
};
}
const double = createMultiplier(2);
console.log(double(5)); // 108. 재귀 함수 (Recursive Function)
재귀 함수는 자기 자신을 호출하는 함수입니다.
function factorial(n) {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // 1209. 함수형 프로그래밍 개념
자바스크립트는 함수형 프로그래밍의 주요 개념을 지원합니다.
9.1 순수 함수 (Pure Function)
순수 함수는 부작용이 없고, 동일한 입력에 대해 항상 동일한 출력을 반환하는 함수입니다.
function pureFunction(a, b) {
return a + b;
}
console.log(pureFunction(2, 3)); // 59.2 고차 함수 (Higher-order Function)
앞서 설명한 바와 같이, 고차 함수는 함수를 인자로 받거나 반환하는 함수입니다.
9.3 함수 합성 (Function Composition)
함수 합성은 작은 함수를 조합하여 더 복잡한 함수를 만드는 기법입니다.
const compose = (f, g) => x => f(g(x));
const addOne = x => x + 1;
const square = x => x * x;
const addOneThenSquare = compose(square, addOne);
console.log(addOneThenSquare(2)); // 9결론
자바스크립트의 함수는 매우 유연하고 강력한 기능을 제공합니다. 함수의 다양한 선언 방식, 매개변수 처리, 반환값, 스코프와 클로저, this의 맥락, 그리고 함수형 프로그래밍 개념까지 이해하면 자바스크립트 코드를 보다 효율적이고 구조적으로 작성할 수 있습니다. 함수의 다양한 특성과 활용 방법을 익히는 것이 자바스크립트 프로그래밍의 핵심입니다.