JAVA SCRIPT

Java Script ES5와 ES6의 차이점

김덕꾸 2024. 9. 10. 17:59

AI-X 과정을 열심히 무사히 수료하고 취업 겸 기술 면접을 준비하며 공부했던 내용들을 정리해볼 계획이다.

JavaScript

JavaScript는 HTML과 CSS와 함께 사용되어 웹 페이지에 인터랙티브한 요소를 추가하는 프로그래밍 언어이다.

JS 특징

  • 동적 타이핑 (Dynamic Typing): 변수의 타입을 선언할 필요 없이 변수에 저장된 값에 따라 자동으로 데이터 타입이 결정된다.
let variable = "Hello, world!"; // 문자열로 시작
console.log(typeof variable);   // "string"

variable = 42;                  // 숫자로 변경
console.log(typeof variable);   // "number"
  • 객체 기반 (Object-Based): JavaScript는 모든 것이 객체로 표현될 수 있다. 특히 JSON(JavaScript Object Notation)이라는 데이터를 쉽게 처리할 수 있다.
let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // "Hello, Alice"
  • 프로토타입 기반 (Prototype-Based): JavaScript의 상속은 클래스 기반이 아닌 프로토타입을 통해 이루어진다. 즉 객체는 다른 객체를 상속받을 수 있으며, 모든 객체는 자신의 프로토타입 객체로부터 속성 및 메소드를 상속받는다. 이를 통해 객체 간 상속을 구현할 수 있다.
 function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

let dog = new Animal('Dog');
dog.speak(); // "Dog makes a noise."
  • 비동기 처리 (Asynchronous Processing): JavaScript는 콜백 함수, Promise, async/await 를 통해 비동기 작업을 지원한다. 비동기 처리는 웹 페이지나 애플리케이션의 응답성을 유지하면서 긴 작업을 수행하는 데 유용하다.
  • 콜백 함수 (Callback Functions)

콜백 함수는 다른 함수에 인수로 전달되어 실행되는 함수이다. JavaScript 는 기본적으로 비동기 처리를 위해 콜백 패턴을 많이 사용하는데, 특히 오래 걸리는 작업이 완료된 후 실행해야 할 작업을 지정할 때는 콜백 함수를 사용한다.

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

function logData(data) {
  console.log(data);
}

fetchData(logData);

fetchData 함수는 1초 후에 콜백 함수로 전달된 logData를 실행하면서 데이터를 출력한다.

but, 여러 개의 콜백 함수가 중첩되면 코드가 복잡해지고 가독성이 떨어지는 '콜백 지옥' 문제를 야기할 수 있어 주의해야 한다.

  • Promise

Promise는 콜백 패턴의 단점을 보완하기 위해 등장한 객체이다. Promise는 비동기 작업이 성공 혹은 실패 시의 처리 내용을 정의할 수 있어 콜백 지옥을 피할 수 있고 가독성 높은 코드를 작성할 수 있다.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data fetched');
  }, 1000);
});

promise
  .then(data => console.log(data)) // 성공 시 실행
  .catch(error => console.log(error)); // 실패 시 실행

1초 후 데이터를 성공적으로 가져오면 콘솔에 데이터를 출력하고, 실패할 경우 catch블록에서 에러를 처리할 수 있다.

  • async/await

async/await는 Promise를 더 간결하고 직관적으로 사용하기 위한 문법이다. await는 Promise가 처리될 때까지 기다리게 하며, 비동기 코드를 동기적으로 작성할 수 있게 한다. 예외 처리 또한 try/catch 블록으로 간단하게 처리 가능.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

getData 함수는 fetchData의 Promise가 완료될 때까지 기다린다. await 키워드로 인해 동기적으로 작성된 코드 같지만, 실제로는 비동기 작업을 처리하고 있음.

ES 란?

ES (ECMAScript) 는 JavaScript 의 표준 스펙이다. 즉 자바스크립트 언어가 준수해야 할 규칙 및 세부 사항, 지침이라고 할 수 있다.

뒤에 숫자는 버전을 의미하는데 ES5(2009년) ES6(2015년)에 각각 출시하였다.

ES6이후 매년 새로운 버전이 출시되고 있지만, 자바 스크립트에서 큰 전환점이 되는 두 가지 주요 버전이기에 차이점을 알아보자

ES5와 ES6의 주요 차이점

1. let과 const (변수 선언)

  • ES5 : 변수 선언 시 var만 사용함
  • ES6 : 새로운 변수 선언 키워드인 let과 const가 도입됨
    • let : 블록 스코프 변수를 선언
    • const : 상수 선언으로, 한 번 값을 할당하면 변경할 수 없음
// ES5
var name = "John";

// ES6
let age = 30;
const PI = 3.14159;

2. 화살표 함수 (Arrow Functions)

  • ES5 : 함수 선언은 일반 함수 또는 익명 함수로 작성됨
  • ES6 : 화살표 함수가 도입되면서 간결한 함수 표현 가능. 특히, 화살표 함수는 this를 바인딩하지 않아, 콜백 함수에서 this 문제를 해결할 수 있음
// ES5
var add = function(a, b) {
  return a + b;
};

// ES6
const add = (a, b) => a + b;

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

  • ES5 : 문자열을 연결할 때 + 연산자를 사용하여 여러 줄 문자열을 작성해야 함
  • ES6 : 백틱(`)을 사용한 템플릿 리터럴이 도입되어, 문자열 내에서 변수를 삽입하거나 여러 줄을 쉽게 작성 가능
// ES5
var message = "Hello, " + name + "!";

// ES6
let message = `Hello, ${name}!`;

4. 클래스 (Classes)

  • ES5 : JavaScript는 원래 클래스 기반 언어가 아니었기 때문에, 프로토타입을 사용하여 객체를 상속받고 확장함
  • ES6 : 클래스를 위한 문법이 추가되어 객체 지향 프로그래밍이 더 직관적으로 작성 가능
// ES5
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

// ES6
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
}

5. 모듈 (Modules)

  • ES5 : JavaScript는 원래 모듈 시스템을 지원하지 않으므로 require.js와 같은 외부 라이브러리를 사용해야 함
  • ES6 : import와 export 키워드를 사용하여 모듈 시스템을 지원
// ES6 모듈 예시

// person.js
export const name = "John";

// main.js
import { name } from './person';
console.log(name); // John

6. Promise

  • ES5 : 콜백 함수로 비동기 작업 처리
  • ES6 : Promise 객체가 도입되어 비동기 작업을 더욱 간단하고 직관적으로 처리할 수 있게 됨
// ES5
function fetchData(callback) {
  setTimeout(function() {
    callback('Data fetched');
  }, 1000);
}

// ES6
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data fetched'), 1000);
  });
};

fetchData().then(data => console.log(data));

7. 전개 연산자 (Spread Operator)

  • ES5 : 배열이나 객체의 값을 복사하거나 병합할 때는 concat이나 apply 등 을 사용해야 함
  • ES6 : 전개 연산자 ... 가 도입되어 배열이나 객체의 값을 쉽게 복사하고 병합할 수 있음
// ES6
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

 

저작자표시 비영리 변경금지 (새창열림)