#호이스팅

리액트에서는 호이스팅이 다른이유?

순수 자바스크립트에서는 함수선언문으로 만든 경우에만 호이스팅단계에서 선언과 초기화가 코드 실행 전에 이뤄져서, 선언부보다 윗라인의 코드에서 사용할 수 있다고 배웠습니다. 그런데 첨부한 이미지처럼, 리액트에서는 함수형 컴포넌트를 화살표함수로 만들고, const를 사용해서 변수를 선언해도 선언부보다 윗라인의 코드에서 사용이나 참조가 가능한 이유가 뭔가요?? 구글에서 글을 여러개 찾았는데 이야기 하는게 다 달라서 너무 햇갈리고 궁금합니다.

호이스팅 관련하여 질문

TDZ: 선언위치부터 초기화되는 구간에서 호출 시 참조에러발생 (초기화 전 호출시 에러) 아래 예시에서 호이스팅에 의해 let a 가 먼저 실행되는건똑같은데 왜 1번은 언디파인드이고 2번은 참조에러인지 이해가안가네요. 특히 2번에서도 let a 는 호이스팅돼서 1번과 동일한 형태가 된다고 생각하는데, 확실하게 이해가안갑니다. 1. let a; console.log(a); a = 3; 2. console.log(a); let a = 3;

React 변수 호이스팅

아래 react 코드에서 Compoent안에 b는 정상적으로 출력되는데 Component 밖의 b는 "Block-scoped variable 'b' used before its declaration.ts(2448)"에러를 반환합니다. component안의 b도 같은 에러를 반환해야할 것 같은데 왜 정상적으로 될까요? 번들링 과정에서 생기는 현상 같은데 정확한 원인을 모르겠어서 질문 남깁니다. 관련 질문: https://stackoverflow.com/questions/75891792/how-variable-hoisting-works-in-react https://stackoverflow.com/questions/71792930/hoisting-in-react-components-how-does-it-work

이 두 코드가 같은 코드 아닌가요..?

위의 코드는 error가 뜨고 아래 코드는 undefined가 뜨네요.. 둘 다 undefined 가 떠야 하는 거 아닌가요..? 호이스팅을 제가 잘못 이해하는 건지... 첫 번째 코그에서 let foo= 2;가 foo 사용시점보다 아래에 있지만 호이스팅 되어 let foo;가 첫 번째 위치에서 선언되는 거 아닌가요?

Top-level에서 function declaration vs function expression

안녕하세요. javascript를 사용하면서, Top-level function을 선언하는 방식에 대해서 질문드립니다. 저는 Vue3를 이용해서 개발을 하고 있는데, vue 파일의 script단을 포함해서 플러그인으로 만드는 ts, js 파일에서도 함수 표현식을 이용해서 함수를 정의해왔습니다. 근데 제가 되게 자주 살펴보는 Anthony Fu라는 분의 eslint-config에서 최근에 Top-level function을 전부 함수 선언식으로 변환하게끔 적용하셨더라구요. 아마 제가 이 코딩스타일을 적용하게되면, 지금까지 모든 함수를 함수 표현식으로 정의 해왔는데, 전부 함수 선언의 형태로 바뀌게 될 것 같아요. 물론 함수 선언형태로 함수를 정의하면 호이스팅과 같은 부분에서 이점이 있긴 할텐데, 그 외의 이점이 크게 와닿지 않고 있습니다. auto import를 위한 global imports를 만드는데 있어서 함수 선언방식으로 정의되는게 tracking하는데 좀 더 편한가(?)라는 추측만 하고 있습니다. 앞에 서론이 길었는데, "top-level에서 function declaration이 가지는 명확한 이점이 있을지?”가 궁금해서 질문 글을 올리게 되었습니다. 여러분들은 Top-level function을 어떤 식으로 정의하시나요? 의견 주시면 감사하겠습니다.