[JavaScript] #06 - ES6 (ECMAScript6)

ES(ECMAScript)란?

ES(ECMAScript)는 자바스크립트를 표준화 하기 위해 만들어진 ECMA-262 기술 규격에 따라 정의하고있는

표준화 된 스크립트 프로그래밍 언어를 말한다. 뒤의 숫자는 버전을 뜻하고 ES5는 2009년, ES6는 2015년애 출시되었다.

 

---

const / let

const

객체와 함께 사용할 때를 제외하고는 변경이 불가능한 변수이다. 상수로 사용한다.

예 ) react에서 특정 이벤트를 실행하는 버튼이 있거나 특정 요소를 정의하는데 const를 사용한다.

---

let

새로운 값을 받을 수도 있고 재할당 할 수도 있다.

var를 쓰지 않고 const/let을 사용하는 이유는 var의 hoisting현상을 피하기 위해서이다.

---

템플릿 리터럴 (Templete Literal)

백틱(back tick)으로 사용할 수 있고 ${} 괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.

// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;
// ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello ${str1} ${str2}`;

---

객체 리터럴 (Object Literal)

이전보다 훨씬 간결해진 코드로 객체를 선언할 수 있고 메서드에 더이상  콜론(;)이나 function을 붙이지 않아도 된다.

함수명이 겹치는 경우엔 한 번만 사용할 수 있다.

원래는 객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 밖에서 [text + 1]과 같이 선언했어야 하지만

ES6 부터는 객체 안에서 바로 속성으로 사용할 수 있다.

const myFn = function() {
  console.log('myFn');
};
const text = 'TEXT';
const obj = {
  inside() {
    console.log('객체 안에 바로 함수를 선언');
  },
  myFn,
  [text + 1]: '홍길동'
};
obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.myFn(); // 출력값: myFn
console.log(obj.TEXT1); // 출력값: 홍길동

---

화살표 함수

함수 표현식을 화살표 함수로 표현할 수도 있다. 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어

가독성 및 유지보수성이 올라갔다. 만약 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할

수 있다. 단 같이 생략해야한다. return문에서 소괄호는 사용가능하다.

// ES5
function plusFn(a, b) { 
  return a + b; 
} 
// ES6
// 함수 표현식 - 화살표 함수
const plusFn = (a, b) => {
  return a + b;
}
// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;

---

구조 분해 할당

구조 분해 할당이란 펼친다는 뜻으로 객체나 배열에 사용하며, 값을 해체한 후 개발 값을 변수에 새로 할당하는

과정을 말한다.

// 배열에서 Spread 사용
const arr = [1, 2, 3];
const [one, two, three] = arr;
one // 1
two // 2
three // 3
// 객체에서 Spread 사용
const obj = {
 firstName: '홍길',
 lastName: '동'
};
const { firstName, lastName } = obj;
firstName // 홍길
lastName // 동

---

Promise

자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한 콜백 패턴을 사용했고 결과론적으로 콜백헬을

발생시켰다. 이를 해결하기 위해 프로미스가 도입되었고 프로미스 후속처리 메서드를 이용해 에러 처리를 효과적

으로 할 수 있게 되었다.

---

Class

자바 스크립트는 프로토타입 기반의 객체 지향 언어이다. 클래스 기반의 객체 지향 프로그래밍도 할 수 있도록

Class 키워드를 도입했다. 자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해 만들어졌다.

클래스는 hoisting이 let, const 키워드 처럼  동작한다.

---

String Method(includes, startsWith, endsWith)

포함되어있는지(includes), 시작하는지(startWith), 끝나는지(endsWith) boolean타입을 return하게 해준다.

const str = 'Hello World gildong';
str.includes("gil"); // true
str.startsWith("Hello"); // true
str.endsWith("dong"); // true

---

Multi-line String

문자열이 라인을 넘어가게되면 '\n'과 덧셈 연산자를 사용했어야 했지만 백틱을 사용하게 되면서

여러줄의 문자열 관리도 편해졌다

// ES5
var str = 'asdhasfhfsahsfhfshasfhsfahsfahsfahasfh.\n' + 
'mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm.\n'
// ES6
let str = `asdhasfhfsahsfhfshasfhsfahsfahsfahasfh
mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm`;

---

Default Parameter

기존에는 초기화를 하려면 함수의 매개변수에 내부작업이 필요했으나 ES6에서는 필요 없어졌다.

// ES5
function myFn(a, b) {
  var a = a || 100;
    var b = b || 200;
  return a + b;
}
console.log(myFn(100)); // 300
// ES6
const myFn = (a = 100, b = 200) => a + b;
console.log(myFn()); // 300

---

Module

모듈이란 재사용하기 위한 코드 조각을 뜻하며 세부사항은 캡슐화 시키고 API부분만 외부에 노출시킨 코드이다.

type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다, 모듈은 모듈 스코프를 가지며 import와 export

키워드를 이용한다.

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 : https://hanamon.kr/javascript-es6-%EB%AC%B8%EB%B2%95/