Chapter2. 스코프(Scope)
2-1. 스코프와 주요 규칙
스코프의 정의
변수 접근 규칙에 따른 유효 범위
규칙
스코프는 중첩이 가능하다.
- 전역 스코프(Global scope): 가장 바깥에 위치한 스코프
- 전역 변수: 전역 스코프에서 선언한 변수
- 지역 스코프(Local scope): 전역 스코프 안쪽에 위치한 스코프
- 지역 변수: 지역 스코프에서 선언한 변수
- 지역 변수: 지역 스코프에서 선언한 변수
하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.
- 상위 스코프가 하위 스코프에 접근하는 경우
let userName = 'Jimmy';
if (userName) {
let message = `${userName}, Hi!`;
console.log(message); //'Jimmy, Hi!'
}
console.log(message) //ReferenceError- 하위 스코프가 상위 스코프에 접근하는 경우
let greeting = 'Hi';
function greetPerson() {
let firstName = 'Michle';
return greeting + ' ' + firstName;
}
console.log(greetPerson()); // 'Hi Michle'지역 변수는 전역 변수보다 우선순위가 높음
- 쉐도잉(variable shadowing): 바깥쪽 변수와 안쪽 변수의 이름을 동일하게 사용할 때 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상
//함수 안에서 name을 let으로 선언했을 때
let name = 'Chris';
function whatIsYourName () {
let name = 'Benedict'; //두번째 출력
console.log(name);
};
console.log(name); //첫번째 출력
whatIsYourName();
console.log(name); //세번째 출력
//Chris Benedict Christ 순서로 출력//함수 안에서 name을 let으로 선언하지 않았을 때
let name = 'Chris';
function whatIsYourName () {
name = 'Benedict'; //두번째 출력
console.log(name);
};
console.log(name); //첫번째 출력
whatIsYourName();
console.log(name); //세번째 출력
//Chris Benedict Benedict 순서로 출력2-2. 변수 선언과 스코프
스코프의 종류
블록 스코프(block scope)
- 중괄호를 기준으로 범위 구현
- 블록 스코프 내에서 정의된 변수는 블록 범위를 벗어나면 접근할 수 없음
//let 키워드 사용
for (let i = 0; i <= 10; i++) {
console.log(i); //0부터 10까지 출력됨
};
console.log(`final i is ${i}`); //ReferenceError//var 키워드 사용
for (var i = 0; i <= 10; i++) {
console.log(i); //0부터 10까지 출력됨
};
console.log(`final i is ${i}`); //final i is 11 함수 스코프(function scope)
- function 키워드를 사용한 함수 선언식 또는 함수 표현식을 기준으로 범위 구현
- cf) 화살표 함수는 블록 스코프로 취급됨
- 함수 스코프의 범위: 함수의 실행부터 종료까지
- 주의사항
- var 선언은 함수 스코프의 최상단에 선언
- 선언 키워드 없는 선언은 최고 스코프에 선언
- 함수 내에서 선언 키워드 없는 선언은, 함수의 실행 전까지 선언되지 않은 것으로 취급
변수 선언
변수 선언 키워드 const/let/var의 차이
변수 선언시 주의할 점
- 전역 변수는 최소화하기
- side effect: 다른 함수나 다른 로직에 의한 의도하지 않은 변화
- 변수 선언시 let 또는 const 사용하기
- var 는 재선언을 해도 에러가 나오지 않으며, 블록 스코프를 무시하기 때문에 사용을 권장하지 않음
- window 기능을 덮어씌워 내장 기능을 사용할 수 없음
- 변수 선언 키워드를 꼭 사용하자
- 변수 선언 키워드를 사용하지 않으면 var키워드를 사용한 것과 동일한 효과
- strict mode: 브라우저가 문법적인 실수를 더 엄격하게 판단
'use strict';
추가 개념
window 객체
- 오직 브라우저에만 존재하며, 브라우저 창을 대표함
- 브라우저와 관계없이 전역 항목도 포함됨
- var로 선언된 전역변수와 전역 함수가 포함됨
var name = 'Noah';
console.log(window.name); // 'Noah' 출력
function foo(){
console.log('bar');
}
console.log(foo === window.foo) ; //true 출력