갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • nodemon
  • 이터러블
  • 정적 레벨
  • 렉시컬 환경
  • class
  • 프로토타입
  • 상속
  • function
  • SPREAD
  • 원시타입
  • ECMAScript
  • 스코프 체인
  • 네이밍
  • this
  • Babel
  • prototype
  • 인터프리터
  • 심볼
  • 오버라이딩
  • 호이스팅
  • 자바스크립트엔진
  • Arrow
  • 객체타입
  • PM2
  • 싱글스레드
  • 컴파일러
  • 함수
  • structure
  • 실행 컨텍스트
  • symbol

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

Study/JavaScript

[JavaScript_study] 호이스팅 (Hoisting)

2022. 4. 14. 03:08

* 호이스팅(Hoisting)

  • 자바스크립트 엔진(번역기, Interpreter)이 코드를 실행하기 전, 변수, 함수, 클래스의 선언문을 끌어 올리는 것을 말함
  • 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮김
  • 함수의 호이스팅은 함수의 선언문 전에 호출이 가능하게 해줌
  • 함수의 선언문은 선언 이전에도 호출이 가능함
  • 변수(let, const)와 클래스는 선언만 호이스팅이 되고, 초기화는 안된다.
    • 초기화 전, 변수에 접근하면 컴파일(빌드) 에러가 발생한다.

 

* 호이스팅(Hoisting) 예시 코드

print();

function print() {
  console.log('Hello');
}

// 변수(let, const)와 클래스는 선언만 호이스팅이 되고,
// 초기화는 안됨
// 초기화 전, 변수에 접근하면 컴파일(빌드) 에러가 발생

// console.log(hi);
let hi = 'hi';
let func1 = function () {};

// const cat = new Cat();
class Cat {}


let x = 1;
{
  console.log(x); // 블럭안에서만 호이스팅이 되어서 x라는 변수가 초기화가 되지 않았다는 오류가 발생이된다.
  let x = 2;
}

'Study > JavaScript' 카테고리의 다른 글

[JavaScript_study] 엄격 모드 (strict mode)  (0) 2022.04.14
[JavaScript_study] var을 쓰지 말자  (0) 2022.04.14
[JavaScript_study] 렉시컬 환경(Lexical Environment)  (0) 2022.04.14
[JavaScript_study] 가비지 컬렉션 (garbage collection)  (0) 2022.04.14
[JavaScript_study] 스코프(Scope)  (0) 2022.04.14
    'Study/JavaScript' 카테고리의 다른 글
    • [JavaScript_study] 엄격 모드 (strict mode)
    • [JavaScript_study] var을 쓰지 말자
    • [JavaScript_study] 렉시컬 환경(Lexical Environment)
    • [JavaScript_study] 가비지 컬렉션 (garbage collection)
    갈푸라떼
    갈푸라떼

    티스토리툴바