스코프 에 대해
스코프 : 식별자 접근 규칙에 따른 유효범위
블록 레벨 스코프, 함수 레벨 스코프, 렉시컬 스코프, 동적 스코프, 체이닝 스코프
- 동적 스코프
- Dynamic Scope
- 함수를 어디서 호출 하였는지에 따라 상위 스코프를 결정
- 렉시컬 스코프 ( JS )
- Lexical scope/Static scope
- 함수를 어디서 선언 하였는지에 따라 상위 스코프를 결정
- JavaScript 및 대부분의 프로그래밍 언어에서 사용하는 방법
- 전역 스코프
- Global scope
- 코드 어디에서든지 참조 가능
- 지역 스코프
- Local scope / Function-level scope
- 함수 코드 블록이 만든 스코프로, 함수 자신과 하위 함수에서만 참조 가능
- 블록 레벨 스코프
- Bloack Level Scope /
- 코드 블록 내에서만 참조 가능한 범위를 말함
- 함수 레벨 스코프
- Function Level Scope /
- 함수 코드 블록 내에서만 참조 가능한 범위를 말함.
변수 스코프
- var
유효 범위 : 함수 스코프
값 재할당 :가능
재선언 : 가능
- const
유효 범위 : 블록 스코프/ 함수 스코프
값 재할당 : 불가능
재선언 : 불가능
- let
유효 범위 : 블록 스코프/ 함수 스코프
값 재할당 : 가능
재선언 : 불가능
1. 글로벌 스코프
var 키워드로 선언한 전역 변수는 전역 객체(Global Object) window의 프로퍼티
var a = 1; // 전역 스코프
function print() {
// 지역(함수) 스코프
var a = 22;
console.log('print a : ',a);
}
print();
console.log('global a : ',a);
2.비 블록 레벨 스코프
함수 밖에서 선언된 변수는 코드 블록 내에서 선언되었다할지라도 모두 전역 스코프을 갖게된다
3.블록레벨 스코프 , c 기반 언어들
4.함수 레벨 스코프 js
함수 내에서 선언된 매개변수와 변수는 함수 외부에서는 유효하지 않다
function print() {
// 지역(함수) 스코프
var b = 22;
console.log('print b : ',b);
}
print();
console.log('global ? : ',b);
5.렉시컬 스코프(정적 스코프) <-> 동적 스코프
렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다.
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // ?
bar(); // ?
위의 값은?
담은 아래 누르시면됩니다
답
foo 1
bar 1
1. side effect(의도하지 않은 로직에 의해 문제 발생) 줄이기
- 전역 변수 객체를 하나 만들어 사용
- 즉시 실행 함수(IIFE) 를 사용
- 비 블록 스코프
- 암묵적 전역
- 전역 변수 최소화 하기
자바스크립트는 foo가 호출 됐을 때 변수 y에 값을 할당하기 위해
먼저 스코프 체인을 통해 선언된 변수인지 확인한다.
이 때 자바스크립트 엔진은 선언이 되어 있지 않다는걸 확인하고
window.y = 20으로 프로퍼티를 동적 생성한다.
결국 y는 전역 객체의 프로퍼티가 되어 전역 변수처럼 동작한다.
하지만 y는 변수 선언 없이 단지 전역 객체의 프로퍼티로 추가되었을 뿐이다.
따라서 y는 변수가 아니다.
변수가 아닌 y는 변수 호이스팅이 발생하지 않는다.
알거 같으면서도 잘 모르겠어서 정리!
좋은 예제나 틀린 부분 말씀해주시면 감사하겠습니다.
#참고