ES5와 ES6
ES
ES: ECMAScript, ECMA 국제기구에 의해 표준화된 언어
Javascript는 ECMAScript의 특정 버전
개발되고 있는 언어이며 다양한 브라우저를 지원하기 때문에 새로운 기능만 추가할 수 있고 기존의 기능을 제거하기 어렵다.
ES5에서 ES6으로 바뀌면서 많은 기능이 추가되었다.
ES5
- Supported in basically all browser, including old IE
- Only had var, not let or const
ES6
- Supported in modern browsers, can (mostly) be transpiled to ES5
- Many new features that help us write cleaner, better & faster code
var vs let & const
- let, const를 사용함으로써 변수 범위를 제어할 수 있게 되었다.
var
- Creates a variable
- Available since .. ever
- Function & Global scope
let
- Creates a variable
- Available since ES6
- Block scope
const
- Creates a constant
- Available since ES6
- Block scope
Hoisting
- var로 생성한 변수는 변수의 선언을 파일의 시작부분으로 가져오고 undefined를 할당한다. 초기화 부분은 원래 위치에 그대로 두어서 실제 코드를 작성한 위치에서 값을 할당한다. 에러가 발생하지 않고 undefined라는 값이 도출된다.
- let, cost도 마찬가지로 선언을 파일의 시작부분으로 가져오지만 선언만 할 뿐 초기값을 할당하지 않는다. 따라서 초기화되지 않았다는 에러가 발생한다.
strict 모드
- var를 사용하면 재선언이 가능하다. 피해야한다.
- var를 사용하면 예약어도 재선언할 수 있다. 피해야한다.
- 키워드 없이 변수를 생성할 수 있다. JS에서 자동으로 var를 추가한 것. 피해야한다.
- 이런 부분들을 피하기 위해 ES5에서 엄격 모드를 활성화할 수 있다.
'use strict';명령어를 함수 앞에 배치해서 엄격 모드를 활성화할 수 있다.
구문 분석 & 컴파일링
스크립트 코드를 HTMl 파일에 임포트하면 브라우저가 HTML 파일을 읽는다.
브라우저가 HTMl 스크립트를 실행한다.
1. JS Parsing & Execution: 브라우저가 JS 코드를 읽어서 로딩하는 작업. 브라우저는 JS 엔진을 이용한다. Interpreter와 Compiler로 나뉜다.
2. 스크립트 분석: Interpreter가 스크립트를 로드하고 읽고 바이트코드로 변환하고 컴파일러에 전달하고 스크립트를 실행한다.
3. 컴파일링: Interpreter가 스크립트를 실행하는 동안 Interpreter에서 받은 코드를 머신 코드로 변환한다. (JIT 컴파일러는 코드를 읽고 실행 중에 컴파일링을 시작하고 동시에 컴파일 된 코드를 실행한다.) 코드 변환이 끝나면 컴퓨터로 전달되어 실행 단계로 들어간다.
4. 이전 실행한 코드일 때 달라진 부분이 없는 코드는 재컴파일링을 거치지 않고 재사용한다.
Browser APIs: Communication Bridges between JS and Logic built into the Browser
- 네이티브 API 호출이나 빌트인 브라우저 기능 호출은 인터프리터 또는 컴파일된 코드에 포함된다.
JS 실행
Inside the JS Engine: Heap & Stack
-
The Thing that executes your code (코드를 실행하는 주체)
-
메모리와 실행 단계에 대한 관리
-
Heap: 장기 메모리. 시스템 메모리 데이터 저장. 브라우저 작업.
- Memory allocation- Stores data in your system memory and manages access to it
-
Stack: 단기 메모리. 프로그램의 흐름 관리. 주로 현재 실행되고 있는 함수 관리.
- Execution Context- Manages your program flow(function calls and communication)
- stack은 익명 코드 실행에서부터 시작된다. 이 익명 파일은 스크립트 파일 자체이다. 전체 스크립트를 평가한 뒤에 이루어진다.
- 크롬 개발자도구 Sources부분에 Scope에서 확인 가능
-
JS는 단일 스레드로 한 번에 하나의 작업만 수행한다.
-
이벤트 루프: 비동기 코드 실행. JS 엔진이 아닌 브라우저 개념.
-
엔진에는 힙, 스택이 포함된 것이 전부지만 엔진과 소통하는 브라우저에 다른 기능들이 있다. (e.g. Event Loop)
Primitive vs Reference Types
- 매우 중요!!
Primitive Values
- Strings, Numbers, Booleans, null, undefined, Symbol
- Stored in memory(normally on Stack), variable stores value itself 실제 값을 저장
- Copying a variable (=assign to different variable) copies the value 값을 복사
Reference Values
- All other objects("more expensive to create")
- Stored in memory(Heap), variable stores a pointer(address) to location in memory 변수가 포인터만 저장(메모리 주소만)
- Copying a variable (=assign to different variable) copies the pointer/reference 복사 시, 포인터만 복사(주소를 복사)
- 전개 연산자...을 사용하여 객체의 값만 복사할 수 있다. push를 사용하면 상수로 생성한 배열에 값을 추가할 수 있다. 새로운 메모리를 할당하는 것이 아니기 때문에 가능하다.- 상수 객체를 새로 할당하는 것은 안되지만 데이터를 수정하는 것은 가능. 즉, 주소값을 건드리는 것이 아니라면 내용 수정은 가능하다.
Garbage Collection
- JS 엔진은 Garbage Collection을 갖고 있다.
- 사용되지 않은 객체에 대한 힙 메모리를 주기적으로 확인하여 메모리에서 제거
- 예를 들어 같은 EventListener를 호출할 경우 새로운 리스너를 계속 생성하는 대신 기존 리스너를 새로운 리스너로 교체한다. 그렇지 않으면 메모리 누수가 수도 없이 일어날 것이기 때문에..
- 익명 함수를 호출하면 호출할 때마다 새로운 함수가 만들어지기 때문에 메모리 누수가 야기된다.
