자바스크립트 3강 스코프레벨

미마모코딩·2022년 2월 23일
1
post-thumbnail

오늘은 var , const , let 의 스코프 레벨을 다루려고 한다.

먼저 우리가 큰 틀로 기억을 해야 할 것은 var는 함수스코프
const , let 은 블록스코프를 가진다는 것이다.

먼저 알아야 할 개념

전역변수란? 모두가 다 아는 , 모두가 다 공유 할 수 있는 변수를 뜻한다. 전체영역 변수라고 이해해보자.

지역변수란? 한 지역안에서만 사용 할 수 있는 변수이다. 여기서 지역이란, 중괄호에 {} 의해 만들어진 영역을 뜻한다

스코프

함수 스코프란? var는 함수의 코드 블록만을 스코프로 인정한다.
함수 내부 이외에 생성한 변수는 모두 전역 변수가 된다.
그렇기 떄문에 전역 변수가 남발될 가능성이 있다.
(if ,for ,while 여러 함수가 아닌 문에서 전역변수처럼 사용됨)

블록 스코프란? 블록스코프는 모든 블록 {} 이 생성될 때마다, 새로운 스코프가 형성되는 것을 의미한다. 원래 자바스크립트는 함수 스코프를 따랐다.
하지만 let , const가 등장하고 블록 스코프 형성도 가능해졌다.

//스코프는 범위라는 뜻을 가지고있다.

즉 변수에 접근 할 수 있는 범위를 뜻한다.

코드로 예를 들어보자.

<script>
//변수의 유효범위 (scope)
var a = 100   //함수 밖에서 만들었기에 전역변수 (언제든 함수안에서도 참조가능)
  function sample() {
  console.log("sample 에서 출력한 " + a)
}
sample(); // sample 에서 출력한 100 

</script>

이렇듯 잘 작동한다.

하지만 반대되는 케이스도 한 번 봐보도록 하자.

<script>
//변수의 유효범위 (scope)

  function sample1() {
  var b = 300  //저는 함수 안에서 만들어진 지역변수입니다.
  //지역변수기 때문에 이 스코프가 닫히기전에 나 부르면 참조해줄게.아님 안해줌 
}
sample1(); 
console.log(b) // Uncaught ReferenceError: b is not defined
//즉 b가 정의되지 않았다고 참조오류인 레퍼런스 오류가 발생한다.
</script>

function안에 있는 var b는 sample1 함수 안에서 만들어진 지역변수이다.
중요 )) 함수 안에서 만든 변수는 함수 밖에서 참조하지 못한다.

위에도 말했듯 var은 함수의 코드 블록만을 스코프로 인정한다. 
즉 function (){} 의 형태와 , 화살표함수  () => {} 의형태가 아니면 모든 블록안에서
만든 변수들은 전역변수가 되어 사용 가능하다.

<script>
var age = 25;
if(age >= 21){
  var result = true; //저는 var니까 함수스코프가짐 ㅋ if문이네
  //나는 다 전역변수로 볼거야~ 밖에서 나 불러도돼
}
console.log(result); // true
 </script>

블록스코프

<script>
var age = 25;
if(age >= 21){
  let result = true; //저는 let 블록스코프를 가졌슴다.{}안이니까 밖에서 부르지마쇼 
}
console.log(result); // result is not defined
</script>

▲ if문 내부에 선언한 result는 지역변수에 해당

코드블록 외부에서는 참조할 수 없다.

for 문 while 문 등등 모든 블록안에서 이런 형식으로 작동한다.

즉 var는 함수 선언문이 아니면 모든 스코프를 전역변수로 봐 사용 할 수 있다.

하지만 const , let 은 모든 {}를 지역변수로 본다 .

블록스코프에선 지역변수를 전역변수처럼 사용 할 수 없다.

0개의 댓글