Hoisting의 변수 var

JAVASCRIPT

해당 포스팅에서는 호이스팅(Hoisting) 변수중 하나인 var에 대해 다룹니다.

JAVASCRIPT

• 자바스크립트 장단점
  
• 데이터 타입
  
• 데이터 형 변환
  
• 불변성을 유지하려면 어떻게..
  
• 프로토타입
  
• var, let, const 차이
  
• 호이스팅(Hoisting) ✔️
  
• es6 문법 특징과 차이
  
• this
  
• 제이쿼리 메서드 중 attr(), prop() 차이
  
• 화살표 함수와 일반 함수 차이
  
• 스코프(scope)
  
• 객체 지향
  
• 클로저(closure)
  
• 타입스크립트
  
• 프로세스
  
• 스레드, 싱글 스레드
  
• 콜백 함수 / 재귀 함수 차이
  
• 콜백 지옥, 콜백 지옥을 해결하는 방법
  
• promise / 콜백 지옥
  
• ajax
  
• 함수 선언식/ 표현식 차이
  
• 이벤트 버블링 / 이벤트 캡처 예시
  
• 이벤트 위임 (Event Delegation)
  
• 렉시컬 환경
  
• 프로퍼티
  
• stack이 코드 실행할 때 queue에 미뤄두는 것
  
• 얕은 복사 / 깊은 복사
  
• 동기 / 비동기
  

호이스팅(Hoisting)

해당 포스팅에서는 호이스팅(Hoisting)의 변수중 var 에 대해 다룹니다. 꽤 많이 길기에 오른쪽에 있는 목차를 활용해 주세요.

호이스팅(Hoisting)의 개념

호이스팅(Hoisting)은 JAVASCRIPT 에서 변수 선언과 함수 선언이 코드의 최상위로 끌어올려지는 동작 을 의미합니다. 즉 실제 코드 작성 위치와 상관없이 변수 및 함수 선언이 코드의 실행 전에 처리 되는 것을 말합니다. 이로인해, 변수와 함수는 선언되기 전에 참조될 수 있습니다.

변수 호이스팅

var의 호이스팅

선언과 초기화

var 로 선언된 변수는 다음과 같은 과정을 거치게 됩니다.

1. 선언 단계 : 변수의 선언이 호이스팅되어 코드의 최상단으로 이동합니다.
2. 초기화 단계 : 변수의 초기화는 실제 코드가 실행될 때 발생합니다.

이로 인해, 선언 전에 변수를 참조하면 undefined 가 반환됩니다. 이는 변수가 선언되었지만 초기화되지 않았기 떄문입니다.

예시 코드와 설명 첫번째

console.log(x);  // undefined
var x = 5;
console.log(x);  // 5

위 코드의 실행 순서를 호이스팅을 고려하여 설명해보겠습니다.

1. 호이스팅 후 코드

var x;
console.log(x);  // undefined
x = 5;
console.log(x);  // 5

1. 변수 x 의 선언이 최상단으로 이동합니다.
2. 첫번쨰 console.log(x); 는 x가 아직 초기화되지 않았으므로 undefined를 출력합니다.
3. x에 5를 할당합니다.
4. 두번쨰 console.log(x)는 x가 초기화되었으므로 5를 출력합니다.

함수 내에서의 var 호이스팅 코드와 설명

function example() {
    console.log(y);  // undefined
    var y = 10;
    console.log(y);  // 10
}

example();

var의 호스팅은 함수 내에서도 동일하게 발생합니다. 함수 스코프에서 선언된 변수는 함수의 최상단으로 호이스팅 됩니다. 위 코드의 실행 순서를 호이스팅을 고려하여 설명해보겠습니다.

1. 호이스팅 후 코드

function example() {
    var y;
    console.log(y);  // undefined
    y = 10;
    console.log(y);  // 10
}
example();

1. 함수 example 내에서 변수 y의 선언이 함수 최상단으로 이동 합니다.
2. 첫번째 console.log(y)는 y가 아직 초기화되지 않았으므로 undefined를 출력합니다.
3. y에 10를 할당합니다.
4. 두번쨰 console.log(y)는 y가 초기화되었으므로 10를 출력합니다.

반복문 내에서의 var 호이스팅 코드와 설명

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

위의 코드에서는 setTimeout 함수가 비동기로 실행되므로, 모든 setTimeout콜백이 실행될 때 i의 값은 이미 3 입니다. 따라서 3 이 세번 출력됩니다.
이 문제를 해결하려면, let을 사용하여 블록 스코프를 적용하거나 즉시 실행 함수(IIFE) 를 사용할 수 있습니다.

1. let을 사용하여 블록 스코프 적용

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

2. IIFE를 사용

for (var i = 0; i < 3; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    })(i);
}

호이스팅과 함수 선언

console.log(square(5));  // 25

function square(n) {
    return n * n;
}

var와 함께 함수 선언도 호이스팅 됩니다. 함수 선언은 전체 함수가 호이스팅되어 코드의 최상단에서 사용할 수 있게 됩니다. 위의 코드의 실행 순서를 호이스팅을 고려하여 설명하겠습니다.

1. 호이스팅 후 코드

function square(n) {
    return n * n;
}

console.log(square(5));  // 25

1. 함수 square의 선언과 정의가 최상단으로 이동합니다.
2. square(5)호출이 정상적으로 동작하여 25를 출력합니다.

결론

호이스팅은 JAVASCRIPT의 중요한 개념으로, 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작 입니다. var로 선언된 변수는 선언이 호이스팅 되지만 초기화는 그렇지 않기 때문에 초기화 전에 접근하면 undefined를 반환합니다. 이 동작을 이해하면 코드의 실행 흐름을 더 명확히 파악하고, 예기치 않은 오류를 피할 수 있습니다.
하지만 var의 이러한 특성 떄문에 종종 의도치 않은 동작이 발생할 수 있으므로, 변수 선언시 let이나 const를 사용하는 것이 더 권장 됩니다. let과 const는 블록 스코프를 가지며, TDZ를 통해 선언 전에 접근을 방지하므로 __코드의 안전성과 가독성을 높이는 데 도움이 됩니다.