WIL 2023.04.09 ES, ES5/ES6

이번 주 배운 것들 다시 리마인드 해보고, 중요했던 키워드 ES에 대해 정리하자.

이번 주 배운 것
1. TIL 쓰는 법
2. 정규식
3. 그룹 면담 (with DevCra의 CIO 강창민 코치님 ) 을 통한 개발자 필요조건

ES란?

기본 정의 -> ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다.[2] ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.
- by 위키백과

내 정의 -> ECMA스크립트(ECMAScript, 또는 ES[1])란 마치 크로스 플랫폼이 없던 앱시장 처럼(안드로이드, IOS), 각 브러우저 마다 JS의 사용과 해석이 조금씩 달랐던 과거 시대를 해결하기 위해 표준화한 JS를 말한다.

ES5/ES6

5과 6는 ES의 버전을 나타낸다. 우리가 게임에 새로운 패치가 적용되면, 새로운 내용이나 기술이 추가 혹은 삭제 되는 것 처럼 ES도 새로운 문법이 적용되거나 사라진다. 그 중에서도 ES 5버전과 ES 6버전 사이의 큰 변화들이 많았기 때문에 둘 사이의 차이를 알아보면 좋겠다. 대충 게임의 대격변 패치라고 생각하면 편하다.

• 변수 선언의 방식

// es5
var a = 0

// es6
let a = 0 // 변수
const b = 0 // 상수

• 함수(function) 선언 방식의 변경

// es5
function plus (a,b) { return a+b; }
var plus = function(a,b) { return a+b; }

// es6
let plus = (a,b) => {return a+b}

• 문자열 처리 ( 템플릿 엔진 문자열 )

// es5
var day = '오늘은 주말'
var feel = '신난다!'
console.log(day + '너무' + feel) // '오늘은 주말 너무 신난다!'

// es6
const day = '오늘은 주말'
const feel = '신난다!'
console.log(`${day} 너무 ${feel}`) // '오늘은 주말 너무 신난다!'

• this
  ES5에서 객체 안의 메소드는 문제가 없으나, 객체 안에서 선언한 함수는 this가 선언한 객체가 아니라 window(전역)을 가르킨다. (불편)
  ES6에서 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

• 모듈 (하나의 기능 단위)
  ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
  대신에 require함수를 통해서 파일 자체를 불러와 사용할 수 는 있었다.
  ES6에서는 import/export를 통해서 모듈관리가 가능해졌다.

// es5
var slider = require(./slider.js)

// es6
import 'import to loadname' from '파일 경로' // 수입
export default 'module' // 수출 ㅋㅋ..

• Class
  ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 구현했다.
  ES6에서는 class 키워드를 사용해서 선언할 수 있다. 상속 또한 super 키워드를 통해 편하게 가능!

es5
/* 생성자 함수 */
let ES5 = function (name) {
  this.name = name;
};
/* 스태틱 메서드 */
ES5.staticMethod = function () {
  return this.name + ' 스태틱 메서드!';
};
/* 프로토타입 메서드 */
ES5.prototype.method = function () {
  return this.name + ' 프로토타입 메서드!';
};

let instance = new ES5('es5');
console.log(ES5.staticMethod());   // 'es5 스태틱 메서드!'
console.log(instance.method());    // 'es5 프로토타입 메서드!'

es6
let ES6 = class {
  /* 생성자 함수 */
  constructor (name) {
    this.name = name;
  }
  /* 스태틱 메서드 */
  static staticMethod () {
    return this.name + ' 스태틱 메서드!';
  }
  /* 프로토타입 메서드 */
  method () {
    return this.name + ' 프로토타입 메서드!';
  }
};

let instance = new ES6('es6');
console.log(ES6.staticMethod());   // 'es6 스태틱 메서드!'
console.log(instance.method());    // 'es6 프로토타입 메서드!'

es6 상속
/* 상위 클래스 */
let Rectangle = class {
  constructor (width, height) {         // 생성자 함수
    this.width = width;
    this.height = height;
  }
  getArea () {                          // 프로토타입 메서드
    return this.width * this.height;
  }
};

/* 하위 클래스 */
let Square = class extends Rectangle {  // 클래스 상속
  constructor (width) {
    super(width, width);                // super는 superClass의 constructor 실행
  }                                     // = Rectangle.call(this, width, width)
  getArea () {
    console.log(super.getArea());       // super는 SuperClass.prototype을 바라봄
  }
};

let instance = new Square(10);
instance.getArea();                     // 100