JavaScript 함수 (Function)

자바스크립트에서 함수(Function)는 코드의 재사용성을 높이고 모듈화된 구조를 만드는 데 있어 가장 중요한 개념입니다.

사실 저에게는 자바스크립트를 공부하면서 제일 이해가 안 되고 어려운 부분이었습니다. ㅠㅠ 하지만 그만큼 함수를 정복하는 것이 곧 실력 향상의 지름길이라고 생각합니다.

이번 글에서는 함수의 선언 방법, 매개변수와 반환값, 화살표 함수 등 기본적인 사용법은 물론, 함수가 동작하는 심화 원리까지 철저히 파헤쳐 함수에 대한 두려움을 없애고 확실하게 마스터해 보겠습니다.

1. 함수란?

함수(Function)는 특정 작업을 수행하는 코드 블록입니다.
한 번 정의하면 여러 번 호출하여 재사용할 수 있습니다.

2. 함수 선언 방법

2-1. 선언식 (Function Declaration)

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Hae-na")); // Hello, Hae-na!

함수 이름이 필요
호이스팅(Hoisting)으로 선언 전에 호출 가능

2-2. 표현식 (Function Expression)

const greet = function (name) {
  return `Hello, ${name}!`;
};

console.log(greet("Hae-na"));

변수에 할당
선언 이전에는 호출 불가
익명 함수(Anonymous function)도 가능

2-3. 화살표 함수 (Arrow Function, ES6)

const add = (a, b) => a + b;
console.log(add(3, 5)); // 8

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Hae-na"));

간결한 문법
this 바인딩 방식이 다름 (클래스/객체 메서드에서 주의)
매개변수가 하나면 괄호 생략 가능, 본문이 한 줄이면 return 생략 가능

3. 매개변수와 기본값

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet()); // Hello, Guest!
console.log(greet("Hae-na")); // Hello, Hae-na!

기본값(Default Parameter) 설정 가능
호출 시 매개변수를 전달하지 않으면 기본값 사용

4. 반환값 (Return)

함수는 작업 결과를 반환할 수 있습니다.

function multiply(a, b) {
  return a * b;
}

let result = multiply(3, 5);
console.log(result); // 15

return이 없으면 undefined 반환
여러 값은 객체나 배열로 반환 가능

function getUser() {
  return { name: "Hae-na", age: 1 };
}
console.log(getUser());

5. 함수 스코프와 클로저 (Closure)

자바스크립트 함수를 깊이 이해하려면 스코프(Scope)와 클로저(Closure) 개념이 필수입니다.

5-1. 스코프 (Scope)

스코프는 변수가 유효한 범위를 의미합니다. 자바스크립트는 함수가 정의되는 순간 주변 환경을 기억하는 렉시컬 스코프(Lexical Scope) 방식을 따릅니다.

const globalVar = "전역 변수";

function outer() {
  const outerVar = "외부 함수 변수";

  function inner() {
    const innerVar = "내부 함수 변수";
    console.log(globalVar); // ✅ 접근 가능
    console.log(outerVar); // ✅ 접근 가능
    console.log(innerVar); // ✅ 접근 가능
  }
  inner();
  // console.log(innerVar); // ❌ 접근 불가 (inner 함수의 스코프)
}
outer();

5-2.클로저 (Closure)

클로저란 함수가 자신의 렉시컬 환경(Lexical Environment)을 기억하여, 함수가 외부 스코프에서 호출되었을 때도 그 환경에 접근할 수 있게 하는 기능을 말합니다. 외부 함수가 이미 실행을 마치고 메모리에서 사라졌더라도, 내부 함수는 외부 함수의 변수를 계속 기억하고 접근할 수 있습니다.

클로저는 데이터 은닉(Data Hiding)이나 특정 상태 유지에 유용하게 사용됩니다.

function makeCounter() {
  let count = 0; // 이 변수는 makeCounter의 스코프에 있지만,

  return function () {
    count++; // 반환된 내부 함수(클로저)에 의해 기억되고 조작됩니다.
    return count;
  };
}

const counter = makeCounter(); // counter에 클로저가 할당됨

console.log(counter()); // 1
console.log(counter()); // 2 (makeCounter가 이미 끝났어도 count를 기억)

6. ES6+ 매개변수 고급 활용

ES6 이후에는 함수 매개변수를 더욱 유연하게 다룰 수 있는 문법이 추가되었습니다.

6-1. 나머지 매개변수 (Rest Parameter, …)

함수가 정해지지 않은 개수의 인자를 배열로 받고 싶을 때 사용합니다. 매개변수 이름 앞에 마침표 세 개(…)를 붙입니다. 나머지 매개변수는 항상 마지막 매개변수로만 선언해야 합니다.

function sumAll(firstNum, ...rest) {
  // 첫 번째 인자를 제외한 나머지를 배열로 받음
  let sum = firstNum;
  for (const num of rest) {
    sum += num;
  }
  return sum;
}

console.log(sumAll(10, 20, 30, 40)); // 10 + (20+30+40) = 100

6-2. 전개 구문 (Spread Syntax, …)

나머지 매개변수와 문법은 같지만, 사용 목적은 반대입니다. 배열이나 객체를 개별적인 요소로 펼쳐서(전개하여) 함수의 인자로 전달할 때 사용합니다.

function printNumbers(a, b, c) {
  console.log(a, b, c);
}

const numbers = [1, 2, 3];

// 배열 요소를 개별 인자로 전개하여 전달
printNumbers(...numbers); // 1 2 3

6-3. 구조 분해 할당 (Destructuring Assignment)

객체나 배열을 매개변수로 받을 때, 내부의 필요한 값만 추출하여 변수에 할당할 수 있습니다.

function printUserInfo({ name, age }) {
  // 객체에서 name과 age만 추출
  console.log(`이름: ${name}, 나이: ${age}`);
}

const user = { name: "Hae-na", age: 1, job: "Baby" };
printUserInfo(user); // 이름: Hae-na, 나이: 1

7. 콜백 함수 (Callback)

함수를 다른 함수의 매개변수로 전달할 수 있습니다.

function greet(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}

greet("Hae-na", () => console.log("함수 호출 완료!"));

비동기 처리나 이벤트 처리에서 자주 사용
ES6 이후에는 화살표 함수와 함께 많이 활용

8. 함수 활용 팁

8-1. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

함수를 정의하는 동시에 즉시 실행하는 패턴입니다. 주로 전역 스코프에 불필요한 변수가 노출되는 것을 방지하여 독립적인 스코프를 만들 때 사용됩니다.

(function () {
  const message = "이 메시지는 외부에 노출되지 않습니다.";
  console.log("IIFE 실행!");
})();

// console.log(message); // ❌ Error: message is not defined

8-2. 고차 함수 (Higher-Order Function)

함수를 매개변수로 받거나, 함수를 반환하는 함수를 고차 함수라고 부릅니다. 자바스크립트의 map(), filter(), reduce() 등이 대표적인 예시이며, 함수형 프로그래밍의 핵심 요소입니다.

// 함수를 반환하는 고차 함수 (클로저를 활용)
function createMultiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

9. Oneul Code를 정리하며…

오늘은 자바스크립트의 함수(Function)에 대해서 학습했습니다.

함수 선언: 선언식, 표현식, 화살표 함수
매개변수와 기본값 설정
반환값(Return) 활용
스코프(scope)와 클로저(closure)
나머지 매개변수, 전개구문, 구조분해 할당
콜백 함수와 이벤트 처리

함수는 자바스크립트뿐 아니라 모든 프로그래밍 언어에서 핵심 개념이므로, 다양한 예제를 만들어 직접 호출하고 반환값을 확인해보는 것이 중요합니다.

Oneul Code는 오늘 배운 함수 내용을 기록하며, 여러분도 직접 브라우저 콘솔에서 다양한 함수를 만들어 테스트해보며 학습하시길 추천합니다!

Oneul Code - 09. Deep Dive into JavaScript Functions (ES6+ Features Included)