[JavaScript] ES6에 대해 공부하자!

흩날리는추억·2024년 4월 10일

ES6 JavaScript

✔️ 들어가기 전

ECMAScript(ES)는 JavaScript의 표준화된 버전을 가리키는 용어입니다. 이번 글에서 공부할 ES6의 경우 ECMAScript 2015라고도 불리며, ECMAScript의 6번째 버전입니다.

ES5(2009년 발표)가 JavaScript에서 널리 사용되는 기능 중 상당수가 여기서 정의되었고, 많은 종류의 브라우저에서 지원됩니다.

ES6의 경우 JavaScript에 많은 혁신적인 기능을 추가했습니다. 화살표 함수, 클래스, 모듈, Promise 등이 여기에 포함됩니다.

이외에도 ES7, ES8, ES9, ES10 등 많은 버전들이 추가되었습니다.

📖 ES6 문법 정리

let과 const

ES6에서 변수를 선언하기 위한 새로운 키워드 입니다. 블록 유효 범위를 갖는 새로운 변수 선언 방법을 지원합니다.

const는 재할당 및 재선언이 불가능하기 때문에 변하지 않는 상수를 넣는 것이 좋습니다.

let은 새로운 값을 받을 수도 있고 재할당 할 수도 있습니다. 기존의 var를 사용하면 변수가 ‘호이스팅(hoisting)’되는 현상이 발생하는데 이런 현상을 최소화하기 위해 변경 가능한 변수에 대해 let 키워드로 정의합니다.

화살표 함수(Arrow Functions)

기존의 함수 정의 방식보다 간결하고 명확한 문법을 제공하며, 주로 익명 함수(anonymous function)의 작성과 콜백 함수(callback function)의 사용을 편리하게 만들어줍니다.

// 기존 함수 정의 방식
function add(a, b) {
    return a + b;
}

// 화살표 함수로 변경
const add = (a, b) => a + b;

비구조화 할당(Object and Array Destructuring)

객체나 배열에서 원하는 값만을 추출하여 변수에 할당할 수 있는 기능입니다.

객체 분해(Object Destructuring)

const person = {
    name: 'John',
    age: 30,
    country: 'USA'
};

// 객체의 속성을 변수에 할당
const { name, age, country } = person;

console.log(name); // 출력: 'John'
console.log(age); // 출력: 30
console.log(country); // 출력: 'USA'

배열 분해(Array Destructuring)

const numbers = [1, 2, 3, 4, 5];

// 배열의 요소를 변수에 할당
const [first, second, ...rest] = numbers;

console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(rest); // 출력: [3, 4, 5]

클래스(Class)

클래스는 객체의 생성을 위한 템플릿으로 속성과 메서드를 포함하고 객체 지향 프로그래밍을 지원하기 위해 사용됩니다. 이를 통해 코드를 구조화하고 재사용성을 높일 수 있습니다.

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

// 클래스를 이용하여 객체 생성
const john = new Person('김', 30);
const jane = new Person('이', 25);

john.greet();
// Hello, my name is 김 and I'm 30 years old.
jane.greet();
// Hello, my name is 이 and I'm 25 years old.

모듈(Modules)

코드를 여러 파일로 나누고 재사용 가능한 코드 조각을 정의하는데 사용됩니다. 모듈을 사용하면 코드의 구조화와 유지보수성을 향상시킬 수 있습니다.

export 내보내기
import 가져오기

Promise

Promise(프로미스)는 비동기 작업을 처리하기 위한 객체로, JavaScript의 비동기 처리 패턴 중 하나입니다. 주로 서버에서 데이터를 가져오거나 파일을 읽고 쓸 때 사용됩니다. Promise는 성공 또는 실패와 같은 비동기 작업의 최종 완료 또는 실패 결과를 나타냅니다.

템플릿 리터럴(Template Literals)

템플릿 리터럴은 백틱(backtick) 기호인 `으로 문자열을 감싸며, ${}를 사용하여 변수나 표현식을 문자열에 삽입할 수 있습니다.

const name = '장';
const age = 30;

// 템플릿 리터럴 사용
const message = `My name is ${name} and I'm ${age} years old.`;

console.log(message);
// My name is 장 and I'm 30 years old.

제너레이터(Generators)

함수의 실행을 일시적으로 중단하고 재개할 수 있는 기능을 제공하는 함수입니다. 복잡한 비동기 코드를 작성할 때 유용하게 활용될 수 있습니다.

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}

const generator = generatorFunction();

console.log(generator.next());
// { value: 1, done: false }
console.log(generator.next());
// { value: 2, done: false }
console.log(generator.next());
// { value: 3, done: false }
console.log(generator.next());
// { value: undefined, done: true }

강화된 객체 리터럴 표현 객체 함수(Enhanced Object Literals)

강화된 객체 리터럴 표현 객체 함수는 객체를 초기화할 때 보다 간결하고 편리하게 작성할 수 있도록 해줍니다

// ES5
    function getLaptop(make, model, year) {
        return {
            make: make,
            model: model,
            year: year
        }
    }
    getLaptop("Apple", "MacBook", "2015");

// ES6
    function getLaptop(make, model, year) {
        return {
          // 속성 이름 단축
            make,
            model,
            year
        }
    }
    getLaptop("Apple", "MacBook", "2015");