ECMAScript ES와 ECMAScript ES6 비교)

1. 변수 선언

ES5:

• var를 사용하여 변수를 선언합니다. 스코프로서 기능을 가지며 호이스팅을 발생시킬 수 있습니다.

var nombre = 'Maria';

ES6:

• block 범위를 갖는 let 및 const를 도입하여 변수 처리 시 보안을 향상시킵니다.

let nombre = 'Maria';  // Variable que puede cambiar
const edad = 30;       // Constante, no puede cambiar

---

2. 화살표 기능

ES5:

• 기존 함수에는 더 많은 코드가 필요하며 이를 처리하는 것이 혼란스러울 수 있습니다.

var suma = function(a, b) {
  return a + b;
};

ES6:

• 화살표 함수는 더 간결하며 맥락을 바꾸지 않습니다.

const suma = (a, b) => a + b;

---

3. 템플릿 문자열

ES5:

• 문자열 연결은 .
연산자를 사용하여 수행됩니다.

var saludo = 'Hola ' + nombre + ', tienes ' + edad + ' años.';

ES6:

• 백틱(`)은 보간이 가능한 문자열 템플릿을 만드는 데 사용됩니다.

const saludo = `Hola ${nombre}, tienes ${edad} años.`;

---

4. 기본 매개변수

ES5:

• 기본 매개변수 지원이 없어 수동으로 구현했습니다.

function saludo(nombre) {
  nombre = nombre || 'Invitado';
  return 'Hola ' + nombre;
}

ES6:

• 기본 매개변수는 함수 시그니처에서 직접 선언됩니다.

function saludo(nombre = 'Invitado') {
  return `Hola ${nombre}`;
}

---

5. 수업

ES5:

• 수업이라는 개념이 존재하지 않았습니다. 빌더 기능과 프로토타입이 사용되었습니다.

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

Persona.prototype.saludar = function() {
  return 'Hola, soy ' + this.nombre;
};

ES6:

• 다른 프로그래밍 언어에 더 가까운 깔끔한 구문인 클래스가 도입되었습니다.

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
}

---

6. 모듈(가져오기 및 내보내기)

ES5:

• 모듈에 대한 기본 지원은 없었습니다. RequireJS, CommonJS 등의 라이브러리를 사용했습니다.

// CommonJS
var modulo = require('modulo');
module.exports = modulo;

ES6:

• 가져오기 및 내보내기 모듈에 대한 기본 지원을 소개합니다.

// Exportar
export const suma = (a, b) => a + b;

// Importar
import { suma } from './modulo';

---

7. 약속

ES5:

• 기본 약속 처리가 없었습니다. 비동기성을 처리하기 위해 콜백에 의존했기 때문에 "콜백 지옥"과 같은 문제가 발생했습니다.

function hacerAlgo(callback) {
  setTimeout(function() {
    callback('Hecho');
  }, 1000);
}

hacerAlgo(function(resultado) {
  console.log(resultado);
});

ES6:

• 프라미스는 비동기 작업을 보다 깔끔하게 처리하기 위해 도입되었습니다.

const hacerAlgo = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hecho'), 1000);
  });
};

hacerAlgo().then(resultado => console.log(resultado));

---

8. 나머지 및 스프레드 연산자

ES5:

• 배열이나 객체를 쉽게 결합하거나 분리하는 기능은 지원되지 않았습니다. 적용 등의 기법이 사용되었습니다.

function sumar(a, b, c) {
  return a + b + c;
}

var numeros = [1, 2, 3];
sumar.apply(null, numeros);

ES6:

• 인수 목록과 배열을 더 쉽게 처리할 수 있도록 rest 및 spread 연산자가 도입되었습니다.

// Spread
const numeros = [1, 2, 3];
const resultado = sumar(...numeros);

// Rest
function sumar(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}

---

9. 구조파괴

ES5:

• 객체나 배열에서 값을 추출하는 작업은 수동으로 이루어졌으며 오류가 발생하기 쉬웠습니다.

var persona = { nombre: 'Maria', edad: 30 };
var nombre = persona.nombre;
var edad = persona.edad;

ES6:

• 구조 분해는 객체와 배열에서 보다 깔끔한 방법으로 값을 추출하기 위해 도입되었습니다.

const { nombre, edad } = persona;

---

결론

ECMAScript 6(ES6)은 JavaScript 개발을 단순화하는 다양한 구문 및 기능 개선 사항을 제공하여 ECMAScript 5(ES5)에 비해 읽기 쉽고 유지 관리가 쉽고 효율적입니다.

위 내용은 ECMAScript ES와 ECMAScript ES6 비교)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!