스코프(유효범위)
- 스코프는 범위라는 의미를 가진 단어로, 자바스크립트에서도 같은 의미로 사용된다
- 좀 더 명확히, 자바스크립트에서 스코프는 변수에 접근할 수 있는 범위를 말한다
- 스코프의 종류는 블록 스코프, 함수 스코프 이렇게 두 가지가 있다
let username = 'chocho';
if (username) {
let message = `Hello, ${username}!`;
console.log(message); // "Hello, chocho!"
}
console.log(message); // ReferenceError이때 username은 전역변수, message는 지역변수다
조건문 안에서 선언된 지역변수는 조건문 밖에서는 접근할 수 없다
블록 스코프
중괄호{}로 둘러싼 범위
if(true){
console.log('블록스코프');
}
---
for(let i = 0; i < 7, i++){
console.log(i);
}
console.log(i); // 레퍼런스에러
---
let getAge = user => {
return user.age;
}❗ 화살표 함수로 둘러싼 범위는 블록 스코프다
위의 2번째 예시를 보면 조건문 안에서 정의된 i가 조건문 밖에서 출력하려하자 에러가 뜨는 것을 볼 수 있다. 이처럼 블록 스코프 안에서 정의된 변수는 블록 밖에서 접근할 수 없다는 것을 알 수 있다
for(var i = 0; i < 7, i++){
console.log(i);
}
console.log(i); // 6하지만 var로 변수를 정의했을 때는 블록 범위를 벗어나도 사용이 가능하다
var의 경우 블록 스코프를 무시하고, 함수 스코프만 따른다
이러한 var의 특징은 코드를 예측불가능하게 만들 수도 있으니 사용을 지양하는 것이 좋다
함수 스코프
함수로 둘러싼 범위
let getAge = function (user) {
return user.age;
}function 키워드를 사용하면 함수 스코프, 따라서 화살표 함수는 함수 스코프가 아니다
스코프 규칙
- 스코프는 중첩이 가능하다
let x = 10;
function outer () {
let x = 20;
function inner () {
return x;
}
return inner();
}
let result = outer();inner(), outer()로 볼 수 있듯 울타리처럼 여러번 둘러칠 수 있다
- 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만, 그 반대는 접근할 수 없다
let x = 10;
function outer () {
let x = 20;
function inner () {
x = x + 10;
return x;
}
inner();
}
outer();
let result = x; //10outer함수 내에서 선언된 변수 x는 20이지만 함수 외부에서는 접근할 수 없어
result의 x값은 전역변수 x이 된다
- 지역 변수는 전역 변수보다 우선순위가 높다
2번 규칙의 예시코드에서 전역 변수 x가 선언, outer함수 안에 또다시 x가 지역 변수로 선언된다
이때 지역 함수 내에서 지역변수를 우선으로 사용한다
변수 선언시 주의점
-
전역 변수는 최소화하기
가장 바깥 스코프에 정의된 전역 변수는 어디서든 접근이 가능하기 때문에 코드에 의도하지 않는 문제side effect를 발생시킬 가능성이 있다 -
선언 없는 변수 할당 금지
선언 없이 변수를 할당하면 해당 변수는 전역 변수처럼 취급된다 이러한 실수를 방지하기 위해서 자바스크립트에서는strict mode를 사용하여 미리 걸러낼 수 있다
사용방법은 js파일 상단에'use strict'을 입력해주면 된다 -
Window의 이해
브라우저에는 window라는 객체가 존재한다
window는 브라우저의 창을 대표하는 객체임과 동시에 전역 영역을 담고 있기도 한다
따라서 함수 선언식으로 함수를 선언하거나 var로 변수를 선언하면 window 객체에 속하게 된다
