자바스크립트 스터디 - 블록 바인딩
이전에는 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에 있다.
자바스크립트 엔진은 다음 블록을 조사하고 블록에서 변수선언을 발견하면 ,
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(""); 도 문자열이 아니라 사실은 객체이다.
Author And Source
이 문제에 관하여(자바스크립트 스터디 - 블록 바인딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ash3767/자바스크립트-스터디-블록-바인딩저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)