Para quem está começando no mundo do desenvolvimento JavaScript, dominar os Métodos JavaScript ES6 é essencial. Essas ferramentas simplificam tarefas complexas, tornando o código mais limpo e fácil de entender. Vamos explorar alguns dos métodos mais importantes que todo desenvolvedor deve conhecer para otimizar seu trabalho e criar aplicações mais eficientes.
Métodos Essenciais de Array em JavaScript
Os arrays são estruturas de dados fundamentais em JavaScript, e os métodos ES6 trouxeram novas formas de manipular e transformar esses conjuntos de dados. Vamos ver como alguns desses métodos podem facilitar a sua vida.
1. map()
O método map() cria um novo array aplicando uma função a cada elemento do array original. Imagine que você tem uma lista de números e quer criar uma nova lista com o dobro de cada número. Com map(), isso se torna incrivelmente simples.
Por exemplo:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]
2. filter()
Se você precisa selecionar apenas alguns elementos de um array com base em uma condição, o método filter() é a ferramenta certa. Ele cria um novo array contendo apenas os elementos que passam no teste especificado.
Veja como usá-lo para obter apenas os números pares de um array:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
3. reduce()
O método reduce() é usado para reduzir um array a um único valor. Ele aplica uma função acumuladora a cada elemento, resultando em um único valor final. Uma aplicação comum é somar todos os números de um array.
Confira o exemplo:
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, current) => acc + current, 0);
console.log(total); // Output: 15
4. find()
Quando você precisa encontrar o primeiro elemento de um array que satisfaz uma determinada condição, o método find() é a escolha ideal. Ele retorna o primeiro elemento que passa no teste, ou undefined se nenhum elemento for encontrado.
Por exemplo, para encontrar um usuário com um ID específico:
const users = [
{ id: 1, name: 'Snehal' },
{ id: 2, name: 'Rajeev' },
{ id: 3, name: 'Moon' }
];
const user = users.find(user => user.id === 2);
console.log(user); // Output: { id: 2, name: 'Rajeev' }
5. includes()
O método includes() verifica se um array contém um determinado valor. Ele retorna true se o valor estiver presente, e false caso contrário.
Um exemplo simples:
const numbers = [1, 2, 3, 4, 5];
const hasFive = numbers.includes(5);
console.log(hasFive); // Output: true
Métodos de String e Object
Além dos arrays, strings e objetos também ganharam métodos poderosos com o ES6. Vamos explorar alguns deles.
6. String.includes()
Assim como nos arrays, o método String.includes() verifica se uma string contém uma determinada substring. Ele retorna true se a substring estiver presente e false caso contrário.
Veja como usá-lo:
const greeting = 'Hello Artisans!, I am Rajeev Moon.';
const hasArtisans = greeting.includes('Artisans');
console.log(hasArtisans); // Output: true
7. Object.keys()
O método Object.keys() retorna um array com os nomes das propriedades enumeráveis de um objeto. Isso pode ser útil para iterar sobre as propriedades de um objeto de forma mais fácil.
Exemplo:
const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personKeys = Object.keys(person);
console.log(personKeys); // Output: ['name', 'age', 'job']
8. Object.entries()
O método Object.entries() retorna um array de pares [chave, valor] das propriedades enumeráveis de um objeto. Isso é útil para transformar objetos em listas para manipulação.
Confira o exemplo:
const person = { name: 'Rajeev Moon', age: 30, job: 'Developer' };
const personEntries = Object.entries(person);
console.log(personEntries);
// Output: [['name', 'Rajeev Moon'], ['age', 30], ['job', 'Developer']]
Recursos da Linguagem ES6
O ES6 também introduziu novos recursos de linguagem que tornam o código JavaScript mais conciso e expressivo.
9. Arrow Functions
Arrow functions oferecem uma sintaxe mais curta para escrever funções, além de lidar com o this de forma mais previsível. Elas são especialmente úteis para funções simples e callbacks.
Exemplo:
const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5
10. Template Literals
Template literals permitem interpolar variáveis dentro de strings e criar strings de múltiplas linhas de forma mais fácil. Eles usam backticks (`) em vez de aspas simples ou duplas.
Veja como usar:
const name = 'Rajeev Moon';
const message = `Hello, ${name}! Nice to meet you.`;
console.log(message); // Output: Hello, Rajeev Moon! Nice to meet you.
11. Destructuring Assignment
A destructuring assignment permite extrair valores de arrays e objetos diretamente para variáveis. Isso torna o código mais limpo e legível.
Exemplo com objetos:
const person = { name: 'Rajeev Moon', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Rajeev Moon 30
12. Spread Syntax (…)
A spread syntax (…) pode ser usada para expandir elementos de um iterável (como um array) ou copiar propriedades de um objeto para outro.
Para Arrays
Expande os elementos de um array:
const numbers = [1, 2, 3];
const extendedNumbers = [...numbers, 4, 5];
console.log(extendedNumbers); // Output: [1, 2, 3, 4, 5]
Para Objetos
Copia propriedades de um objeto para outro:
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }
13. Rest Parameters
Os rest parameters permitem que uma função aceite um número variável de argumentos como um array. Isso é útil quando você não sabe quantos argumentos serão passados para a função.
Exemplo:
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10
14. Object Literal Enhancements
Essa funcionalidade permite uma sintaxe mais curta para definir propriedades de objetos quando a chave tem o mesmo nome da variável.
Exemplo:
const x = 10, y = 20;
const point = { x, y }; // Equivalent to { x: 10, y: 20 }
console.log(point); // Output: { x: 10, y: 20 }
15. Default Parameters
Default parameters permitem que você defina valores padrão para os parâmetros de uma função, caso nenhum valor seja fornecido.
Veja como usar:
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // Output: Hello, Guest!
console.log(greet('Rajeev')); // Output: Hello, Rajeev!
16. Optional Chaining (?.)
O optional chaining permite acessar propriedades aninhadas de um objeto sem se preocupar se uma propriedade intermediária é nula ou indefinida. Ele retorna undefined se a propriedade não existir.
Exemplo:
const user = { address: { city: 'New York' } };
console.log(user.address?.city); // Output: New York
console.log(user.profile?.email); // Output: undefined
17. Nullish Coalescing (??)
O nullish coalescing (??) retorna o operando do lado direito se o operando do lado esquerdo for null ou undefined. Ele é semelhante ao ||, mas só retorna o valor padrão se o valor for estritamente null ou undefined.
Confira o exemplo:
const count = null ?? 5;
console.log(count); // Output: 5
const name = '' ?? 'Guest';
console.log(name); // Output: (empty string)
Métodos Adicionais Importantes
Além dos métodos e recursos já mencionados, existem outros que podem ser muito úteis no seu dia a dia como desenvolvedor.
18. Array.from()
O método Array.from() cria um novo array a partir de um objeto array–like ou iterável. Isso é útil para converter listas de nós do DOM em arrays, por exemplo.
Exemplo:
const arrayLike = document.querySelectorAll('div');
const realArray = Array.from(arrayLike);
19. String.padStart() e String.padEnd()
Esses métodos preenchem uma string com outra string até que ela atinja um comprimento especificado. padStart() preenche no início da string, enquanto padEnd() preenche no final.
Veja como usá-los:
console.log('5'.padStart(3, '0')); // Output: '005'
console.log('Hello'.padEnd(10, '.')); // Output: 'Hello.....'
20. Promise.all()
O método Promise.all() espera que todas as promises em um iterável sejam resolvidas ou rejeitadas. Ele retorna uma única promise que resolve com um array dos valores resolvidos das promises de entrada.
Exemplo:
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
Promise.all([promise1, promise2])
.then(results => console.log(results)); // Output: [1, 2]
Dominar esses recursos e **Métodos JavaScript ES6** vai te ajudar a escrever códigos mais limpos, eficientes e fáceis de manter. Eles são a base do desenvolvimento JavaScript moderno e, com a prática, você verá como eles podem simplificar seu trabalho.
Este conteúdo foi auxiliado por Inteligência Artificial, mas escrito e revisado por um humano.
Via Dev.to