Javascript ES6 주요 특징

zne·2021년 7월 2일
1
post-thumbnail

es6 주요 특징

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

1. Class 전격지원

기존의 자바스크립트는 다른 객체지향 언어와는 달리 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 run() {
  var a = "A";
  let b = "B";
  const f = "F";

  console.log(a, b, f);// A B F

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

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('Yay!')
}, 1000)//비동기 코드
var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Yay!')
})//promise를 사용한 비동기 코드

6. 비구조화 할당

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


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

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

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

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

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

console.log(`This is ${t} ${l}.`) 
//This is 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

Reference

ES6 (ES2015) 의 특징들
개발자가 필히 알아야 할 ES6 10가지 기능
Javascript 기초 - ES 6 대격변의 시대
Top 10 ES6 Features Every Busy JavaScript Developer Must Know
MDN

0개의 댓글