매개변수, 스코프, 클로저, this 바인딩, 고차함수를 깊이 다룬다.

함수 심화 — 스코프·클로저·this

함수는 JavaScript 의 핵심입니다. 이번 레슨에서는 매개변수 다루기부터 스코프, 클로저, this, 고차함수까지 함수의 깊은 동작을 살펴봅니다.

학습 목표

매개변수 기본값과 나머지 매개변수를 사용할 수 있다
스코프와 호이스팅을 이해한다
클로저의 개념과 활용법을 설명할 수 있다
화살표 함수와 일반 함수의 this 차이를 안다
고차함수를 작성하고 활용할 수 있다

매개변수 기본값과 나머지

// 기본값
function greet(name = '손님') {
  return `안녕하세요, ${name}님`;
}
console.log(greet());      // → 안녕하세요, 손님님
console.log(greet('민수')); // → 안녕하세요, 민수님

// 나머지 매개변수 (...)
function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4)); // → 10

스코프와 호이스팅

스코프는 변수가 살아 있는 범위입니다. let·const 는 블록 스코프를 가집니다.

function scopeTest() {
  if (true) {
    const inner = '안쪽';
    console.log(inner); // → 안쪽
  }
  // console.log(inner); // ❌ ReferenceError: 블록 밖에서 접근 불가
}

호이스팅은 선언이 스코프 위로 끌어올려지는 현상입니다.

console.log(hoisted()); // → OK (함수 선언식은 호이스팅됨)
function hoisted() {
  return 'OK';
}

// console.log(x); // ❌ ReferenceError (TDZ)
let x = 1;

⚠️ 주의 — 함수 선언식은 통째로 호이스팅되지만, let/const 는 선언 전 접근 시 TDZ(일시적 사각지대) 에러가 납니다.

클로저

함수가 자신이 만들어진 환경의 변수를 기억하는 것을 클로저라고 합니다.

function makeCounter() {
  let count = 0;            // 외부 변수
  return function () {
    count++;               // 내부 함수가 기억
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // → 1
console.log(counter()); // → 2
console.log(counter()); // → 3

count 는 외부에서 접근할 수 없지만 반환된 함수는 계속 기억합니다. 이렇게 상태를 은닉하는 데 클로저를 자주 씁니다.

💡 TIP — 클로저는 "데이터 캡슐화"의 도구입니다. 모듈 패턴, 이벤트 핸들러, 콜백 등 곳곳에서 쓰입니다.

this 바인딩

this 는 함수가 어떻게 호출되었는가에 따라 달라집니다.

const obj = {
  name: '객체',
  regular() {
    return this.name; // 호출 주체(obj)를 가리킴
  },
  arrow: () => {
    return this; // 화살표는 바깥 스코프의 this
  },
};

console.log(obj.regular()); // → 객체

함수 종류	`this` 결정 방식
일반 함수	호출 시점에 결정 (메서드 호출 → 객체)
화살표 함수	정의된 위치의 바깥 `this` 를 그대로 사용

const timer = {
  seconds: 0,
  start() {
    // 화살표 함수라 this 가 timer 로 유지됨
    setInterval(() => {
      this.seconds++;
    }, 1000);
  },
};

⚠️ 주의 — 콜백 안에서 일반 함수를 쓰면 this 가 의도와 달라집니다. 객체의 this 를 유지하고 싶을 때 화살표 함수가 유용합니다.

고차함수

함수를 인자로 받거나 함수를 반환하는 함수를 고차함수라고 합니다.

// 함수를 반환
function multiplier(factor) {
  return (n) => n * factor;
}
const triple = multiplier(3);
console.log(triple(5)); // → 15

// 함수를 인자로 받음
function repeat(times, action) {
  for (let i = 0; i < times; i++) action(i);
}
repeat(3, (i) => console.log(`${i}번째`)); // → 0번째, 1번째, 2번째

map·filter 같은 배열 메서드가 바로 고차함수입니다.

요약

매개변수 기본값과 ...나머지 로 유연한 함수를 만든다
let/const 는 블록 스코프이며 선언 전 접근 시 TDZ 에러가 난다
클로저는 외부 변수를 기억해 상태를 은닉하는 데 쓰인다
일반 함수의 this 는 호출 방식에, 화살표 함수는 정의 위치에 따라 결정된다
고차함수는 함수를 주고받으며 코드 재사용성을 높인다

연습문제

두 수를 받되 두 번째 인자가 없으면 1을 더하도록 기본값을 사용한 addOrInc 함수를 작성하세요.
makeCounter 를 변형해 decrement 도 가능한 카운터를 만드세요(클로저 활용).

힌트 — 객체에 up, down 두 함수를 담아 반환합니다.
일반 함수와 화살표 함수가 객체 메서드로 쓰였을 때 this.name 결과가 어떻게 다른지 코드로 확인하세요.
숫자 배열과 변환 함수를 받아 새 배열을 돌려주는 고차함수 transform 을 직접 구현하세요(내장 map 사용 금지).

힌트 — 빈 배열을 만들고 for 로 돌면서 push 합니다.

💡 연습문제 풀이

불러오는 중…

함수 심화 — 스코프·클로저·this

학습 목표

매개변수 기본값과 나머지

스코프와 호이스팅

클로저

this 바인딩

고차함수

요약

연습문제

함께 보면 좋은 자료

📑 치트시트

🛠 자주 나는 에러

🧰 개발자 도구

✅ 복습 퀴즈

댓글 0