자바스크립트의 ES6

Babel 이란?

• 바벨은 자바스크립트의 트랜스파일러이다.
  • 컴파일 : 한 언어로 작성된 소스 코드를 다른 언어로 변환
  • 트랜스파일: 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환
    • 공식 페이지에서는 컴파일러라고 명시하는데 의미상은 트랜스파일러라고 하는 곳도 많아 혼용하는 곳이 많은 것 같다.
• 주로 ES6 버전을 오래된 브라우저나 환경에 맞추기 위해 이전 버전의 자바스크립트로 변환하는데 사용된다.
• 바벨이 해줄 수 있는 일은
  • 문법 변환
  • 구형 브라우저에서도 최신 브라우저에서 제공하는 기능을 사용할 수 있도록 해준다.
  • 소스 코드 변환

ES6에서 추가된 스펙

var, let, const

• var (ES6 이전에도 있던 기존 변수 정의 방식)
  • var로 선언된 변수는 함수 스코프를 가진다.
  • 변수가 선언된 함수 내에서만 유효하고, 블록 내에서 선언해도 해당 블록 외부에서 접근할 수 있다.
  • 호이스팅 문제 : var로 선언된 변수는 선언이 끌어올려지지만 선언과 동시에 할당된 값을 끌어올려지지 않는다.
  • console.log(a); // undefined var a = 10; console.log(a); // 10
• let
  • let은 블록 스코프 안에서 변수를 정의할 수 있게 해준다.
  • let도 호이스팅이 발생하지만 var과 달리 초기화되지 않은 상태에서 접근하려고 하면 ReferenceError가 발생한다.
  • console.log(b); // ReferenceError let b = 20; console.log(b); // 20
• const
  • const는 변하지 않는 변수를 지정할 때 사용한다.
  • const 역시 블록 스코프를 가진다.
  • const c = 30; c = 40; // TypeError: Assignment to constant variable. const obj = { name: "Alice" }; obj.name = "Bob"; // 객체의 프로퍼티는 변경 가능 console.log(obj.name); // "Bob"
• var과의 차이점
  • let은 재선언될 수 없지만, 업데이트 될 수 있다.
  • var 변수는 재선언되고, 업데이트 될 수 있다.
  • const는 재선언도, 업데이트도 불가능하다.

화살표 함수

• 기존의 함수 표현식에 비해 문법이 짧고 특히 this 키워드의 바인딩 방식에서 차이가 크다.

// 기존 함수 표현식
const add = function(a, b) {
    return a + b;
};

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

• function 키워드를 생략하고, 파라미터 목록 뒤에 ⇒ 기호를 사용한다.
• 암시적 반환
  • 함수 본문이 하나의 표현식인 경우 중괄호를 생략할 수 있으며 해당 표현식의 결과가 자동으로 반환된다.
• 화살표 함수는 기존 함수 표현식과 달리 this 키워드의 바인딩이 고정된다.
• 화살표 함수는 자신이 정의된 위치에서 this를 상속받고 this가 호출시점에 변경되지 않는다.

객체 구조분해 할당

• 객체의 속성을 쉽게 추출하여 변수에 할당하는 기능
• const person = { name: "Alice", age: 25, job: "Engineer" }; // 객체 구조분해 할당 const { name, age, job } = person; console.log(name); // "Alice" console.log(age); // 25 console.log(job); // "Engineer"

배열 구조분해 할당

• 배열의 요소들을 쉽게 변수에 할당한다.
• 객체 구조분해 할당과 비슷하지만 배열의 인덱스를 기준으로 요소를 할당하는 점에서 차이가 있다.
• const numbers = [1, 2, 3]; // 배열 구조분해 할당 const [a, b, c] = numbers; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3

스프레드 연산자

• 배열이나 객체의 요소를 개별 요소로 분해하거나 이를 다른 배열 또는 객체에 간단하게 복사하고 병합할 수 있는 방법을 제공한다.
  • 배열 복사
  • 배열 병합
  • 객체 복사
  • 객체 병합
  • 합수 인자 분해

for of 루프

• 이터러블 객체의 요소들을 반복할 때 사용된다.
  • 이터러블 객체는 배열, 문자열, Map, Set 등과 같이 반복 가능한 값을 가진 객체를 말한다.

  const array = [1, 2, 3, 4];
  
  for (const element of array) {
      console.log(element);
  }
  // 출력: 1, 2, 3, 4
  

  • 배열과 다르게 객체에는 사용할 수 없다.
• for…of 와 for…in의 차이점
  • of 는 배열, 문자열 등의 값을 반복한다.
  • in은 객체의 키를 반복한다.

템플릿 리터럴

• 백틱을 사용하여 문자열을 정의하는 법
• 문자열 내에서 변수를 삽입하고 여러 줄의 문자열도 처리할 수 있다.
• const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // "Hello, Alice!"

클래스

• 객체 지향 프로그래밍을 지원하는 클래스 문법을 도입
  • 프로토타입 기반 상속을 좀 더 직관적이고 깔끔하게 사용할 수 있도록 한다.
  • 생성자, 메서드, 상속 등을 지원

  class Person {
      // 생성자 메서드
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }
  
      // 클래스 메서드
      greet() {
          console.log(`Hello, my name is ${this.name}`);
      }
  }
  
  // 클래스 인스턴스 생성
  const person1 = new Person('Alice', 25);
  person1.greet(); // "Hello, my name is Alice"
  

디폴트 매개변수

• 함수의 매개변수에 기본값을 설정할 수 있다.
  • 함수 호출 시 인자 제공을 안 하면 기본값을 사용

  function greet(name = 'Guest') {
      console.log(`Hello, ${name}`);
  }
  greet(); // "Hello, Guest"
  

Promise

• 비동기 작업의 결과를 처리하기 위한 객체
• 비동기 작업의 성공과 실패를 처리할 수 있다.
  • 정리한 적 있다!
  https://asmallroom.tistory.com/14

---

출처

https://babeljs.io/docs/

https://www.w3schools.com/js/js_es6.asp