ES 버전이란?
ECMA Script의 약자이며 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다.
숩게 설명하자면 자바스크립트 표준화를 위해 만들어진 자바스크립트의 새로운 이름인 그냥 자바스크립트 버전이라고 생각하면 편하다.
ES6이란?
ECMAScript 2015의 줄임말이다.
ES버전은 매년 버전이 갱신되고 있고 ES6같은 경우는 2015년에 만들어졌고 이때 자바스크립트에 엄청난 패러다임의 변화가 있어
보통 사람들은 ES6를 기준으로 그 이전은
구버전, ES6부터는 신버전이라고도 하며 흔히들 ES6라하면 ES6 ~ 현재 ES버전까지를 통틀어 말한다.
ES6의 주요 특징과 패러다임의 변화는 다음과 같다.
1. let 및 const 키워드: let과 const는 블록 스코프 변수를 도입하여 변수의 유효 범위를 블록내로 제한하였다. 이전에는 var키워드를 사용하여 변수를 선언했을 때 함수 스코프로 제한되었다.
// 이전의 방식 (ES5)
var x = 10;
if (true) {
var x = 20;
}
console.log(x); // 20
// ES6에서의 방식
let y = 10;
if (true) {
let y = 20;
}
console.log(y); // 10
2. 화살표함수: 함수 표현을 간소화하고 this바인딩 동작을 보다 직관적으로 만든다.
// 이전의 방식 (ES5)
var add = function(a, b) {
return a + b;
};
// ES6에서의 방식
const add2 = (a, b) => a + b;
// 더 복잡한 예시
const multiply = (a, b) => {
// 여러 줄의 코드 블록도 중괄호로 감싸서 사용할 수 있음
const result = a * b;
return result;
};
// 매개변수가 하나일 경우 괄호를 생략할 수 있음
const square = x => x * x;
// 매개변수가 없을 경우 빈 괄호를 사용
const getRandomNumber = () => Math.random();
// 객체를 반환할 경우 소괄호로 감싸야 함
const createPerson = (name, age) => ({ name, age });
// 화살표 함수를 사용한 콜백 함수
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(x => x * x);
console.log(add(3, 4)); // 7
console.log(multiply(5, 6)); // 30
console.log(square(9)); // 81
console.log(getRandomNumber()); // 랜덤한 숫자
console.log(createPerson("Alice", 25)); // { name: 'Alice', age: 25 }
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
3. 템플릿 리터럴: 문자열 표현을 보다 편리하게 하기 위해 백틱을 도입했다. 변수를 문자열에 쉽게 삽입할 수 있는 기능이다.
// 이전의 방식 (ES5)
var name = "World";
console.log("Hello, " + name + "!");
// ES6에서의 방식
let name2 = "World";
console.log(`Hello, ${name2}!`);
4. 클래스: 프로토타입 기반의 객체지향 프로그래밍을 더 쉽게 하기 위해 클래스 문법이 도입되었다.
// 이전의 방식 (ES5)
function Person(name, age) {
this.name = name;
this.age = age;
}
// ES6에서의 방식
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
5. 구조 분해 할당: 객체나 배열에서 필요한 값을 추출하여 변수에 할당할 수 있게 해주는 문법이다.
// 이전의 방식 (ES5)
var person = { name: "John", age: 30 };
var name = person.name;
var age = person.age;
// ES6에서의 방식
const person = { name: "John", age: 30 };
const { name, age } = person;
6. Promise: 비동기 프로그래밍을 더 쉽게 다룰 수 있도록 Promise객체가 도입되었다.
// Promise를 사용한 비동기 예제
function fetchData() {
return new Promise((resolve, reject) => {
// 비동기 작업 수행
setTimeout(() => {
resolve("Data fetched!");
}, 2000);
});
}
fetchData().then(data => console.log(data));
7. 모듈: 모듈화를 지원하기 위해 import 및 export키워드가 도입되었다.
// 모듈 export
// math.js
export const add = (a, b) => a + b;
// 모듈 import
// main.js
import { add } from './math.js';
console.log(add(5, 3)); // 8