함수의 필요성
다음 코드를 먼저 살펴보겠습니다.
const num = 1;
const num2 = 2;
const result = num + num2;
console.log(result);
const num3 = 1;
const num4 = 2;
const result2 = num3 + num4;두 숫자를 더하는 간단한 코드이지만, 똑같은 덧셈 연산이 반복되고 있습니다.
이처럼 반복되는 작업을 줄이고, 코드를 재사용할 수 있도록 도와주는 것이 바로 함수입니다.
함수 정의와 호출
함수를 정의하고 호출하는 기본적인 형태는 다음과 같습니다.
function add(num1, num2) {
return num1 + num2;
}
const sum = add(3, 4); // 호출
console.log(sum); // 7여기서 중요한 점은 다음과 같습니다:
- function add(num1, num2)
→ add라는 이름의 함수를 정의하고 두 개의 인자(매개변수)를 받습니다. - return num1 + num2
→ 두 숫자를 더한 값을 반환합니다. - add(3, 4)
→ 이 함수를 호출하면, 코드 블럭이 실행되고 반환값을 받을 수 있습니다.
💡함수 작동 순서: 1. 함수 호출 → 2. 함수 내부 코드 실행 → 3. 결과 반환
함수는 데이터다: 함수 표현식과 참조
자바스크립트에서는 함수도 값입니다. 이 말은, 함수를 변수에 할당하거나 다른 함수에 인자로 전달할 수 있다는 뜻입니다.
const doSomething = add;여기서 중요한 포인트는 함수 자체를 참조한다는 것입니다.
- add는 실제 함수 코드가 저장된 메모리 주소를 참조합니다.
- doSomething도 같은 주소를 참조하게 됩니다.
이처럼 변수에 함수 자체를 저장하면, 해당 변수를 함수처럼 사용할 수 있습니다.
const result = doSomething(5, 6);
console.log(result); // 11함수의 이름
함수를 정의할 때는 인자 이름을 명확하게 작성하는 것이 중요합니다.
function print(name, age) {
console.log(`${name}, ${age}`);
}- print("길동", 25) → 길동, 25
이렇게 함수의 역할을 더 잘 설명할 수 있고, 유지보수 시에도 도움이 됩니다.
함수 전달하기 (Callback)
자바스크립트에서 강력한 특징 중 하나는 함수를 인자로 전달할 수 있다는 것입니다.
function surprise(operator) {
const result = operator(); // 전달된 함수를 실행
console.log(result);
}
function sayHello() {
return "Hello!";
}
surprise(sayHello); // Hello!위 코드에서 sayHello 함수는 surprise의 인자로 전달되고, operator()로 실행됩니다.
예제: 인자를 받아 실행하는 콜백
function divide(num1, num2) {
return num1 / num2;
}
function surprise(callback) {
const result = callback(2, 3); // divide(2, 3)
console.log(result);
}
surprise(divide); // 0.666...이 예제는 다음처럼 작동합니다:
- divide 함수는 두 수를 나눕니다.
- surprise 함수는 콜백 함수를 받아서 callback(2, 3)을 실행합니다.
- 결국 divide(2, 3)이 실행되고, 결과가 출력됩니다.
이처럼 함수를 함수에 전달하면, 동작을 외부에서 결정할 수 있습니다. 이를 콜백 함수라고 부릅니다.
메모리에서의 함수
함수를 정의하면 자바스크립트는 내부적으로 해당 함수의 참조값을 메모리에 저장합니다.
function add(num1, num2) {
return num1 + num2;
}
const doSomething = add;이때 구조는 다음과 같습니다:
| 변수 이름 | 저장된 값 |
| add | 함수 코드가 있는 메모리 주소 |
| doSomething | 동일한 메모리 주소 (복사됨) |
따라서 doSomething()을 실행하면 실제로는 add()와 동일한 동작을 하게 됩니다.
정리
함수를 제대로 이해하면 코드 재사용은 물론이고, 나중에 배울 고급 개념(비동기, 이벤트 처리, 콜백 등)도 훨씬 쉽게 이해할 수 있습니다. 이번 포스팅에서 다룬 핵심 포인트는 다음과 같습니다:
- 함수는 재사용 가능한 코드 블럭
- 함수도 값처럼 다룰 수 있음
- 함수는 다른 함수의 인자로 전달 가능
- 의미 있는 인자 이름을 사용하자
- 함수는 메모리에 참조값으로 저장됨