[콜럼Vue스]ES6

ES6 가 무엇인가 ?

자바스크립트의 새로운 버전임. 자바스크립트를 더 쉽게 쓰고, 효율적으로 만들기 위해 나온 표준.

원래 자바스크립트도 잘 작동했지만, ES6로 업데이트 되면서 여러 기능이 추가되고 개선된 거임 ! 

비유로 말하자면, 스마트폰 : 자바스크립트 = 소프트웨어업데이트 : ES6 

 

ES6의 핵심기능

1. let 과 const

2. 화살표 함수 (Arrow Function)

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

4. 디스트럭처링 할당 (Destructuring Assignment)

5. 클래스 (Class)

6. Promise

7. 모듈 (Modules)

 

1. let과 const

 

• let과 const는 ES6에서 도입된 새로운 변수 선언 방법임.
• 기존의 var는 함수 스코프만을 지원했지만, let과 const는 블록 스코프(block scope)를 지원하여 변수의 유효 범위를 더 명확하게 제한할 수 있음.
• scope 이 뭐임? => 변수의 가용범위를 제한하는 역할
• https://jerrycodezzz.tistory.com/57
• let: 블록 스코프를 가지는 변수. 반복문이나 조건문 등 블록 내에서만 유효하며, 중복 선언이 불가능함. 값은 변경할 수 있음.
• const: 상수를 선언하는 방법으로, 선언과 동시에 값을 할당해야 하며, 한 번 할당된 값을 변경할 수 없음. 하지만, 객체나 배열의 경우 내부 값을 변경할 수 있음.
• let은 값 변경 가능 ! const는 불가능 !!!!!!!!!

 

스코프 scope

 

 

2. 화살표 함수 (Arrow Function)

• 화살표 함수는 기존 함수 선언보다 간결한 문법으로, 특히 콜백 함수에서 유용함. 또한 화살표 함수는 this의 바인딩 방식을 기존 함수와 다르게 처리함.
• 문법 차이: 기존의 함수 표현식보다 간결하고, 중괄호와 return을 생략할 수 있음.

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

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

 

this의 차이: 화살표 함수는 상위 스코프의 this를 상속 받음. 이는 this가 예상치 못하게 변하는 문제를 해결해 줌.

https://jerrycodezzz.tistory.com/56

this

 

 

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

• 템플릿 리터럴은 문자열을 보다 간단하게 작성할 수 있는 방법임. ES6 이전에는 문자열과 변수를 합칠 때 문자열 연결(concatenation)을 사용해야 했으나, 템플릿 리터럴은 백틱(`)을 사용하여 문자열 안에서 변수를 간단히 삽입할 수 있음.
• 문법: 템플릿 리터럴에서는 ${} 구문을 사용하여 변수나 표현식을 문자열 안에 쉽게 포함시킬 수 있음.

const name = "Jerry";
const greeting = `Hello, ${name}!`; // Hello, Jerry!

4. 디스트럭처링 할당 (Destructuring Assignment)

• 디스트럭처링 할당은 배열이나 객체에서 값을 간단하게 추출하는 방법임. 이를 통해 변수 선언 시 배열이나 객체의 여러 값을 손쉽게 할당할 수 있음.
• 배열 디스트럭처링: 배열의 값을 각각의 변수에 쉽게 할당할 수 있음.

const [a, b] = [1, 2]; // a = 1, b = 2

 

객체 디스트럭처링: 객체의 프로퍼티를 분해하여 변수에 할당할 수 있음.

const person = { name: "Jerry", age: 29 };
const { name, age } = person; // name = "Jerry", age = 29

 

기본값 설정: 디스트럭처링 시 기본값을 지정할 수 있음.

const [x = 5, y = 10] = [1]; // x = 1, y = 10

 

 

장점: 디스트럭처링은 코드가 짧아지고, 객체나 배열에서 필요한 값을 쉽게 추출할 수 있어 가독성이 높아짐.

5. 클래스 (Class)

• ES6에서 객체 지향 프로그래밍(OOP)을 지원하기 위해 도입된 문법임. 기존의 프로토타입 기반 객체 지향 패턴을 보다 직관적이고 이해하기 쉽게 작성할 수 있음.
• 클래스 선언: class 키워드를 사용해 클래스를 선언함.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

상속: 클래스를 상속받아 다른 클래스를 생성할 수 있음.

class Employee extends Person {
  constructor(name, age, position) {
    super(name, age); // 부모 클래스의 생성자 호출
    this.position = position;
  }

  work() {
    return `${this.name} is working as a ${this.position}`;
  }
}

장점: 클래스 문법을 통해 더 직관적이고, 재사용 가능한 객체를 쉽게 정의할 수 있음.

6. Promise

https://jerrycodezzz.tistory.com/55

async / await

 

• Promise는 비동기 작업을 처리하기 위한 객체임. 이전에는 콜백 함수로 비동기 처리를 했으나, Promise는 비동기 작업의 흐름을 더 직관적이고 체계적으로 관리할 수 있게 해줌.
• 상태: Promise는 세 가지 상태를 가짐.
  • 대기(pending): 초기 상태, 아직 완료되지 않음.
  • 이행(fulfilled): 비동기 작업이 성공적으로 완료됨.
  • 거부(rejected): 비동기 작업이 실패함.
• 사용법: new Promise를 사용해 비동기 작업을 정의하고, then과 catch로 결과를 처리함.

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("작업 성공");
  } else {
    reject("작업 실패");
  }
});

promise
  .then(result => console.log(result)) // 성공: "작업 성공"
  .catch(error => console.error(error)); // 실패: "작업 실패"

장점: Promise를 사용하면 비동기 코드가 더 읽기 쉽고, 콜백 지옥을 방지할 수 있음.

 

7. 모듈 (Modules)

• ES6 이전에는 자바스크립트 파일을 나누고 코드를 재사용하는 데 어려움이 있었음. ES6의 모듈 시스템은 파일 간에 코드를 모듈화하고 데이터를 주고받을 수 있게 해줌.
• 모듈 내보내기(export): 다른 파일에서 사용할 수 있도록 값을 내보냄.

// 모듈에서 export
export const value = 42;
export function greet() {
  return "Hello!";
}

• 모듈 가져오기(import): 다른 모듈에서 값을 가져옴.

// 다른 파일에서 import
import { value, greet } from './module';
console.log(value); // 42
console.log(greet()); // "Hello!"

• 장점 : 모듈 시스템을 사용하면 코드가 더 구조화되고 재사용성이 높아짐. 또한, 대규모 프로젝트에서 각 기능을 분리해 관리할 수 있음