[JavaScript] 기초적인 ES6 문법들

ES6(ECMAScript 6번째 버전)

ES6란?

ES6는 ECMAScript 2015라고도 불리는 ECMAScript의 6번째 버전을 말하며, ECMAScript는 JavaScript의 표준 규격을 정의하는 언어 규격이다
이러한 ES6는 이전 버전인 ES5에 비해 많은 기능과 문법적 개선을 제공하고 있다.

ES6 문법들

1. 변수 선언

let과 const 키워드가 새로 도입되었다.

• let \
  let은 ES6에서 도입된 블록 스코프 변수 선언 키워드이다. let으로 선언된 변수는 블록 {} 내에서만 유효하며, 블록 외부에서는 접근할 수 없다. 또한, let은 호이스팅되지 않아 변수가 선언된 위치에서부터 초기화되기 전까지는 사용할 수 없다. 중복 선언은 허용되지 않는다.
• const \
  const는 ES6에서 도입된 상수 선언 키워드이다. const로 선언된 변수는 재할당이 금지되어, 선언과 동시에 초기값을 할당해야 한다. const로 선언된 변수는 블록 스코프를 가지며, 중복 선언이 허용되지 않는다. 또한, const로 선언된 객체나 배열은 변경이 불가능한 것이 아니라, 해당 변수가 가리키는 객체나 배열의 내부 내용을 변경할 수 없는 "불변 객체"이다.

// ES5
var a = 10;
if (true) {
  var a = 20; // 전역 변수
}

// ES6
let b = 10;
const c = 20; // 블록 스코프 변수

2. 화살표 함수

()=>{} 형태로 간단하게 선언할 수 있는 함수이다. 화살표 함수는 함수 내부에서 this를 바인딩할 때 유용하게 사용된다.

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

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

3. 템플릿 리터럴(Template Literals)

템플릿 리터럴은 일반적인 문자열은 작은따옴표, 큰 따옴표 대신 백틱(`)으로 감싸서 표현하는 방법이다.

1. 문자열 내부 삽입 : ${변수} 형태로 변수를 문자열에 삽입할 수 있다.

const name = "World";
const greeting = `Hello, ${name}!`;

2. 여러 줄 문자열 : 여러 줄에 걸친 문자열을 그대로 표현할 수 있다. 개행 문자(\n)를 사용하지 않고도 자유롭게 줄바꿈을 할 수 있다.

const multiLine = `
Hello
World`;
console.log(multiLine);
// 출력:
// Hello
// World

3. 표현식 평가 : ${표현식}형태로 표현식을 삽입하면 표현식이 평가되어 문자열에 포함된다.

const x = 5;
const y = 10;
const result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result); // 출력: The sum of 5 and 10 is 15.

3. 클래스 (Class)

class 키워드를 사용하여 클래스를 선언할 수 있다. 클래스 기반 객체 지향 프로그래밍을 지원하며, 생성자, 메서드, 상속 등을 사용할수 있다.

4. 프로미스 (Promise)

비동기 작업을 다루는 패턴으로, Promise 객체를 사용하여 비동기적인 작업의 성공 또는 실패를 처리할 수 있다.

5. 모듈

import와 export 키워드를 사용하여 모듈을 가져오고 내보낼 수 있다. 모듈은 코드를 여러 개의 파일로 분리하여 재사용성과 유지보수성을 향상시킨다.

정리

이 외에도 많은 기능과 문법적 개선이 포함되어 있지만 자주 사용하는 문법들 위주로 정리 해보았다.
ES6는 JavaScript 개발자에게 더욱 효율적이고 강력한 기능을 제공하며, 현대적인 JavaScript 개발을 위해서는 필수로 알아야 할 문법이다.
한번에 모든 문법을 익힐 순 없겠지만 차근차근 공부하며 프론트엔드 신입 면접에도 대비하면 좋을 것 같다.