[JavaScript] ES6란?

ES6란 
ES6(ECMAScript 6), 또는 ECMAScript 2015라고도 불리며, 자바스크립트의 주요 업그레이드 버전이다. ES6는 자바스크립트의 기능을 대폭 확장하면서 코드 작성이 더 쉬워지고, 효율적으로 바뀌게 만든 업데이트이다. 

 

뭐가 업데이트가 돼었는지 하나씩 알아보겠다. 

1. let과 const

var vs. let vs. const

• var: 전통적인 변수 선언 방식이지만, 블록 스코프를 지원하지 않아서 변수의 범위를 제어하기 어려우며, 함수 스코프이다.
• let: ES6에서 새로 도입된 변수 선언 방식이다. let은 블록 스코프를 지원하여 if, for, while 같은 블록 내부에서만 변수가 유효하다.
• const: 상수 선언 방식이며, 한 번 값이 할당되면 그 값을 변경할 수 없다. 마찬가지로 블록 스코프를 지원한다.

let a = 10;
a = 20; // 가능

const b = 30;
b = 40; // 오류 발생 - const로 선언된 변수는 값을 변경할 수 없음

 

2. 화살표 함수(Arrow Functions)

ES6에서 도입된 화살표 함수는 기존의 함수 선언 방식을 간결하게 만드는 기능이다.

전통적인 함수와 화살표 함수를 한번 알아보자.

 

아래는 전통적인 함수이다.

function add(a, b) {
  return a + b;
}

 

아래는 화살표 함수이다.

const add = (a, b) => a + b;

 

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

ES6에서는 문자열을 다루기 더 쉽게 만들기 위해 템플릿 리터럴이라는 새로운 방식이 도입되었다. 이를 사용하면 복잡한 문자열을 더 간단하게 작성할 수 있다.

전통적인 문자열 결합과 템플릿 리터럴을 사용한 문자열을 비교해보자.

 

아래는 전통적인 문자열 결합이다.

const name = "Kim";
const greeting = "Hello, " + name + "!";

 

아래는 템플릿 리터럴을 사용한 문자열.

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

 

4.,디스트럭처링 할당 (Destructuring Assignment)

디스트럭처링은 배열이나 객체에서 값을 간편하게 추출할 수 있도록 하는 기능이다.

배열 디스트럭처링과 객체 디스트럭처링을 알아보자.

 

아래는 배열 디스트럭처링 이다.

const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first); // 1
console.log(second); // 2

 

아래는 객체 디스트럭처링이다.

const person = { name: "Kim", age: 25 };
const { name, age } = person;
console.log(name); // Kim
console.log(age); // 25

 

5. 기본 매개변수(Default Parameters)

함수에 전달된 인자가 없을 때 기본값을 설정할 수 있으며, ES6 이전에는 조건문을 통해 기본값을 설정했지만, ES6 이후에는 함수 정의 시 기본값을 직접 설정할 수 있다.

function greet(name = "Kim") {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Kim"); // Hello, Kim!

 

6. 스프레드 연산자 (Spread Operator) 및 나머지 매개변수(Rest Parameters)

스프레드 연산자는 배열이나 객체를 펼칠때 사용됀다. 

나머지 매개변수는 함수가 임의의 인자를 받을 수 있도록 해준다.

 

아래는 스프레드 연산자이다.

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5]; 
console.log(array2); // [1, 2, 3, 4, 5]

 

아래는 나머지 매개변수 이다.

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr);
}
console.log(sum(1, 2, 3)); // 6

 

7. 클래스 (Classes)

ES6에서는 객체지향 프로그래밍의 주요 개념인 클래스가 도입되었으며, 자바스크립트는 여전히 프로토타입 기반 언어이지만, 클래스 문법 덕분에 코드가 더 읽기 쉬워졌다.

 

이렇게 객체지향 스타일로 코드를 더 쉽게 작성 할 수 있다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const kim = new Person("Kim", 25);
kim.greet(); // Hello, my name is Kim.

 

8. 모듈 (Modules)

ES6 이전에는 자바스크립트에서 모듈을 구현하기 위해 다양한 패턴들이 사용되었었는데, ES6에서는 모듈 시스템이 공식적으로 도입되었다. 

 

아래는 모듈 내보내기(export)이다.

// math.js
export function add(a, b) {
  return a + b;
}

 

아래는 모듈 가져오기(import)이다.

// main.js
import { add } from './math.js';
console.log(add(1, 2)); // 3

 

9. 프라미스 (Promises)

ES6 이전에는 비동기 코드를 처리하기 위해 콜백을 사용해야 했다. 하지만 콜백 패턴은 코드가 복잡해질수록 가독성이 떨어지는 단점이 있어서 이를 보완하고자 ES6에서는 프라미스(Promise)가 도입되어 비동기 코드 처리를 더 명확하고 간결하게 만들었다.

 

아래는 예시 코드이다. 비동기 작업을 직관적이고 간결하게 처리 할 수 있다.

const fetchDataInfo = new Promise((resolve, reject) => {
  // 비동기 작업
  const success = true;
  if (success) {
    resolve("Data fetched");
  } else {
    reject("Error");
  }
});

fetchDataInfo
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

10. 심볼 (Symbols)

ES6는 심볼(Symbol) 이라는 새로운 기본 데이터 타입을 도입했다. 심볼은 고유하고 변경 불가능한 값으로, 주로 객체의 프로퍼티 키로 사용된다.

const symbol1 = Symbol('test');
const symbol2 = Symbol('test');

console.log(symbol1 === symbol2); // false

 

ES6는 자바스크립트에 변화를 가져왔으며, 이로 인해 코드 작성이 더 쉽고 간결해졌으며, let과 const를 사용한 변수 선언, 화살표 함수, 클래스, 모듈, 프라미스 등의 기능은 자바스크립트의 가독성과 유지보수성을 대폭 개선시켰다. ES6의 주요 기능들을 이해하고 활용하면 좋을 거 같아서 ES6의 대해 알아보았다.

 

 

2024.08.28 - [JavaScript] - [JavaScript] const, var , let 변수 선언 차이점

[JavaScript] const, var , let 변수 선언 차이점

2024.08.26 - [JavaScript] - [JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

[JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?