상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
궁금한 상식 보기
두통 원인을 파악하는 6가지 테스트
브로콜리의 맛을 살리는 5가지 조리법
브로콜리, 아침식사에 필수적인 7가지 이유
당신의 면역력을 높여줄 식습관 7가지
친구들과 함께 하는 건강한 식습관 8가지
엑셀 함수: 7가지 비법으로 헤드카운트 관리 완전 정복하기
당신이 알아야 할 윈도우 단축키 X가지
X가지 매력적인 윈도우 단축키, 당신의 친한 친구!
문서 작업의 고수를 만들어 줄 윈도우 단축키 X가지
작은 변화가 큰 효과! 엑셀 단축키 9가지 활용법
엑셀 단축키로 연봉을 높이는 6가지 방법
직장에서 유용한 엑셀 단축키 10가지 리스트
Previous
Next
수정하기 - 자바스크립트에서 함수가 호출될 때의 스코프 체인(Scope Chain)은 어떻게 작동하나요?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
<a href='https://sangseek.com/sangseeks/자바/ko'>자바</a>스크립트에서 함수가 호출될 때의 스코프 체인(Scope Chain)은 변수와 함수의 접근성을 결정하는 중요한 개념입니다. 스코프 체인은 함수가 실행될 때 어떤 변수에 접근할 수 있는지를 정의합니다. 이를 이해하기 위해서는 먼저 스코프(Scope)와 <a href='https://sangseek.com/sangseeks/클로저/ko'>클로저</a>(Closure)의 개념을 살펴보아야 합니다. 1. 스코프(Scope) 스코프는 변수의 유효 범위를 정의합니다. 자바스크립트에는 크게 두 가지 종류의 스코프가 있습니다: - 전역 스코프(Global Scope) : 프로그램 전체에서 접근 가능한 변수의 범위입니다. 전역 스코프에 정의된 변수는 모든 함수와 블록에서 접근할 수 있습니다. - <a href='https://sangseek.com/sangseeks/지역 스코프/ko'>지역 스코프</a>(Local Scope) : 함수 내부에서 정의된 변수의 범위입니다. 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다. 자바스크립트에서는 <a href='https://sangseek.com/sangseeks/함수 스코프/ko'>함수 스코프</a>(function scope)와 <a href='https://sangseek.com/sangseeks/블록 스코프/ko'>블록 스코프</a>(block scope, `let`과 `const`를 사용하여 정의된 변수)로 나뉩니다. 2. 스코프 체인(Scope Chain) 스코프 체인은 특정 함수가 호출될 때 그 함수가 접근할 수 있는 변수의 목록을 결정하는 메커니즘입니다. 함수가 호출될 때, 자바스크립트는 해당 함수의 스코프와 그 함수가 정의된 위치의 스코프를 차례로 탐색합니다. 이 과정을 통해 변수에 접근하게 됩니다. 스코프 체인의 작동 방식 1. 함수 호출 : 함수가 호출되면, 자바스크립트는 해당 함수의 실행 컨텍스트를 생성합니다. 이 실행 컨텍스트에는 해당 함수의 스코프가 포함됩니다. 2. 변수 탐색 : 함수 내에서 변수를 <a href='https://sangseek.com/sangseeks/참조/ko'>참조</a>할 때, 자바스크립트는 먼저 해당 함수의 스코프에서 변수를 찾습니다. 만약 변수가 존재하지 않으면, 자바스크립트는 외부 스코프(즉, 함수를 정의한 위치의 스코프)로 이동하여 변수를 찾습니다. 이 과정을 계속해서 상위 스코프를 탐색하며 변수를 찾습니다. 3. 전역 스코프 : 모든 스코프 체인의 최상위에는 전역 스코프가 있습니다. 만약 상위 스코프에서도 변수를 찾지 못하면, 전역 스코프에서 변수를 찾게 됩니다. 전역 스코프에서도 변수를 찾지 못하면 `undefined`가 반환됩니다. 3. 예제 아래의 예제를 통해 스코프 체인의 작동 방식을 이해해보겠습니다. ```javascript let globalVar = "I am a global variable"; function outerFunction() { let outerVar = "I am an outer variable"; function innerFunction() { let innerVar = "I am an inner variable"; console.log(innerVar); // "I am an inner variable" console.log(outerVar); // "I am an outer variable" console.log(globalVar); // "I am a global variable" } innerFunction(); } outerFunction(); ``` 위 코드에서 `innerFunction`은 `innerVar`, `outerVar`, 그리고 `globalVar`에 접근할 수 있습니다. 이는 스코프 체인이 다음과 같이 작동하기 때문입니다: 1. `innerFunction`이 호출되면, 자바스크립트는 먼저 `innerFunction`의 스코프에서 `innerVar`를 찾습니다. 2. `innerVar`가 존재하므로 해당 값을 출력합니다. 3. 다음으로 `outerVar`를 찾기 위해 상위 스코프인 `outerFunction`의 스코프를 탐색합니다. `outerVar`가 존재하므로 해당 값을 출력합니다. 4. 마지막으로 `globalVar`를 찾기 위해 전역 스코프를 탐색합니다. `globalVar`가 존재하므로 해당 값을 출력합니다. 4. 클로저(Closure) 클로저는 함수와 그 함수가 선언된 스코프의 조합입니다. 클로저는 함수가 외부 스코프의 변수를 기억할 수 있게 해줍니다. 클로저를 사용하면, 함수가 호출된 후에도 외부 스코프의 변수에 접근할 수 있습니다. ```javascript function makeCounter() { let count = 0; // private variable return function() { count += 1; return count; }; } const counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 ``` 위의 예제에서 `makeCounter` 함수는 `count`라는 변수를 정의하고, 내부 함수(클로저)를 반환합니다. 이 클로저는 `count` 변수에 접근할 수 있으며, `makeCounter`가 호출된 후에도 `count`의 상태를 유지합니다. 결론 자바스크립트에서 함수가 호출될 때의 스코프 체인은 변수에 대한 접근성을 결정하는 중요한 메커니즘입니다. 스코프 체인을 이해하면 자바스크립트의 변수 유효 범위와 클로저의 작동 방식을 더 잘 이해할 수 있습니다. 이러한 개념들은 자바스크립트의 비동기 프로그래밍, 모듈화, 그리고 상태 관리에 있어서 매우 중요한 역할을 합니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기