1.5 하위 호환성과 상위 호환성
먼저 하위 호환성과 상위 호환성은 말 그대로 옛 버전과 호환이 잘되는지 그리고 신 버전과 호환이 잘되는지를 말한다.
간단한거 같지만 어렵게 느껴져 거부감이 든다..
JS는 하위호환성을 정말 중요하게 여긴다. 이유는 이미 수많은 웹사이트가 예전부터 JS 코드로 만들어져 있기 때문이다.
예시코드
function sum(a, b) {
return a + b ;
}
console.log(sum(2,3)): // 5- 이 함수는 20년 전에 코드이지만 현재 최신 브라우저에도 잘 적용된다.
예시코드
var x = 10; // ES6 이전 방식
let y = 20; // ES6 이후 방식- ES6(2015) 이후 let, const, arrow function 같은 새로운 문법이 추가되었지만,
- 기존의 var와 기존 함수 선언방식은 여전히 지원된다.
반대로 상위 호환성은 다소 제한적이다.
const sum = (a, b) => a + b; //ES6 문법(Arrow Function)
console.log(sum(2, 3)) // 최신 브라우저에서만 동작- 이 코드는 ES6 이전 브라우저(IE11)에서는 작동하지 않는다.
// 최신코드
const sum = (a, b) => a + b;
// Babel로 변환된 코드
var sum = function(a, b) {
return a + b;
};상위 호환성을 보장하기 위한 해결책으로 트랜스파일러 나 폴리필 을 사용한다
트랜스파일러(Transpiler)?
• 트랜스파일러는 최신 JavaScript 코드를 구형 JavaScript 코드로 변환해주는 도구.
• ES6 이상의 문법을 지원하지 않는 브라우저(예: IE11)에서도 코드를 실행할 수 있도록 도와준다.
• 대표적인 도구로 Babel이 있다.
폴리필(Polyfill)?
• 폴리필은 최신 JavaScript 기능이 없는 브라우저에서 그 기능을 흉내 내도록 추가 코드를 제공해준다.
• 브라우저가 특정 기능을 지원하지 않을 때, 그 기능을 직접 구현해주는 역할을 한다.
• 대표적으로 Core-js, Polyfill.io 이 있다
1.6 인터프리터 이해하기
인터프리터는 프로그래밍 언어 코드를 한 줄씩 읽고 실행하는 프로그램이다.
인터프리터의 특징으로는
실시간으로 실행 - 코드를 바로 읽고 실행하기 때문에 컴파일 과정이 따로 필요하지않다.
즉각적인 피드백 - 에러가 발생하면 그 즉시 알려준다.
코드 실행 속도 - 느리다. 코드를 한 줄씩 읽고 실행하기 때문
인터프리터와 컴파일러의 차이
| 구분 | 인터프리터 | 컴파일러 |
|---|---|---|
| 작동 방식 | 한 줄씩 읽고 바로 실행 | 전체 코드를 번역한 뒤 실행 |
| 실행 속도 | 느릴 수 있음 | 빠름 |
| 에러 처리 | 에러 발생 시 즉시 멈추고 알려줌 | 컴파일 중 모든 에러를 한 번에 보여줌 |
| 결과물 | 번역된 결과물이 따로 저장되지 않음 | 번역된 실행 파일이 생성됨 |
| 예시 언어 | JavaScript, Python, Ruby | C, C++, Java |
인터프리터 를 실시간 통역사에 비유하자면 컴파일러는 번역본을 제공하는 느낌.
1.6.1 웹어셈블리 = Wasm (WebAssembly)
웹어셈블리란? 브라우저에서 실행되는 매우 빠른 이진 코드 포맷이다.
(이진 포맷 = 2진수로 변환해서 저장하고 처리함)
Wasm 이전에는 ASM.js 를 사용했으나 현재는 Wasm으로 대체되는 추세이다.
ASM.js vs WebAssembly
| 구분 | ASM.js | WebAssembly (Wasm) |
|---|---|---|
| 형식 | JavaScript 코드 | 이진 포맷 (0과 1) |
| 성능 | JavaScript보다 빠름 | ASM.js보다 더 빠름 |
| 브라우저 지원 | JavsScript 엔진을 가진 모든 브라우저에서 가능 | 주요 브라우저에서 기본 지원 |
| 파일 크기 | 크다 | 작다 |
| 언어 지원 | C/C++변환 가능, 제한적 | 다양한 언어 지원 (C, C++, Rust 등) |
| 보안성 | JavaScript 보안 체계에 의존 | 샌드박스 환경으로 더 높은 보안 |
ASM.js 는 브라우저가 Wasm 을 지원하지 않던 시절의 대안 모든 부분에서 Wasm 매우 빠르고 우세하다.
1.7 엄격 모드 (Strict Mode)
2009년 ES5 부터 추가된 기능 이다.
코드에서 잠재적인 오류를 방지하거나, JavaScript의 비일관적인 동작을 해결하려고 만들어졌다.
- 엄격 모드 활성화 방법
- 전역으로 활성화.
'use strict';
x = 10; // 에러 발생 : 변수를 선언하지 않고 사용했음- 함수 단위로 활성
function strictFunction() {
'use strict';
y = 20; //에러 발생
}- 엄격 모드의 주요 특징과 효과
- 변수 선언 강제
변수를 선언하지 않고 사용하는 실수를 막아준다 - 예약어 사용 금지
JavaScript에서 미래에 사용될 가능성이 있는 예약어를 변수로 사용할 수 없다. - 삭제 금지
변수나 함수 선언을 삭제하려고 하면 에러가 발생 - 중복 매개변수 금지
함수에서 같은 이름의 매개변수를 사용할 수 없다 - this의 바인딩 변경
this가 명확하게 정의되지 않으면 undefined로 설정된다
기존 모드에서는 this가 전역 객체를 참조했지만, 엄격모드에서는 X - 암시적 전역 방지
변수를 선언하지 않고 할당하려는 실수를 막아준다.
마지막으로 정리하자면 ES6 부터는 기본적으로 자동으로 활성화 되어있다.
ES6 모듈은 ‘use strict’; 없이도 엄격 모드가 자동으로 활성화.
변수 선언 누락, 중복 매개변수, 예약어 사용 같은 실수를 방지.
this 동작이 더 명확해짐.
더 안전하고 최적화된 코드 실행 환경을 제공.
따로 엄격 모드를 설정하지 않아도 ES6 모듈 파일에서는 안전한 코드를 작성할 수 있다.
