자바스크립트 Deep Dive 챕터1~4장

고미·2023년 5월 19일
4
post-thumbnail

ECMAScript란?

  1. 자바스크립트의 문법의 규격사항, 표준사항

  2. 우리가 사용하는 브라우저는 한 개가 아닌 여러개의 브라우저가 있으며,
    이때 각 브라우저의 엔진은 전부 동일하지는 않기 때문에 표준사항이 필요한 것이다.

  3. ECMAScript의 표준사항에 맞게 Javascript를 작성하면 브라우저엔진이 동일한 결과물을
    출력 할 수 있도록 번역해준다.


자바스크립트 엔진에 대해

  1. 자바스크립트는 인터프리터 형식이다.
  2. 인터프리터란?
  • 일단 프로그램 실행을 해 놓고 자바스크립트 코드를 한 줄씩 번역해서 실행해준다.

  • 실행 파일을 생성하지 않는다

  • 인터프리트 단계와 실행 단계가 분리되어 있지 않다.

  • 코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.

  1. 컴파일러란?
  • 실행 하기 전에 모든 코드를 번역하는 작업을 진행한다.

  • 실행 파일을 생성한다.

  • 컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일 을 실행한다.

  • 실행에 앞서 컴파일은 단 한번 수행된다.

인터프리터 장단점

  1. 장점 - 인단 실행을 하고 코드를 한 줄씩 번역하기 때문에 초반 실행 속도가 빠를 수 있다.
  2. 단점 - 코드가 실행될 때마다 과정이 반복되기 때문에 코드 실행 속도가 비교적 느리다.

컴파일러의 장단점

  1. 장점 - 한번 컴파일러를 거친 실행 파일은 다음에 실행할 때 속도가 빠르다.

  2. 단점 - 실행 하기 전에 모든 코드를 번역 해야 하기 때문에 초반 실행하는 속도가 느릴 수 있다.

  3. 단점 - 규모가 큰 소스의 경우, 컴파일된 프로그램의 경우 일반적으로 인터프리터를 이용해 실행시키는 것보다 훨씬 빠르게 동작 하나, 컴파일 과정에서는 시간이 상당히 많이 소요되고 메모리도 많이 차지하게 된다.


변수 선언의 실행 시점과 변수 호이스팅

  1. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점,
    즉 런타임이 아니라 그 이전 단계에서 먼저 실행된다.

  2. 변수 선언문이 코드의 최상단으로 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 이라고 한다.

  3. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

var는 순서 상관 없이 에러가 나지 않지만 let과 const는 변수를 먼저 선언하지 않으면 에러가 발생하게 된다.

console.log(score); // undefined

score = 80; // 값의 할당
var score; // 변수 선언

console.log(score); // 80

var & let & const

1. var의 특성

  • var는 중복해서 변수 선언을 여러번해도 에러없이 각각 다른 값이 출력될 수 있다.
  • 초기화 없이 선언만 한 경우에는 변수 선언문 자체가 무시된다.
  • 코드가 길어졌을때 혹은 내가 무슨 변수를 선언했는지 까먹었을때 재할당을 하는 등의 실수는 치명적인 단점으로 다가올수 있다. (에러 표시X)
var name = "고미";
console.log(name); // 고미
 
var name = "Gomi";
console.log(name); // Gomi
 
var name;
console.log(name); // Gomi

2. const의 특징

  • const는 재할당이 불가능하다.
  • let, const로 선언한 변수는 중복 선언이 불가능하다.
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

3. let의 특징

  • let는 재할당이 가능하다.
let age;
console.log(age) // undefined
age = 10;
console.log(age) // 10;

4. var, let, const의 구조 차이

var → 선언 및 초기화 → 할당
let,const → 선언 → TDZ → 초기화 → 할당

  • 여기서 선언이란 변수를 실행 컨텍스트(Execution Context)에 등록하는 것,
  • 초기화란 메모리에 할당하는 것을 말하며, 자바스크립트에 모든 변수가 undefined로 초기화가 된다.

스코프(Scope)

스코프(scope)는 식별자(변수명, 함수명, 클래스명 등)의 유효범위를 말하며,
전역에 선언된 전역변수는 전역 스코프를 가져 하위 모든 곳에서 참조가 가능하고
지역에 선언된 지역변수는 지역 스코프를 가져 해당 지역과 하위 지역에서만 참조가 가능합니다.
var로 선언한 변수와 let, const로 선언한 변수의 스코프는 다릅니다.

1. var 스코프

  • var는 함수 레벨 스코프로서 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주합니다.

  • test 함수 내부에서 선언된 cre 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생합니다.

  • 함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 취급됩니다.

function test() {
  var cre = "크레";
  console.log(cre);
}
 
test(); // 크레
 
console.log(cre); // VM881:8 Uncaught ReferenceError: cre is not defined

  • if, for, while, try/catch 문 등의 코드 블록 내부에서 var로 선언된 변수를 전역 변수로 간주하며, 블럭 외부에서도 찹조할 수 있습니다.
if(true) {
    var cre = "크레";
    console.log(cre); // 크레
}
 
console.log(cre); // 크레

2. let & const 스코프

  • let과 const는 함수 내부는 물론이며 if, for문 등의 코드 블록에서 선언된 변수도 지역변수로 취급합니다.
function test() {
  let cre = "크레";
  console.log(cre);
}
 
test(); // 크레
 
console.log(cre); // Uncaught ReferenceError: cre is not defined
profile
개발자를 꿈 꾸는 퍼블리셔

0개의 댓글