자바스크립트 스터디 - 블록 바인딩

이전에는 var 를 이용해서 변수를 선언하였다.

호이스팅

var 로 변수를 선언하면 선언한 위치와 상관없이 함수의 맨위에 있는것처럼 처리가 된다.

function getTest(test){
  
  if(test){
    var value = "red";
    
    return value
  } else{
    // value 는 undefined 로 존재한다.
   return null; 
  }
}

undefined이면 존재하지 않는것이 아니냐 ?? 라고 생각할수도 있지만
존재하지 않으면 호출을 했을때 에러가 발생해야하지만
여기선 에러가 발생하지 않고
너가 무엇인가 선언을 했는데 지정을 안해줬다고 해준다.

마치..

function getTest(test){
 var value;
  
  if(test){
    value = "red";
    
    return value;
  }else{
    
    return null;
  }
}

이코드와 같은 말이다.
자바스크립트 엔진은 내부적으로 이렇게 변경해서 읽게된다.

이러한 동작방식이 익숙하지 않아 블록 레벨 스코프 옵션이 나왔고 ,
그래서 var 를 사용하기 보단

const , let 을 많이 사용하게 된다.

다시 그럼
let 을 통해서 테스트 해보자.

function getTest(test){
  
  if(test){
    let value = "red";
    
    return value
  } else{
    // value 는 존재하지 않음
   return null; 
  }
}

let 선언을 하게되면 그 변수의 스코프에서만 제한이 된다.

var count = 30;

if (true){
    let count = 40;
    console.log(count); // 40
}

console.log(count); // 30

조건문 안에서 선언한 count 는 조건문 안에서만 해당되는것이기 때문에 40 이 출력된다.

하지만 만약에 조건문 안에서 var count =30 을 불러오게 할려면 어떻게 해야할까 ??

var count = 30;

if (true){
    console.log(count);
    let count = 40;
    console.log(count);
}

console.log(count);

이렇게 불러오게되면
var count = 30; 선언했던것이 찍히게 될까 ??
찍히지 않는다... 에러가 발생한다.

이상하다 ??

다시 그럼

var count = 30;

if (true){
    console.log(count);
}

console.log(count);

참고자료

이렇게 하면
console.log(count); 에 정확히 30이 찍히게 된다.

이러한 결과값이 나타나는 이유는 구문 전 줄까지, count 변수는 TDZ에 있다.

TDZ 가 뭐지 ??

자바스크립트 엔진은 다음 블록을 조사하고 블록에서 변수선언을 발견하면 ,
var 같은경우 호이스팅하거나 전역 스코프
let const 같은 경우 TDZ 에 배치하게 된다.
이때 TDZ 에 접근할려고하면 에러가 발생하게 되고 ,
TDZ에서 변수가 제거되면 안전하게 사용할 수가 있다.

var count = 30;

const test=() => {
    console.log(count);
    let count2 = 40;
    console.log(count);
}
test()
console.log(count);

이코드를 보면 에러가 또 발생하지않는다.
잘 작동하는것을 볼 수 있다.

test 라는 function 안에서 , let count 위에 console.log 를찍을려고하면 ,

ReferenceError: Cannot access 'count' before initialization

라는 에러가 찍힌다.

test 함수 실행되기 전에
var test 선언했지 않느냐 ??
그러면 나와야하지 않아 ?? 하지만 그렇지가 않다 .

스코프 안에서 선언한것을 보면 , let count 선언 전에 console.log 를 찍을려고했으니 ,
스코프안에서는 선언하기전에 console.log() 를 찍을려고 했던것으로 된다.

React

react 에서 class 가 아니아 functional react 를 사용하게 될때 ,

const [test ,setTest] = useState("");

선언하게 된다.
궁금증이 드는게 ,
엇 .? const 상수 선언했는데 어떻게 바꿀수있는걸까 ??

const a =[]
a.b =c 

처럼 내부값을 바꿀수있는것이다.
useState(""); 도 문자열이 아니라 사실은 객체이다.