#20 #JS 공부하기

서영·2025년 11월 2일

JavaScript js 자바스크립트

JS

목록 보기

1/1

안녕하세요 👋 오늘은 자바스크립트의 핵심 개념 중에서도
초보 때 가장 많이 헷갈리는 스코프(Scope) 와 호이스팅(Hoisting) 개념을 정리해볼게요!

1. 스코프(Scope)란?

스코프는 “변수에 접근할 수 있는 유효 범위”를 말해요.
쉽게 말하면, “이 변수는 어디까지 쓸 수 있을까?”를 정하는 구역이에요!

스코프의 종류

구분	설명	예시
전역 스코프 (Global Scope)	코드 전체에서 접근 가능	함수 밖에서 선언된 변수
함수 스코프 (Function Scope)	함수 내부에서만 유효	`function` 안의 변수
블록 스코프 (Block Scope)	`{}` 중괄호 내부에서만 유효	`if`, `for`, `{}` 안의 `let`, `const`

예시

let a = 10; // 전역 변수

function show() {
  let b = 20; // 지역 변수
  console.log(a); // 가능
  console.log(b); // 가능
}

show();
console.log(a); // 가능
console.log(b); // ❌ 오류! (함수 안에서만 유효)

즉, 전역 변수는 어디서나 접근 가능하지만

지역 변수는 그 구역(스코프) 안에서만 쓸 수 있어요.

2. 전역 스코프 vs 지역 스코프

let a = 10; // 전역
function sum() {
  let a = 50; // 지역
  console.log(`내부 a: ${a}`);
}
sum();
console.log(`외부 a: ${a}`);

=== 실행 결과 ===

내부 a: 50
외부 a: 10

==============

함수 안에서 같은 이름으로 변수를 선언하면,
전역 변수를 가리고, 그 스코프 안의 변수만 사용돼요.

3. 호이스팅(Hoisting)

자바스크립트는 코드를 실행하기 전에
변수 선언과 함수 선언을 미리 위로 끌어올려요!

이걸 호이스팅이라고 부릅니다.

예시 1 — var의 호이스팅

console.log(num);
var num = 10;

=== 결과 ===

undefined

===========

왜냐면 자바스크립트는 이렇게 바꿔서 실행하거든요

var num;
console.log(num); // 아직 값이 없음 → undefined
num = 10;

즉, 선언만 위로 올라가고 값은 그대로 남아있어요!

예시 2 — let, const의 호이스팅

console.log(age);
let age = 17;

=== 결과 ===

ReferenceError

===========

4. var와 함수 스코프 예시

var text = "outside";

function printScope() {
  console.log(text);
  var text = "inside";
}

printScope();

=== 결과 ===

undefined

===========
이유 : 함수 안에서 var text가 호이스팅돼요.

그래서 함수 내부에서는 “새로운 text”가 생기고,
전역의 “outside”를 못 봐요.

하지만 그 변수는 아직 값이 없으니까 undefined가 찍혀요!

5. 한줄 요약

개념	핵심 요약
스코프	변수가 유효한 범위
전역 스코프	프로그램 전체에서 접근 가능
지역 스코프	함수/블록 내부에서만 접근 가능
호이스팅	선언이 코드 맨 위로 끌어올려지는 현상

var 선언만 호이스팅됨 (undefined 출력)
let, const는 선언 전 접근 불가