C
JavaScript 목록
이전7 / 21다음
JavaScript/함수/Lesson 07

함수 — *재사용 가능한 코드 블록*

45분·theory
이 챕터
1/4

함수 — *재사용 가능한 코드 블록*

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ 함수 선언식 vs 표현식 + hoisting 차이
  • ▸✅ 매개변수 기본값 + rest · spread 사용
  • ▸✅ 순수 함수 / 부수효과 / 일급 함수 정의

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

함수 작성 4가지 방법

함수의 본질

함수 = 입력을 받아 처리 후 결과를 돌려주는 재사용 가능한 코드 블록. JS 에서 함수는 일등 시민 (first-class citizen) — 변수처럼 다룰 수 있습니다.

4가지 작성 방법

javascript
// 1️⃣ 함수 선언 (function declaration)
function add1(a, b) {
    return a + b;
}

// 2️⃣ 함수 표현식 (function expression)
const add2 = function(a, b) {
    return a + b;
};

// 3️⃣ 화살표 함수 (arrow function, 2015+) — 가장 흔함
const add3 = (a, b) => a + b;

// 4️⃣ 메서드 (객체 안)
const calculator = {
    add(a, b) { return a + b; }
};

// ▶️ 네 가지 모두 호출 — 결과는 같음
console.log(add1(2, 3));            // 5
console.log(add2(2, 3));            // 5
console.log(add3(2, 3));            // 5
console.log(calculator.add(2, 3));  // 5

// 💡 같은 이름(`add`)으로 4번 선언하면 SyntaxError → 학습용으로 add1·2·3 분리

함수 선언 vs 화살표 함수 — 어느 걸?

함수 선언:

  • ▸호이스팅 (선언 전 사용 가능)
  • ▸자체 this 보유
  • ▸function 키워드

화살표 함수:

  • ▸호이스팅 X (위에서 사용 불가)
  • ▸주변 this 사용 (가장 큰 차이)
  • ▸더 짧음

현장 합의: 대부분 화살표 함수. 클래스 메서드·생성자 에서만 일반 함수.

매개변수 패턴

javascript
// 1️⃣ 기본값 — 인자 안 주면 = 뒤 값이 자동 사용
const greet = (name = "익명") => `안녕, ${name}`;
console.log(greet());         // "안녕, 익명"   ← 인자 안 줘서 기본값 사용
console.log(greet("홍"));     // "안녕, 홍"     ← 인자 주면 그 값 사용

// 2️⃣ 가변 인자 (rest) — 인자 몇 개든 배열로 묶임
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4));        // 10
console.log(sum(1, 2, 3, 4, 5, 6));  // 21
console.log(sum());                  // 0   ← 인자 없어도 OK

// 3️⃣ 구조 분해 — 객체에서 필요한 속성만 꺼냄
const printUser = ({ name, age }) => console.log(`${name} (${age})`);
printUser({ name: "홍", age: 28 });   // 출력: "홍 (28)"

함수가 값 이다

javascript
// 1️⃣ 변수에 담기 — 함수도 값이라 변수에 저장 가능
const fn = () => "hi";
console.log(fn());   // "hi"

// 2️⃣ 인자로 전달 — map 같은 메서드에 함수를 "넘긴다"
const doubled = [1, 2, 3].map(x => x * 2);
console.log(doubled);   // [2, 4, 6]

// 3️⃣ 리턴 — 함수가 함수를 돌려줌 (클로저)
function makeCounter() {
    let count = 0;
    return () => ++count;        // 함수를 리턴
}
const counter = makeCounter();
console.log(counter());   // 1
console.log(counter());   // 2
console.log(counter());   // 3   ← count 가 살아있어서 계속 증가

이게 함수형 프로그래밍 의 기반. 콜백·고차 함수·클로저 모두 이 위에 동작.

순수 함수 (Pure Function) — 권장 패턴

javascript
// ✅ 순수: 같은 입력 → 같은 출력 + 부작용 없음
const double = (n) => n * 2;
console.log(double(3));   // 6   ← 몇 번을 호출하든 같은 입력엔 같은 출력
console.log(double(3));   // 6

// ❌ 비순수: 외부 상태 변경 (부작용 있음)
let count = 0;
const increment = () => { count++; };   // 외부의 count 를 건드림

increment();
increment();
console.log(count);   // 2   ← 호출할 때마다 외부 상태가 바뀜 (예측 어려움)

순수 함수의 장점:

  • ▸테스트 쉬움 — 입출력만 검증
  • ▸예측 가능
  • ▸병렬 처리 안전
  • ▸캐싱 가능 (메모이제이션)

흔한 함정

1. return 잊기:

javascript
const addBad   = (a, b) => { a + b };       // ❌ 중괄호 안에 return 없음
const addGood1 = (a, b) => a + b;           // ✅ 중괄호 X → 표현식 자동 반환
const addGood2 = (a, b) => { return a + b; }; // ✅ 중괄호 + return 명시

console.log(addBad(2, 3));    // undefined   ← 🙀 return 없어서!
console.log(addGood1(2, 3));  // 5
console.log(addGood2(2, 3));  // 5

2. 화살표 함수의 this:

javascript
const obj = {
    name: "홍",
    greet: () => console.log(this.name)   // undefined!
};
// 화살표는 자체 this 없음 → 주변 (전역) this 사용

한 번 정리

  • ▸화살표 함수 가 모던 표준
  • ▸함수는 값 — 전달·리턴·저장 가능
  • ▸순수 함수 가 안전한 패턴
  • ▸매개변수 기본값·rest·구조 분해 적극 활용

⚡ 직접 해보기 — 함수 4가지 + 기본값 · rest

함수 작성 4가지와 매개변수 패턴을 한 번에 실행해 결과를 비교.
✏️ JS 코드
📟 콘솔 출력
▶ 실행 버튼을 눌러보세요
⚠️ 브라우저 샌드박스에서 실행 — console.log()만 지원, alert/fetch 불가

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

  • ▸"이 function 선언을 arrow function 으로 바꾸고 this 바인딩 차이 점검해줘"
  • ▸"이 함수를 순수 함수로 리팩토링 (부수효과 제거) 해줘"
  • ▸"이 함수에 적절한 매개변수 기본값 + 구조분해 적용해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: 타입 변환과 동등 비교
다음 추천: 화살표 함수
이전목록다음
함수 기초 - JavaScript