javascript hoisting

2022. 10. 2. 22:06· Javascript/문법

호이스팅

  1. 변수 호이스팅

    • 다음과 같이 코드를 짰다고 가정해보자.

      function doSomething(){
        var a = 10;
        console.log(a); // 10
        console.log(b); // undefined
      
        var b = 100;
      }
      doSomething();
    • 자바스크립트에서 변수를 선언하면 변수선언부가 최상단으로 올라가게 된다.

      function doSomething(){
        var a = 10;
        var b;
        console.log(a); // 10
        console.log(b); // undefined
      
        b = 100;
      }
      doSomething();
    • 변수의 경우 사실 호이스팅이 큰 문제가 되지 않는다. 그러나...

  2. 함수 호이스팅

    • 변수 호이스팅과 유사하나..

    • 자바스크립트에는 함수를 선언하는 방식이 두 가지가 있다.

      // 1. literal function
      function doSomething(){
        console.log('doSomething')
      }
      
      // 2. 변수에 익명함수를 집어넣기
      var doSomething2 = function() {
        console.log('doSomething')
      }
    • 두 방법 모두 함수를 선언한 뒤에 호출하는 것은 문제가 안된다.

        function doSomething(){
            console.log('doSomething')
        }
      
        var doSomething2 = function() {
            console.log('doSomething')
        }
        doSomething(); // "doSomething"
        doSomething2(); // "doSomething"
      
    • 그러나 함수 선언 전에 윗쪽에서 실행하게 되면 doSomething2가 function이 아니라고 나온다.

        doSomething(); // "doSomething"
        doSomething2(); // undefined
        function doSomething(){
            console.log('doSomething')
        }
      
        var doSomething2 = function() {
            console.log('doSomething')
        }
      
    • 왜냐하면 function keyword로 literal 함수를 만들면 자바스크립트가 실행될 때 해당 함수를 가장 위로 끌어올려 함수 호이스팅이 이뤄지기 때문이다.

    • 문제는 변수 키워드를 통해 함수를 만들 경우...다음과 같이 호이스팅된다.

        var doSomething2; // undefined
        function doSomething(){
            console.log('doSomething')
        }
      
        doSomething(); // "doSomething"
        doSomething2(); // undefined
      
        doSomething2 = function() {
            console.log('doSomething')
        }
    • 따라서 함수를 변수에 넣어서 선언하는 케이스의 경우 특히 주의를 해야 한다.

    • 변수에 함수를 넣고싶다면 가능한 윗쪽에 두는 것이 좋다. 가장 좋은 방법은... 그냥 함수 호출 전에 함수를 선언하는 것이 좋다.

    • 자바스크립트는 기본적으로 변수를 선언하게 되면 최상단으로 이동시키는 반면.. function키워드를 사용해 만든 함수는 함수 자체를 윗쪽으로 끌어들이기 때문에 함수 선언을 나중에 하더라도 그 전에 실행이 가능하다. (호이스팅이라는 자바스크립트의 특성 중 하나))

반응형
저작자표시 (새창열림)

'Javascript > 문법' 카테고리의 다른 글

내가 기억하기 위한 promise, async await  (0) 2022.10.09
javascript reference  (0) 2022.10.02
자바스크립트 신문법 정리(optional chaining, nullish coalescing 연산자)  (0) 2022.06.18
객체 비구조화 할당 (객체 구조 분해)  (0) 2020.10.08
자바스크립트 사용시 주의해야 할 기본적인 문법  (0) 2020.10.08
'Javascript/문법' 카테고리의 다른 글
  • 내가 기억하기 위한 promise, async await
  • javascript reference
  • 자바스크립트 신문법 정리(optional chaining, nullish coalescing 연산자)
  • 객체 비구조화 할당 (객체 구조 분해)
sovelop
sovelop
무슨 생각을 해.. 그냥 하는거지
sovelop
so's devlog
sovelop
전체
오늘
어제
  • 분류 전체보기 (141)
    • 🔥TIL (15)
    • 생각 (5)
      • Daily Routine (0)
    • WEB (2)
    • VueJS (1)
    • 파이썬 문법 (17)
      • Django (0)
    • 알고리즘 (23)
      • 백준 알고리즘 (13)
      • 프로그래머스 (0)
      • 기타 사이트 알고리즘 (6)
    • 컴퓨터공학입문 (13)
    • Data_Analysis (9)
    • Javascript (8)
      • 문법 (8)
      • node.js (0)
    • Java (9)
      • 문법 (3)
      • Android Studio (0)
      • Algorithm (2)
    • Server (6)
      • sql (2)
      • linux (2)
    • Back-up (22)
      • Git + Github (5)
      • English (0)
      • etc (17)
    • 테크 관련 세미나 (4)
    • English (0)
    • Error (4)
    • 코테후기 (0)

블로그 메뉴

  • About me

공지사항

인기 글

태그

  • 코딩좀알려주라
  • 혼공단
  • va87m
  • # 백준 #파이썬 #python
  • 한빛미디어
  • 코알라univ
  • 무접점저소음
  • 혼공자

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
sovelop
javascript hoisting
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.