자바스크립트의 스코프(Scope)란 무엇인가요?

Q1: 자바스크립트에서 스코프(Scope)란 무엇인가요?
A1: 스코프는 변수, 함수, 객체 등의 유효 범위를 의미합니다. 즉, 코드 내에서 변수나 함수가 접근 가능하고 참조될 수 있는 영역을 말합니다.

Q2: 자바스크립트에서 스코프가 중요한 이유는 무엇인가요?
A2: 스코프는 변수의 생명주기와 접근성을 결정하므로, 의도치 않은 변수 충돌이나 값 수정 문제를 방지하고 코드의 가독성과 유지보수를 쉽게 합니다.

Q3: 자바스크립트에는 어떤 종류의 스코프가 있나요?
A3: 자바스크립트에는 크게 전역 스코프(Global Scope), 함수 스코프(Function Scope), 블록 스코프(Block Scope)가 있습니다.

Q4: 전역 스코프(Global Scope)란 무엇인가요?
A4: 전역 스코프는 코드 어디서든 접근 가능한 범위입니다. 전역 변수는 전역 스코프에 선언되어 모든 함수와 블록 밖에서 접근할 수 있습니다.

Q5: 함수 스코프(Function Scope)란 무엇인가요?
A5: 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있으며, 함수 외부에서는 접근 불가능합니다. 자바스크립트의 var키워드는 함수 스코프를 가집니다.

Q6: 블록 스코프(Block Scope)란 무엇인가요?
A6: 중괄호 {} 내부에서 선언된 변수는 그 블록 내부에서만 접근 가능합니다. let과 const 키워드로 선언한 변수는 블록 스코프를 가집니다.

Q7: var, let, const 키워드와 스코프 관계는 어떻게 되나요?
A7: - var: 함수 스코프를 갖고, 블록 내라도 함수 밖에서는 접근 가능할 수 있어 변수가 의도치 않게 재할당될 위험이 있음.
- let, const: 블록 스코프를 가지며, 선언된 블록 외부에서는 접근 불가. 따라서 보다 안전한 변수 선언이 가능.

Q8: 스코프 체인(Scope Chain)이란 무엇인가요?
A8: 변수 참조 시 자바스크립트 엔진은 현재 스코프에서 변수를 찾고, 없으면 상위 스코프를 순차적으로 탐색하는 구조를 말합니다. 이 체인을 통해 변수의 유효 범위를 결정합니다.

Q9: 클로저와 스코프는 어떤 관련이 있나요?
A9: 클로저는 함수가 생성될 당시의 스코프를 기억하여, 함수 외부에서도 내부 변수에 접근할 수 있게 하는 기능입니다. 이로 인해 함수가 실행된 이후에도 변수들이 유지됩니다.

Q10: 스코프와 호이스팅(Hoisting)의 관계는 무엇인가요?
A10: 호이스팅은 변수와 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상입니다. var 변수와 함수 선언은 스코프 최상단으로 호이스팅 되나, let과 const는 호이스팅 되지만 TDZ(Temporal Dead Zone) 때문에 선언 전에 접근하면 오류가 발생합니다.

Q11: 스코프 문제를 방지하기 위한 좋은 습관은 무엇인가요?
A11:
- 변수 선언 시 가능하면 let, const 사용하기
- 전역 변수 최소화
- 함수와 블록 내에서 변수 사용 권장
- 클로저 사용 시 불필요한 참조를 피하고 메모리 관리 주의하기

Q12: ES6 이전과 이후 자바스크립트 스코프 차이점은 무엇인가요?
A12: ES6 이전에는 var만 있어 함수 스코프만 존재했고, 블록 스코프가 없었습니다. ES6부터 let과 const가 도입되어 명확한 블록 스코프 지원으로 변수 관리가 개선되었습니다.

자바스크립트의 스코프(Scope)는 변수와 함수의 접근 가능성을 결정하는 규칙을 의미합니다.

스코프는 코드의 특정 부분에서 변수가 어떻게 정의되고, 어떻게 접근될 수 있는지를 정의하는 중요한 개념입니다.

자바스크립트에서는 주로 두 가지 종류의 스코프가 존재합니다: 전역 스코프(Global Scope)와 지역 스코프(Local Scope). 1. 전역 스코프(Global Scope) 전역 스코프는 코드의 최상위에서 정의된 변수와 함수가 포함되는 스코프입니다.

전역 스코프에서 정의된 변수는 프로그램의 어디에서나 접근할 수 있습니다.

예를 들어: ```javascript let globalVar = "I am a global variable"; function showGlobalVar() { console.log(globalVar); } showGlobalVar(); // "I am a global variable" ``` 위의 코드에서 `globalVar`는 전역 스코프에 정의된 변수로, `showGlobalVar` 함수 내에서도 접근이 가능합니다.



2. 지역 스코프(Local Scope) 지역 스코프는 함수 또는 블록 내에서 정의된 변수와 함수가 포함되는 스코프입니다.

지역 스코프에서 정의된 변수는 해당 함수 또는 블록 내에서만 접근할 수 있습니다.

예를 들어: ```javascript function myFunction() { let localVar = "I am a local variable"; console.log(localVar); // "I am a local variable" } myFunction(); console.log(localVar); // ReferenceError: localVar is not defined ``` 위의 코드에서 `localVar`는 `myFunction` 내에서만 접근 가능하며, 함수 외부에서는 접근할 수 없습니다.



3. 블록 스코프(Block Scope) ES6(ECMAScript 2015)부터 도입된 `let`과 `const` 키워드를 사용하여 블록 스코프를 정의할 수 있습니다.

블록 스코프는 `{}` 중괄호로 감싸진 코드 블록 내에서만 유효한 변수를 정의합니다.

예를 들어: ```javascript if (true) { let blockVar = "I am a block scoped variable"; console.log(blockVar); // "I am a block scoped variable" } console.log(blockVar); // ReferenceError: blockVar is not defined ``` 위의 예제에서 `blockVar`는 `if` 블록 내에서만 접근 가능하며, 블록 외부에서는 접근할 수 없습니다.



4. 스코프 체인(Scope Chain) 자바스크립트는 스코프 체인을 통해 변수를 찾습니다.

함수가 호출될 때, 자바스크립트는 해당 함수의 지역 스코프에서 변수를 찾고, 만약 찾지 못하면 외부 스코프를 검색합니다.

이 과정은 최상위 전역 스코프에 도달할 때까지 계속됩니다.

이를 통해 중첩된 함수에서도 외부 함수의 변수에 접근할 수 있습니다.

```javascript let outerVar = "I am an outer variable"; function outerFunction() { let innerVar = "I am an inner variable"; function innerFunction() { console.log(outerVar); // "I am an outer variable" console.log(innerVar); // "I am an inner variable" } innerFunction(); } outerFunction(); ```

5. 클로저(Closure) 클로저는 함수와 그 함수가 선언된 스코프의 조합을 의미합니다.

클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수를 생성할 수 있게 해줍니다.

클로저는 데이터 은닉과 상태 유지에 유용하게 사용됩니다.

```javascript function makeCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 ``` 위의 예제에서 `makeCounter` 함수는 내부에 `count` 변수를 가지고 있으며, 이 변수를 증가시키는 내부 함수를 반환합니다.

이 내부 함수는 클로저를 통해 `count` 변수에 접근할 수 있습니다.

결론 자바스크립트의 스코프는 변수의 생명 주기와 접근성을 관리하는 중요한 개념입니다.

전역 스코프, 지역 스코프, 블록 스코프, 스코프 체인, 클로저 등 다양한 스코프 관련 개념을 이해함으로써, 자바스크립트 코드를 보다 효과적으로 작성하고 유지보수할 수 있습니다.

스코프를 잘 이해하면 코드의 가독성과 재사용성을 높일 수 있으며, 버그를 줄이는 데에도 큰 도움이 됩니다.