자바스크립트의 문법의 규격사항, 표준사항
우리가 사용하는 브라우저는 한 개가 아닌 여러개의 브라우저가 있으며,
이때 각 브라우저의 엔진은 전부 동일하지는 않기 때문에 표준사항이 필요한 것이다.
ECMAScript의 표준사항에 맞게 Javascript를 작성하면 브라우저엔진이 동일한 결과물을
출력 할 수 있도록 번역해준다.
일단 프로그램 실행을 해 놓고 자바스크립트 코드를 한 줄씩 번역해서 실행해준다.
실행 파일을 생성하지 않는다
인터프리트 단계와 실행 단계가 분리되어 있지 않다.
코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.
실행 하기 전에 모든 코드를 번역하는 작업을 진행한다.
실행 파일을 생성한다.
컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일 을 실행한다.
실행에 앞서 컴파일은 단 한번 수행된다.
장점 - 한번 컴파일러를 거친 실행 파일은 다음에 실행할 때 속도가 빠르다.
단점 - 실행 하기 전에 모든 코드를 번역 해야 하기 때문에 초반 실행하는 속도가 느릴 수 있다.
단점 - 규모가 큰 소스의 경우, 컴파일된 프로그램의 경우 일반적으로 인터프리터를 이용해 실행시키는 것보다 훨씬 빠르게 동작 하나, 컴파일 과정에서는 시간이 상당히 많이 소요되고 메모리도 많이 차지하게 된다.
변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점,
즉 런타임이 아니라 그 이전 단계에서 먼저 실행된다.
변수 선언문이 코드의 최상단으로 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 이라고 한다.
변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
var는 순서 상관 없이 에러가 나지 않지만 let과 const는 변수를 먼저 선언하지 않으면 에러가 발생하게 된다.
console.log(score); // undefined
score = 80; // 값의 할당
var score; // 변수 선언
console.log(score); // 80
var name = "고미";
console.log(name); // 고미
var name = "Gomi";
console.log(name); // Gomi
var name;
console.log(name); // Gomi
const name = "고미";
name = "Gomi"; // VM416:2 Uncaught TypeError: Assignment to constant variable.
const job; // Uncaught SyntaxError: Missing initializer in const declaration
const age = 0;
let age = 10; // Uncaught SyntaxError: Identifier 'age' has already been declared
let age;
console.log(age) // undefined
age = 10;
console.log(age) // 10;
var → 선언 및 초기화 → 할당
let,const → 선언 → TDZ → 초기화 → 할당
- 여기서 선언이란 변수를 실행 컨텍스트(Execution Context)에 등록하는 것,
- 초기화란 메모리에 할당하는 것을 말하며, 자바스크립트에 모든 변수가 undefined로 초기화가 된다.
스코프(scope)는 식별자(변수명, 함수명, 클래스명 등)의 유효범위를 말하며,
전역에 선언된 전역변수는 전역 스코프를 가져 하위 모든 곳에서 참조가 가능하고
지역에 선언된 지역변수는 지역 스코프를 가져 해당 지역과 하위 지역에서만 참조가 가능합니다.
var로 선언한 변수와 let, const로 선언한 변수의 스코프는 다릅니다.
var는 함수 레벨 스코프로서 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주합니다.
test 함수 내부에서 선언된 cre 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생합니다.
함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 취급됩니다.
function test() {
var cre = "크레";
console.log(cre);
}
test(); // 크레
console.log(cre); // VM881:8 Uncaught ReferenceError: cre is not defined
if(true) {
var cre = "크레";
console.log(cre); // 크레
}
console.log(cre); // 크레
function test() {
let cre = "크레";
console.log(cre);
}
test(); // 크레
console.log(cre); // Uncaught ReferenceError: cre is not defined