Principais Recursos Lançados com o ECMA2015 - ES6

11-05-2023

Principais, Recursos, Lançados, ECMA2015, ES6

ECMAScript é uma especificação da linguagem de programação que define a sua sintaxe, tipos de dados, estruturas de controlo, objetos e funções disponíveis numa linguagem de programação. É uma especificação padrão para JavaScript e outras linguagens de script web.

A atualização mais significativa para o JavaScript foi o ECMAScript 6 (também conhecido como ES6 ou ES2015), foi lançado em 2015. O ES6 introduziu muitos novos recursos e melhorias que iremos ver de seguida.

1. Arrow Functions:

// Função tradicional
function multiply(a, b) {
  return a * b;
}

// Arrow function
const multiply = (a, b) => a * b;

Explicação:

As arrow functions permitem escrever funções de maneira mais concisa, sem a necessidade de usar a palavra-chave "function" e "return". Além disso, elas têm um comportamento de "scope" léxico, o que significa que o valor dd "this" dentro da função é o mesmo valor do "this" fora da função.

2. Let e Const:

// Utilizando o var
var x = 1;
if (true) {
  var x = 2;
}
console.log(x); // Output: 2

// Utilizando o let
let y = 1;
if (true) {
  let y = 2;
}
console.log(y); // Output: 1

// Utilizando o const
const PI = 3.1415;
PI = 3; // TypeError: Assignment to constant variable.

Explicação:

Let e const foram as novas formas de declarar variáveis no ES6. Let é similar ao var, mas tem o "scope" de bloco, o que significa que a variável é acessível apenas dentro do bloco onde foi declarada. Const é uma variável de valor constante e não pode ser atualizada depois de já estar declarada.

3. Template Literals:

const name = "João";
const age = 20;

// Sem template literals
console.log("O meu nome é " + name + " e eu tenho " + age + " anos.");

// Com template literals
console.log(`O meu nome é ${name} e eu tenho ${age} anos.`);

Explicação:

As "template literals" permitem incorporar variáveis e expressões dentro de uma string, utilizando a sintaxe ${}. Isso torna o código muito mais legível e fácil de escrever.

4. Destructuring:

const person = {
  name: "Maria",
  age: 25,
  country: "Brasil"
};

// Sem destructuring
const name = person.name;
const age = person.age;

// Com destructuring
const { name, age } = person;

Explicação:

O "Destructuring" é uma forma de extrair valores de um objeto ou de um array em variáveis separadas. Isso torna o código mais limpo e fácil de ler.

5. Rest e Spread Operators:

O operador ... pode ser usado tanto como Rest quanto como Spread Operator, dependendo do contexto em que é usado.

5.1 Rest Operator:

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}

sum(1, 2, 3, 4); // Output: 10

Explicação:

O "Rest Operator" permite que se passe um número variável de argumentos para uma função e que os transforme num array dentro dessa função. Isso simplifica a manipulação de um grande número de argumentos em funções.

5.2 Spread Operator:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3); // Output: [1, 2, 3, 4, 5, 6]

Explicação:

O "Spread Operator" permite que se espalhe os elementos de um array ou de um objeto num outro array ou objeto. Isso simplifica a combinação de arrays e objetos.

Esses são apenas alguns exemplos dos recursos do ES6. Existem muitos outros recursos, como classes, promises, async/await, entre outros.