스코프의 의미와 적용 범위
1. 스코프의 의미
- 변수 접근 규칙에 따른 유효 범위
- 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언었는가에 따라 안쪽 스코프, 바깥쪽 스코프로 구분
- 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용이 가능하지만 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용 불가능
2. 스코프의 적용 범위
let username = 'somin';
if (username) {
let message = `Hello, ${username}!`;
console.log(message); //'Hello, somin!'
}
console.log(message); //ReferenceError- let으로 선언된 message가 if문 안에 위치 : 안쪽 스코프에 선언
- 바깥쪽에선 message에 접근 불가 : ReferenceError 발생
스코프의 주요 규칙
1. 중첩 규칙
- 스코프는 중첩이 가능
- scope1만 전역 스코프(Global Scope)
- scope2-3은 지역 스코프(local scope)
2. block scope와 function scope
1) 블록 스코프
- 블록 스코프(block scope) : 중괄호로 둘러싼 범위
*화살표 함수는 블록 스코프로 취급 - 블록 범위를 벗어나는 즉시 접근할 수 없게 되어 ReferenceError 발생
- var 키워드 사용시 블록 스코프를 무시하고 함수 스코프만을 따름
2) 함수 스코프
- 함수 스코프(function scope) : 함수로 둘러싼 범위로 fuction키워드를 사용해야 함
*화살표 함수는 블록 스코프로 취급
3. 전역 스코프와 지역 스코프
- 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)
- 전역의 반대말은 지역(local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)
4. 전역 변수와 지역 변수간의 우선 순위
- 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수
- 전역 변수는 가장 바깥 스코프에 정의한 변수이므로 어디서든 접근 가능
- side effect를 최소화하기 위해 전역 변수 최소화
*side effect: 의도되지 않은 변경 - 지역 변수는 전역 변수보다 더 높은 우선순위를 가짐
- 함수의 파라미터도 함수 안에서 선언된 지역변수
1) 지역변수 선언
let name = 'somin'; //전역변수
function showName(){
let name = 'KKAKKA'; //지역변수
console.log(name); //두번째 출력 : 'KKAKKA'
}
console.log(name); //첫번째 출력 : 'somin'
showName(); //두번째 출력
console.log(name); //세번째 출력 : 'somin'- 첫번째 출력 : showName 함수 안쪽에 선언된 지역 변수 name은 애초에 스코프 규칙에 의해 접근할 수 없기 때문에 전역 변수로 선언된 name을 가져옴
- 두번째 출력 : 함수 안에서 선언한 name이라는 지역 변수에 접근 가능, 지역 변수가 전역 변수보다 우선순위가 높으므로 지역 변수 name이 출력
*쉐도잉(variable shadowing) : 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상 - 세번째 출력 : 첫번째 출력과 마찬가지로 전역 변수 name을 출력
2) 전역변수 선언
let name = 'somin'; //전역변수
function showName(){
name = 'KKAKKA'; //지역변수 X : 지역 스코프에서 새로 선언되지 않으면 그냥 같은 변수
console.log(name); //두번째 출력 :'KKAKKA'
}
console.log(name); //첫번째 출력 : 'somin'
showName(); //두번째 출력
console.log(name); //세번째 출력 : 'KKAKKA'- 첫번째 출력 : showName함수가 실행되기 전이므로 처음 할당된 값이 출력
- 두번째 출력 : showName함수가 실행된 후이므로 함수 내에서 재할당된 값이 출력
- 세번째 출력 : showName함수가 실행된 후이므로 함수 내에서 재할당된 값이 출력
5. let, const, var 의 차이
1) let
- 유효 범위 : 블록 스코프, 함수 스코프
- 값 재할당 : 가능
- 재선언 : 불가능
*재선언을 방지해줌
2) const
- 유효 범위 : 블록 스코프, 함수 스코프
- 값 재할당 : 불가능
*값을 재할당할 경우 TypeError 발생(의도하지 않은 값의 변경을 막을 수 있음) - 재선언 : 불가능
*변하지 않는 값, 곧 상수(constant)를 정의할 때 이용
1) var
- 유효 범위 : 함수 스코프
*블록 스코프를 무시하고 함수 스코프만을 따름 - 값 재할당 : 가능
- 재선언 : 가능
*재선언을 해도 에러를 내지 않음, 선언 없이 변수를 할당할 경우 해당 변수는 var로 선언한 전역 변수처럼 취급
*전역 변수를 var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있으므로 let과 const를 주로 사용
"선언 없는 변수 할당"의 경우 Strict Mode를 사용하면 에러로 판단해줌
: js 파일 상단에 'use strict'; 라고 입력하면 적용 가능
6. 전역 객체(window)의 이해
- 브라우저에는 window라는 객체가 존재 : 브라우저 창을 대표하는 객체이지만 이와 별개로 전역 영역도 담고 있음
- var로 선언된 전역 변수 및 전역 함수(함수 선언식으로 함수를 선언)는 window 객체에 속하게 됨
✏️