[Javascript] ES6란 무엇인가(ES5와의 차이)

ECMAScript 6(ES6)

ECMAScript 는 JavaScript 프로그래밍 언어가 사용하는 표준
2015년에 출시되었기 때문에 ECMAScript 2015로도 알려져 있음 (ES5는 2009년)

ES5 와 ES6의 차이

• 변수
  재선언, 재할당이 모두 가능해 문제를 야기하는 var에서 let과 const가 추가됨
• 객체 정의
  키와 변수 이름이 같을 때 객체를 정의하는 쉬운 방법을 제공

var fullName = 'John Moore';
var age = 25;
var gender = 'Male';
var city = 'London'
// ES5
var student = { fullName: fullName, age: age, gender: gender, city: city };
// ES6
var student = { fullName, age, gender, city };

• 객체 병합
  객체 병합을 위해 스프레드 연산자(…)를 도입

var target = { firstName: 'John', age: 25 }
var source = { fullName: 'John Moore', gender: 'Male', city: 'London' }
//ES5
var updatedTarget = Object.assign(target, source); //changes the target variable
//ES6
var updatedTarget = { ...target, ...source};

• 객체 분해
  ES5에서는 객체가 수동으로 하나씩 추출되지만 ES6는 한 줄의 코드로 추출

var student = { fullName: 'John Moore', age: 25, gender: 'Male', city: 'London' };
//ES5
var fullName = student.fullName;
var age = student.age;
var gender = student.gender;
var city = student.city;
//ES6
var { fullName, age, gender, city } = student;

• 탬플릿 리터럴

var fullName = 'John Moore';
var age = 25;
var gender = 'Male';
var city = 'London'
//ES5
var intro = 'Hello, I am ' + fullName + '. I am ' + age + ' years old ' + gender + ' student from ' + city + '.';
//ES6
var intro = `Hello, I am ${fullName}. I am ${age} years old ${gender} student from ${city}.`;

• 화살표 함수

//ES5
function sayHello(name) {
 console.log('Hello, ' + name);
}
//ES6
const sayHello = (name) => {
 console.log(`Hello, ${name}`);
}
const sayHello = name => console.log(`Hello, ${name}`); //You can ignore parenthesis, if the function contains a single parameter and only one statement

• 모듈 import / export

//ES5
var App = require('./App');
//ES6
import App from './App';
import { Header, Sticky } from '@primer/components'; //child modules
var Student = { fullName: 'John Moore', age: 25, gender: 'Male', city: 'London' };


//ES5
module.exports = Student;
//ES6
export default Student;
export const fullName = 'John Moore'; //child variables
export const age = 25;