ES6란?

ECMAScript 2015 즉 자바스크립트의 최신 버전
코드의 가독성과 유지보수성을 높이고, 현대 앱플리케이션의 요구를 반영하기 위한 여러 기능들을 제공.

1. let과 const키워드가 추가
   let-변수 선언, const-상수 선언
   이 둘다 블록 스코프를 가져서 코드 안정성이 더 높음
   변수 이전에 접근 시 undefined가 아닌 ReferenceError가 발생함

2. 화살표 함수 도입
   기존의 함수 정의 방식보다 간결하고 가독성이 좋음
   this의 바인딩을 호출 문맥과 일치시킬수도 있어 함수 내부의 혼란이 줄어듬

3. 클래스 문법 추가
   객체 지향 프로그래밍의 핵심 개념인 생성자, 상속, 메서드 오버라이딩 등 자바스크립트에서 활용할 수 있게 됨

   생성자?
   클래스 내부에 constructor 메서드를 사용해 객체를 초기화함

   • 객체가 생성될 때 자동으로 호출됨
   • 객체의 초기값을 설정하거나 초기화 작업을 수행함
   • 클래스 내에서 한번만 정의 가능

       class Person {
      constructor(name) {
        this.name = name; // 속성 초기화
      }
      sayHello() {
        console.log(`Hi, my name is ${this.name}`);
      }
     }
     const person = new Person("Alice"); // 생성자 호출
     person.sayHello(); // "Hi, my name is Alice"

상속?
extends 키워드를 사용해 클래스 상속을 구현함

• 부모 클래스의 속성과 메서드를 자식 클래스가 상속받음
• 자식 클래스에서 super키워드를 통해 부모 클래스의 생성자나 메서드에 접근 가능

  class Animal {
  constructor(name) {
   this.name = name;
  }
  eat() {
   console.log(`${this.name} is eating`);
  }
  }
  class Dog extends Animal {
  bark() {
   console.log(`${this.name} is barking`);
  }
  }
  const dog = new Dog("Buddy");
  dog.eat(); // "Buddy is eating" (부모 클래스 메서드)
  dog.bark(); // "Buddy is barking" (자식 클래스 메서드)

메서드 오버라이딩?
자식 클래스에서 부모 클래스의 메서드를 재정의할 수 있음

• 메서드 이름, 매개변수 구조는 동일해야함
• super키워드를 사용하면 부모 클래스의 메서드를 호출할 수 있음

  class Animal {
  sound() {
   console.log("Some generic animal sound");
  }
  }
  class Dog extends Animal {
  sound() {
   console.log("Bark");
  }
  }
  const animal = new Animal();
  animal.sound(); // "Some generic animal sound"
  const dog = new Dog();
  dog.sound(); // "Bark" (자식 클래스에서 재정의된 메서드 호출)

4. 템플릿 리터럴이 추가됨(``)
   문자열 내에 변수를 손쉽게 삽입할 수 있어, 기존의 문자열 연결 방식보다 가독성과 유연성이 향상됨

그 외에도 구조 분해 할당, Spread Operator, Rest Parameter, Promise 등 중요한 기능들이 추가 됨

구조분해할당
예시로 설명

const numbers = [1, 2, 3];
// 배열의 값을 변수로 분해
const [first, second, third] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
===================================
const user = { name: "Alice", age: 25 };
// 객체의 속성을 변수로 분해
const { name, age } = user;
console.log(name); // "Alice"
console.log(age); // 25

Spread Operetor
스프레드 연산자였구나 ;; 머쓱; 이것도 예시로 대체

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

Rest Parameter(나머지 매개변수)
함수 매개변수에서 남는 모든 값을 배열로 모으는 문법

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

ES6 이전 문법도 알긴 해야함
1. 코드베이스와의 호환성
이전 코드 유지보수를 위해선 ES5 이전 문법에 대한 이해가 필요함
2. 대규모 프로젝트의 경우 ES6도입을 위해 점진적인 마이그레이션이 필요한데
ES5와 ES6문법이 혼재되어 있을 수 있음
3. 구형 브라우저에서 사용하려면 폴리필이나 트랜스파일러를 활용해야하는데, 이때도 ES5이전 문법에 대한 기본적인 이해가 필요함