스코프 Scope
- 변수 접근 규칙에 따른 변수의 유효 범위라고 할 수 있다.
let a = 'apple';
function fruit () {
let a = 'banana';
console.log(a);
}
console.log(a);
fruit();
console.log(a);
// apple
// banana
// apple
- 위 코드의 실행 결과는 apple, banana, apple 이다.
- 먼저 첫번째 console.log 에서 전역변수 a를 출력하고, 그 뒤 fruit함수를 실행해, 새로운 지역변수 a에 banana를 할당한 뒤 이를 출력한다. 함수 종료 후 다시 console.log를 실행할 때, 함수 내에서 할당했던 banana가 아닌, 전역변수 a의 apple이 출력된다.
- 이렇게 동작하는 이유는, fruit 함수 내의 a는 함수 스코프를 가진 지역 변수이기 때문이다. 스코프 - 유효 범위가 fruit 함수 내부까지이기 때문에, 함수 바깥에서 접근할 수 없는 것이다.
- 반대로 처음 apple을 할당한 a는 코드 어디서든 접근할 수 있고, 이를 전역 변수라고 한다. 전역 변수의 스코프를 전역 스코프라고 한다.
스코프의 규칙
- 바깥 스코프 ⇒ 안쪽 스코프 : 접근 가능
- 안쪽 스코프 ⇒ 바깥 스코프 : 접근 불가능
- 가장 바깥쪽에 위치한 스코프를 전역 스코프 (Global Scope) 라고 하며, 이 외의 스코프를 지역 스코프(Local Scope) 라고 한다. 이런 스코프는 여러 겹 중첩된 형태를 가질 수 있다.
- 우선순위 : 지역 변수 > 전역 변수 :: 함수 스코프 내에서 전역 변수와 같은 이름의 변수가 새로 선언되었다면, 함수 스코프 내에서 그 변수에 접근할 때는 전역 스코프가 아닌 새로 선언된 변수를 우선시한다.
스코프의 종류
- 블록 스코프 : {중괄호}로 둘러쌓인 부분에 블록 스코프를 형성한다. (ex for문 등) + 화살표 함수는 블록 스코프로 취급된다.
- 함수 스코프 : 함수 선언문 혹은 표현식은 함수 스코프를 생성한다.
- var, let, const 키워드
- var 키워드는 블록 스코프는 무시하고 (화살표 함수 제외) 함수 스코프만을 따른다. 따라서 예기치 못한 결과가 발생할 가능성이 높다. 또한 재 선언이 가능하기 때문에 오류를 일으킬 가능성이 높다.
- 반면 let 키워드는 재 선언을 방지하기 때문에 var 보다는 let 키워드를 사용하여 변수를 선언할 것을 권장한다.
- const 키워드는 값이 변하지 않는 상수를 선언할 때 사용한다. 재할당을 금지한다. 되도록 const를 사용해 변수를 선언하고, 추후 재할당이 필요한 변수에만 let 을 사용하여 예기치 않은 변화(부수 효과)를 줄이도록 한다.
var 키워드를 사용하지 말자.
- window 전역 객체 : var로 선언된 전역 변수와 함수는 window 전역 객체에 속하게 된다. 전역 객체란 전역 스코프에 항상 존재하고 있는 객체를 의미한다. 전역 변수의 사용을 줄여야 하는 이유는, 전역 변수는 어디서나 접근할 수 있는 편리함이 있는 만큼 의도치 않게 변경될 가능성도 높기 때문이다.
- let, const 와 같은 키워드 없이 변수를 선언하면 var 키워드로 선언한 것과 같은 효과가 있다. 따라서 이런 방식을 사용하지 말아야 하고, 자신도 모르는 실수를 방지하기 위해서 strict mode (엄격 모드) 사용을 권장한다.