[Javascript] Javsacript ES6 주요 특징

ES6 주요 특징

• class 전격 지원
• let, const 문법
• 화살표 함수(Arrow Function)
• Modules
• Promise
• 비구조화 할당(Destructuring Assignment)
• 템플릿 리터럴(Template Literals)
• 매개변수 기본값 설정

---

1. class 전격지원

기존의 Javascript는 다른 객체지향 언어와는 달리 prototype을 기반으로 class를 묘사했는데, es6 문법에서는 

new라는 키워드로 class 생성이 가능하다.

class Cat {
   // constructor
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`Hi! ${this.name}`);
  }
}

const dd = new Cat("DD");
dd.sayHi(); // Hi DD

2. let, const 문법

function scope를 가진 기존의 var 키워드 외에 block scope를 가지는 let, const 키워드가 등장했다.

function running() {
  let kim = "A";
  let hun = "B";
  const jim = "F";
  
  console.log(kim, hun, jim);
  
  {
    let c = "C";
    let d = "D";
    const e = "E";
    console.log(d)
  }
  
  console.log(c); // C --> var는 함수레벨 스코프라 가능
  console.log(d); // d is not defined == d는 불러올 수 없다.
  console.log(e); // e is not defined
  // --> d, e 는 let, const로 선언되었고, 선언된 블록을 벗어났기 때문에 에러가 발생!!
  
}

running()

3. 화살표 함수(Arrow Function)

• 화살표 함수는 익명 함수로, let, const 선언 키워드로 이름을 부여할 수 있다.
• 화살표 함수에서 this의 의미
  일반함수에서는 호출에 따라 this가 동적으로 결정된다.
  화살표 함수는 선언될 때, this가 선언된 함수의 상위 스코프에 바인딩 되고 화살표 함수는 
  그 어떤 경우에도 this를 결정하지 않는다.

const add = function(x,y) {
    return x + y;
  // 함수 표현식

}

const add = (x, y) => x + y // 화살표 함수

4. Modules

모듈: 재사용 가능한 코드조각

• 파일 단위의 모듈 스코프를 지원한다.
• import로 모듈 불러오기가 가능하다.
• export로 모듈 내보내기가 가능하다.

// module_01.js
export var hello = "world";

// module_02.js
export default function greeting(name) {
  return `hello, ${name}!`
}

// app.js
import {hello} from './module_01.js'
// 비구조화 할당으로 가져오기
import greeting from './module_02.js'
/* 하나의 개체가 있는 파일에서 export default를 하면 
중괄호 없이 가져올 수 있다.*/

5. Promise

순차적이지 않은 비동기 함수의 실행을 동기적으로 진행할 수 있게 지원하는 기능

 

프로미스의 3가지 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되 프로미스가 결과 값을 반환해준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

setTimeout(function() {
   console.log('Yes!')
}, 1000) 
// 비동기 코드

let waitTime = new Promise(function(resolve, reject) {
   setTimeout(resolve, 1000)
}).then(function() {
   console.log("Yay!')
}) // Promise를 이용한 비동기 코드

6. 비구조화 할당

객체나 배열

function reset(a , b = 1) {
   return a + b;
} // 매개변수 b가 주어지지 않을 경우 초기값 1로 설정

console.log(add(5, 3));
// 8

console.log(add(5));
// 6

에서 속성이나 요소를 꺼내올 때 사용할 수 있다.

let obj = {p: 42, q: true};
let {p, q} = obj;

console.log(p); // 42
console.log(q); // true

7. 템플릿 리터럴 (Template Literals)

템플릿 리터럴은 백틱(``)을 이용해 내장된 표현식을 허용하는 문자열 리터럴이다. 템플릿 리터럴은 또한 
placeholder를 사용해 표현식을 넣을 수 있고, 이는 $와 중괄호 (${expression})로 표기할 수 있다.

let t = "template";
let l = "literals";

console.log(`This is ${t} ${l}.`)
// Template Literals 방식

8. 매개변수 기본값 설정

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 

매개변수를 기본값으로 초기화 시킬 수 있다.

function add(a, b = 1) {
  return a + b;
}// 매개변수 b가 주어지지 않을 경우 초기값을 1로 설정한다.

console.log(add(5, 3));
// 8

console.log(add(5));
// 6

---

참고 링크

Javascript ES6 주요 특징