1 2월 2021

[vJS] ES5 ~ ES10 및 Typescript, Babel에 대해

By jy lee
광고

목표




*ES5부터 ES10의 도큐먼트를 기준으로 변경 사항을 정리하고, 대세적으로 사용하는 TypeScript와 Babel에 대해 알아봅니다.

*ES5 : 2009년에 릴리즈 된 ECMA -262 기술 규격에 따라 정의하고있는 표준화 된 ECMA 스크립트 언어 (ES6 = ECMAScript 2015)
*이전에 작성한 ‘[vJS] Const, Let, Var의 차이점’의 추가 요청에 의해 작성



목차



  1. ES5 변경사항
  2. ES6 (ES2015) 변경사항
  3. TypeScript
  4. Babel
  5. ES7 (JS 2016) ~ ES10 (JS 2019)
  6. 정리



1. ES5 변경사항



  • "use strict"
    • Strict 모드: Javascript 코딩을 보다 깨끗하게 하기 위한 규칙
    • 사용 방법
      Declared at the beginning of a script, it has global scope (all code in the script will execute in strict mode)
      Declared inside a function, it has local scope (only the code inside the function is in strict mode)
    • Strict mode에서 허용되지 않는
      • 변수, 객체를 선언하지 않고 사용하는 것
      • 변수와 function의 삭제
      • 한 function 안에서의 동일 이름 매개변수의 사용
      • 8진수의 numeric literal 및 이스케이프 문자의 사용
      • read-only 속성에 값을 write 하는 것
      • 지울 수 없는 property를 delete하는 것
      • eval을 변수의 이름으로 사용하는 것
      • get-only 속성에 값을 wrtie 하는 것
      • argument를 변수의 이름으로 사용하는 것
      • with를 선언하는 것
        with (Math){x = cos(2)}
      • eval이 호출된 범위에서 변수를 생성하는 것(보안 상의 이유)
        eval ("var x = 2")
      • 아래의 키워드들을 변수 명으로 사용하는 것
        : implements, interface, let, package, private, protected, public, static, yield
      • this.functions 키워드는 strict 모드에서 함수를 호출 한 객체를 참조하며, 객체를 지정하지 않으면  undefined를 반환

  • String.trim()
    : 문자열 양쪽의 공백을 제거

  • Array.isArray()
    :객체가 Array인지 boolean으로 확인

  • Array.forEach()
    : 배열의 각 요소를 반복적으로 돌며  주어진 함수를 한 번씩 실행

  • Array.map()
    : 함수를 각 배열 요소에 대해 반복적으로 수행하고, 결과를 바탕으로 새 배열으로 생성

  • Array.filter()
    : 특정 테스트 함수를 통과한 배열의 값들만으로 새 배열을 생성

  • Array.reduce(): 각 배열 요소를 단일 값으로 축소시키는 함수를 실행하여 단일 값을 생성

  • Array.reduceRight(): 인접한 두 개의 배열 요소에 대해 (오른쪽에서 왼쪽으로) 함수를 적용하여 하나의 값으로 재생성

  • Array.every(): 모든 배열의 요소가 테스트 함수를 통과하는지 boolean값으로 반환

  • Array.some(): 배열의 요소 중 일부가 테스트 함수를 통과하는지 boolean값으로 반환

  • Array.indexOf(): 배열에서 요소 값을 검색하여 해당 위치(인덱스)를 반환하며, 일치하는 요소가 없는 경우에는 -1 및 해당 값이 다수 존재하는 경우에는 첫 번째 위치의 인덱스를 반환

  • Array.lastIndexOf(): 배열 안에서 주어진 요소가 발견 된 마지막 인덱스를 반환하며, 일치하는 요소가 없는 경우에는 -1을 반환

  • JSON.parse(): 문자열을 Javascript 객체와 값으로 분석하여 변환

  • JSON.stringify(): JavaScript 객체와 값을 JSON 문자열로 변환

  • Date.now(): 1970 년 1 월 1 일 0시 0 분 0 초부터 현재까지의 경과 시간을 ms단위로 반환

  • Property Getters and Setters & New Object Property Methods




2. ES6 (ES2015) 변경사항



  • JavaScript Arrow 함수
    : function키워드와 return키워드 및 중괄호를 생략하여 함수를 정의
    예시) const add = (a, b) => a + b

  • Class
    : 미리 정의 된 내용을 바탕으로 생성자와 속성을 통하여 오브젝트를 생성하는 틀을 제공
    오브젝트를 생성할 때에는 new키워드를 사용(new키워드 없이 오브젝트를 생성 시, 타입 에러 발생)

  • 내장 객체 Promise
    : 현재 프로세스의 상태를 나타내는 state, 비동기 처리를 위한 producer, consumer로 구성
    프로미스 체이닝을 통해 무분별한 콜백에서 벗어날 수 있어 가독성 향상에 기여


const promise = new Promise((resolve, reject) => {
  resolve('SUCCESS')
})

//consumer
promise.then(
  function(){//Success}, function(){//ERR}
)

//consumer 가독성 향상
promise.then(
  function(){//Success}
}.catch(
  function(){//Fail}
).finally(){//무조건 실행}

//promise chain
function(){//1}
  .then((res) => function(res){ //2 })
  .then((res) => function(res){ //3 })
  .catch()
  .finally()

//각 function의 결과를 병렬식으로 한 번에 실행하고 모두 돌려받은 후에 처리를 시작
Promise.All([ function(){} , function(){} ])


  • 데이터 타입 Symbol
    : 고유 식별자임을 나타낼 수 있는 데이터 타입으로, 두 symbol 값은 동일한 값을 가질 수 없음
    예시) Symbol(“id”) == Symbol(“id”) // false

  • 매개 변수의 Default값 설정
    : 예시) function myFunction(x, y = 10) { return x + y }

  • Rest 매개 변수
    :...args 키워드로 다수의 매개변수를 배열로 넘겨 받는 것이 가능
    예시) function sum(…args) { // function}

  • Array.find()
    : 테스트 함수를 통과하는 첫 번째 배열 요소의 값을 반환

  • Array.findIndex()
    : 테스트 함수를 통과하는 첫 번째 배열 요소의 인덱스를 반환

  • 새로운 Number 속성
    : Number 객체에 EPSILON, MIN_SAFE_INTEGER, MAX_SAFE_INTEGER 속성 추가

  • 새로운 Number 메소드
    : Number 객체에 Number.isInteger(), Number.isSafeInteger() 메소드 추가

  • 새로운 글로벌 메소드
    : isFinite(), isNaN() 추가



3. Typescript




Typescript는 ES6을 기반으로 하는 라이브러리로, 자바스크립트로 변환 시켜주는 컴파일러이자 프로그래밍 언어 입니다.
정적 타입(Static Type)의 설정이 가능하며 변수의 타입을 컴파일러에게 명시적으로 지정하고, 지정하지 않는 경우에는 컴파일러가 추론할 수 있습니다. 따라서, Typescript로 작성한 코드는 아래와 같은 장점이 있습니다.

・버그 감소
・쉬운 유지 보수

  1. 자바스크립트의 대표적인 에러 3가지
    • Type Error (undefined)
    • Reference Error
    • Syntax Error

이 중 Type Error에 대응하기 용이합니다.

  • 정적으로 타입을 지정하는 경우(Typescript)
    : 타입을 체크한 후 Run (Run 이전에 타입을 검사한 후, 에러를 발생시킴)
  • 동적으로 타입을 지정하는 경우(기존 Javascript)
    : Run 이후 타입을 체크하기 때문에 에러를 뒤늦게 발견(실행 후, 동작 도중 에러가 발생되기 때문에 빈도가 잦아짐)

따라서 Typescript를 쓰는 경우에는, 기존 자바스크립트의 코드 중 아래와 같은 과정을 깔끔하게 작업해야 합니다.

  • 정의되지 않은 변수 도입 (컴파일 시간 Warning)
  • 숫자가 있는 두 문자열을 더하는 경우 (예 : “4”+ “20”= “420”)
  • 숫자 trim과 같이 허용되지 않는 작업을 수행

//Javascript
function add (a, b) {
  return a + b
} //string을 받게 되는 경우, 문자의 덧셈으로 동작하게 된다.

//Typescript
function add (a: number, b: number) {
  return a + b
}


왼쪽의 타입스크립트 코드를, 자바스크립트가 읽을 때는 오른 쪽의 코드로 읽게 됩니다.



모든 JavaScript 버그의 15 %가 TypeScript에 의해 감지(*참고: Typescript 도큐먼트)



4. Babel



웹 앱 서비스 시, 어느 버전의 브라우저에서나 어느 디바이스에서든 동일한 화면과 기능을 기대 합니다. 따라서 각 브라우저나 디바이스의 환경적 영향 및 차이를 최소한으로 하기 위한 작업을 ‘크로스 브라우징’이라 합니다.

예를 들면, 최신 Syntax의 코드를 구형 브라우저 위에서 동작 시키는 경우 동작의 성능이 저하되어 해당 기능을 없애거나 축소하는 작업을 필요로 하게 됩니다. 따라서 브라우저, 디바이스에 따라서 일관적인 코드를 제공하기가 힘들어집니다.

바벨은 이러한 어려움을 개선하기 위해 나온 코드 변환기로, 최신 코드를 브라우저의 버전에 따라 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시키는 역할을 합니다.



5. ES7 (JS 2016) ~ ES10 (JS 2019)



  • ES7 (JS 2016), ES(JS2017)
    • Array.prototype.includes: 요소가 배열에 있는지 확인
    • 비동기 지원
    • Asynkawait
      : Promise.then()보다 보다 직관적으로 비동기 함수 사용 가능


async function test() {
  try{
    const result1 = await getResult1()
    const result2 = await getREsult2(result1)
    }catch(e){
    //catch
    }
}


  • ES9 (ES2018)
    • 변수에 대한 Rest / Spread 연산자 (점 3 개 … 식별자)
    • 비동기 반복
    • Promise.prototype.finally ()


  • ES10 (ES2019)
    • Array.prototype.flat
    • Array.sort의 변경
    • Object.fromEntries




6. 정리



  • Strict mode
  • Promise
  • Object
  • Class, Interface
  • Iterator & Generator
  • Async & await 등

Javascript는 ES5이후부터 위와 같은 여러 개념이 추가되면서 현재의 형태가 되었으며,
디바이스 및 브라우저 환경의 호환 문제로 인하여 크로스 브라우징의 대응이 필요하게 되었습니다. 따라서 이러한 문제점들과 버그에 대응하기 위하여 Babel 및 Typescript 등을 적극적으로 활용하고 있습니다.