📘 6.1.1 스코프 체인 - 변수를 찾아가는 조용한 여행
함수를 배우고 나면, 우리는 문득 이런 경험을 하게 됩니다. 함수 안에서 변수를 부르는데, 그 변수가 어디서 오는지 궁금해집니다. 마치 어둠 속에서 누군가의 목소리를 듣고, 그 목소리의 주인을 찾아가는 것처럼 말이죠.
오늘 우리가 만날 스코프 체인은 바로 그런 여행과 같습니다. 변수를 찾아가는 자바스크립트의 조용하고도 체계적인 여행을 함께 따라가 보겠습니다.
🧠 새로운 단어들과 친해지기
우리가 함께 알아갈 단어들은 이렇습니다.
| 단어 | 의미 |
|---|---|
| 스코프 체인 | 변수를 찾을 때 거쳐가는 길입니다. 보물찾기에서 단서를 하나씩 따라가는 것과 같습니다. |
| 범위 | 변수를 사용할 수 있는 구역을 말합니다. |
| 바깥 범위 | 현재 있는 곳보다 더 넓은 곳을 말합니다. |
| 변수 가리기 | 같은 이름의 변수가 여러 곳에 있을 때, 가까운 것이 먼 것을 보이지 않게 하는 현상입니다. |
| 전역 범위 | 프로그램 전체에서 사용할 수 있는 가장 넓은 공간입니다. |
스코프 체인이라는 말을 처음 들으면 어렵게 느껴질 수 있습니다. 하지만 이것은 "범위"와 "연결고리"가 만나 이루어진 말입니다. 하나의 고리가 다음 고리로 이어지듯, 변수를 찾는 길도 그렇게 연결되어 있다는 뜻입니다.
✨ 스코프 체인, 그것은 무엇일까요?
스코프 체인은 자바스크립트가 변수를 찾을 때 따르는 조용한 규칙입니다. 이 규칙은 우리가 어두운 밤에 집으로 돌아가는 길을 찾는 것과 닮아 있습니다.
먼저 가장 가까운 집 앞 불빛을 찾아보고, 그것이 우리 집이 아니라면 조금 더 멀리 있는 불빛을 보고, 그래도 아니라면 더 멀리... 이렇게 하나씩 찾아가는 것처럼 말입니다.
스코프 체인의 특징들을 살펴보면:
- 한 방향으로만 흘러갑니다: 안쪽에서 바깥쪽으로는 볼 수 있지만, 바깥쪽에서 안쪽으로는 들여다볼 수 없습니다.
- 가까운 것을 먼저 선택합니다: 같은 이름의 변수가 여러 곳에 있을 때는 가장 가까운 것을 택합니다.
마음속 이야기: 할머니 집에서 찾던 물건들
어릴 적 할머니 집에 가면, 필요한 물건을 찾을 때 이런 순서로 찾곤 했습니다.
먼저 내가 머무는 작은 방을 뒤져봅니다. 혹시 여기에 있을까 하면서요. 만약 여기서 찾았다면, 더 이상 찾을 필요가 없었습니다.
방에 없으면 할머니가 계신 큰 방으로 가서 "할머니, 이거 어디 있어요?" 하고 물어봅니다. 여기서 찾았다면 다행이었죠.
그래도 없으면 거실을 뒤지고, 마지막으로 부엌까지 가서 찾아봅니다.
이런 순서로 찾아가는 과정이 바로 스코프 체인과 같습니다. 가까운 곳부터 멀리 있는 곳까지, 차근차근 찾아가는 것이죠.
🎯 스코프 체인을 알아야 하는 이유
우리는 왜 이것을 배우는 걸까요?
첫째, 변수가 어디서 오는지 정확히 알 수 있습니다. 코드가 복잡해질수록 같은 이름의 변수가 여러 곳에 나타날 수 있는데, 스코프 체인을 알면 "아, 이 변수는 여기서 온 것이구나" 하고 명확하게 알 수 있습니다.
둘째, 같은 이름의 변수들이 어떻게 관계를 맺고 있는지 이해할 수 있습니다. 왜 어떤 때는 이 값이 나오고, 어떤 때는 저 값이 나오는지 미리 예상할 수 있게 됩니다.
셋째, 함수 안에서 바깥 변수를 안전하게 사용할 수 있습니다. 어떤 변수에 손을 뻗을 수 있고 어떤 변수에는 손이 닿지 않는지 미리 알 수 있습니다.
넷째, 변수 이름이 겹치는 일을 피하고 코드를 더 깔끔하게 만들 수 있습니다.
⚙️ 기본 사용법 알아보기
스코프 체인은 특별한 문법이 있는 것은 아닙니다. 우리가 이미 알고 있는 변수와 함수가 어떤 순서로 찾아지는지를 이해하는 것이 핵심입니다.
🔹 스코프 체인의 기본 구조
let 전체변수 = "가장 넓은 범위"; // 4단계: 전체 범위
function 큰함수() {
let 큰함수변수 = "큰 함수 범위"; // 3단계: 큰 함수 범위
function 작은함수() {
let 작은함수변수 = "작은 함수 범위"; // 2단계: 작은 함수 범위
function 제일작은함수() {
let 제일작은변수 = "제일 작은 범위"; // 1단계: 제일 작은 범위
// 여기서 변수를 찾는 순서:
// 제일작은변수 → 작은함수변수 → 큰함수변수 → 전체변수
}
}
}🔹 변수 찾기 순서
스코프 체인에서 변수를 찾는 순서는 언제나 안쪽에서 바깥쪽으로 향합니다.
1단계에서는 지금 있는 함수 안에서 찾고, 2단계에서는 바로 바깥쪽 함수에서 찾고, 3단계에서는 더 바깥쪽에서 찾고, 4단계에서는 전체에서 찾습니다.
만약 5단계까지 가도 찾지 못한다면, 그때 오류가 발생합니다.
🧪 직접 해보면서 배우기
이제 실제 예시들을 통해 스코프 체인이 어떻게 움직이는지 차근차근 살펴보겠습니다.
🔹 첫 번째 예시: 보물찾기 게임
첫 번째 예시에서는 스코프 체인의 기본 동작을 보물찾기 게임으로 표현해보겠습니다.
// 전체 지역에 있는 보물들 (전역 변수)
let 전체보물 = "다이아몬드";
let 공용열쇠 = "황금 열쇠";
// 숲 지역 (바깥 함수)
function 숲지역() {
let 숲보물 = "은화";
let 숲열쇠 = "은 열쇠";
console.log("숲 지역에서 찾은 것들:");
console.log("- 숲 보물:", 숲보물); // 현재 숲에서 찾음
console.log("- 전체 보물:", 전체보물); // 전체 지역에서 찾음
console.log("- 숲 열쇠:", 숲열쇠); // 현재 숲에서 찾음
// 동굴 탐험 (안쪽 함수)
function 동굴탐험() {
let 동굴보물 = "루비";
let 동굴열쇠 = "구리 열쇠";
console.log("\n동굴에서 찾은 것들:");
console.log("- 동굴 보물:", 동굴보물); // 현재 동굴에서 찾음
console.log("- 숲 보물:", 숲보물); // 숲 지역에서 찾음
console.log("- 전체 보물:", 전체보물); // 전체 지역에서 찾음
console.log("- 모든 열쇠:", 동굴열쇠, "+", 숲열쇠, "+", 공용열쇠);
}
동굴탐험(); // 동굴 탐험 시작!
}
// 보물찾기 게임 시작!
console.log("💎 보물찾기 게임을 시작합니다!");
숲지역();
console.log("\n전체 확인:", "전체 보물은", 전체보물, ", 공용 열쇠는", 공용열쇠);이 예시는 보물찾기와 같습니다. 동굴에서 보물을 찾을 때, 먼저 동굴 안에서 찾아보고, 없으면 숲에서 찾아보고, 그래도 없으면 전체 지역에서 찾아보는 과정을 보여줍니다.
🔹 두 번째 예시: 같은 이름의 물건이 여러 곳에 있을 때
두 번째 예시에서는 같은 이름의 변수가 여러 곳에 있을 때 어떤 것이 선택되는지 알아보겠습니다.
// 동네에 있는 물건들
let 간식 = "동네 과자";
let 음료 = "동네 음료";
let 장난감 = "동네 장난감";
// 우리 집의 물건들
function 우리집() {
let 간식 = "집 과자"; // 동네 과자를 가림
let 음료 = "집 음료"; // 동네 음료를 가림
// 장난감은 없어서 동네에서 가져옴
console.log("우리 집에서 확인:");
console.log("- 간식:", 간식); // "집 과자" (가장 가까운 것)
console.log("- 음료:", 음료); // "집 음료" (가장 가까운 것)
console.log("- 장난감:", 장난감); // "동네 장난감" (동네에서 찾음)
// 내 방의 물건들
function 내방() {
let 간식 = "내 과자"; // 집 과자와 동네 과자를 모두 가림
// 음료와 장난감은 없어서 바깥에서 찾음
console.log("\n내 방에서 확인:");
console.log("- 간식:", 간식); // "내 과자" (가장 가까운 것)
console.log("- 음료:", 음료); // "집 음료" (한 단계 바깥에서 찾음)
console.log("- 장난감:", 장난감); // "동네 장난감" (전체에서 찾음)
}
내방();
}
// 확인해보기
console.log("🏠 같은 이름의 물건 찾기 게임!");
우리집();
console.log("\n동네에서 원래 간식 확인:", 간식); // "동네 과자" (변경되지 않음)이 예시는 같은 이름의 물건이 여러 곳에 있을 때 어떤 것을 선택하는지 보여줍니다. 가장 가까운 곳에 있는 것을 먼저 선택하고, 없으면 점점 멀리 찾아가는 과정을 확인할 수 있습니다.
🔹 세 번째 예시: 학교에서 필요한 물건 찾기
세 번째 예시에서는 조금 더 복잡한 스코프 체인 상황을 학교 생활에 비유해서 알아보겠습니다.
// 학교 전체에 있는 공용 물건들
let 학교이름 = "즐거운 초등학교";
let 학교준비물 = "학교 공용 준비물";
// 우리 반 교실
function 우리반교실() {
let 반번호 = "3학년 2반";
let 반준비물 = "반 공용 준비물";
console.log("우리 반 교실 정보:");
console.log("- 학교:", 학교이름); // 학교 전체에서 찾음
console.log("- 반:", 반번호); // 현재 교실에서 찾음
console.log("- 반 준비물:", 반준비물); // 현재 교실에서 찾음
// 내 책상
function 내책상() {
let 학생이름 = "김철수";
let 개인준비물 = "내 개인 준비물";
console.log("\n내 책상 정보:");
console.log("- 학생 이름:", 학생이름); // 내 책상에서 찾음
console.log("- 개인 준비물:", 개인준비물); // 내 책상에서 찾음
console.log("- 반 준비물:", 반준비물); // 교실에서 찾음
console.log("- 학교 준비물:", 학교준비물); // 학교 전체에서 찾음
// 내 필통 안
function 내필통() {
let 연필들 = "연필 5자루";
let 지우개들 = "지우개 2개";
console.log("\n내 필통 안 내용:");
console.log("- 연필:", 연필들); // 필통에서 찾음
console.log("- 지우개:", 지우개들); // 필통에서 찾음
console.log("- 주인:", 학생이름); // 책상에서 찾음
console.log("- 소속 반:", 반번호); // 교실에서 찾음
console.log("- 소속 학교:", 학교이름); // 학교 전체에서 찾음
}
내필통(); // 필통 확인하기
}
내책상(); // 내 책상 확인하기
}
// 학교 생활 시작!
console.log("🏫 학교에서 물건 찾기 게임!");
우리반교실();
console.log("\n학교 이름 재확인:", 학교이름); // 원래 값 그대로이 예시는 학교 → 교실 → 책상 → 필통으로 이어지는 4단계 스코프 체인을 보여줍니다. 가장 안쪽(필통)에서 가장 바깥쪽(학교)까지 순서대로 찾아가는 과정을 학교 생활로 이해할 수 있습니다.
🎯 5단원 복습 문제 - 함수 연습하기
6단원을 배우기 전에 5단원에서 배운 함수를 복습해보겠습니다. 함수는 스코프 체인을 만드는 기본이기 때문입니다.
시간의 흐름 속에서 우리가 배운 함수들을 다시 한 번 들여다보는 것은, 마치 오래된 일기장을 펼쳐보는 것과 같습니다. 그 안에는 우리가 걸어온 배움의 발자취가 고스란히 담겨 있습니다.
복습 문제 1: 함수 만들기와 사용하기
// 간단한 인사 함수 만들기
function 학생인사(이름, 학년) {
console.log("안녕하세요, " + 학년 + "학년 " + 이름 + "님!");
console.log("오늘도 즐거운 하루 보내세요!");
}
function 더하기계산(숫자1, 숫자2) {
let 결과 = 숫자1 + 숫자2; // 함수 안에서 변수 만들기
console.log(숫자1 + " + " + 숫자2 + " = " + 결과);
return 결과; // 계산 결과 돌려주기
}
// 함수들 사용해보기
console.log("=== 함수 복습하기 ===");
학생인사("철수", 3); // 인사 함수 사용하기
let 답 = 더하기계산(15, 27); // 계산 함수 사용하고 결과 받기
console.log("함수가 돌려준 값:", 답);해답과 설명: 함수는 function 키워드로 만들고, 이름과 괄호 안의 값들로 정의합니다. 함수를 사용할 때는 함수 이름 뒤에 괄호를 붙이고 필요한 값들을 넣어줍니다. 함수는 자신만의 변수를 가질 수 있고, return을 통해 결과를 밖으로 돌려줄 수 있습니다.
복습 문제 2: 화살표 함수와 일반 함수 비교하기
// 일반 함수로 만든 계산기
function 곱하기(a, b) {
return a * b;
}
// 화살표 함수로 만든 계산기
const 나누기 = (a, b) => {
if (b !== 0) { // 0으로 나누기 방지하기
return a / b;
} else {
return "0으로 나눌 수 없어요!";
}
};
// 더 간단한 화살표 함수 (한 줄로)
const 제곱하기 = (숫자) => 숫자 * 숫자; // 제곱 계산하기
// 함수들 비교해보기
console.log("=== 함수 종류 비교하기 ===");
console.log("일반 함수 곱셈:", 곱하기(6, 7));
console.log("화살표 함수 나눗셈:", 나누기(20, 4));
console.log("간단한 화살표 함수 제곱:", 제곱하기(5));해답과 설명: 일반 함수는 function 키워드로 만들고, 화살표 함수는 => 기호로 만듭니다. 화살표 함수는 더 간단하게 쓸 수 있고, 특히 한 줄짜리 함수는 아주 짧게 만들 수 있습니다. 두 방식 모두 같은 일을 하지만 쓰는 방법이 다릅니다.
🧚♀️ 이야기로 다시 배우기: 아파트 이야기
지금까지 배운 내용을 하나의 조용한 이야기로 다시 정리해보겠습니다.
우리 동네에는 하나의 아파트가 있었습니다. 이 아파트는 참으로 특별한 구조로 이루어져 있었습니다.
1층에는 모든 사람이 함께 사용하는 공용 공간들이 있었습니다. 놀이터, 작은 도서관, 벤치들이 있어서 누구나 언제든지 사용할 수 있었습니다. 이것이 바로 전체 범위와 같았습니다.
2층에는 우리 가족만의 거실이 있었습니다. 우리 가족은 1층의 공용 공간과 2층 거실을 모두 사용할 수 있었지만, 다른 가족들은 2층에 올라올 수 없었습니다.
3층에는 형과 내가 함께 쓰는 공부방이 있었습니다. 형과 나는 1층, 2층, 3층을 모두 사용할 수 있었습니다.
4층에는 나만 사용할 수 있는 개인 방이 있었습니다. 나는 모든 층을 다 사용할 수 있었지만, 다른 사람들은 4층 내 방에 들어올 수 없었습니다.
이 아파트에는 조용한 약속이 있었는데, 바로 위에서 아래로만 자유롭게 움직일 수 있다는 것이었습니다. 4층에 있는 나는 아래층들을 모두 사용할 수 있지만, 1층에 있는 다른 사람들은 위층에 올라올 수 없었습니다.
그리고 같은 이름의 물건이 여러 층에 있을 때는 가장 가까운 층의 물건을 먼저 사용하게 되어 있었습니다. 만약 내가 "연필"을 찾는다면, 4층에 있으면 4층 연필을, 4층에 없으면 3층을, 3층에도 없으면 2층을, 그래도 없으면 1층의 연필을 사용하게 되는 것입니다.
이 아파트의 규칙이 바로 우리가 배운 스코프 체인과 같습니다.
🧠 자주 하는 실수와 주의할 점
스코프 체인을 배우면서 많은 분들이 실수하는 부분들을 미리 알아두면 더욱 안전한 코딩을 할 수 있습니다.
❌ 실수 1: 스코프 체인 방향을 거꾸로 생각하기
let 전체메시지 = "전체 메시지";
function 바깥함수() {
let 바깥메시지 = "바깥 메시지";
function 안쪽함수() {
// 올바른 이해: 안쪽에서 바깥쪽으로 찾아감
console.log(전체메시지); // 안쪽 → 바깥 → 전체 순서로 찾음
console.log(바깥메시지); // 안쪽 → 바깥에서 찾음
}
안쪽함수();
}
바깥함수();이런 실수가 생기는 이유는 스코프 체인이 안쪽에서 바깥쪽으로 작동한다는 것을 잊어버리기 때문입니다. 마치 물방울이 중심에서 바깥쪽으로 퍼져나가는 것과 같다고 기억하면 좋습니다.
❌ 실수 2: 바깥에서 안쪽 변수에 접근하려고 하기
function 바깥함수() {
function 안쪽함수() {
let 비밀메시지 = "비밀 메시지";
console.log(비밀메시지);
}
안쪽함수();
// console.log(비밀메시지); // 오류! 바깥에서는 안쪽 변수를 볼 수 없어요
}
// 올바른 방법: 필요한 값은 return으로 전달하기
function 올바른함수() {
function 안쪽함수() {
let 비밀메시지 = "비밀 메시지";
return 비밀메시지; // 값을 돌려줘서 밖으로 전달
}
let 메시지 = 안쪽함수();
console.log(메시지); // "비밀 메시지" 정상 출력
}
바깥함수();
올바른함수();스코프 체인은 한쪽 방향으로만 흐릅니다. 안쪽에서 바깥쪽은 볼 수 있지만, 바깥쪽에서 안쪽은 볼 수 없습니다. 마치 높은 곳에서 아래를 내려다보는 것은 쉽지만, 아래에서 위를 자세히 보는 것은 어려운 것과 같습니다.
❌ 실수 3: 변수 가리기 현상을 잘못 이해하기
let 학생이름 = "전체 학생";
function 교실() {
let 학생이름 = "교실 학생"; // 전체 학생이름을 가림
console.log("교실에서:", 학생이름); // "교실 학생"
function 책상() {
console.log("책상에서:", 학생이름); // "교실 학생" (바로 위에서 찾음)
}
책상();
}
교실();
console.log("전체에서:", 학생이름); // "전체 학생" (변경되지 않음)변수 가리기는 그림자와 같습니다. 가까운 나무가 먼 나무의 그림자를 만드는 것처럼, 가까운 변수가 먼 변수를 가리지만, 원래 변수 자체가 사라지거나 바뀌는 것은 아닙니다.
❌ 실수 4: let을 빠뜨려서 전역 변수 만들기
function 나쁜함수() {
// let을 빠뜨리면 전체 변수가 됩니다!
// 실수변수 = "실수로 만든 전체 변수"; // 위험!
}
function 좋은함수() {
let 의도된변수 = "의도한 지역 변수"; // 안전!
console.log(의도된변수);
}
좋은함수();변수를 만들 때는 항상 let이나 const를 앞에 붙여야 합니다. 그렇지 않으면 스코프 체인을 무시하고 전체 변수가 되어버릴 수 있습니다.
✏️ 직접 해보기 - 조용한 연습 문제들
이제 배운 내용을 연습 문제를 통해 차근차근 익혀보겠습니다.
Ex1) 다음 코드에서 어떤 값이 출력될지 예측해보세요
let 과일 = "전체 사과";
let 색깔 = "전체 빨강";
function 부엌() {
let 과일 = "부엌 바나나";
console.log("부엌에서 과일:", 과일); // "부엌 바나나" (현재 범위의 과일 사용)
console.log("부엌에서 색깔:", 색깔); // "전체 빨강" (스코프 체인으로 전체 색깔 찾음)
}
부엌();Ex2) 스코프 체인이 변수를 찾는 순서 확인해보세요
let 단계1 = "전체";
function 바깥() {
let 단계2 = "바깥";
function 안쪽() {
let 단계3 = "안쪽";
console.log(단계3); // 안쪽 범위에서 바로 찾음
console.log(단계2); // 안쪽 → 바깥 범위에서 찾음
console.log(단계1); // 안쪽 → 바깥 → 전체 범위에서 찾음
}
안쪽();
}
바깥();Ex3) 같은 이름의 변수가 여러 곳에 있을 때 어떤 것이 선택되는지 확인해보세요
let 동물 = "전체 고양이";
function 집() {
let 동물 = "집 강아지";
function 방() {
let 동물 = "방 햄스터";
console.log("방에서:", 동물); // "방 햄스터" (가장 가까운 범위)
}
방();
console.log("집에서:", 동물); // "집 강아지" (현재 범위)
}
집();
console.log("전체에서:", 동물); // "전체 고양이" (전체 범위)🤔 조금 더 어려운 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 스코프 체인에 대한 이해를 확인해보겠습니다.
Q1. 다음 코드에서 스코프 체인 동작을 분석해보세요.
let 설정 = "전체 설정";
function 앱만들기() {
let 설정 = "앱 설정";
let 앱이름 = "내 앱";
function 사용자만들기() {
let 사용자이름 = "사용자1";
console.log("사용자 정보:");
console.log("- 설정:", 설정); // "앱 설정" (위쪽 함수에서 찾음, 전체 설정은 가려짐)
console.log("- 앱:", 앱이름); // "내 앱" (위쪽 함수에서 찾음)
console.log("- 사용자:", 사용자이름); // "사용자1" (현재 범위에서 찾음)
}
사용자만들기();
}
앱만들기();해설: 스코프 체인은 안쪽에서 바깥쪽으로 진행되며, 같은 이름 변수는 가까운 것이 우선됩니다.
Q2. 스코프 체인을 활용해서 안전한 데이터 관리 시스템을 만들어보세요.
function 보안시스템만들기() {
// 보호되어야 할 중요한 데이터
let 비밀번호 = "1234";
let 사용자목록 = ["김철수", "이영희"];
function 비밀번호확인(입력번호) {
if (입력번호 === 비밀번호) {
return true;
} else {
return false;
}
}
function 사용자보기(입력번호) {
if (비밀번호확인(입력번호)) {
console.log("사용자 목록:", 사용자목록);
} else {
console.log("접근 거부: 비밀번호가 틀렸습니다!");
}
}
// 안전한 접근 방법 제공
console.log("보안 시스템 테스트:");
사용자보기("0000"); // 틀린 비밀번호
사용자보기("1234"); // 맞는 비밀번호
}
보안시스템만들기();해설: 스코프 체인을 활용하여 중요한 데이터를 외부에서 직접 접근할 수 없게 보호하면서도, 내부 함수들은 필요한 데이터에 안전하게 접근할 수 있는 시스템을 만들 수 있습니다. 외부에서는 비밀번호나 사용자목록에 직접 접근할 수 없지만, 내부 함수들은 스코프 체인으로 이 데이터들을 사용할 수 있어 보안이 유지됩니다.
💫 마무리하며
지금까지 스코프 체인이라는 흥미로운 개념에 대해 자세히 알아보았습니다. 마치 보물찾기나 아파트에서 필요한 물건을 찾는 것처럼, 자바스크립트가 변수를 찾아가는 조용하고도 체계적인 순서가 있다는 것을 배웠습니다.
가장 중요한 것은 안쪽에서 바깥쪽으로 찾아간다는 방향과, 가장 가까운 것을 우선한다는 원칙입니다. 이제 여러분도 스코프 체인을 이해해서 더욱 안전하고 예측 가능한 코드를 작성할 수 있을 것입니다.
다음 시간에는 더 흥미진진한 자바스크립트 개념들을 함께 탐험해보겠습니다. 여러분의 코딩 실력이 하루하루 성장하는 모습을 보니 정말 뿌듯합니다. 계속 함께 걸어가요. ✨
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요.
| 학습 내용 | 이해했나요? |
|---|---|
| 스코프 체인의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 5단원 함수 복습 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다.
추가 문제 1. 다음 코드의 출력 결과를 예측해보세요.
let a = "전체 a";
let b = "전체 b";
function 테스트() {
let a = "함수 a";
console.log(a); // 무엇이 출력될까요?
console.log(b); // 무엇이 출력될까요?
}
테스트();답:
- 첫 번째 출력:
"함수 a"(현재 범위의 a 사용) - 두 번째 출력:
"전체 b"(스코프 체인으로 전체 b 찾음)
추가 문제 2. 스코프 체인을 따라 변수를 찾는 순서를 설명해보세요.
let 전체 = "전체";
function 단계1() {
let 바깥 = "바깥";
function 단계2() {
let 안쪽 = "안쪽";
console.log(안쪽); // 어떤 순서로 찾을까요?
console.log(바깥); // 어떤 순서로 찾을까요?
console.log(전체); // 어떤 순서로 찾을까요?
}
단계2();
}
단계1();답:
안쪽: 단계2 범위에서 바로 찾음바깥: 단계2 → 단계1 범위에서 찾음전체: 단계2 → 단계1 → 전체 범위에서 찾음
추가 문제 3. 변수 이름이 충돌할 때 어떤 것이 우선되는지 확인해보세요.
let 이름 = "전체 이름";
function 바깥() {
let 이름 = "바깥 이름";
function 안쪽() {
let 이름 = "안쪽 이름";
console.log(이름); // 어떤 이름이 출력될까요?
}
안쪽();
console.log(이름); // 어떤 이름이 출력될까요?
}
바깥();
console.log(이름); // 어떤 이름이 출력될까요?답:
- 안쪽 함수:
"안쪽 이름"(가장 가까운 범위) - 바깥 함수:
"바깥 이름"(현재 범위) - 전체:
"전체 이름"(전체 범위)
📂 마무리 정보
오늘 배운 6.1.1 내용이 여러분의 자바스크립트 지식 보관함에 잘 저장되었나요? 다음 시간에는 더 흥미진진한 내용으로 만나겠습니다.
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'6. 함수의 비밀 (클로저) > 6.1 렉시컬 스코프 이해하기' 카테고리의 다른 글
| 6.1.2 변수 찾기 규칙 - 변수를 찾아가는 조용한 방법 (0) | 2025.07.05 |
|---|