프론트엔드 뿌수기 #4

SeoJaeYeong·2026년 1월 13일

프론트엔드 복습

목록 보기
4/7

DAY 04 — 함수, 스코프, 클로저 (개념 정리)

🎯 목표

  • JavaScript에서 변수를 어떻게 찾는지 이해한다.
  • 스코프 체인이 왜 “선언 위치 기준”인지 설명할 수 있다.
  • 클로저를 메모리 개념이 아닌 접근 규칙 관점에서 이해한다.

스코프(Scope)란?

스코프는 값이 저장된 공간이 아니라
변수를 어디서 접근할 수 있는지에 대한 규칙이다.

  • 메모리: 값이 저장되는 장소
  • 스코프: 그 값에 접근할 수 있는 범위와 규칙

스코프 체인의 핵심 원칙

JavaScript는 변수를
“어디서 실행됐는지”가 아니라
“어디서 선언됐는지”를 기준으로 찾는다.

변수를 찾을 때의 순서:
1. 현재 스코프
2. 자신을 감싸는 상위 스코프
3. 전역 스코프

👉 가까운 곳부터, 없으면 바깥으로 올라간다.


선언 위치 vs 호출 위치

let x = 10;

function foo() {
  console.log(x);
}

function bar() {
  let x = 20;
  foo();
}

bar(); // 10

foo는 전역에서 선언됨

따라서 foo 안에서 x를 찾을 때

bar의 x는 고려되지 않는다

👉 함수는 자신이 선언된 스코프만 본다

var / let 차이 (핵심만)
var는 반복문 전체에서 하나의 변수를 공유하고
let은 반복문 한 바퀴마다 새로운 변수를 만든다

// var
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3

// let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 0, 1, 2

클로저(Closure)란?
❌ 외운 정의

외부 함수의 변수를 참조하는 내부 함수

⭕ 이해용 정의

함수가 자신이 선언된 스코프를 기억하고
그 스코프에 계속 접근할 수 있는 현상

클로저가 생기는 이유

function outer() {
  let a = 1;
  return function inner() {
    console.log(a);
  };
}

const fn = outer();
fn(); // 1

outer 실행은 끝났지만

inner 함수가 a에 접근하고 있음

JS 엔진은 해당 변수를 제거하지 않음

👉 값이 메모리에 남아서가 아니라
접근 경로가 살아 있기 때문

클로저와 메모리의 관계
개념 의미
메모리 값이 저장되는 장소
스코프 변수를 찾는 규칙
클로저 함수가 스코프 접근을 유지하는 현상

클로저는 변수를 저장하는 것이 아니라
변수를 참조할 수 있는 상태를 유지한다.

클로저 예제 한 줄 설명

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

내부 함수는
자신이 선언된 스코프의 count를 기억하기 때문에
호출할 때마다 이전 상태를 유지할 수 있다.

0개의 댓글