Published On

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

es6 must-know

Let과 Const

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

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

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

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

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

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

화살표 함수

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

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

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

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

템플릿 리터럴

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

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

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

비구조화 할당

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

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

Promise와 Async/Await

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

index.jsjavascript
// 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); // 데이터
}

이전 포스트

AJAX란 무엇인가?

다음 포스트

이벤트 위임(Event Delegation)

연관된 포스트 구경가기

1. AJAX란 무엇인가?2. 자바스크립트의 ES6 주요 변경 사항3. 이벤트 위임(Event Delegation)4. 실행 컨텍스트(Execution Context)5. 자바스크립트의 new 연산자 동작 방식6. JavaScript의 연산자 비교7. 엄격 모드(Strict Mode)8. JavaScript의 프로토타입 (Prototype) 이해하기9. Javascript에서 URL 및 URLSearchParams 사용10. Fetch web API11. 타입스크립트 주요 타입 정리12. import vs require13. JavaScript의 비동기 처리14. HTML SVG태그 분석15. JavaScript의 this 바인딩 완벽 정리16. JavaScript 배열 메서드: reduce()와 sort() 분석17. JavaScript 배열 메서드와 고차 함수 총정리
간략히