자바스크립트의 ES6 주요 변경 사항

Let과 Const

대부분 아는 문법이기 때문에 간략하게 정리하겠습니다.

var의 한계를 극복하기 위해 let과 const가 도입되었습니다.

let은 재할당 가능한 변수를 선언할 때 사용하고, const는 재할당이 불가능한 상수를 선언할 때 사용합니다.

index.js

// ES5
var name = "박중호";
name = "김지수"; // 재할당 가능

// ES6
let city = "서울";
city = "부산"; // 재할당 가능

const country = "한국";
country = "일본"; // TypeError: Assignment to constant variable.

화살표 함수

익명 함수를 보다 간결하게 작성할 수 있도록 화살표 함수가 소개되었습니다.

또한, 화살표 함수는 자신만의 this를 생성하지 않고, 자신을 포함하는 외부 함수의 this 값을 상속받습니다.

index.js

// ES5
var add = function(x, y) {
  return x + y;
};

// ES6
const add = (x, y) => x + y;

템플릿 리터럴

동적인 문자열을 쉽게 만들기 위해 템플릿 리터럴이 도입되었습니다.

이를 사용하면 문자열 내에 변수를 삽입하거나, 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다.

index.js

const name = "중호";
const greeting = `안녕하세요, ${name}님`;
console.log(greeting); // 안녕하세요, 중호님

비구조화 할당

배열이나 객체의 속성을 쉽게 추출할 수 있게 해주는 문법입니다. 코드의 가독성을 높이고, 필요한 부분만 빠르게 얻을 수 있습니다.

index.js

const user = { name: "중호", age: 30 };
const { name, age } = user;
console.log(name); // 중호
console.log(age); // 30

Promise와 Async/Await

비동기 작업을 보다 용이하게 다룰 수 있도록 Promise가 도입되었고, 이를 더욱 쉽게 사용할 수 있도록 async/await 문법이 추가되었습니다.

index.js

// Promise 예시
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("데이터"), 1000);
  });
};

fetchData().then(data => console.log(data)); // 데이터

// Async/Await 예시
const fetchDataAsync = async () => {
  const data = await fetchData();
  console.log(data); // 데이터
}