함수

#1. 함수란?

함수(function)는 재사용 가능한 코드 묶음이다. 자주 쓰는 동작을 함수로 만들어 두면 코드 중복을 줄이고 구조를 깔끔하게 유지할 수 있다.

함수는 보통 입력(매개변수)을 받아 처리한 뒤 출력(반환값)을 돌려주는 상자로 생각하면 쉽다.

flowchart LR
    A["입력 (인수)<br/>4, 3"] --> B["함수<br/>multiply(a, b)<br/>a * b"]
    B --> C["출력 (반환값)<br/>12"]
    style B fill:#e3f2fd,stroke:#1e88e5
    style C fill:#e8f5e9,stroke:#43a047

#2. 함수의 정의와 호출

function 함수이름(매개변수1, 매개변수2) {
  // 실행할 코드
  return 결과값;   // 결과 반환 (선택)
}

• 함수이름: 호출할 때 사용하는 이름. 보통 동사로 시작하고, 두 단어 이상이면 카멜표기법(getUserName)을 쓴다. 이름에는 영문자·$·_만 쓸 수 있고 숫자로 시작할 수 없다.

• 매개변수(parameter): 함수가 받는 입력값.

• return: 결과값을 돌려주고 함수를 종료한다. return이 없으면 undefined를 반환한다.

function greet(name) {
  return "Hello, " + name + "!";
}

let message = greet("John");   // 함수 호출, 반환값이 message에 담김
console.log(message);          // "Hello, John!"

Hello, John!

#3. 매개변수와 반환값

함수는 호출될 때마다 실행되며, 전달한 인수(argument)가 매개변수에 들어간다.

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

console.log(multiply(4, 3));   // 12
console.log(multiply(5, 5));   // 25

12 25

#기본 매개변수 (Default Parameters)

ES6 기능으로, 인수가 전달되지 않았을 때 사용할 기본값을 지정할 수 있다.

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

console.log(greet("Alice"));   // Hello, Alice!
console.log(greet());          // Hello, Guest!  (인수가 없어 기본값 사용)

Hello, Alice! Hello, Guest!

#4. 함수를 정의하는 여러 방법

#함수 선언식 (Function Declaration)

앞에서 본 function 이름() { } 형태다.

function add(a, b) {
  return a + b;
}

#익명 함수 (Anonymous Function)

이름 없는 함수다. 보통 변수에 할당하거나 다른 함수의 인수로 전달할 때 쓴다. 변수에 할당하는 형태를 함수 표현식(Function Expression)이라고 한다.

const add = function (a, b) {
  return a + b;
};

console.log(add(2, 3));   // 5

5

#화살표 함수 (Arrow Function)

ES6에서 도입된 간결한 함수 문법이다. function 키워드 대신 =>를 사용한다.

// 전통적인 함수
const add1 = function (a, b) {
  return a + b;
};

// 화살표 함수
const add2 = (a, b) => {
  return a + b;
};

화살표 함수는 상황에 따라 더 짧게 줄일 수 있다.

// 1) 본문이 표현식 하나면 { }와 return 생략 가능
const add = (a, b) => a + b;
console.log(add(2, 3));     // 5

// 2) 매개변수가 하나면 ( )도 생략 가능
const square = x => x * x;
console.log(square(4));     // 16

// 3) 매개변수가 없으면 빈 ( ) 필수
const sayHello = () => "안녕하세요!";
console.log(sayHello());    // 안녕하세요!

// 4) 객체를 반환할 때는 ( )로 감싼다
const makePerson = (name, age) => ({ name, age });
console.log(makePerson("영희", 25));  // { name: '영희', age: 25 }

5 16 안녕하세요! { name: '영희', age: 25 }

화살표 함수는 특히 배열 메서드의 콜백으로 자주 쓰인다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled);   // [2, 4, 6, 8, 10]

[ 2, 4, 6, 8, 10 ]

#5. 콜백 함수 (Callback Function)

다른 함수의 인수로 전달되어, 그 함수 안에서 호출되는 함수를 콜백 함수라고 한다. "특정 작업이 끝난 뒤 이걸 실행해 줘"라고 동작을 넘겨주는 방식이다.

function doSomething(callback) {
  console.log("작업 수행 중...");
  callback();   // 전달받은 함수를 실행
}

doSomething(function () {
  console.log("콜백 함수가 실행됨!");
});

작업 수행 중... 콜백 함수가 실행됨!

콜백은 이벤트 처리나 시간이 걸리는 작업(비동기)에서 핵심적으로 쓰인다.

// 버튼 클릭 시 실행할 동작을 콜백으로 전달
button.addEventListener("click", function () {
  alert("버튼이 클릭되었습니다!");
});

// 1초 뒤에 실행할 동작을 콜백으로 전달
setTimeout(() => {
  console.log("1초 후 실행");
}, 1000);