[JavaScript] 스코프

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

스코프

변수 접근규칙에 따른 유효범위

let name ='Lee';
function greetSomeone(){
    let greet = 'Hello'
    return greet+' '+name;
}
console.log(greetSomeone());
console.log(name);
console.log(greet);

다음 코드의 출력은 어떨까?

console.log(greetSomeone());은 Hello Lee가 출력된다.

이전에 공부했던 함수의 모양이니 어렵지 않게 이해가 가능하다.

 

console.log(name);은 Lee가 출력된다.

 

console.log(greet);은 referenceError가 뜬다.

 

let name부터 console.log(name)까지의 부분을 바깥쪽 스코프

function이 실행되는 중괄호 내부를 안쪽 스코프이다

안쪽 스코프는 바깥쪽 스코프에 접근할수 있지만,

바깥 스코프는 안으로 접근할수 없다

 

바깥쪽 전체범위에 해당하는 스코프를 전역 스코프(global scope)라고 부르고, 전역이 아닌 모든 안쪽 스코프를 지역스코프 (Local scope)라 부른다.

전역에서 선언한 변수는 전역 변수, 지역에서 선언한 변수는 지역 변수이다

지역변수는 전역변수보다 우선순위를 갖는다.

 

let, const. var

스코프는 중괄호로 구분되는 블록 스코프와 함수로 구분되는 함수 스코프가 있다.

여기서 예외가 있는데 바로 화살표 함수이다

화살표함수는 블록 스코프로 구분이 된다.

for(let i =0 ; i < 3 ; i++){
    console.log(i);
}
console.log(i);

다음을 실행하면 0,1,2,Error이렇게 출력이 된다.

for(var i =0 ; i < 3 ; i++){
    console.log(i);
}
console.log(i);

하지만 let이 아닌 var로 바뀌면 0,1,2,3이 출력된다.

 

var는 블록 스코프의 구분은 신경쓰지 않고, 함수 스코프구분만 신경쓰기 때문에 다음과 같은 결과가 나타난다.

화살표 함수의 블록 스코프는 무시하지 않는다.

 

let name = 'lee';
let name = 'kim';

console.log(name)

다음을 실행하면 name이 이미 정의 되어 있다고 에러를 보냅니다.

당연히 lee로 선언한 name을 다시 kim으로 선언할 필요는 없습니다.

let은 같은 이름으로 재선언하는 경우를 사전에 막아줍니다.

var name = 'lee';
var name = 'kim';

console.log(name)

하지만 var의 경우 재선언을 인정하고 kim을 출력합니다.

이런 짧은 중요도가 낮은 코드라면 상관없는데

개인정보와 계좌금액과 같은 중요한 데이터라면 피해가 상당해 집니다.

 

블록 단위로 구분을 했을 때 예측이 가능하고, 안전한 let 사용을 권장한다.

 

	let	const	var
유효범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능