[JS - 코드팩토리] 2일차: hoisting

GPT가 그려준 썸네일. 글씨 뭉개짐 현상은 여전하다...

hoisting

자바스크립트에서 변수 선언과 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 동작.

코드 작성 순서와 상관없이 변수와 함수의 선언이 실행 전에 미리 처리.

변수의 선언만 끌어올려지며, 초기화는 실제 코드가 실행될 때 이루어짐.

var 변수로 선언할 때

console.log(name);
var name = '코드팩토리';
console.log(name);

출력: undefined , 코드팩토리

1. 첫 번째 console.log(name): 여기서 변수를 선언하기 전에 console.log(name)을 호출했지만, JavaScript의 호이스팅으로 인해 에러가 발생하지 않고 undefined가 출력됩니다.
   • 호이스팅은 JavaScript 엔진이 변수 선언을 코드의 상단으로 끌어올리는 동작입니다. 그러나 var로 선언된 변수는 선언만 끌어올려지고, 초기화는 해당 라인에 도달할 때까지 이루어지지 않습니다. 따라서 첫 번째 로그에서 변수는 존재하지만 아직 값이 할당되지 않았으므로 undefined가 출력됩니다.
2. 두 번째 console.log(name): 이 시점에서는 name이 '코드팩토리'로 초기화되었으므로 '코드팩토리'가 출력됩니다.

 

let 변수로 선언할 때

console.log(yuJin);
let yuJin = '안유진';
console.log(yuJin);

출력: ReferenceError: Cannot access 'yuJin' before initialization , 안유진

1. 첫 번째 console.log(yuJin): let으로 선언된 변수는 호이스팅이 발생하지만, 초기화 전까지는 '일시적 사각지대(TDZ)'에 존재합니다. 이 말은, 변수 선언 전에 접근하려고 하면 에러가 발생한다는 뜻입니다. 그래서 이 코드에서는 ReferenceError가 발생합니다.
   • let은 변수를 선언하기 전에는 변수에 접근할 수 없도록 설계되어 있으므로, console.log(yuJin)을 호출할 때 ReferenceError: Cannot access 'yuJin' before initialization 오류가 발생합니다.
2. 두 번째 console.log(yuJin): 이 시점에서 yuJin이 '안유진'으로 초기화되었으므로 '안유진'이 출력됩니다. 하지만 첫 번째 로그에서 이미 에러가 발생했기 때문에, 이 부분은 실행되지 않습니다.

느낀 점

원래 목표는 3일 안에 언어를 가볍게 끝내고 프레임워크로 넘어가려 했지만, 그러다보니 하루, 이틀 미루다가 1일차 이후로 너무 많은 시간이 흘렀다. 이것도 공부하고 저것도 공부하고 운동도 하고 취미생활도 하고 다양하게 벌려놓다보니 js를 위한 시간이 남지 않은... 것은 핑계고 목표를 너무 높게 잡아서 의욕이 안생겼나 보다. 앞으로는 진짜 적은 양이라도 매일 조금씩 공부할 수 있도록 노력하겠다.