Javascript ES6 문법 정리

Frontend 개발자나 NodeJS개발자라면 필수인 javascript의 대격변이라고 생각하는 ES6부터 시작해 시리즈로 정리하는 글을 작성해보려고 합니다.

 

ES6에서 추가된 주요 기능과 문법은 다음과 같습니다.

1. Class(클래스)
2. Arrow Function(화살표 함수)
3. 배열 축약
4. Rest Parameter and Spread Operator
5. Template Literal
6. For... of 반복문
7. Destructuring Assignment(구조 분해 할당)
8. const and let 키워드
9. Default Parameter
10. Promise

1. Class(클래스)

클래스 문법을 사용하면 객체 지향 프로그래밍을 더 쉽게 구현할 수 있습니다.

class Person {

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }

  sayHello() {

    console.log(`안녕하세요, ${this.name}입니다.`);

  }

}

const person = new Person("홍길동", 20);

person.sayHello(); // 안녕하세요, 홍길동입니다.

2. 화살표 함수

화살표 함수는 함수를 더 간결하고 읽기 쉽게 작성할 수 있습니다.

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

3. 배열 축약

배열 축약 문법을 사용하면 배열을 더 간결하게 작성할 수 있습니다.

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

// 기존 방법
const evenNumbers = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenNumbers.push(numbers[i]);
  }
}

// ES6 방법
const evenNumbers = [number for (number of numbers) if (number % 2 === 0)];

4. Rest Parameter and Spread operator

Rest Parameter와 Spread operator은 비슷한데 Spread operator은 배열이나 객체의 값을 다른 배열이나 객체에 복사할 때 사용하고 Rest Parameter는 함수에서 사용한다고 생각하면 간단합니다.

// Rest Parameter
function test(a, b, ...rest){
  console.log(a, b) // 1, 2
  console.log(rest) // [3, 4, 5]
}

test(1, 2, 3, 4, 5)

// Spread operator
const numbers = [1, 2, 3];
const newNumbers = [...numbers];

console.log(newNumbers); // [1, 2, 3]

const objects = [{ name: '홍길동' }, { name: '김길동' }];
const newObjects = { ...objects };

console.log(newObjects); // { name: '홍길동', name: '김길동' }

5. Template Literal

Template Literal을 사용하면 문자열과 변수를 결합하여 템플릿을 더 쉽게 작성할 수 있습니다.

const name = "홍길동";
const age = 20;

// 기존 방법
const message = "안녕하세요, " + name + "입니다. 나이는 " + age + "살입니다.";

// ES6 방법
const message = `안녕하세요, ${name}입니다. 나이는 ${age}살입니다.`;

6. For... of 반복문

for... of 반복문은 배열, 객체, iterable 객체를 반복할 때 사용할 수 있습니다.

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

// 기존 방법
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// ES6 방법
for (const number of numbers) {
  console.log(number);
}

7. Destructuring Assignment(구조 분해 할당)

구조분해 할당은 배열이나 객체의 요소를 할당할 때 편리하게 사용할 수 있는 할당 연산자입니다.

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

// 기존 방법
console.log(person.name, person.age);

// ES6 방법
const { name, age } = person;
console.log(name, age); // John Doe 30

8. const and let 키워드

const 키워드를 사용하면 변수의 값을 변경할 수 없도록 할 수 있고, let 키워드를 사용하면 블록 스코프의 변수를 선언할 수 있습니다.

const name = "홍길동";

// name의 값을 변경할 수 없습니다.
// name = "이순신"; // Error

{
  let name = "김길동";
  console.log(name); // 김길동
  name = "홍길동";
  // name은 블록 내부에서만 사용할 수 있습니다.
  console.log(name); // 홍길동

}

// name은 블록 외부에서 사용할 수 없습니다.
// console.log(name); // Error

9. Default Parameter

ES6 이전에는 함수의 매개변수에 기본값을 지정할 수 없었습니다. 따라서 함수를 호출할 때 모든 매개변수에 값을 전달해야 했습니다.

// 기존 코드
function greet(name) {
  if (name === undefined) {
    name = "World";
  }

  console.log(`Hello, ${name}!`);
}

greet(); // Hello, World!
greet("John Doe"); // Hello, John Doe!

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

greet(); // Hello, World!
greet("John Doe"); // Hello, John Doe!

10. Promise

Promise는 비동기 작업을 보기 편한 코드로 처리할 수 있는 기능입니다. 

// 기존 방법
function getPage(url) {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 응답을 처리하는 코드
    } else {
      // 에러 처리 코드
    }
  };
  xhr.send();
}

getPage("https://example.com");

// ES6
const getPage = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
};

const response = getPage("https://example.com");

response.then((data) => {
  // 응답을 처리하는 코드
}, (error) => {
  // 에러 처리 코드
});