권정윤의 개발 블로그

web server와 was의 차이점에 대해서 공부하다가 정적인 페이지를 동적으로 만드는 javascript는 어떻게 돌아가는지 궁금해서 찾아봄. 

javascript 엔진 구동 방식 이해 관련 포스팅

https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-v8-%EC%97%94%EC%A7%84%EC%9D%98-%EB%82%B4%EB%B6%80-%EC%B5%9C%EC%A0%81%ED%99%94%EB%90%9C-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EB%8B%A4%EC%84%AF-%EA%B0%80%EC%A7%80-%ED%8C%81-6c6f9832c1d9

ES5부터 변수를 선언할 수 있는 방법은 자료형에 상관없이 var로 통일해서 사용합니다.

다음 코드를 보겠습니다.

var ex=123;
console.log(ex);//123
{
var ex=456;
}
console.log(ex);//456

ex라는 변수가 전역 변수에서 초기화 된 후에 지역 변수로 선언하게 되면 전역변수(ex)가 지역변수의 값(456)을 가리킵니다.

그 이유는 자바스크립트는 함수 레벨 스코프를 따르기 때문이다. 

javascript에서 변수가 선언되는 과정을 보겠습니다.

1. 자바스크립트는 실행시점에 변수와 함수에 대해 호이스팅을 수행.

   *hoisting:변수와 함수를 소스의 맨 위에 위치시킴.

2.변수를 실행컨텍스트의 변수객체에 등록한다.

3.실행컨텍스트에 등록된 변수객체를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.

4.undefined로 초기화 된 변수에 값을 할당한다.

ES6부터 도입된 let,const를 사용한 코드를 보겠습니다.

let ex=123;
let ex = 456;  // Uncaught SyntaxError: Identifier 'ex' has already been declared
console.log(ex);//123
{
let ex=456;
console.log(ex);//456
}
console.log(ex);//123

var와 다른점 첫번째는 중복 선언이 안됩니다. 

두번째는 블록 레벨 스코프를 따른다는 것입니다.

let,const가 선언된 범위 안에서 호이스팅 되고, 전역변수인 경우에는 코드 맨 위에서 호이스팅 됩니다.

console.log(ex); //undefined
var ex=123;

let exlet=123;
{
console.log(exlet);
let exlet=123; // ReferenceError: exlet is not defined
}

let의 변수 선언 과정은 다음과 같습니다.

1. 자바스크립트는 실행시점에 변수와 함수에 대해 호이스팅을 수행.

   *hoisting:변수와 함수를 소스의 맨 위에 위치시킴.

2.변수를 실행컨텍스트의 변수객체에 등록한다.

3.스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.

4.실행컨텍스트에 등록된 변수객체를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.

5.undefined로 초기화 된 변수에 값을 할당한다.

변수가 메모리에 할당 되기 전이기 때문에 참조할 수 없다는 에러를 겪게됩니다.

Reference

https://poiemaweb.com/es6-block-scope