• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Hoisting (호이스팅) - 변수선언끌어올리기 (= 변수선언위치변경)

목차
  1. Hoisting 정의
  2. Hoisting 예제 - 변수값이 출력 전에 할당된 경우엔 결과 동일
  3. Hoisting 예제 - 변수값이 출력 후에 할당된 경우엔 결과 상이
  4. Hoisting 동강

 

Hoisting 정의 


선언을 코드 경계범위 (또는, 현재 함수)의 맨 위로 끌어올리는 JS 내장 기본 기능.

 


 

1.

JS에선 변수가 사용된 이후 선언 가능. 즉, 변수 선언 전에 변수 사용 가능.

 

2.

hoisting 되는 건 오직 변수 선언 자체일 뿐, 초기변수값은 hoisting 안 됨. 예제2 참고

 

3.

var 키워드로 선언된 변수는 hoisting 가능하지만, 

let 또는 const 키워드로 선언된 변수는 hoisting 안 됨.

4.

되도록이면 모든 변수 선언은 코드 경계범위의 최상단에 할 것.
왜냐면, 호이스팅 작동원리 이해 못 하면 에러 발생의 원인 됨.

 

5.

JS 엄격모드에선 hoisting 사용 불가. 
즉, 미리 선언 안 된 변수는 사용 불가.

 

 

Hoisting 예제 - 변수값이 출력 전에 할당된 경우엔 결과 동일

[예제1] - 값 할당 후, 나중에 변수 선언

 

<p id="demo"></p>


<script>

s = 5; // 변수 s에 5 할당.

hz = document.getElementById("demo"); 

hz.innerHTML = s; // 변수 s 출력

var s; // 변수 s 선언

</script>

 

결과보기 


[예제2] - 변수 선언 후, 나중에 값을 할당

 

<p id="demo"></p>


<script>

var s; // 변수 s 선언

s = 5; // 변수 s에 5 할당.

hz = document.getElementById("demo"); 

hz.innerHTML = s; // 변수 s 출력

</script>

 

결과보기

※ 두 예제 결과 동일.

 

Hoisting 예제 - 변수값이 출력 후에 할당된 경우엔 결과 상이

[예제1] - 출력 후 값을 할당

 

<p id="demo"></p>


<script>

var x = 3; // 변수 x 선언 및 초기값 할당.

hz = document.getElementById("demo"); // Find an element 

hz.innerHTML = x + " " + y; // 변수 x, y 출력  

var y = 4; // 변수 y 선언 및 초기값 할당. (아래 PS 예제의 빨간색 코드와 동일)

</script>

 

결과보기


[예제2] - 출력 전 값을 할당

 

<p id="demo"></p>


<script>

var x = 3; // 변수 x 선언 및 초기값 할당.

var y = 4; // 변수 y 선언 및 초기값 할당.

hz = document.getElementById("demo"); // Find an element 

hz.innerHTML = x + " " + y; // 변수 x, y 출력

</script>

 

결과보기

※ 두 예제 결과 다름. 

 

PS. 예제

 

<p id="demo"></p>


<script>

var x = 3; // 변수 x 선언 및 초기값 할당.

var y;  

hz = document.getElementById("demo"); 

hz.innerHTML = x + " " + y;  // 변수 x, y 출력  

y = 4; // 변수 y 선언 및 초기값 할당.

</script>

 

결과보기

 

Hoisting 동강

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012