자바스크립트 실행 2 - 자바스크립트 Hoisting

어제 새벽에 7시 반까지 6시간 정도 새벽에 공부하다가 과목이 너무나도 어렵고 무슨 말인지 하나도 모르겠기에 일기를 쓰다가 아침부터는 쉬는 시간으로 보냈다. 집에 너무 추워서 감기 기운도 있는데다 계속된 장시간 컴퓨터 작업으로 인해 안구 건조증이 생긴 것 같았다.
눈이 너무 시리고 아파서 눈을 뜨기도 힘들었다. 계속해서 눈물과 콧물이 나와서 심신이 지치고 정말 쉬어주어야겠다는 생각이 들었다. 아침에 1시간 정도 낮잠을 잔 후 다른 업무를 하며 시간을 보내다가 오후에 집에 와서도 여전히 공부할 상태는 아니었다. 오후에도 엄마와 볼일이 있어서 외출을 하고 그리고 다시 광주 집으로 향했다.
 
차가 많이 밀려서 집에 오니 밤 8시가 다 되었지만 그래도 감사했다. 어제는 저녁식사 후에 눈 찜질을 하고 평소처럼 9시쯤 일찍 잠자리에 들었다. 그리고 하루 푹 쉬어주니 다시 눈을 뜰 수 있게 되어 얼마나 감사했는지 모른다. 그리고 이제는 몸을 혹사시키며 지나치게 공부하지 말아야겠다고 생각했다.
오늘 새벽에도 눈 찜질을 3번 정도 하며 적당히 쉬어주면서 하자 공부의 효율도 높았다. 오늘은 인공지능 사관학교 수료식이 있는 날인데 오후에 갈지 아침에 갈지 무척 고민이 많이 된다. 발표회를 참석해봤자 볼 것도 없고 관심있는 팀 프로젝트도 없기 때문이었다.
 
오늘 새벽부터는 자바스크립트 심화 과정 1주차 수업을 처음부터 다시 들어보고 공부하는 중이다. 처음 들었을 때는 1/3도 이해하기 힘들었는데 두 번째 학습을 할 때는 80% 이상 이해했다. 이제 이번 단원만 하면 복습은 거의 끝난다.

---

 
 
 

 

이론 2 - 자바스크립트 Hoisting

 

 
렉시컬 환경에는 Variable Object와 Scope chain이 있다. let c = 10이라는 값을 variable object에 넣었을 때 10이라는 값은 넣어지지 않는다. var b는 자바스크립트 엔진이 실행 단계에서 읽고 undefined로 초기화한 것이다. 즉 b는 undefined가 된 것이다. 하지만 c는 초기화되지 않았기 때문에 애초에 접근이 불가능하다. 초기화하지 않은 값을 사용하면 오류가 난다.
 
 
 
 
 

 callMe라는 함수는 뒤에서 선언되지만 앞에서 호출이 가능하다. var 변수는 전체가 저장되지 않고 값만 undefined되기 때문에 앞에서 접근하면 undefined를 얻는다. 그리고 선언이 되고 나서 10이라는 값을 얻는다.
 
 
 
 
 

 
RefenceError는 x가 초기화되지 않았을 때 접근할 수 없는 것이다. x는 초기화되기 전이다. let, const 변수는 실행 단계에서 비로소 초기화된다. 생성 단계 단계에서 x를 위한 공간은 할당되지만 값은 초기화되지 않는다. let, const는 호이스팅이 발생하지 않지만 접근하면 오류가 난다.
 
 
 
 
 

 
 
 
 
 

 

하나는 var로 다른 하나는 let으로 선언된 for 문이다. i는 함수에서 설정된 변수이기 때문에 setTimeOut의 시간이 다 되어 호출되었을 때 i는 블록에서 참조되는 것이 아니다. letFor() 변수에서 let은 for 블럭 안에 존재하는 함수이다. for 블럭 안에서 let이 선언되었다면 for 블럭 안에 선언된 것이다.

for let은 블럭 안에서 생성되고 다시 불러오기를 반복해서 0, 1, 2의 값이 된다. setTimeOut은 블록에 바인딩된 값을 참조하기 때문이다. 하지만 var는 함수 스코프기 때문에 i가 3이 되었을 때 끝난다. setTimeOut은 i가 3이 되었을 때 하나만을 참제한다.

 

let for의 경우 화살표 함수 클로저에 저장되지만 var for의 경우 함수 스코프이기 때문에 var for 클로저 안에 저장된다.

---

 
 
 
 
 
 

퀴즈 2 - 자바스크립트 Hoisting

 

 
 
 
이 코드는 자바스크립트의 스코프와 함수 호출 시의 동작 방식에 대한 내용을 포함하고 있다. 

1. f2 함수 호출 : f2();를 실행하면, function 2가 콘솔에 출력되고 그다음에f4();가 호출된다.
2. f 함수 : var f = function () { ... }로 정의된 함수 f는 내부에서 f3 변수를 접근하고 있다. 그러나 f3의 초기화 상태가 undefined인 시점에서 로그를 출력하려고 하기 때문에 주의가 필요하다.
3. let으로 선언된 f4 : let f4 = () => ...는 블록 스코프를 가지고 있어 f2 함수의 호출 시점에 f4는 초기화되지 않았다. 그래서 f2를 호출하면 ReferenceError를 발생시킨다.
4. hoisting : JavaScript의 hoisting 원리에 의해 함수 선언은 상단으로 끌어올려지지만, let이나 const로 선언된 변수는 끌어올려지지 않고 초기화되지 않은 상태로 유지된다.

결국, 이 코드는 자바스크립트에서의 함수와 변수 스코프의 동작 원리를 보여주고, 이를 통해 어떤 때는 에러가 발생할 수 있는지를 잘 보여주는 예시이다.

---

 
 
 

 
너무 어려워서 틀렸을지 알았는데 역시나 틀렸다.
 
 
 
 

---

 
 
 

학습을 마치고

어제 공부했던 내용인데 분량이 너무 많아서 둘로 나누었다. 아직 다 작성하지 못했지만 오후에 집에 와서 나머지 부분을 추가로 작성해보려고 한다.
아침에 일정이 있어서 준비를 하며 서둘러야 할 것 같다.

 

어제는 수료식이 끝나고 집에 와서 쉬고 노느라 이 내용을 다시 듣고 정리하지 못했다. 다음날 새벽 2시에 일어나서 진행해보았다. 짧은 강의라고 해도 두번째 들을 때는 대부분 들은 내용을 기록하기 때문에 시간이 많이 걸린다.