[javaScript] 스코프와 let,const,var
🔭스코프(scope)란 함수의 유효범위
scope는 범위를 뜻하며, 사격시 멀리있는 물체를 정확하게 조준하기 위해 달려있는 작은 망원경을 뜻하기도 한다. 컴퓨터 공학과 javaScript 세상에선 '변수의 유효범위'를 뜻한다고 한다.
📦스코프 규칙 1 : 안쪽 스코프는 눈구멍 뚫린 상자
기본적인 스코프의 원칙은 이렇다.
- 바깥쪽 스코프에사 선언한 변수는 안쪽 스코프에서 사용가능
- 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능
그러니까 안쪽에 있는 눈구멍 두개가 뽕뽕 뚫린 상자가 있다고 치자. 그 안쪽에선 바깥에 뭐가 있는지 보이겠지만, 반대로 바깥쪽에서 상자를 본다면 뭐가 들어있는건지 모를것이다.
마찬가지로 안쪽 스코프 범위에선 바깥쪽 스코프 범위의 변수가 뭔지 가져와 쓸 수 있지만, 바깥쪽 스코프에선 안쪽 스코프 변수를 가져다 쓸 수 없는 것!
📦스코프 규칙 2 : 스코프는 중첩가능
스코프는 중첩이 가능하다. 마치 상자안에 상자를 넣고 상자를 넣고 또 상자를 넣는 것처럼...
📦스코프 규칙 3 : 가장 바깥쪽 스코프는 전역 스코프
가장 바깥쪽 범위에서 중첩되는 어떤 스코프에서도 변수를 참조 할 수 있는 스코프를 특별히 "전역 스코프"라고 부른다.
🔭스코프는 블록스코프와 함수스코프가 있다.
- 블록스코프(block scope)는 중괄호로 둘러싼 범위를 말한다.
- 함수스코프(function scope)는 함수로 둘러싼 범위를 말한다.
if문이나 for문의 중괄호 안의 범위는 블록스코프라고 볼 수 있다. function키워드와 함께 등장하는 함수 표현식, 함수 선언식은 함수 스코프를 만든다고 볼 수 있다.
단! function키워드 없이 화살표함수를 쓰는 것은 함수스코프가 아니라 블록스코프를 만든다.
🚧주의! 화살표 함수 = 함수스코프(X) 블록스코프(O)
🔭변수를 선언하는 방법에 따라 달라지는 scope
| let | const | var | |
| 재할당 | O | X | O |
| 재선언 | X | X | O |
| 유효 스코프 | 블록스코프 및 블록스코프 | 블록스코프 및 블록스코프 | 함수 스코프 |
var는 함수스코프의 영향만 받으므로 예측하기가 블록스코프 단위보다 어려울 뿐만 아니라, 재선언이 가능하기 때문에 오류를 일으킬 가능성이 높아, 되도록 사용을 하지 않는 편이 좋다.
😰var의 함수스코프 참고
function drinkCoffee(time){
var coffee = 'Espresso'
if(coffee === 'Espresso'){
var response = '너무 써!'
}
return time + ' ' + coffee + '는 ' + response
//if블록 스코프 안의 reponse변수에 접근이 가능하다.
}
drinkCoffee('아침'); // '아침 에스프레소는 너무 써!'🚧var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 된다.
var로 전역변수나 전역함수를 선언하면, 브라우저의 기본적으로 내제하는 window 객체 안에 속하게 되어 아주 위험하다.
var의 특성상 재선언이 가능하기 때문에 브라우저가 정상적으로 기능하는데 꼭 필요한 객체의 값을 바꿔버릴 수 있다.
역시 결론은 걍 var를 쓰지 말자.
⚔️함수 선언과 스코프에서 주의 할점
- 전역변수 최소화할 것! (side effect 막기 위해)
- var는 블록스코프를 무시하며 재선언 해도 오류를 내지 않기 때문에, let이나 const로 대체할것
- 전역변수로 var를 선언하지 말것(window 객체 안으로 들어감)
- 선언키워드(let,const)없이 값을 할당하면 var로 선언된 전역변수가 되어버림
- 위와 같은 실수들을 줄이고 싶다면 자바스크립트 파일 첫문장에 'use strict';를 써주고 strict 모드를 사용할것