모든 JavaScript 개발자가 알아야 할 ES6 기능들

재웅·2023년 5월 31일
0

오늘의 정리

목록 보기
51/52

ES6(ECMAScript 2015)은 JavaScript의 다음 버전으로, 많은 유용한 기능들을 도입. 이를 알아두면 코드를 더 간결하고 효율적으로 작성할 수 있다. 아래는 ES6의 중요한 기능

1. 화살표 함수(Arrow Functions)

화살표 함수는 함수를 더 간결하게 작성

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

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

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

템플릿 리터럴을 사용하면 문자열을 보다 쉽게 작성

const name = 'John';
const greeting = `Hello, ${name}!`;

3. 디스트럭처링(Destructuring)

배열이나 객체의 요소를 쉽게 추출

// 배열 디스트럭처링
const [first, second] = [1, 2];

// 객체 디스트럭처링
const { name, age } = { name: 'John', age: 30 };

4. 확장된 객체 리터럴(Enhanced Object Literals)

객체를 좀 더 간결하게 작성

const name = 'John';
const age = 30;

const person = { name, age };

5. 클래스(Class)

클래스를 사용하여 객체를 생성

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}!`;
  }
}

const john = new Person('John');
console.log(john.greet());

  1. 확장된 매개변수와 기본 매개변수(Extended Parameters & Default Parameters)

매개변수를 더 유연하게 다룸

// 나머지 매개변수
function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

// 기본 매개변수
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
profile
오늘의 정리

0개의 댓글