함수 (Function)

less

함수 (Function)
├── 함수의 개념과 구조
│   ├── 함수 선언과 호출
│   └── 함수 사용과 반환값
├── 얼리 리턴 패턴
├── 함수 선언 방식
│   ├── 함수 선언문
│   └── 함수 표현식
├── 화살표 함수
├── 콜백 함수
└── 즉시 실행 함수 (IIFE)

함수의 개념과 구조

함수란?

함수는 같은 동작을 반복해야 할 때, 중복된 코드를 하나로 묶어 재사용할 수 있도록 도와주는 문법이다.
하나의 함수로 정의해두면, 필요할 때마다 호출하여 사용할 수 있으며, 이를 통해 코드의 재사용성과 가독성을 높일 수 있고 유지보수에도 유리하다.

함수 선언과 호출

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

// 함수 호출 (실제로 동작시키는 부분)
함수이름(인수1, 인수2, ...);

function 키워드 뒤에 함수 이름을 작성하고, 괄호 안에는 외부에서 전달받을 값을 저장할 매개변수(parameter)를 정의한다.
인수(Arguments)는 함수를 호출할 때 실제로 전달하는 값이다.

호출 위치에 따른 실행 흐름

// 함수 선언
function func() {
  console.log("2");
  console.log("3");
}

console.log("1");
func(); // 함수 호출
console.log("4");

// 1
// 2
// 3
// 4

함수는 코드에 선언만 되어 있을 때는 실행되지 않고, 실제로 함수가 호출되는 순간에 실행된다.
함수의 실행 순서는 호출된 위치에 따라 달라지므로, 코드의 흐름을 고려해 적절한 위치에서 호출해야 한다. func()를 제일 마지막에 호출하면 출력 순서는 1, 4, 2, 3이 된다.

함수 사용과 반환값

함수 사용의 이점

`비효율적인 코드 예시`

let num1 = 10;
let num2 = 15;
let sum = num1 + num2;
console.log(sum); // 25

let num3 = 1;
let num4 = 5;
let sum2 = num3 + num4;
console.log(sum2); // 6

동일한 계산 로직이 반복되면서 코드가 길어지고 유지보수가 어렵다.

`함수로 중복 제거`

function add(num1, num2) {
  console.log(num1 + num2);
}

add(10, 15); // 25
add(1, 5); // 6

add 함수 하나를 정의해두면, 어떤 숫자를 전달하든 동일한 방식으로 처리할 수 있다. 이처럼 함수는 반복 작업을 간결하게 처리하며, 코드의 재사용과 유지보수에 효과적이다.

함수의 반환값 (return)

return은 함수 실행 결과를 반환해, 그 값을 변수에 저장하거나 다른 작업에 활용할 수 있도록 한다.
만약 return이 없다면 함수는 값을 반환하지 않고 단순히 출력만 하며, 결과를 활용할 수 없다.

`return 없이 출력한 경우`

function add(num1, num2) {
  console.log(num1 + num2); // 15
}

let result = add(10, 5); // undefined
console.log(result); // undefined

console.log로 결과가 출력은 되지만, 함수는 값을 반환하지 않았기 때문에 result에는 아무것도 저장되지 않는다.

`return을 사용한 경우`

function add(num1, num2) {
  return num1 + num2; // 결과값 반환
}

let result = add(10, 5); // 반환된 값을 변수에 저장
console.log(result); // 15

return을 통해 함수 결과를 외부로 전달할 수 있기 때문에, 출력 외에도 계산, 저장, 조건 분기 등 다양한 용도로 활용할 수 있다.

`return 활용 예시`

function add(num1, num2) {
  return num1 + num2;
}

console.log(`두 숫자를 더한 결과는 ${add(10, 14)} 입니다.`);
// 두 숫자를 더한 결과는 24 입니다.

얼리 리턴 패턴 (Early Return)

함수 내부에서 조건이 만족되면 조기에 return하여 함수를 종료하는 패턴이다. 중첩된 if문을 줄여서 코드의 깊이를 얕게 만들고, 가독성과 유지보수성을 높이는 데 도움이 된다.

`가독성이 떨어지는 예시`

function func(num) {
  if (num > 0) {
    if (num >= 10) {
      console.log("num의 값이 10보다 크거나 같습니다.");
    } else {
      console.log("num의 값이 0보다 크고 10보다 작습니다.");
    }
  } else if (num === 0) {
    console.log("num의 값이 0입니다.");
  } else {
    console.log("num의 값이 0보다 작습니다.");
  }
}

func(15);
// num의 값이 10보다 크거나 같습니다.

조건문이 중첩되어 읽기 어렵고 유지보수가 불편하다.

`얼리 리턴 패턴 적용`

function func(num) {
  if (num === 0) return "num의 값이 0입니다.";
  if (num < 0) return "num의 값이 0보다 작습니다.";
  if (num >= 10) return "num의 값이 10보다 크거나 같습니다.";

  return "num의 값이 0보다 크고 10보다 작습니다";
}

console.log(func(15)); // num의 값이 10보다 크거나 같습니다.

조건을 위에서부터 순차적으로 확인하고, 조건을 만족하면 바로 반환해서 함수가 종료된다.
불필요한 중첩이 없고 가독성이 좋아진다.

함수 선언 방식

less

함수 선언 방법
├── 함수 선언문 (Function Declaration)
└── 함수 표현식 (Function Expression)

함수 선언문 (Function Declaration)

함수 선언문이란, function 키워드로 이름이 있는 함수를 직접 정의하는 방식이다.

function print() {
  console.log("hello world");
}

print(); // "hello world"

함수 표현식 (Function Expression)

함수 표현식이란, 자바스크립트에서 함수를 하나의 값처럼 다뤄 변수에 할당하여 정의하는 방식이다.
이러한 방식으로 정의된 함수는 변수명을 통해 호출할 수 있으며,보통 이름이 없는 익명 함수 형태로 작성된다. 함수 표현식은 화살표 함수나 콜백 함수를 정의할 때도 자주 사용되는 패턴이다.

`함수 표현식`

const greet = function () {
  console.log("Hello");
};

greet(); // "Hello"

함수 표현식은 변수에 함수가 할당된 이후에만 호출 가능하다.

`화살표 함수 표현식`

const greet = () => {
  console.log("Hello");
};

greet(); // "Hello"

function 키워드 대신 =>를 사용해 간결하게 작성할 수 있다.
화살표 함수도 함수 표현식의 한 종류로, 마찬가지로 선언 이후에만 호출할 수 있다.

함수 선언문과 함수 표현식의 차이점

(1) 호이스팅 동작 차이

🔍 호이스팅 더 알아보기

호이스팅이란, 변수와 함수의 선언이 코드 실행 전에 먼저 메모리에 올라가는 동작을 말한다. 이때 선언만 올라가고, 할당은 코드가 실행되는 시점에 이루어진다.

`함수 선언문` 호이스팅 O

print(); // hello world

function print() {
  console.log("hello world");
}

함수 선언문은 함수 전체가 호이스팅되므로, 함수가 선언되기 전에도 호출이 가능하다.

`함수 표현식` 호이스팅 X

print(); // ReferenceError

let print = function () {
  console.log("hello world");
};

함수 표현식은 변수 선언만 호이스팅된다.
let이나 const로 선언된 경우 TDZ(일시적 사각지대)에 있기 때문에, 선언 이전에 접근하면 ReferenceError가 발생한다.
var로 선언하면 undefined가 할당되어 호출 시 TypeError가 발생한다.

(2) 함수 이름 작성 방식

// 함수 선언문
function greet(name) {
  console.log(`Hi, ${name}`);
}

// 함수 표현식
const greet = function (name) {
  console.log(`Hi, ${name}`);
};

함수 선언문은 함수의 이름을 작성해주지만, 함수 표현식은 익명 함수(이름 없는 함수)를 변수에 할당하여 사용한다. 단, 필요에 따라 기명 함수로 작성할 수도 있다.

화살표 함수 (Arrow Function)

화살표 함수란, ES6에서 도입된 간결한 함수 표현식의 문법이다.
function 키워드 대신 => 기호를 사용해 함수를 정의하고, 코드가 간단해지고 this 바인딩 방식이 달라지는 것이 특징이다.

`기본 문법`

const 함수이름 = (매개변수) => {
  // 함수 실행 코드
};

`일반 함수 표현식과 비교`

// 일반 함수 표현식
const add = function (a, b) {
  return a + b;
};

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

두 방식은 동작은 같지만, 화살표 함수가 더 간결하다.

`한 줄로 축약 가능`

// 일반적인 화살표 함수 형태
const add = (a, b) => {
  return a + b;
};

// 축약형
const add = (a, b) => a + b;

console.log(add(10, 20)); // 30

함수의 본문이 한 줄이고 return만 있는 경우, 중괄호 {}와 return 키워드를 생략할 수 있다.
화살표 함수는 코드가 훨씬 간단해진다는 장점 덕분에 콜백 함수에서도 유용하게 사용된다.

함수 표현식 vs 함수 선언식

구분	화살표 함수 (Arrow Function)	함수 선언식 (Function Declaration)
문법	`const func = () => {}`	`function func() {}`
this 바인딩	`this`가 상위 스코프(렉시컬 스코프)에 자동 바인딩	함수 실행 시점의 컨텍스트(`this`)로 새로 바인딩
호이스팅	호이스팅되지 않음 (선언 전 호출 불가)	호이스팅됨 (선언 전 호출 가능)
익명 함수	지원 (이름 없이 사용 가능)	이름이 필요함
문법적 간결함	짧고 간결	상대적으로 길고 명시적
사용 사례	React 함수형 컴포넌트, 콜백 함수 등	일반 함수, 메서드, 생성자 정의 등
생성 시점	런타임(실행 시점)에 생성	파싱 시점에 생성
컨텍스트(`this`)	상위 스코프의 컨텍스트를 그대로 사용	자체 컨텍스트를 생성
return 문	단일 표현식은 암시적 반환 가능	반드시 `return` 명시 필요
`export`	가능	가능
`export default`	가능하지만 한 줄로 직접 작성 불가 `export default const func = () => {}`	한 줄로 직접 작성 가능 `export default function func() {}`

콜백함수 (Callback Function)

콜백 함수란, 다른 함수에 인자로 전달되어 나중에 호출되는 함수를 말한다. 즉, 특정 작업이 끝난 후 또는 어떤 조건/이벤트가 발생했을 때 실행되는 함수이다.

자바스크립트에서 함수는 일급 객체이므로, 함수를 변수에 저장하거나 인자로 전달할 수 있다. 콜백 함수는 주로 비동기 처리, 이벤트 처리, 배열 메서드 등에서 자주 사용된다. "필요할 때 실행"되도록 지연시켜 사용하는 대표적인 패턴이다.

`콜백함수 예시 1`

const printResult = (a, b) => {
  let result = a + b;
  console.log("결과: " + result);
};

const doubleResult = (a, b) => {
  let result = a + b;
  console.log("결과에 2를 곱한 값: " + result * 2);
};

printResult(5, 3);
doubleResult(5, 3);

위 코드에서는 두 함수 모두 두 개의 매개변수를 받아 a + b를 계산하는 공통 로직을 포함하고 있다.
이러한 중복된 부분은 아래의 코드와 같이 하나의 함수로 분리하여 코드의 재사용성과 가독성을 높일 수 있다.

const calculate = (a, b, callback) => {
  let result = a + b; // 공통 로직
  callback(result); // 결과를 콜백 함수로 전달
};

const printResult = (result) => {
  console.log("결과: " + result);
};

const doubleResult = (result) => {
  console.log("결과에 2를 곱한 값: " + result * 2);
};

calculate(5, 3, printResult); // 결과: 8
calculate(5, 3, doubleResult); // 결과에 2를 곱한 값: 16

calculate는 a + b를 계산하고 callback(result)로 결과를 전달한다.
printResult와 doubleResult는 이 결과를 받아 각기 다른 방식으로 출력한다.
이렇게 하면 공통 로직을 분리하면서, 다양한 후속 동작을 콜백으로 넘길 수 있는 구조가 된다.

`콜백함수 예시 2`

const testFunc = (callback) => {
  callback(); // 전달받은 함수를 실행
};

testFunc(() => {
  console.log("콜백 함수 테스트"); // 콜백 함수 테스트
});

testFunc는 함수를 매개변수로 받아서 실행하는 함수이다.
testFunc(() => { ... })를 호출하면, ()=>{ ... } 익명 함수가 callback이라는 이름으로 전달되고, testFunc 내부에서 callback()이 실행되면서, 전달한 함수가 실행되어 "콜백 함수 테스트"가 출력된다.

`콜백함수 예시 3`

// doSomething 함수는 작업을 수행한 후 콜백 함수를 호출합니다
function doSomething(callback) {
  console.log("작업 수행 중...");
  // 작업이 완료된 후 콜백 함수 실행
  callback();
}

// 콜백 함수를 전달하여 함수 호출
doSomething(function () {
  console.log("작업 완료 후 실행됨!");
});

// 작업 수행 중...
// 작업 완료 후 실행됨!

콜백 함수 뜯어서 이해하기!

먼저 doSomething이라는 함수를 정의, 이 함수는 callback이라는 매개변수를 받음

function doSomething(callback) {
  // 함수 내용
}

doSomething 함수 내부에서는 두 가지 일을 한다 :

"작업 수행 중..." 메시지를 콘솔에 출력
매개변수로 받은 callback 함수를 실행

console.log("작업 수행 중...");
callback(); // 전달받은 함수를 여기서 실행

그 다음, doSomething 함수를 호출하면서 익명 함수(anonymous function)를 인자로 전달. 이 익명 함수는 doSomething 함수의 callback 매개변수로 전달

doSomething(function () {
  console.log("작업 완료 후 실행됨!");
});

실행 순서 doSomething 함수가 호출 > "작업 수행 중..." 메시지 콘솔에 출력 > callback이 실행되어 "작업 완료 후 실행됨!" 메시지 콘솔에 출력

실행 결과:

// console
작업 수행 중...
작업 완료 후 실행됨!

`콜백함수 예시 4`

function intro(name, callback) {
  console.log(`안녕하세요 ${name}입니다.`);
  callback();
}

function finish() {
  console.log("감사합니다.");
}

intro("혜빙", finish);

// 안녕하세요 혜빙입니다.
// 감사합니다.

finish 함수처럼, 다른 함수의 인수로 전달된 후 나중에 호출되는 함수를 콜백 함수라고 부른다.
intro("혜빙", finish)에서 finish는 callback이라는 이름으로 전달되어 intro 함수 내부에서 실행된다.

즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

즉시 실행 함수란, 함수를 정의하자마자 즉시 실행되는 함수를 말한다(따로 호출하지 않아도 자동으로 실행된다). 이런 방식은 한 번만 실행하면 되는 초기화 코드에 자주 사용되며, 전역 스코프를 오염시키지 않고 독립적인 코드 블록을 만들 수 있는 장점이 있다.

`기본적인 함수 실행 방식`

function print() {
  console.log("자바스크립트1");
}

print(); // 함수 호출

함수를 먼저 선언하고, 나중에 호출해야 실행된다.

`즉시 실행 함수 (IIFE)`

(function () {
  console.log("자바스크립트2");
})();

함수 선언과 동시에 실행되며, ()로 감싸서 함수 선언을 표현식으로 만든 뒤, 바로 이어지는 ()로 실행한다.

함수 (Function) ​

함수의 개념과 구조 ​

함수란? ​

함수 선언과 호출 ​

호출 위치에 따른 실행 흐름 ​

함수 사용과 반환값 ​

함수 사용의 이점 ​

비효율적인 코드 예시 ​

함수로 중복 제거 ​

함수의 반환값 (return) ​

return 없이 출력한 경우 ​

return을 사용한 경우 ​

return 활용 예시 ​

얼리 리턴 패턴 (Early Return) ​

가독성이 떨어지는 예시 ​

얼리 리턴 패턴 적용 ​

함수 선언 방식 ​

함수 선언문 (Function Declaration) ​

함수 표현식 (Function Expression) ​

함수 표현식 ​

화살표 함수 표현식 ​

함수 선언문과 함수 표현식의 차이점 ​

(1) 호이스팅 동작 차이 ​

함수 선언문 호이스팅 O ​

함수 표현식 호이스팅 X ​

(2) 함수 이름 작성 방식 ​

화살표 함수 (Arrow Function) ​

기본 문법 ​

일반 함수 표현식과 비교 ​

한 줄로 축약 가능 ​

함수 표현식 vs 함수 선언식 ​

콜백함수 (Callback Function) ​

콜백함수 예시 1 ​

콜백함수 예시 2 ​

콜백함수 예시 3 ​

콜백함수 예시 4 ​

즉시 실행 함수 (IIFE, Immediately Invoked Function Expression) ​

기본적인 함수 실행 방식 ​

즉시 실행 함수 (IIFE) ​