함수

자바스크립트를 배우는 대부분의 사람들이 처음으로 부딪히는 개념이 바로 함수(function)입니다.
처음엔 복잡하게 느껴질 수 있지만, 알고 보면 굉장히 논리적이고 재밌는 개념이에요.
특히, 웹 개발에선 함수 없이는 아무것도 할 수 없을 정도로 필수 요소죠.
그래서 오늘은 자바스크립트 함수에 대해 쉽게 풀어서 설명해드릴게요.
🔗 [자바스크립트 기본 개념 정리 글도 함께 보기]

함수, 어렵지 않아요! – 함수란 무엇인가?

함수(Function)는 쉽게 말해 코드 묶음이에요.
어떤 작업을 수행하는 코드들을 하나로 묶어서, 필요할 때마다 재사용할 수 있게 해주는 거죠.

예를 들어, 우리가 커피를 타는 과정을 생각해볼게요

function makeCoffee() {
  console.log("컵 준비");
  console.log("커피 가루 넣기");
  console.log("물 붓기");
  console.log("저어주기");
}

이렇게 makeCoffee() 함수만 호출하면 언제든지 똑같은 커피 타는 과정을 실행할 수 있어요!

자바스크립트 함수의 기본 문법

자바스크립트에서 함수는 이렇게 정의해요:

function 함수이름(매개변수) {
  실행할 코드
  return 반환값;
}

• 함수이름: 함수를 호출할 때 사용하는 이름.
• 매개변수(Parameter): 함수에 전달되는 입력값.
• return: 함수 실행 결과를 돌려주는 키워드.

예시로, 두 수를 더하는 함수를 만들어볼게요:

function add(a, b) {
  return a + b;
}
console.log(add(3, 5)); // 결과: 8

함수 표현식 vs 선언식 – 뭐가 다른가요?

자바스크립트에선 함수를 두 가지 방식으로 정의할 수 있어요.
1. 함수 선언식 (Function Declaration)

function greet() {
  console.log("안녕하세요!");
}

2. 함수 표현식 (Function Expression)

const greet = function() {
  console.log("안녕하세요!");
};

두 방식의 가장 큰 차이는 **호이스팅(hoisting)**이에요.
선언식은 코드 실행 전에 메모리에 미리 등록되지만, 표현식은 그렇지 않아서 정의 전에 호출하면 에러가 나요!

화살표 함수(Arrow Function)도 알아야죠!

ES6 이후에는 더 간단한 문법의 화살표 함수도 자주 사용돼요.

const add = (a, b) => a + b;

• 코드가 간단해져서 콜백 함수나 이벤트 처리에서 자주 쓰여요.
• 단, this 바인딩이 다르기 때문에 문맥에 따라 주의해서 써야 해요.

함수 활용 실전 팁

• 매개변수 기본값 설정하기

function greet(name = "친구") {
  console.log(`안녕하세요, ${name}!`);
}

• 함수 안에 함수 만들기 (중첩 함수)

function outer() {
  function inner() {
    console.log("내부 함수 실행");
  }
  inner();
}
outer();

• 콜백 함수 사용 예

function sayHello(callback) {
  console.log("안녕!");
  callback();
}
sayHello(() => console.log("콜백 실행됨"));

이미지로 이해해요! 자바스크립트 함수 흐름도

이미지 예시: 자바스크립트 함수 실행 흐름도

// 이미지 생성
{
  "prompt": "A clear, colorful flowchart showing how JavaScript functions work. Include function declaration, calling, return values, and parameter passing. Use simple icons like boxes and arrows to explain how data flows.",
  "size": "1024x1024"
}

마무리 요약: 함수는 개발자의 비밀무기!

자바스크립트 함수는 결국 “작업을 미리 저장해두고 언제든 꺼내 쓰는 상자” 같은 것이에요.
처음엔 조금 낯설어도, 자주 쓰다 보면 자연스럽게 손에 익게 돼요.

이제 여러분도 자신만의 함수를 만들어보세요!
간단한 계산기, 알림 메시지, 또는 버튼 클릭 이벤트 등 다양하게 활용할 수 있답니다.