스코프(Scope)
프로그램 변수들을 관리하고 접근하는 방식을 스코핑(Scoping)이라고 한다. 스코프는 특정변수들이 선언되어 있는 공간이나 환경을 의미한다. 스코프의 종류에는 전역 스코프(global scope), 함수 스코프(function scope), 블록 스코프(block scope)가 있다. 비슷한 용어로 변수의 스코프란 말이 있는데 이는 변수에 접근할 수 있는 코드의 영역을 의미한다.
스코프의 종류
전역 스코프(Global Scope) : 어떠한 함수나 블록 안이 아닌 바깥 쪽을 의미한다. 일반적으로 전역 스코프에 선언된 변수들은 어디서든지 접근이 가능하다는 특징을 지닌다.
함수 스코프(Function Scope) : 각각의 함수들은 스코프를 만들며, 함수 스코프에서 선언된 함수 안에서만 접근가능하다. 지역 스코프(Local Scope)라고 불리곤 한다.
블록 스코프(Bloack Scope) : {}로 감싸져 있는 블록 내에서만 접근할 수 있는 스코프이다. 블록 스코프의 가장 큰 특징은 let 과 const 로 선언된 변수에만 적용된다. 블록 안에서 새롭게 키워드를 사용하여 선언된 변수들은 블록 스코프의 적용을 받는다. 제한 모드에서는 모든 함수들은 블록 스코프의 적용을 받는다.
스코프 체인(Scope chain)
스코프 체인은 식별자를 찾는 일련의 과정이라고 보면 된다.
const handleChange = (value) => {
const aaa =123
console.log(aaa) // 123
}
//
~~~~{
const aaa = 555
const handleChange = (value) => {
const aaa = 123
console.log(aaa) //123
}
console.log(aaa) // 555
}
//
const aaa = 555
const handleChange = (value) => {
console.log(aaa) //555
}
console.log(aaa) // 555
}맨 위의 사례는 console.log(aaa) handleChange 함수의 { }에 속하여 aaa를 찾아 123을 출력한다.
중간의 사례는 각각의 console.log(aaa)는 본인이 속해있는 { }에 있는 aaa를 찾아 출력한다.
하지만 마지막 사례를 보면 handleChange 함수의 { }에 속한 console.log(aaa)는 aaa를 찾을 수 없다. 그렇기에 더 상위 { }에서 aaa를 찾아 555를 출력하게 된다. 이것이 스코프 체인의 예시이다.
댓글