본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크
Front-end/Javascript

[Javascript]ECMAScript6(ES6)에 추가된 문법

by 빽짱구 2023. 3. 20.
반응형

ES6 (ECMAScript 2015)은 ECMAScript 언어의 6번째 버전입니다. ES6는 많은 새로운 문법과 기능을 도입하여 JavaScript를 더욱 강력하고 유연한 언어로 만들었습니다. ES6에 추가된 주요 문법 몇 가지를 살펴보겠습니다.

  1. let, const 키워드: 기존 var 키워드 대신에 let과 const 키워드가 추가되었습니다. let은 블록 스코프 변수를 선언할 때 사용하며, const는 상수를 선언할 때 사용합니다.
    let x = 10;
    x = 20; // 가능
    
    const y = 10;
    y = 20; // 불가능
  2. 화살표 함수: 화살표 함수는 함수를 더 간결하게 작성할 수 있도록 해줍니다. 이전에는 함수를 선언할 때 function 키워드를 사용해야 했지만, 화살표 함수에서는 이 키워드를 생략할 수 있습니다.
    const add = (a, b) => a + b;
  3. 템플릿 리터럴: 템플릿 리터럴은 문자열을 더욱 편리하게 작성할 수 있도록 해줍니다. 템플릿 리터럴에서는 문자열을 백틱(`)으로 감싸고, 변수나 표현식은 ${} 안에 넣어 사용합니다.
    const name = 'Alice';
    const greeting = `Hello, ${name}!`;
  4. 클래스: ES6에서는 클래스를 정의할 수 있습니다. 클래스는 객체 지향 프로그래밍에서 흔히 사용되며, 객체의 속성과 메서드를 정의하는 데 사용됩니다.
    class Animal {
      constructor(name) {
        this.name = name;
      }
    
      speak() {
        console.log(`${this.name} makes a noise.`);
      }
    }
    
    class Dog extends Animal {
      constructor(name) {
        super(name);
      }
    
      speak() {
        console.log(`${this.name} barks.`);
      }
    }
    
    const dog = new Dog('Rufus');
    dog.speak();
  5. 모듈: 모듈은 코드를 모듈화하여 코드의 재사용성을 높이는 데 사용됩니다. ES6에서는 모듈을 정의하는 문법이 추가되었습니다.
    // module1.js
    export const add = (a, b) => a + b;
    
    // module2.js
    import { add } from './module1.js';
    console.log(add(2, 3)); // 5
  6. 프로미스: 프로미스는 비동기 작업을 처리할 때 사용됩니다. 이전에는 콜백 함수를 사용하여 비동기 작업을 처리했지만, 프로미스를 사용하면 더욱 간결하고 효율적인 코드를 작성할 수 있습니다.
    const fetchUserData = () => {
      return new Promise((resolve, reject) => {
        fetch('https://api.example.com/users')
          .then(response => response.json())
          .then(data => resolve(data))
          .catch(error => reject(error));
      });
    };
    
  7. for...of 반복문: for...of 반복문은 배열이나 이터러블 객체를 순회하는 데 사용됩니다. 이전에는 for...in 반복문을 사용했지만, 이 반복문은 객체의 속성을 순회할 때 사용하며 배열의 순서를 보장하지 않습니다.
    const fruits = ['apple', 'banana', 'orange'];
    for (const fruit of fruits) {
      console.log(fruit);
    }
    
  8. 디폴트 매개변수: 디폴트 매개변수는 함수의 매개변수에 기본 값을 지정하는 데 사용됩니다. 이전에는 매개변수에 값을 전달하지 않으면 undefined가 할당되었지만, ES6에서는 디폴트 값을 지정할 수 있습니다.
    const greet = (name = 'Anonymous') => {
      console.log(`Hello, ${name}!`);
    };
    
    greet(); // Hello, Anonymous!
    greet('Bob'); // Hello, Bob!
    
  9. 전개 연산자: 전개 연산자는 배열이나 객체를 펼쳐서 함수의 인수로 전달하는 데 사용됩니다. 전개 연산자를 사용하면 코드를 더욱 간결하고 가독성 있게 작성할 수 있습니다.
    const numbers = [1, 2, 3];
    const sum = (a, b, c) => a + b + c;
    
    console.log(sum(...numbers)); // 6
  10. 객체 리터럴 확장
    const name = 'Alice';
    const age = 30;
    const person = { name, age };
    
    console.log(person); // { name: 'Alice', age: 30 }
    

이외에도 ES6에는 많은 다른 새로운 문법이 있습니다. 이러한 기능들은 JavaScript를 더욱 강력하고 유연한 언어로 만들어주며, 개발자들이 코드를 더욱 효율적으로 작성할 수 있도록 도와줍니다.

태그

,

댓글0[댓글정책]