JavaScript - ES6

JavaScript ES6 알아보기

ES, ECMAScript 약자이며 자바스크립트 표준을 의미하는 용어이고 6, 버전(Version)을 의미합니다.

주요 문법

• 지역 변수(let), 상수(const) 키워드
• 템플릿 리터럴(Template Literal)
• 객체 리터럴(Object Literal)
• 화살표 함수(Arrow Function)
• 구조 분해 할당(Destructuring Assignment)
• 프라미스(Promise)
• 클래스(Class)
• 문자열 메서드(String Method)
• 다중 라인 문자열(Multi-Line-String)
• 기본 매개변수(Default Parameter)
• 모듈(Module)

지역 변수(let) 상수(const) 키워드

• 상수 선언 키워드 const, 블록 스코프를 가지고 있는 지역 변수 선언 키워드 let 추가 되었습니다.
• 기존 var 키워드로만 이루어진 코드보다 예측이 쉬워졌습니다.

/* ES5 */
var num1 = 1;

/* ES6 */
const PI = 3.14
let radius = 10

템플릿 리터럴(Template Literal)

${} 이용하여 자바스크립트 표현식 사용이 가능합니다.

/* ES5 */
var strA = "A";
var strB = "B";
var strC = strA + strB + "C";
/* ES6 */
let strA = "A";
let strB = "B";
let strC =  `${strA}, ${strB}, C`;

객체 리터럴(Object Literal)

• 객체를 이전보다 간결하게 선언할 수 있습니다.
• 객체안에서 프로퍼티를 동적으로 생성할 수 있습니다.

const func = function () {
  console.log("FUNC");
};

const text1 = "ES";
const text2 = "ES";

/* ES6 */
const obj = {
  // 메서드에 콜론이나 function을 붙이지 않아도 됩니다.
  inside() {
    console.log("객체 안 함수!");
  },
  func,
  // 객체 내부에서 프로퍼티를 동적으로 생성할 수 있습니다.
  [text1 + 6]: "최신 버전",
};

obj.inside();
obj.func();
/* ES5 */
// 객체 외부에서만 프로퍼티를 동적으로 생성할 수 있습니다.
obj[text2 + 5] = "이전 버전";

console.log(obj.ES5);
console.log(obj.ES6);

화살표 함수(Arrow Function)

• 함수 표현식을 화살표 함수(람다식)로 표현할 수 있습니다.
• 함수를 간결하게 표현할 수 있어 가독성과 유지 보수성이 개선되었습니다.

/* ES5 */
function printLog(logs) {
  return console.log(logs);
}

/* ES6 */
const writeLog = (logs) => {
  return console.log(logs);
};

const writeLogs = (logs) => console.log(logs);

구조 분해 할당(Destructuring Assignment)

• 값을 해체 한 후, 개별 값을 변수에 새로 할당하는 과정입니다.

/* 배열 */
const array = [1, 2, 3, 4, 5];
const [one, two, three, four, five] = array;

console.log(one);
console.log(two);
console.log(three);
console.log(four);
console.log(five);

/* 객체 */
const objCollections = {
  washer: "트롬 세탁기",
  dryer: "트롬 건조기",
  induction: "디오스 인덕션",
};

const { washer, dryer, induction } = objCollections;

console.log(washer, dryer, induction);

프라미스(Promise)

• 비동기 처리를 위해 콜백 함수를 사용한 콜백 패턴이 발생시킨 콜백 지옥을 해결하기위해 도입되었습니다.

클래스(Class)

• 프로토타입 객체 지향인 자바스크립트를 클래스 기반 객체 지향으로 사용하려는 시도가 많아지면 공식적으로 클래스 키워드가 도입되어 지원하게 되었습니다.

문자열 메서드(String Method)

• 포함되어있는지(includes)?
• 시작하는지(startsWith)?
• 끝나는지(endsWith)?

const str = "Hello World JavaScript !";

console.log(str.includes("JavaScript"));
console.log(str.startsWith("Hello"));
console.log(str.endsWith("!"));

다중 라인 문자열(Multi-Line-String)

• 문자열 라인 변경을 위해 \n과 + 연산자가 필요했지만 백틱을 사용하면서 편리해졌습니다.

/* ES5 */
var LongString =
  "3.14159265358979323846264338327950288419716939\n" +
  "9375105820974944592307816406286208998628034825342117067982148";

/* ES6 */
let LongString = `3.14159265358979323846264338327950288419716939
9375105820974944592307816406286208998628034825342117067982148`;

기본 매개변수(Default-Parameter)

• 함수의 매개변수 초기화를 위해 추가적인 작업이 필요 없어졌습니다.

    /* ES5 */
    function Func(a, b){
        var a = a || 100;
        var b = a || 200;
        return a + b
    }
    console.log(Func)

    /* ES6 */
    const InitFunc = (a=100,b=200) => a + b
    console.log(InitFunc)

모듈(Module)

• 재사용하기 위한 코드를 모듈이라고 합니다.
• API만 노출하고 세부사항은 캡슐화하여 사용합니다.
• 확장자를 mjs로 수정하여 사용합니다.
• import, export 키워드를 이용하여 사용합니다.

<script type="module" src="lib.mjs"></script>