ES6에 대해 알아보자 !

 

출처 : https://www.javascripttutorial.net/es6/

 

 

 

ES6

 

ES6 (ECMAScript 6)은 자바스크립트의 최신 버전 중 하나로, 2015년에 출시되었습니다.

ES6은 기존의 자바스크립트에 몇 가지 새로운 기능을 추가하여 코드 작성을 보다 쉽고 효율적으로 만들어줍니다.

 

 

 

ES6의 주요 기능

 

let 및 const 키워드

기존의 var 키워드 대신에 let과 const 키워드를 사용하여 변수를 선언할 수 있습니다.

let은 블록 스코프 변수를, const는 상수를 선언하는 데 사용됩니다.

 

 

기존의 var 키워드를 사용하지 않는 이유는 var가 변수의 중복 선언이 가능하기 때문입니다.

var를 중복 선언 했음에도 불구하고, 또 그 아래에 중복 선언한 변수를 선언을 할 수 있습니다.

중복 선언을 하면 기존에 선언되어 있던 변수는 다른 값을 가지게 됩니다.

이러한 경우에는 그 변수를 사용하는 다양한 로직에 문제가 발생할 수 있기 때문에 지양하고 있습니다.

 

아래 예제를 통해 살펴보겠습니다.

 

 

let은 블록 범위로 변수를 선언할 수 있습니다. 하지만 재선언이 불가합니다.

만약 블록 내부에 선언되었다면 블록 외부에서 액세스가 불가합니다.

 

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

 

 

const는 상수를 선언할 수 있습니다.

상수는 값을 변경할 수 없다는 점을 제외하면 let과 유사합니다.

하지만 const는 재할당이 불가하고 선언할 때 값을 지정해야 합니다.

var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10

 

 

 

 

Arrow 함수(화살표 함수)

 

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

// ES6
const x = (x, y) => x * y;

 

화살표 함수는 간단한 구문으로 함수를 선언할 수 있도록 해주는 새로운 함수 선언 방식입니다.

화살표 함수는 this가 없기 때문에 객체 메서드를 정의하는 데 적합하지 않으며, 사용하기 전에 정의해야 합니다.

 

 

함수 표현식은 항상 상수 값이기 때문에 using이 const using보다 안전합니다.

var함수가 단일문인 경우에만 return키워드와 중괄호를 생략할 수 있습니다.

이 때문에 항상 다음과 같이 유지하는 것이 좋은 습관일 수 있습니다.

 

const x = (x, y) => { return x * y };

 

 

 

 

클래스

 

ES6에서는 클래스를 정의하여 객체 지향 프로그래밍을 보다 쉽게 구현할 수 있습니다.

 

아래 예제를 보면 Car 클래스 안에 constructor 메소드를 추가하여 속성 값을 정의하는 것을 확인할 수 있습니다.

 

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

 

 

 

 

모듈 (export, import)

 

ES6에서는 모듈을 사용하여 코드를 조직화하고 재사용 가능한 코드를 만들 수 있습니다.

 

// export 내보내기
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};

export default message;



// import 가져오기
import message from "./message.js";

 

 

 

 

Spread 및 Rest 연산자

 

Spread 연산자(...)는 배열이나 객체를 확장할 때 사용되며,

Rest 연산자(...)는 함수의 매개변수로 사용될 때 여러 인수를 배열로 받을 수 있게 해줍니다.

 

 

아래 예시를 통해 살펴보겠습니다.

 

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

 

 

... 연산자는 iterable을 함수 호출에 대한 더 많은 인수로 확장하는 데 사용할 수 있습니다.

 

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

 

 

 

 

템플릿 문자열

 

템플릿 문자열은 백틱(``)으로 감싸진 문자열로, 변수를 삽입할 수 있습니다.

 

아래 예시를 확인하면 한 줄에 백틱(``)을 사용하여 표현할 수 있는 것을 확인할 수 있습니다.

const num1 = 1;
const num2 = 2;

console.log(`${num1} + ${num2} = ${num1+num2} 입니다.`);

 

(참고) 백틱(``)은 키보드 상의 왼쪽 위에 존재하는데 물결(~) 키와 함께 있습니다.

 

 

 

 

 

Promise

 

Promise는 비동기 작업을 처리할 수 있는 객체입니다.

Promise를 사용하여 콜백 지옥(callback hell)을 피할 수 있습니다.

 

아래 문법과 사용 예제를 살펴볼까요?

 

const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

 

const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

 

 

 

 

---

 

이러한 기능들은 ES6을 사용하면 코드를 보다 간결하고 가독성이 좋게 만들어줍니다.

또한 ES6은 모던 웹 개발에서 필수적인 기술이므로, 개발자들은 이러한 기능을 숙지하고 활용하는 것이 중요합니다.