JavaScript ES5 vs ES6: Co się zmieniło i jak to wykorzystać?

JavaScript to jeden z najpopularniejszych języków programowania, który zdominował rozwój aplikacji internetowych. Od jego początków, język ten przeszedł wiele zmian, które usprawniły pisanie kodu i uczyniły go bardziej efektywnym. Jednym z najważniejszych przełomów w historii JavaScriptu były zmiany, które przyniosły wersje ES5 i ES6. W tym artykule przyjrzymy się różnicom między JavaScript ES5 i ES6 oraz pokażemy, jak wykorzystać te zmiany w praktyce.

Czym są ES5 i ES6?

Zanim przejdziemy do szczegółowych różnic, warto wyjaśnić, czym dokładnie są ES5 i ES6. Obie te wersje odnoszą się do tzw. ECMAScript, standardu, który reguluje zachowanie języków programowania takich jak JavaScript. Każda wersja ECMAScript wprowadza nowe funkcje, które poprawiają wydajność i ułatwiają pisanie kodu.

- ES5 (ECMAScript 5) został wprowadzony w 2009 roku. Był to moment, kiedy JavaScript zaczął zyskiwać dużą popularność i stał się bardziej rozbudowanym językiem. ES5 wprowadził między innymi takie funkcje jak try-catch, nowe metody dla tablic oraz lepsze wsparcie dla obiektów.

- ES6 (ECMAScript 6), znany również jako ECMAScript 2015, wprowadził rewolucyjne zmiany, które sprawiły, że kod stał się bardziej nowoczesny i zwięzły. ES6 poprawił składnię JavaScriptu, dodając funkcje takie jak klasy, funkcje strzałkowe i inne ulepszenia, które znacząco zwiększyły jego możliwości.

Główne różnice między ES5 i ES6

Różnice między ES5 i ES6 są znaczące i dotyczą zarówno składni, jak i funkcjonalności. Poniżej przedstawiamy najważniejsze zmiany, które warto poznać.

1. Deklaracja zmiennych: var vs let i const

W ES5 do deklarowania zmiennych używamy słowa kluczowego var. W wersji ES6 wprowadzono dwa nowe słowa kluczowe: let i const. Oto różnice:

• var: Zmienna zadeklarowana za pomocą var ma zasięg funkcji lub globalny. Oznacza to, że zmienna może zostać przypadkowo nadpisana lub zmodyfikowana w różnych częściach kodu.
• let: Zmienna zadeklarowana za pomocą let ma zasięg blokowy (np. wewnątrz pętli czy funkcji). Dzięki temu jest bardziej przewidywalna i nie zmienia wartości poza blokiem, w którym została zadeklarowana.
• const: Zmienna zadeklarowana z const nie może zostać ponownie przypisana. Jest to użyteczne w przypadku, gdy nie chcemy, aby wartość zmiennej się zmieniała po jej przypisaniu.

Przykład w ES5:

var x = 5;

Przykład w ES6:

let x = 5;
const y = 10;

2. Funkcje strzałkowe (Arrow Functions)

W ES6 pojawiły się funkcje strzałkowe, które są zwięzłą składnią do tworzenia funkcji. Dzięki nim możemy pisać funkcje w sposób bardziej czytelny, unikając zbędnych słów kluczowych.

Przykład w ES5:

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

Przykład w ES6 (funkcja strzałkowa):

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

Funkcje strzałkowe są szczególnie użyteczne, gdy piszemy funkcje anonimowe, np. w funkcjach wyższego rzędu.

3. Klasy

W ES6 pojawiły się klasy, które umożliwiają łatwiejsze tworzenie obiektów i zarządzanie dziedziczeniem. Wcześniej, w ES5, do tworzenia obiektów używaliśmy funkcji konstruktorskich. Klasy w ES6 są bardziej zbliżone do klasycznych klas w innych językach programowania, takich jak Java czy C++.

Przykład w ES5:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log('Hello ' + this.name);
};

Przykład w ES6:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log('Hello ' + this.name);
  }
}

Zauważ, jak składnia w ES6 jest prostsza i bardziej przejrzysta.

4. Szablony tekstowe (Template Literals)

W ES5, aby tworzyć dynamiczne ciągi tekstowe, musieliśmy łączyć tekst za pomocą operatora +, co bywało dość nieporęczne. W ES6 wprowadzono szablony tekstowe (template literals), które umożliwiają łatwe wstawianie zmiennych do tekstów.

Przykład w ES5:

var name = "Alice";
var greeting = "Hello, " + name + "!";

Przykład w ES6:

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

Szablony tekstowe są bardziej czytelne i pozwalają na łatwiejsze zarządzanie tekstami z dynamicznymi zmiennymi.

5. Moduły

ES6 wprowadza wsparcie dla modułów, które pozwalają na lepszą organizację kodu. Dzięki modułom możemy dzielić nasz kod na mniejsze, łatwiejsze do zarządzania pliki.

Przykład w ES6:

// module.js
export const greet = () => {
  console.log("Hello");
};

// app.js
import { greet } from './module';
greet();

W ES5 nie mieliśmy takiej wbudowanej funkcjonalności i musieliśmy używać różnych technik (np. CommonJS, RequireJS) do implementacji modułów.

6. Promisy (Promises)

ES6 wprowadza także promisy, które ułatwiają pracę z asynchronicznymi operacjami. Promisy pozwalają na łatwiejsze zarządzanie kodem, który korzysta z funkcji asynchronicznych (np. zapytań HTTP).

Przykład w ES5:

function getData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}
getData(function(data) {
  console.log(data);
});

Przykład w ES6 (promisa):

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}
getData().then(data => console.log(data));

Podsumowanie

JavaScript w wersji ES5 był już bardzo potężnym językiem, ale ES6 wprowadził ogromne usprawnienia, które sprawiły, że programowanie w JavaScript stało się jeszcze bardziej przyjemne i efektywne. Funkcje takie jak funkcje strzałkowe, klasy, moduły czy promisy zrewolucjonizowały sposób, w jaki piszemy aplikacje webowe. Zdecydowanie warto przejść na wersję ES6 i wykorzystać wszystkie te udogodnienia. Dzięki nim Twój kod stanie się bardziej zwięzły, czytelny i łatwiejszy w utrzymaniu!