ECMA스크립트
한글 위키피디아
정의
ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.
영문 위키피디아
Definition
ECMAScript is a JavaScript standard intended to ensure the interoperability of web pages across different browsers.
Interoperability
Interoperability is a characteristic of a product or system to work with other products or systems.
- ecma-international 이 페이지가 ECMA-262의 공식 문서인데 interoperability를 검색했을 때 별 다른 정보가 나오지 않았다. 어떤 식으로 상호 운용성을 보장했는지 설명이 안나와있는 것 같다. 나중에 기회가 된다면 알아봐야겠다.
ECMA-262
ECMA-262 specifies only language syntax and the semantics of the core API, such as Array, Function, and globalThis, while valid implementations of JavaScript add their own functionality such input-output and file-system handling.
1줄 요약
ES 스크립트 언어는 많은 구현체가 있는데 그 중 가장 대중적인 것이 JavaScript이다.
ECMAScript는 JavaScript가 다양한 환경에서 호환되어 작동할 수 있도록 표준화하기 위해 만들어졌다.
ES5
ES6
ES6으로 개선되면서 JavaScript가 본격적으로 복잡한 애플리케이션을 위한 프로그램을 작성할 수 있게 되었다.
둘은 본질적으로 몇 가지 공통점이 있지만 차이점도 많다.
ES5 vs. ES6
Comparison between ES5 and ES6
Data types
ES5: string, number, boolean, null, undefined
ES6: ES5 + symbol.
Symbol
// Symbol 타입 변수 생성
let id1 = Symbol();
// "id"라는 description(name)을 가진 Symbol 생성.
let id2 = Symbol("id");
console.log(id2.toString()); // Symbol(id)
console.log(id2.description); // id- Symbol: unique한 식별자
- string, symbol만이 객체의 프로퍼티 키로 사용될 수 있음.
- 동일한 이름을 가진 symbol을 두 개 만들어도 둘은 다름
Defining variables
ES5: var
ES6: ES5 + let, const
Performance
당연히 ES6이 더 최신 버전이고 신규 기능들이 있기 때문에 성능 면에서 더 좋음.
Object manipulation
ES6는 destructuring(구조 분해 문법)과 spread operator(전개 연산자) 덕분에 ES5보다 객체의 조작이 훨씬 부드럽다.
Arrow functions
ES5: 함수를 정의할 때 function, return 키워드 필수
ES6: function, return 키워드 없이 화살표로 함수 정의 가능
for loops
ES5: 초기문, 조건문, 증감문으로 이루어진 for loop을 이용해 배열 등의 요소 순회 가능
ES6: 초기문, 조건문, 증감문 없이 for-of문으로 배열 등의 요소 순회 가능
const arr = [1, 2, 3, 4, 5]
// ES5
for (let i = 0; i < arr.length; i++) console.log(arr[i])
// ES6
for (let ele of arr) console.log(ele)etc
transpilation
현재로서는 ES6이 완벽 호환 가능한 브라우저가 없다. 이런 경우 transpilation을 통해 ES6 코드를 ES5 코드로 변환하는 방법이 있다.
transpilation: compiler는 high-level(개발자)언어를 low-level(컴퓨터)언어로 코드를 변환해주는 반면 transpiler는 한 high-level 언어에서 다른 high-level 언어로 코드를 변환해준다. transpilation은 그 과정을 뜻한다.
spread operator
배열이나 객체를 합칠 때 편리한 연산자이다.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [...arr1, 6, 7, 8, 9, 10]
console.log(arr2); // arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let obj1 = { a: 1 }
let obj2 = { ...obj1, b: 2 }
console.log(obj2); // obj2 = { a: 1, b: 2 }template literal
문자열을 편리하게 다룰 수 있게 하는 기능이다.
문자열 내부에 문자열 외의 다른 타입의 변수들을 담을 수 있게 한다.
// ES5
let number = 5;
console.log("Number is", number);
console.log("Number is " + number);
// ES6
console.log(`Number is ${number}`);회고
그동안 알고리즘 문제를 풀면서 문자열이나 배열 등 반복문을 사용하는 문제들이 많이 나왔었다.
그 때마다 나는 구버전의 for문을 사용했었다. 물론 인덱스에 접근할 수 있다는 장점은 있지만 인덱스가 굳이 필요 없다면 for of 문을 사용하는게 훨씬 직관적이고 가독성도 좋을 것 같다고 느꼈다.
for문 외에도 ES6의 개념이나 기능을 다 알지 못해서, 혹은 c를 너무 오래 다뤘던 나머지 ES6는 커녕 JavaScript라는 언어의 막강한 메소드와 함수들 몰라서 내장 함수/메소드의 기능을 그대로 수행하는 함수를 따로 구현하곤 했다. 물론 이 역시 좋은 공부가 되겠지만 문제를 푸는 데 드는 시간과 코드의 길이를 생각해서 문제를 풀 때는 되도록이면 내장 함수를 사용하는 것이 좋을 것 같다고 느꼈다.
끝
