ES6 특징

JS.log

thumbnail
JS.log

thumbnail
Javascript ES6 특징
chojs28·2021년 5월 26일

1
JavaScript
post-thumbnail
ES란
ECMA Script의 약자로 ECMA International 에서 만든 Javascript 표준안.
예를 들어, Javascript ES6는 ECMA Script 6 표준을 따르는 Javascript 라고 한다.
ES 뒤의 숫자는 버전을 말하며 2015년에 발표된 ES6 부터는 ES2015와 같은 이름이 붙는다.
ex) ES7 = ES2016

Javascript ES6의 대표적인 10가지 특징
Block-Scoped Constructs Let and Const
Default Parameters
Template Literals
Muti-line Strings
Destructing Assignment
Enhanced Object Literals
Arrow Functions
Promises
Classes
Modules

1. Block-Scoped Constructs Let and Const
   var function scope, 호이스팅, 재선언 가능, 재할당 가능
   let block scope, 재선언 불가, 재할당 가능
   const block scope, 재선언 불가, 재할당 불가 (상수), 반드시 선언과 동시에 값 할당

let, const 도 실제로 호이스팅이 되지만, var와 다르게 호이스팅 후 선언, 초기화가 동시에 이루어지지 않기 때문에 ReferenceError가 발생한다.

2. Default Parameters
   함수의 파라미터 정의 부분에 default 값을 선언할 수 있다.

const foo = (a, b = 1) => {
  return a + b;
}

foo(5) // 5 + 1 = 6
3. Template Literals
Javascript 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성하는 문법
‘', “" 대신 백틱(``) 을 사용한다.
변수를 표현할 때는 ${변수} 로 표현한다.

const name = 'JS';

'My Name is' + name + '.' // 백틱을 사용하지 않은 문자열 연결
`My name is ${name}.` // My Name is JS. 

4. Muti-line Strings
   Template Literals를 이용하여 문자열에 개행을 할 수 있다.

const foo = 'Cannot use
	     Multi line' // Syntax Error (X)

const bar = `Can use
	     Multi line` // (O)

5. Destructing Assignment
   배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 Javscript 표현식
   const array = [1, 2, 3, 4, 5];
   const [a, b] = array;

// const a = 1;
// const b = 2; 와 동일

const object = {foo: 3, bar: 4};
const {foo, bar} = object;
// const foo = 3;
// const bar = 4; 와 동일

6. Enhanced Object Literals
   ES6 이전 객체 정의 방식을 개선한 문법

const key = 'value';
const myObject = {key}; // myObject = {key: 'value'}

const prop = 'foo';
const newObejct = {
  [prop]: 'hey', // 문자열을 key값으로 사용할 수 있다.
  ['b' + 'ar']: 'there'
} // newObject = {foo: 'hey', bar: 'there'}

7. Arrow Functions
   화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.
   -MDN

// 매개변수가 없는 경우
var foo = () => {console.log('foo')};
foo(); // 'foo'

// 매개변수가 하나인 경우
var foo = x => {console.log(x)};
foo('bar'); // bar

// 매개변수가 여러개인 경우
var foo = (a, b) => a + b // {}를 사용하지 않으면 return문을 사용하지 않아도 값이 return 된다.
foo(1, 2); // 3

var foo = (a, b) => {return a + b}
foo(1, 2) // 3

var foo = (a, b) => {a + b}
foo(1, 2) // undefined (return이 없으므로)
8. Promises
Javascript 비동기 처리에 사용되는 객체.
Promise 이전의 비동기 처리는 Callback 함수를 설정하는 방식으로 이루어졌다.
따라서, 비동기 처리를 연속적으로 하는경우 Callback 지옥이 발생된다.
const getData = () => {
  return new Promise((resolve, reject) => {
    $.get('url주소', function(response) {
      if (response) {
        resolve(response); // 요청에 대한 응답이 제대로 돌아오면 resolve를 호출
      }
      reject(new Error("Request is failed")); // 응답이 없으면 reject를 호출
    });
  });
}

getData().then((data) => { // 비동기 처리가 끝나면
  console.log(data) // response를 출력
}).catch((err) => {
  console.log(err) // err를 출력
})
Promise의 상태
Pending (대기) : Promise 생성 시
Fullfilled (이행) : resolve 실행 시
Rejected (실패) : reject 실행 시
9. Classes
ES6부터 Javascript도 class와 class 상속을 지원한다.
(ES6 이전에는 class 대신 생성자를 사용했다.)
// ES6 이전
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 프로토타입 메소드
Person.prototype.introduce = function() {
  return '안녕하세요. 제 이름은' + this.name + '이고, 나이는' + this.age + '입니다.';
}

var person = new Person('홍길동', 25);
console.log(person.introduce()); // 안녕하세요. 제 이름은 홍길동 이고, 나이는 25 입니다. 

// ES6
class Person {
  constructor({name, age}) { // Destructing Assignment(구조분해할당)
    this.name = name;
    this.age = age;
  }
  
  // 메소드
  introduce() {
    return `안녕하세요. 제 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`;
  }
}

const person = new Person({ name: '홍길동', age: 25 });
console.log(person.introduce()) // 안녕하세요. 제 이름은 홍길동 이고, 나이는 25 입니다.
10. Modules
Javascript의 중요한 새 기능, 또는 새 기능들의 통칭
import, export를 이용해 내보내거나 불러올 수 있다.
// my-module
// export는 import 할 때 {} 로 감싸주어야 한다.
export const member = () => { // export는 해당 모듈에서 여러개 존재 가능
  return 'use Module';
}

// export default는 import 할 때 {} 로 감싸주지 않아도 된다.
const name = (name) => `My name is ${name}.`;
export default name; // export default는 해당 모듈에서 하나만 존재
import name from "my-module";
import * as name from "my-module"; // my-module의 모든 기능을 name으로 alias
import { member } from "my-module"; // my-module의 member 라는 기능만 사용
import { member as myMember } from "my-module" // my-module의 member 기능을 myMember 라는 이름으로 사용