S? ESE? ES5/ES6?

JS의 강의를 듣다 보면 ES5와 ES6에 대하여 많이 보게 됩니다. 그리고 ES6를 기점으로 JS가 혁신적으로 개편됨과 동시에 많이 쓰이는 언어로 자리매김했다는 말을 종종 보았습니다. 그래서 ES는 뭘까?

ES?

ES란 ECMAScript의 약어(Specification의 약어)입니다. 크로스 브라우징 이슈(모든 브라우니에서브라우지에서 동일하게 동작 안 하는 이슈)를 해결하기 위해서 표준화시키고, 규격화한 것입니다. 즉 매뉴얼 또는 설명문입니다.

ES5/ES6는 ES의 버전이라고 할 수 있다!

ES5와 ES6의 차이

ES5

ES5의 주요 특징은 아래와 같습니다.

• "use strict"
• Array 함수 추가
• Object의 getter/setter
• JSON

엄격모드

JS의 "느슨한 양식모드"를 해제하기 위한 방법입니다.
기존에 암묵적으로 통과 되는 에러들을 잡아냅니다. 즉, 엄격하게 문법 검사를 하겠다!!

Array 함수

배열의 다양한 함수들을 ES5부터 지원하기 시작했습니다. forEach, map, filter, reduce, some, every 함수를 지원합니다.

Object getter/setter

객체의 데이터 접근에 접근하도록 해줍니다. 개인 변수는 같은 클래스 안에서만 접근할 수 있습니다. 그러나 get과 set이 있으면 외부 클래스도 접근이 가능해 집니다.

get은 변수값을 반환하고
set은 값을 설정합니다.
(set의 활용 공부하기)

class DTO {
	//DTO의 생성자를 생성
  constructor(name, age) {
    Name = name;
    Age = age;
  }

  get returnName() {
    return `${Name}`;
  }

  get returnAge() {
    return Age;
  }
}

//class에 값을 넣고 DTO 객체를 인스턴스 하기위해 dto변수 선언
const dto = new DTO("name", 00);

//입력된 name를 출력
console.log(dto.returnName);

JSON

속성값을 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷입니다.

주로 AJAX를 위해, 넓게는 XML을 대체하는 주요 데이터 포맷입니다.

ES6

ES6의 주요 특징은 아래와 같습니다.

• let, const
• 화살표 함수
• class
• 템플릿, 객체 리터럴
• 매개변수 초기값
• import , export 지원
• this

화살표 함수

화살표 함수는 기존 함수의 작성 방법을 간소화한 방식입니다.

• 기존방식

var introduce = function (name) {
  return `안녕하세요. 저는 ${name}입니다.`;
};

• 화살표 함수

var arrowIntroduce = (name) => {
  `안녕하세요. 저는 ${name}입니다.`;
};

class

사실 JS는 프로토타입 객체지향 언어입니다. 즉 class가 필요 없는 객체지향 언어입니다.

• 프로토타입

  //생성자포함 함수 선언
  var Person = function () {
    function Person(name) {
      this.name = name;
    }
  };
  
  //프로토타입 메서드
  Person.prototype.sayMe = function () {
    console.log(`저는 ${this.name}}`);
  };
  
  //인스턴스 생성
  var me = new Person("name");
  me.sayMe();

하지만 class 기반 언어에 익숙한 프로그래머들은 JS의 방식에 어려움을 느꼈습니다.
그래서 ES6에서 JS를 익숙하게 하기 위해 class를 도입했습니다.

• class

  // Rectangle class 생성
  let Rectangle = class {
    constructor(height, width) {
      this.height = height;
      this.width = width;
    }
  };
  console.log(Rectangle.name);
  // 출력: "Rectangle"

매개변수 초기값

기본값 함수 매개변수를 사용하면 값이 없거나 undefined가 전달될 경우 이름 붙은 매개변수를 가본값으로 초기화할 수 있습니다.

즉 매개변수의 기본값 할당을 하면 해당 변수에 값이 할당 안 됐을 때, 함수에 설정해 놓은 기본값으로 평가합니다.

//매개변수 a와 b에 기본값 1을 할당
function multiply(a, b = 1) {
  return a * b;
}

//a = 5 , b = 2
console.log(multiply(5, 2));
// expected output: 10

//a = 5 , 기본값 b = 1 할당
console.log(multiply(5));
// expected output: 5

템플릿, 객체 리터럴

객체 리터럴

객체 리터럴은 선언문에서 프로토타입 설정 foo:foo 선언을 위한 단축 표기법, 베서드 정의, super 클래스 호출 및 동적 속성 명을 지원하도록 향상되었습니다. 그에 따라 객체 리터럴 및 클래스 선언이 더 밀접해져, 객체기반 설계가 더 편리해졌습니다.

템플릿 리터럴

문법적으로 더 편하게 string을 생성할 수 있게 합니다. 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다.

import , export 지원

import를 직역하자면 수입입니다. 다시 말하면 외부 스크립트 또는 외부 모듈된 export된 함수, 객체를 가져온다는 뜻입니다. React의 맨 위에 보시면 import App from './App';가 있습니다.
이건 현재 파일에서 APP이라는 이름의 JS를 가져오겠다는 의미와 같습니다.

export의 단어의 뜻은 수출입니다.
말 그대로 현재 스크립트 또는 모듈을 외부에 가지고 가겠다는 뜻입니다.

export를 하면 import가 적힌 페이지에 현재의 스크립트를 가지고 갈 수 있습니다.

export default App; : App을 가지고 나가겠다.

ES5와 ES6의 가장 큰 차이점을 정리하자면 다음과 같습니다.

This

This는 기본적으로 메서드에 속한 객체를 구별하기 위해 쓰입니다. 하지만 JS에서는 함수의 호출 방식에 따라 this에 바인딩(식별자와 값으르 연결하는 과정) 되는 객체가 달라집니다.

함수 호출 방식	This 바인딩
일반 함수 호출	전역 객체
메서드 호츨	메서드를 호출한 객체
간접호출	첫번쨰 인수로 전달한 객체

ES5와 ES6의 차이점

ES5에 비해 ES6는 호이스팅에 차이를 두며 기존의 코드들을 짧고 깔끔하게 쓸 수 있도록 발전했습니다.

• 템플릿/객체 리터럴
• 화살표 함수
• this
• 변수 선언
• 모듈
• 클래스

모던자바스크립트 DeepDive
Classes
JavaScript,ES5 부터 근황까지
ES6 템플릿 리터럴에 대해 알아보자!!
[JavaScript] ES6 문법 정리