개발자

javascript hoisting이란?

2022년 10월 14일조회 2,494

안녕하세요. javascript 질문도 몇개 올라오는 것 같아서 저도 질문 남깁니다! 공부를 하다가 javascript hoisting을 쉽게 설명하면 "함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것" (https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html) 이라고 많이 하는데, 이게 무슨 뜻인지 또 어떻게 가능한 것인지 궁금합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 3

인기 답변

이재린님의 프로필 사진

이 부분은 실행 컨텍스트를 이해했을 때 더 정확한 개념적 이해가 가능합니다. 코드를 실행했을 때, 자바스크립트 엔진은 코드를 “평가”하는 과정을 거치는데요, 이때 실행 컨텍스트가 생성이 됩니다. 실행 컨텍스트는 “레코드”라는 공간에 먼저 선언된 변수와 함수 선언문들이 있는지 확인을 하고 있다면 먼저 정보들을 가져옵니다. var 키워드로 선언된 변수들은 선언과 동시에 암묵적으로 undefined로 할당이 됩니다. 이후 코드를 “실행’하는 과정에서 순차적으로 코드를 실행하면서 값이 할당됩니다. 예를 들어 var a = 1이라는 코드가 있다면 var a는 먼저 레코드에 등록이 되어있는 상태이고 1이라는 값은 실행하는 과정에서 코드가 한 줄씩 실행될 때 할당되는거죠. 그래서 코드를 실행할 때 함수를 선언하고 값을 할당하는 코드 전에 console.log(a)를 출력했을 때 undefined를 반환하는 것입니다. 이것을 변수 호이스팅이라고 하는 것입니다. 우아한테크코스 크루분들이 진행하시는 테크토크 영상인데요 실행 컨텍스트 내용 영상을 보시면 더 확실하게 이해가 가실거에요! :) https://www.youtube.com/watch?v=EWfujNzSUmw&t=791s

profile picture

익명

작성자

2022년 10월 17일

그렇군요.. 첨부해 주신 영상도 살펴볼게요!! 감사합니다!!!

인기 답변

규영님의 프로필 사진

(참고 : https://imagineu.tistory.com/m/7) #1 console.log(a); #2 console.log(a); var a = 3; 위의 코드들을 실행해보시면 #1 코드는 에러가 나오고 #2 코드는 undefined 가 출력되는 것을 확인하실 수 있습니다. #2 코드는 이해하실 때 var a; // 호이스팅 console.log(a); a = 3; 이렇게 이해하시는 게 편할 것 같습니다. 저도 호이스팅이 발생하는 이유에 대해서 자세하게는 모르기 때문에 찾아본 결과, 제가 받아들이기로는 의도적으로 발생하는 것은 아니고 컴파일을 하는 단계에서 생기는 부작용 같습니다.

profile picture

익명

작성자

2022년 10월 17일

자세한 설명 감사합니다!

이시우님의 프로필 사진

질문글에 올려주신 링크에 잘못된 내용이 있네요 let, const 도 전부다 호이스팅이 된답니다. 다만 let과 const 로 선언한 변수는 var 변수와 달리 변수의 생성과정에서 차이가 있기 때문에 TDZ의 영향을 받아 마치 호이스팅 되지 않는 것처럼 보이는겁니다. 자세한 내용은 제 블로그에 정리된 것이 있으니 링크 남겨드릴게요. https://data-study-clip.tistory.com/m/244

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!