[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션 - 27강 scope, hoisting

scope

해당 변수 또는 함수가 어디까지 유효한지 범위를 말하는 것이 scope이다.
scope는 크게 세가지로 나뉘는데 Global(전역), function(특정함수 내부), block({}내부) scope가 있다. 아래에 코드로 좀 더 자세히 알아보도록 하자.

const value = 'global scope';

function myFunction(){
  const value = 'function scope';
  if(true){
    const value = 'block scope';
    console.log(`this value is "${value}"`); //this value is "block scope" 
  }
  console.log(`this value is "${value}"`);//this value is "function scope" 
};
myFunction();

console.log(`this value is "${value}"`);//this value is "global scope" 

위의 사진과 같이 나오는 것을 볼 수 있다. 반면 var를 썼을 경우 아래와 같이 block과 function에서 혼용되어 작동하는걸 볼 수있다. 그러니까 var는 이제 그만 쓰자.. 변수는 let, 상수는 const를 써주도록 하자. 정확한 영역내에서 올바르게 작동할 것이다.

hoisting

js에서 아직 선언되지 않은 함수인데도 불구하고 아래에서 찾아서 함수를 작동시켜주는 것을 hoisting이라고 한다.
코드를 예로 들어보면 아래와 같다.

myFunction(); //함수선언 보다도 함수명이 먼저 호출됨.

function myFunction(){
  console.log('hello world');
}

함수 선언보다도 먼저 함수를 호출했는데도 불구하고 console에는 hellow world가 잘 찍히는 것을 볼 수 있다. 그치만 hoisting은 피해야한다. 코드가 꼬일 수 있고 보기에도 혼잡하기 때문이다.

변수 var같은 경우에도 hoisting이 발생한다.

console.log(number);
var number = 3;
// undifined

이렇게 쓰면 hoisiting이 발생한 javascript는 아래와 같이 코드를 풀어서 해석한다.

var number;
console.log(number);
number = 3;
// undifined

그렇기 때문에 undifined가 뜨는 것이다. 반면 const와 let은 hoisting이 발생하지않아 undifined가 아닌 Error와 경고문구를 출력해버린다.

console.log(number);
const number = 3;
// Error! number를 먼저 선언하고 불러와라 라는 경고문구.

위와 같은 사항을 참고 하고 개발하도록하자.

마치면서

var는 여러모로 버려야하는 거구나.. 구형 ie도 같이 소멸해버려라.
오늘은 여기까지..
시청 영상 27강 11~12까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp