CodeStates / Scope (2)

WeWorship TV·2020년 8월 10일

Function Scope VS Block Scope

Block: 중괄호로 시작하고, 끝나는 단위

여기서 질문
Q. 콘솔에 출력되는 결과는?

for (let i = 0; i < 5; i++) {
  console.log(i);              // 여기는 어디까지 찍힐까?
}
console.log("Final i: ", i);   // 여기는 어디가 나올까?

정답은 직접 확인해보자!!

ReferenceError가 나올텐데, 그 이유는 block범위를 벗어나게 되면 변수를 사용할 수 없다.

var 키워드 VS let 키워드
변수를 정의하는 또 다른 키워드 var
- JavaScript는 기본적으로, 함수 단위로 자신만의 Scope를 가진다
  -> var 키워드(old way)
- 그러나, Block 단위로 Scope를 구분했을 때에 예측하기 쉬운 코드를 작성할 수 있다
  -> let 키워드

그렇다면 여기서 질문
Q. 콘솔에 출력되는 결과는?

for (var i = 0; i < 5; i++) {
  console.log(i);              // 여기는 어디까지 찍힐까?
}
console.log("Final i: ", i);   // 여기는 어디가 나올까?

정답은 직접 확인해보자!!

왜냐면 하나의 Function Scope 내에서는 사용이 가능하기 때문에 Reference Error를 내지 않는다.

개발자 콘솔로 확인하는 var 키워드와 let 키워드
( 변수를 정의하는 또 다른 키워드 var의 작동원리를 통해 Function Scope와 Block Scope가 무엇인지 알아본다)

function greetSomeone(firstName) {
  var time = 'night';
  if (time === 'night') {
    var greeting = 'Good Night';
  }
  
  return greeting + ' ' + firstName;
}

greetSomeone('Steve');

function greetSomeone(firstName) {
  let time = 'night';
  if (time === 'night') {
    let greeting = 'Good Night';
  }
  
  return greeting + ' ' + firstName;
}

greetSomeone('Steve');