Dados não Primitivos

Dados não Primitivos

Em conteúdos passados, nos aprendemos sobre os 7 tipos de dados primitivos que o JS suporta, são eles:

Só que além deles, nós temos outros 3 tipos de dados que não são considerados primitivos.

Muitos livros e conteúdos nomeiam esses dados como tipo de referência (Reference Type), dados de estrutura (Structure Type), dados compostos (Composite Type) e não-primitivo (Non-Primitive).

Independentemente da nomenclatura adaptada, o importante é que você entenda quem são eles e para que servem.

Atualmente nós podemos separá-los em 3 tipos diferentes:

O que são Objetos?

Um Objeto (Object) é um tipo de dado não primitivo que permite que você armazene mais de um tipo de dado dentro de uma mesma variável.

Para você entender melhor, voltemos a ilustração de uma variável em javascript:

Vimos que uma variável é como se fosse uma caixa que armazena somente um único valor, certo?

Um Objeto é como se fosse uma caixa, onde dentro dela existe diversas subdivisões com seus respectivos nomes.

Isso dá a possibilidade do desenvolvedor ter dentro de uma mesma "caixa" principal diversos tipos de dados diferentes.

Propriedades de um Objeto

Um objetivo contém e trabalha com propriedades, mas o que são propriedades de um objeto?

Lembra que falei logo acima que um objeto pode conter diversas subdivisões e que essas divisões são separas por nomes?

Então... com isso em mente, cada subdivisão ali representa uma propriedade, onde o nome dessa subdivisão é considerada como uma chave (key), e o valor contido dentro dessa subdivisão é considerado um valor (value).

O Javascript trabalha dessa forma para que seja fácil a seleção de um determinado valor.

É importante ressaltar que a propriedade chave (key) sempre será considerada uma string, mas o valor (value) pode ser qualquer outro tipo de dado (como strings, numbers, booleans..).

Escrevendo um Objeto

A sintaxe para se criar objetos em JS é a seguinte:

//Exemplo de um objeto com uma única subdivisão
let objeto = {chave: valor};

//Exemplo de um objeto com muitas subdivisões (separamos por vírgulas)
let objetoMultiplo = {chave: valor, chave: valor, chave: valor};

Lembrando que podemos ter quantas subdivisões quisermos.

Vejamos agora declarações de objetos em javascript:

//Objeto vazio
var objetoVazio = {};

//Objeto que representa uma pessoa
let pessoa = {"nome": "Micilini", "idade": 25};

//Objeto que representa um carro
let carro = {
"nome": "BMW X8",
"cor": "cor",
"portas": 5
};

Você também pode omitir as aspas duplas da chave (key), e optar por escrever sem elas, que também funcionará normalmente:

let pessoa = {nome: "Micilini", idade: 25};//Não precisamos de aspas duplas para declarar as chaves (keys)

Lembrando que ainda assim (sem as aspas duplas ou simples) o JS considera a chave (key) como uma string, ok?

Trabalhando com Objetos

Legal, agora que você já sabe como criar objetos, chegou a hora de aprender a utilizá-los.

Para selecionar um objeto é bem simples, basta que você insira o nome da variável junto com o caractere do ponto (.) seguido do nome da chave que você quer selecionar:

let pessoa = { nome: "Micilini" }

console.log(pessoa.nome);//Veja que estou usando o nome da variável chamada "pessoa", seguido do ponto com a chave

//O resultado será 'Micilini'

Caso queiramos selecionar outra chave é só seguir o mesmo procedimento:

let carro = {
"nome": "BMW X8",
"cor": "prata",
"portas": 5
}

console.log(carro.nome);//BMW X8
console.log(carro.cor);//prata
console.log(carro.portas);//5

Alterando o valor dos objetos

Também é possível alterar o valor existente dentro de um objeto, mais especificamente dentro de uma chave.

Para isso basta selecionar a chave como fizemos antes e usar o operador de atribuição (=):

let carro = { nome: "BMW X8" }

carro.nome = "Auston Martin";

console.log(carro.nome);//Auston Martin

Lembrando que podemos alterar o objeto para qualquer outro tipo de valor primitivo (int, boolean, string, symbol...).

let carro = { nome: "BMW X8" }

carro.nome = 25;//Agora ele é um inteiro

console.log(carro.nome);//25

Mudando os objetos do tipo const

Será que é possível alterar a chave de um objeto quando este foi declarado como uma constante?

Sim, isso é perfeitamente possível, pois a essência da constante permanece a mesma, o que muda em si são os elementos ali dentro existentes.

Isso quer dizer que a constante continua sendo um objeto e isso nunca vai mudar. O que muda são os valores salvos dentro das subdivisões daquele objeto.

const pessoa = {
nome: "Micilini",
site: "https://micilini.com"
}

pessoa.nome = "Fulano de Tal";
pessoa.site = "https://sitequalquer.com.br";

console.log(pessoa.nome);//Fulano de Tal
console.log(pessoa.site);//https://sitequalquer.com.br

O que não é possível é redeclarar um novo objeto para uma constante já declarada, por exemplo:

const pessoa = {
nome: "Micilini",
site: "https://micilini.com"
}

pessoa = {
nome: "Fulano de Tal",
site: "https://sitequalquer.com.br"
}//Este código vai dar erro!

Objetos dentro de Objetos

Da mesma forma que podemos ter blocos dentro de blocos, também conseguimos declarar objetos dentro de objetos em Javascript, veja como é fácil:

let pessoa = {
nome: "Micilini",
configuracoes: {site: "micilini.com", https: true}
}

pessoa.configuracoes.https = false;//Alterando um objeto que está dentro de um objeto

console.log(pessoa.nome);//Micilini
console.log(pessoa.configuracoes.site);//micilini.com

Como vimos no código acima, podemos usar o ponto (.) para seguir dentro dos objetos que estão aninhados.

Operador Delete

Podemos usar o operador delete para remover elementos existentes dentro de objetos, veja como é fácil:

const Pessoa = {
nome: 'Micilini',
sobrenome: 'Roll'
};

console.log(Pessoa.nome);//Micilini

delete Pessoa.nome;

console.log(Pessoa.nome);//undefined

console.log(Pessoa);//{ sobrenome: 'Roll' }

Métodos de um Object

De acordo com a documentação da própria linguagem, os objetos possuem 28 métodos que nos ajudam durante o desenvolvimento, vejamos cada um deles abaixo.

Assign()

O método assign() é usado para copiar todos os elementos do primeiro objeto com o segundo objeto, mantendo os elementos que já existem no segundo objeto.

const objetoUm = { a: 1, b: 2 };
const objetoDois = { b: 4, c: 5 };

const objetoTres = Object.assign(objetoUm, objetoDois);//{ a: 1, b: 4, c: 5 }

Observe que b ficou com o valor 4, pois b é o único elemento que existe em ambos os arrays, e como dito anteriormente, o objetoDois tem prioridade.

Create()

O método create() cria um novo objeto, utilizando um outro objeto existente como protótipo para o novo objeto a ser criado.

const pessoa = {
nome: 'Micilini',
empresa: false
}

const meuObjeto = Object.create(pessoa);

meuObjeto.empresa = true;

console.log(meuObjeto.empresa);//true
console.log(pessoa.empresa);//false

DefineProperties()

O método defineProperties() define uma nova propriedade ou modifica uma existente no objeto, retornando o objeto.

let obj = {};
Object.defineProperties(obj, {
'propriedadeUm': {
value: 'Micilini',
writable: true
},
'propriedadeDois': {
value: 'João',
writable: false
}
// etc. etc.
});

console.log(obj);{propriedadeUm: 'Micilini', propriedadeDois: 'João'}

obj.propriedadeUm = 77;

obj.propriedadeDois = 5;

console.log(obj);{propriedadeUm: 77, propriedadeDois: 'João'}

Ali dentro de cada propriedade nós podemos definir duas chaves, o value que nada mais é do que o valor que será armazenado por essa propriedade.

E o writable, que diz se essa propriedade pode receber novos valores ou não.

DefineProperty()

O método defineProperty() define uma nova propriedade diretamente em um objeto, ou modifica uma propriedade já existente em um objeto, e retorna o objeto.

let obj = {}; // Criar um novo objeto

Object.defineProperty(obj, 'propriedadeUm', {
value: 'Micilini',
writable: true,
enumerable: true,
configurable: true
});

console.log(obj);{propriedadeUm: 'Micilini'}

value: O valor associado com a propriedade. Pode ser qualquer valor válido em Javascript (número, objeto, função, etc). Valor padrão é undefined.

configurable: true se e somente se o tipo deste descritor de propriedade pode ser alterado e se a propriedade pode ser deletada do objeto correspondente. Valor padrão é false.

enumerable: true se e somente se esta propriedade aparece durante enumeração das propriedades no objeto correspondente. Valor padrão é false.

writable: true se e somente se o valor associado com a propriedade pode ser modificada com um operador de atribuição (en-US). Valor padrão é false.

Entries()

O método entries() retorna uma array dos próprios pares [key, value] enumeráveis de um dado objeto, na mesma ordem dos objetos providos através do loop for...in.

let objUm = { foo: 'bar', baz: 42 };
console.log(Object.entries(objUm)); // [ ['foo', 'bar'], ['baz', 42] ]

let objDois = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(objDois)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

Freeze()

o método freeze() impede que novas propriedades sejam adicionadas a ele; impede que as propriedades existentes sejam removidas; e impede que propriedades existentes, ou sua inumerabilidade, configurabilidade, ou capacidade de escrita sejam alteradas. Em essência o objeto é efetivamente imutável.

var obj = {
nome: 'Micilini',
empresa: true
};

Object.freeze(obj);

obj.nome = 'João';//Não funciona
obj.idade = 15;//Não funciona
obj.empresa = false;//Não funciona

console.log(obj);{ empresa: true, nome: "Micilini" }

IsFrozen()

O método isFrozen() determina se um objeto está congelado (frozen).

const obj = {
propriedadeUm: 42
};

console.log(Object.isFrozen(obj));//false

Object.freeze(obj);

console.log(Object.isFrozen(obj));//true

FromEntries()

O método fromEntries() transforma uma lista de pares chave-valor em um objeto.

const entries = new Map([
['foo', 'bar'],
['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);{ foo: "bar", baz: 42 }

Você pode aprender mais sobre Map aqui.

GetOwnPropertyDescriptor()

O método getOwnPropertyDescriptor() retorna um descritor de propriedades para uma propriedade de um dado objeto

let obj = {
nome: 'Micilini',
empresa: true
};

console.log(Object.getOwnPropertyDescriptor(obj, 'nome'));//{ configurable: true, enumerable: true, value: "Micilini", writable: true }

GetOwnPropertyDescriptors()

O método getOwnPropertyDescriptors() retorna todas as descrições próprias da propriedade de um dado objeto.

const objetoUm = {
propriedadeUm: 42
};

const descritorUm = Object.getOwnPropertyDescriptors(objetoUm);

console.log(descritorUm.propriedadeUm.writable);//true

console.log(descritorUm.propriedadeUm.value);//42

GetOwnPropertyNames()

O método getOwnPropertyNames() retorna um vetor com todas as propriedades (enumeráveis ou não) encontradas diretamente em um dado objeto.

let arrayUm = ['a', 'b', 'c'];

console.log(Object.getOwnPropertyNames(arrayUm).sort());//["0", "1", "2", "length"]

let objetoUm = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.getOwnPropertyNames(objetoUm).sort());//["0", "1", "2"]

GetOwnPropertySymbols()

O método getOwnPropertySymbols() retorna uma array com todas propriedades de símbolo encontradas diretamente em um determinado objeto dado.

const objetoUm = {};
const simboloUm = Symbol('a');
const simboloDois = Symbol.for('b');

objetoUm[simboloUm] = 'localSymbol';
objetoUm[simboloDois] = 'globalSymbol';

const objetoSimbolos = Object.getOwnPropertySymbols(objetoUm);

console.log(objetoSimbolos.length);//2

GetPrototypeOf()

O método getPrototypeOf() retorna o prototype (isto é, o valor da propriedade interna [[Prototype]]) do objeto especificado.

var proto = {};

var obj = Object.create(proto);

console.log(Object.getPrototypeOf(obj));//{}

Object.getPrototypeOf(obj) === proto;//true

HasOwn()

O método hasOwn() retorna true se o objeto especificado tem a propriedade indicada como sua propriedade own. Se a propriedade é herdada, ou não existe, o método retorna false.

const object1 = {
prop: 'exists'
};

console.log(Object.hasOwn(object1, 'prop'));//true

console.log(Object.hasOwn(object1, 'toString'));//false

console.log(Object.hasOwn(object1, 'propriedadeNaoDeclarada'));//false

HasOwnProperty()

O método hasOwnProperty() retorna um booleano indicando se o objeto possui a propriedade especificada como uma propriedade definida no próprio objeto em questão (ao contrário de uma propriedade herdada).

let o = new Object();

o.prop = 'existe';

o.hasOwnProperty('prop');// Retorna true
o.hasOwnProperty('toString');// Retorna false
o.hasOwnProperty('hasOwnProperty');// Retorna false

Is()

O método is() determina se dois valores correspondem ao mesmo valor.

Object.is('foo', 'foo');// true
Object.is(window, window);// true

Object.is('foo', 'bar');// false
Object.is([], []);// false

var test = { a: 1 };
Object.is(test, test);// true

Object.is(null, null);// true

// Casos especiais
Object.is(0, -0);// false
Object.is(-0, -0);// true
Object.is(NaN, 0/0);// true

PreventExtensions()

O método preventExtensions() impede que novas propriedades sejam adicionadas a um objeto (isto é, impede futuras extensões ao objeto).

var obj = {};
var obj2 = Object.preventExtensions(obj);

console.log(obj === obj2);//true

// Objetos são extensíveis por padrão...
var empty = {};
Object.isExtensible(empty); // === true

// ...mas isso pode ser mudado.
Object.preventExtensions(empty);
Object.isExtensible(empty); // === false

IsExtensible()

O método isExtensible() verifica se um objeto pode ser estendido (se é ou não possível adicionar novas propriedades).

const obj = {};

console.log(Object.isExtensible(obj));//true

Object.preventExtensions(obj);

console.log(Object.isExtensible(obj));//false

isPrototypeOf()

O método isPrototypeOf() checa se um objeto existe em na cadeia de protótipos de um outro objeto.

function Foo() {}
function Bar() {}

Bar.prototype = Object.create(Foo.prototype);

const bar = new Bar();

console.log(Foo.prototype.isPrototypeOf(bar));//true
console.log(Bar.prototype.isPrototypeOf(bar));//true

Seal()

O método seal() sela um Objeto, evitando que novas propriedades sejam adicionadas à ele e marcando todas as propriedades existentes como não configuráveis. Valores das propriedades atuais ainda podem ser alterados desde que essas propriedades sejam graváveis (writable).

const obj1 = { prop: 'micilini' };

const obj2 = Object.seal(obj1);

obj2.prop = 'João';

console.log(obj2.prop);

IsSealed()

O método isSealed() determina se um objeto está selado.

const obj = {
prop: 42
};

console.log(Object.isSealed(obj));//false

Object.seal(obj);

console.log(Object.isSealed(obj));//true

Keys()

O método keys() retorna um array de propriedades enumeráveis de um determinado objeto, na mesma ordem em que é fornecida por um laço for...in.

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));//['0', '1', '2']

// array com objeto
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj));//['0', '1', '2']

// array como objeto com ordenação aleatória por chave
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(an_obj));//['2', '7', '100']

PreventExtensions()

O método preventExtensions() impede que novas propriedades sejam adicionadas a um objeto (isto é, impede futuras extensões ao objeto).

var empty = {};
Object.isExtensible(empty); // === true

// ...mas isso pode ser mudado.
Object.preventExtensions(empty);
Object.isExtensible(empty); // === false

PropertyIsEnumerable()

O método propertyIsEnumerable() retorna um booleano indicando quando a propriedade especificada é enumerável e é a propriedade do próprio objeto.

const obj = {};
const array1 = [];
obj.prop = 42;
array1[0] = 42;

console.log(obj.propertyIsEnumerable('prop'));//true

console.log(array1.propertyIsEnumerable(0));//true

console.log(array1.propertyIsEnumerable('length'));//false

SetPrototypeOf()

O método setPrototypeOf() configura o 'prototype' (i.e., a propriedade interna [[Prototype]]) de um objeto específico para outro objeto ou null.

var dict = Object.setPrototypeOf({}, null);

ToLocaleString()

O método toLocaleString() retorna uma cadeia de caracteres (string) representando o objeto. Este método é feito para ser sobrescrito por objetos derivados para propósitos de localização específica.

const data1 = new Date(Date.UTC(2023, 11, 20, 3, 0, 0));

console.log(data.toLocaleString('ar-EG'));//"٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"

const numero1 = 123456.789;

console.log(numero.toLocaleString('de-DE'));//"123.456,789"

ToString()

O método toString() retorna uma string representando o objeto.

function Cachorro(nome) {
this.nome = nome;
}

const cachorroUm = new Cachorro('Mon Petit');

Cachorro.prototype.toString = function cachorroToString() {
return `${this.nome}`;
};

console.log(cachorroUm.toString());//Mon Petit

Para saber mais sobre variáveis usando o comando this e new dentro de funções de uma olhada em construtores de função.

ValueOf()

O método valueOf() retorna o valor primitivo do objeto especificado.

function MeuTipoNumerico(n) {
this.numero = n;
}

MeuTipoNumerico.prototype.valueOf = function() {
return this.numero;
};

const obj = new MeuTipoNumerico(4);

console.log(obj + 3);//7

Para saber mais sobre variáveis usando o comando this e new dentro de funções de uma olhada em construtores de função.  

Values()

O método values() retorna um array com os valores das propriedades de um dado objeto, na mesma ordem provida pelo for...in.

var obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// array como objeto
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// array como objeto com ordenação de chave aleatória
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

Arrays

Considerado o queridinho dentre muitas linguagens de programação, os arrays são indispensáveis em qualquer software que você vai desenvolver daqui pra frente.

Ele funciona como os objetos que vimos anteriormente, ou seja, uma variável especial que serve para armazenar múltiplos dados por vez.

Supondo que você tem uma lista de nomes de carros escritas em um papel, ao mesmo tempo que deseja representar isso no JS.

Para isso, você poderia criar 4 variáveis diferentes, onde cada uma delas armazena um dos nomes acima:

let carro1 = "BMW";

let carro2 = "Auston Martin";

let carro3 = "Ferrari";

let carro4 = "Bugatti";

No entanto, o que acontece se você quiser selecionar a variável que armazena o valor "Auston Martin"? Ou quem sabe verificar se o valor "lamborghini" se encontra presente no meio daquelas variáveis?

Bem, daí você poderia me dizer muitas coisas, desde:

E você não está errado em pensar assim! Funciona? Sim funciona, só que você deve se perguntar: Será que não existe uma maneira mais fácil e rápida de se fazer isso?

Sim, e a solução para isso é o ARRAY!

Pense em um array como uma lista que pode armazenar muitos valores usando apenas um único nome (que seria o nome da própria variável é claro rs).

Onde podemos acessar os valores por meio de número de índice:

Isso significa que por de baixo dos panos, o JS se encarrega de pegar cada um dos valores que você inseriu na lista (array), de forma a atribuir um número automático para eles.

Esse número automático é como se fosse as chaves (key) dos objetos, a diferença é que no caso dos arrays essa atribuição é feita de forma automática.

É importante ressaltar que a primeira posição sempre começa com o índice 0, ok?

A sintaxe de um Array é a seguinte:

nome_do_array = [item1, item2, ...]; 

Diferente dos objetos que vimos anteriormente, os itens de um array são declarados dentro de colchetes [], onde cada elemento é separado por vírgula.

Criando um Array

Vejamos agora um exemplo de como criar um array de maneira literal no JS:

let listaDeCompras = ["Pão", "Açucar", "Cebola", "Carne", "Queijo"];//Este array representa uma lista de compras

let dadosAvulsos = ["Micilini", 12, 4.5, true, 'roll'];//Este array representa dados avulsos

let carros = [
"BMW",
"Auston Martin",
"Ferrari",
"Bugatti"
];//Uma outra forma de criar arrays usando a quebra de linha

Podemos também criar um array por meio da função padrão array() do JS:

let listaDeCompras = new Array("Pão", "Açucar", "Cebola", "Carne", "Queijo");

let dadosAvulsos = new Array("Micilini", 12, 4.5, true, 'roll');

let carros = new Array("BMW", "Auston Martin", "Ferrari", "Bugatti");

É importante ressaltar que os dois exemplos acima fazem exatamente o mesmo, a diferença é que a declaração de um array de forma literal se dá de forma mais simples, mais legível além de ter uma maior velocidade de execução de código se comparado ao usar a função array();

Nesse caso, recomendamos que você declare seus arrays sempre de forma literal, ok?

Criando Arrays vazios

Da mesma forma que podemos instanciar e declarar variáveis sem valor algum, também podemos instanciar array vazios, para que mais tarde possamos preenche-lo: 

let meuArray = [];

const meuArray2 = new Array();

Acessando elementos de um array

Para acessar algum elemento declarado em um array, basta declarar o nome da variável junto com os colchetes, onde dentro desses colchetes você deverá informar o índice do elemento que você deseja selecionar.

let carros = ["BMW", "Auston Martin", "Ferrari", "Bugatti"];

console.log(carros[0]);//Seleciona o item na posição 0, 'BMW'
console.log(carros[1]);//Seleciona o item na posição 1, 'Auston Martin'
console.log(carros[2]);//Seleciona o item na posição 2, 'Ferrari'
console.log(carros[3]);//Seleciona o item na posição 3, 'Bugatti'

O que acontece quando tentamos selecionar uma posição que não existe?

console.log(carros[4]);//Seleciona o item na posição 4, 'undefined'

O JS retorna o valor 'undefied'.

Modificando itens do array

Para realizar uma modificação de qualquer item existente no seu array, basta apenas basta declarar o nome da variável junto com os colchetes informando o índice do elemento que você deseja modificar, e por fim usar o operador de atribuição (=):

let carros = ["BMW", "Auston Martin", "Ferrari", "Bugatti"];

carros[1] = "lamborghini";//Alteramos o item na posição 1 para 'lamborghini'

console.log(carros[1]);//lamborghini

Lembrando que [0] é o primeiro elemento no array, e [1] é o segundo. Tenha me mente que os índices de um array sempre começam com 0.

Atribuindo itens de um array a uma variável

O que será que acontece quando atribuímos a uma variável um item específico de um array?

let carros = ["BMW", "Auston Martin", "Ferrari", "Bugatti"];

let carroUm = carros[2];//Aqui é como se tivéssemos declaro uma string com o valor 'Ferrari'

console.log(carroUm);//Ferrari

Diferente do que você pode estar pensando, não será salvo um item de um array dentro da variável, mas sim o tipo de valor que aquele item armazena.

No final das contas é como se tivéssemos criado uma variável com o valor do tipo string:

let carroUm = "Ferrari";

console.log(carroUm);//Ferrari

Arrays X Objetos

No universo do Javascript, um array é um tipo especial de objetos. Isso significa dizer que para o Javascript o tipo array é considerado um objeto:

let carros = ["BMW", "Auston Martin", "Ferrari", "Bugatti"];

console.log(typeof carros);//object

Apesar disso, os arrays em javascript são melhor descritos como arrays e não como objetos, ok?

Inicialmente os arrays utilizam números para agrupar seus elementos, enquanto os objetos utilizam nomes para agrupar seus membros:

let carros = ["BMW", "Auston Martin", "Ferrari", "Bugatti"];

console.log(carros[0]);//BMW

let dados = {nome: "Micilini", site: "https://micilini.com"}

console.log(dados.nome);//Micilini

Nesse caso os itens de um array podem ser chamados de elementos, enquanto os itens de um objeto podem ser chamados de membros.

Funções dentro de Objetos e Arrays

No JS é possível armazenar funções dentro de objetos, vejamos como isso funciona:

const meuObjeto = {
meuMetodo: function meuMetodo() {
console.log('Meu método foi chamado!');
},
meuOutroMetodo: function meuOutroMetodo(nome) {
return nome;
},
metodosAninhados: {
meuMetodoAninhado: function meuMetodoAninhado(nome) {
console.log('Método Aninhado chamado!, ' + nome);
}
}
};

meuObjeto.meuMetodo();
console.log(meuObjeto.meuOutroMetodo('Micilini'));
meuObjeto.metodosAninhados.meuMetodoAninhado('João');

A mesma estratégia se aplica a arrays:

let arrayFuncoes = [
function(){ console.log('Função 1'); },
function(nome){ console.log(nome); },
];

arrayFuncoes[0]();
arrayFuncoes[1]('Micilini');

No caso dos arrays as funções precisam ser declaradas de forma anônima.

Interagindo com Objetos e Arrays (for...in)

Uma das possibilidades e facilidades de se trabalhar com objetos é que podemos interagir com eles usando iterações, ou seja, em forma de loop (laço).

Uma das instruções mais conhecidas para se trabalhar é o for...in.

O comando for...in é uma estrutura de laço que é capaz de interagir com cada item existente no objeto, obedecendo a ordem original de inserção.

A sintaxe é:

for (variavel in objeto) {
...
}

Basicamente, o JS faz um loop acessando cada elemento existente em um determinado objeto, armazenando o valor desse elemento em uma variável temporária, de modo que consigamos acessar essa variável de dentro do bloco do for.

Vejamos um exemplo:

let dadosObjeto = {
nome: 'Micilini',
idade: 25,
endereco: 'Rua dos Donhinhus',
site: 'https://micilini.com'
}

for(dado in dadosObjeto){//Aqui ele vai armazenar dentro da variável temporária 'dado' cada item existente dentro do array 'dadosObjeto' a cada vez que ele repetir o loop
console.log(dado);
}

console.log('Após o loop de todos os itens daquele objeto, o JS sai do for e executa as linhas abaixo.');

Se você testar o código acima, verá que ele só retorna cada uma das chaves daquele objeto.

Se você deseja retornar os valores que essas chaves armazenam, basta fazer o seguinte encapsulamento: dadosObjeto[dado]:

let dadosObjeto = {
nome: 'Micilini',
idade: 25,
endereco: 'Rua dos Donhinhus',
site: 'https://micilini.com'
}

for(dado in dadosObjeto){
console.log('Chave: ' + dado + ', Valor: ' + dadosObjeto[dado]);
}

O for...in também funciona com arrays? Sim:

let dadosObjeto = [Micilini', 25, 'Rua dos Donhinhus', 'https://micilini.com'];

for(dado in dadosObjeto){
console.log('Chave: ' + dado + ', Valor: ' + dadosObjeto[dado]);
}

Interagindo com Objetos e Arrays (for...of)

Uma outra maneira de interagir com objetos e arrays é por meio do for...of!

No caso dele, conseguimos interagir de modo a retornar somente o valor de cada item existente dentro daquele objeto ou array:

let dadosObjeto = [Micilini', 25, 'Rua dos Donhinhus', 'https://micilini.com'];

for(dado of dadosObjeto){
console.log(dado);//Resultado: 'Micilini', 25, 'Rua dos Donhinhus', 'https://micilini.com'
}

No caso do for...of não precisamos fazer o encapsulamento que fizemos no for...in.

Qual é a diferença entre o for...in e o for...of?

Ambas são instruções da própria linguagem do Javascript que são responsáveis por iterar (estruturas de loop/laços) com objetos e arrays.

No caso do for...in ele itera de modo a retornar os índices e chaves (key) de um determinado objeto/array:

//Exemplo de Iteração usando Arrays
let nomes = ['Micilini', 'João', 'Maria'];

for(nome in nomes){
console.log(nome);//Aqui ele vai retornar somente os índices ao invés dos nomes. Resultado: '0', '1', '2'
}

//Exemplo de Iteração usando objetos
let bebidas = { a: "Coca-Cola", b: "Guaraná", c: "Sprite" }

for(bebidas in bebidas){
console.log(bebida);//Aqui ele vai retornar somente os índices ao invés dos nomes. Resultado: 'a', 'b', 'c'
}

É possível retornar os os valores dos elementos por meio do for...in?

Sim isso é possível e podemos fazer isso informando o nome da variável que contém o objeto/array seguido da variável temporária que contém cada elemento iterado:

//Exemplo de Iteração usando Arrays
let nomes = ['Micilini', 'João', 'Maria'];

for(nome in nomes){
console.log(nomes[nome]);//Resultado: 'Micilini', 'João', 'Maria'
}

//Exemplo de Iteração usando objetos
let bebidas = { a: "Coca-Cola", b: "Guaraná", c: "Sprite" }

for(bebidas in bebidas){
console.log(bebidas[bebida]);//Resultado: 'Coca-Cola', 'Guaraná', 'Sprite'
}

Já no caso do for...of ele itera de modo a retornar os valores (values) de um determinado objeto/array:

//Exemplo de Iteração usando Arrays
let nomes = ['Micilini', 'João', 'Maria'];

for(nome of nomes){
console.log(nome);//Resultado: 'Micilini', 'João', 'Maria'
}

//Exemplo de Iteração usando objetos
let bebidas = { a: "Coca-Cola", b: "Guaraná", c: "Sprite" }

for(bebidas of bebidas){
console.log(bebida);//Resultado: 'Coca-Cola', 'Guaraná', 'Sprite'
}

Arrays Associativos

Muitas linguagens de programação oferecem suporte a arrays com índices nomeados, onde são popularmente conhecidos como arrays associativos ou hashes.

Isso significa dizer que em outras linguagens, é possível criar um array onde as chaves (keys) podem ser representadas por strings:

//Exemplo de Array Associativo na linguagem PHP

$idade['Peter'] = "35";
$idade['Ben'] = "37";
$idade['Joe'] = "43";

No caso do JS ele não tem esse mesmo suporte, ou seja, o JS ele não suporta arrays com índices nomeados.

Portanto se tentarmos fazer isso:

var pessoa = [];

pessoa["Nome"] = "Micilini";
pessoa["Sobrenome"] = "Roll";
pessoa["idade"] = 25;

O JavaScript redefinirá a array para um objeto padrão, fazendo com que alguns métodos e propriedades produzam resultados incorretos.

Como é o caso de tentarmos usar a propriedade length, onde seu retorno será nulo em vez de 3.

Propriedades e Métodos do Array

Assim como os dados primitivos do Javascript, os arrays também contam com métodos e propriedades que facilitam o desenvolvimento.

Vejamos cada um deles abaixo:

Length

O length é uma das propriedades mais utilizadas no arrays, pois ela é capaz de retornar o número de elementos que existe naquele array.

let nomes = ['Micilini', 'João', 'Maria'];

console.log(nomes.length);//Retorna 3

Essa propriedade é muito utilizada para verificar se um array está vazio ou não:

let nomes = ['Micilini', 'João', 'Maria'];

if(nomes.length > 0){
console.log('Array está cheio!');
}else{
console.log('Array está vazio!');
}

Também é muito utilizada em conjunto com as estruturas de iteração, como é o caso do For, While...:

let nomes = ['Micilini', 'João', 'Maria'];

let i = 0;

while (i < nomes.length) {
console.log(nomes[i]);
i++;
}

let nomes = ['Micilini', 'João', 'Maria'];

for (var i = 0;i < nomes.length; i++) {
console.log(nomes[i]);
}

At()

O método at() permite que você capture elementos com base em seus índices.

let nomes = ['Micilini', 'João', 'Maria'];

console.log(nomes.at(1));//João

Concat()

O método concat() é usado para unir/mesclar dois ou mais arrays dentro de um único array.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const array3 = array1.concat(array2);

console.log(array3);//a, b, c, d, e, f

copyWithin()

O método copyWhitin() é usado para copiar parte de um array para uma outra posição no mesmo array e o retorna sem modificar seu comprimento.

const array1 = ['a', 'b', 'c', 'd', 'e'];

const array2 = array1.copyWithin(1, 3);

//O comando copyWhitin ele faz o seguinte:
//1) o argumento '1' diz para o javascript selecionar todos os elementos que vão até o index '1', que nesse caso são os itens 'a' e 'b'.
//2) Em seguida ele irá substituir esses valores pelo valor existente no index '3' que é o 'd'
//3) Nessa altura do campeonato o array que estava setado como ['a', 'b', 'c', 'd', 'e'] agora está como ['d', 'd', 'c', 'd', 'e']
//4) Em seguida a posição 3 do array, será substituída pelo índice '4' que é o 'e', resultando em: ['d', 'd', 'e', 'd', 'e']
//5) Os demais índices permanecem o mesmo intactos

console.log(array2);//["d", "d", "e", "d", "e"]

const array1 = ['a', 'b', 'c', 'd', 'e'];

const array2 = array1.copyWithin(0, 3, 4);//Copia para o índice 0 o elemento existente no índice 3

console.log(array2);//["d", "b", "c", "d", "e"]

Entries()

O método entries() retorna um novo objeto iterador que contém os pares de chave/valor para cada índice no array.

No caso desse objeto iterador nós fazemos o uso do next() para seguir a diante no loop e do value para pegar o valor:

const array1 = ['a', 'b', 'c'];

const iterador = array1.entries();

console.log(iterador.next().value);//Retorna um array: [0, "a"]

console.log(iterador.next().value);//Retorna um array: [1, "b"]

Every()

O método every() testa se todos os elementos do array passam no teste implementado por uma função que você criou, retornando true ou false.

//Função que verifica se as idades são menores que 30 anos
function verificaIdade(valor){
return valor < 30;
}

const idades = [29, 22, 12, 10, 16, 25];

console.log(idades.every(verificaIdade));//True

//Note que não precisamos passar o argumento quando chamamos a função 'verificaIdade' pois o próprio JS faz isso

Obs: Todos os elementos devem passar no teste da função para o retorno ser verdadeiro.

Fill()

O método fill() é usado para preencher com um valor começando de um índice e indo até outro.

"Javascript, pegue esse array, e preencha com o valor X começando no índice 1 até o índice 3..."

let array1 = [1, 2, 3, 4];

console.log(array1.fill(7));//Preenche todas as posições com o valor '7'. Resultado: [7, 7, 7, 7]

console.log(array1.fill(10, 1));//Preenche com o valor '10' a partir da posição 1 em diante. Resultado: [1, 10, 10, 10]

console.log(array1.fill(15, 1, 4));//Preenche com o valor '15' a partir da posição 1 até a posição 4. Resultado: [1, 15, 15, 15]

Filter()

O método filter() cria um filtro a partir de uma função que você criou, de modo a retornar somente os elementos que retornam true.

function somenteNomesCom5Caracteres(valor){
return valor.length <= 0;
}

let nomes = ['Micilini', 'Gabriele', 'Matheus', 'Edu', 'José'];

const resultado = nomes.filter(somenteNomesCom5Caracteres);

console.log(resultado);//Resultado: ['Edu', 'José']

Find()

O método find() retorna o primeiro elemento que retorna true através de uma função que você criou.

function maiorQueDez(valor){
return valor > 10;
}

let array1 = [1, 7, 9, 33, 10, 45];

const resultado = array1.find(maiorQueDez);

console.log(resultado);//33

Perceba que existem números ali que são maiores que 10, mas que não foram retornados pois o método find() retorna somente o primeiro elemento verdadeiro que encontrar.

findIndex()

O método findIndex() retorna o índice do primeiro elemento que retorna true através de uma função que você criou.  

function maiorQueDez(valor){
return valor > 10;
}

let array1 = [1, 7, 9, 33, 10, 45];

const resultado = array1.findIndex(maiorQueDez);

console.log(resultado);//3, pois o 33 está localizado no índice 3

findLast()

O método findLast() retorna o valor do último elemento que retorna true através de uma função que você criou.

function maiorQueDez(valor){
return valor > 10;
}

let array1 = [1, 7, 9, 33, 10, 45];

const resultado = array1.findLast(maiorQueDez);

console.log(resultado);//45

findLastIndex()

O método findLastIndex() retorna o índice do último elemento que retorna true através de uma função que você mesmo criou.

function maiorQueDez(valor){
return valor > 10;
}

let array1 = [1, 7, 9, 33, 10, 45];

const resultado = array1.findLastIndex(maiorQueDez);

console.log(resultado);//5, pois o 45 está localizado no índice 5

Flat()

O método flat() inicialmente pega todos os possíveis elementos aninhados dentro de um array e os "desaninha", colocando-os no mesmo patamar.

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());//[0, 1, 2, 3, 4]

Quando usamos o método flat() sem informar um argumento, o JS entende que só queremos "desaninhar" somente o primeiro aninhamento que ele encontrar.

Caso tivermos aninhamentos dentro de aninhamentos, podemos passar um número para que o JS faça esse "desaninhamento" de forma mais profunda.

const arr1 = [0, 1, 2, [[[3, 4]]]];

console.log(arr1.flat());//[0, 1, 2, [[3, 4]]]

console.log(arr1.flat(2));//[0, 1, 2, [3, 4]]

console.log(arr1.flat(3));//[0, 1, 2, 3, 4]

FlatMap()

O método flatMap() retorna um novo array a partir de um array existente. Aqui ele chama uma função que você mesmo poderá criar.

function verificaSeNumeroDois(valor){
if(valor === 2){
return [9, 9];//Se o elemento '2' for encontrado, será adicionado no novo array os elementos '2' e '2'
}
return 0;//caso contrário vamos substituir por 0
}

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

const resultado = arr1.flatMap(verificaSeNumeroDois);

console.log(resultado);//[0, 9, 9, 0, 0, 0, 0]

forEach()

O método forEach() executa uma função que você criou de modo a enviar cada elemento de um array de forma separada.

Esse método é muito usado no JS, e trabalha de forma similar ao for...in, for, for...of, while...

A diferença é que estamos delegando o trabalho para uma função.

function mostra(valor){
console.log(valor);
}

let arr1 = ['Micilini', 25, 18.9, true];

arr1.forEach(mostra);//Micilini, 25, 18,9, true

Podemos definir um argumento na função de modo a retornar também a chave daquele item:

function mostra(valor, chave){
console.log('Chave: ' + chave + ', Valor: ' + valor);
}

let arr1 = ['Micilini', 25, 18.9, true];

arr1.forEach(mostra);//Chave: 0, Valor: Micilini...

Na maioria das vezes você verá funções que são declaradas dentro dos argumentos do forEach:

let arr1 = ['Micilini', 25, 18.9, true];

arr1.forEach(function(valor, chave){
console.log('Chave: ' + chave + ', Valor: ' + valor);
});

Muitos desenvolvedores seguem esse padrão, pois facilita um pouco a leitura.

Se preferir, você pode simplificar ainda mais o processo

let arr1 = ['Micilini', 25, 18.9, true];

arr1.forEach((valor, chave) => console.log('Chave: ' + chave + ', Valor: ' + valor));

From()

O método from() inicialmente ele pode criar um novo array a partir de uma string:

console.log(Array.from('Micilini'));//["M", "i", "c", "i", "l", "i", "n", "i"]

Ou, ele também pode criar um array a partir de um outro array onde este obedece a uma determinada função que você mesmo poderá criar:

function soma(valor){
return valor * valor;//Retorna a multiplicação com cada elemento do arrau consigo mesmo e retorna o resultado
}

console.log(Array.from([1, 2, 3], soma));//[1, 4, 9]

Includes()

O método includes() verifica se existe um determinado elemento dentro de um array, caso positivo retorna true, caso negativo retorna false.

const array1 = [1, 2, 3];

console.log(array1.includes(2));//True pois o valor '2' existe dentro do array

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));//True pois o valor 'cat' existe dentro do array

console.log(pets.includes('bird'));//False pois o valor 'bird' existe dentro do array

IndexOf()

O método indexOf() verifica se existe um determinado elemento dentro de um array e retorna o índice dele.

Caso ele não achar o elemento, o JS retorna -1.

const animais = ['formiga', 'leao', 'gato', 'macaco'];

console.log(animais.indexOf('cobra'));//Retornas -1

console.log(animais.indexOf('leao'));//Retorna 1

IsArray()

O método isArray() verifica se a variável informada é um array, caso positivo retorna true, caso negativo retorna false.

let arr1 = [1, 2, 3, 4, 5];
console.log(Array.isArray(arr1));//True

let arr2 = [];
console.log(Array.isArray(arr2));//True

let arr3 = new Array(3);
console.log(Array.isArray(arr3));//True

let arr4 = 'strings';
console.log(Array.isArray(arr4));//False

Join()

O método join() cria uma string a partir de todos os elementos existentes em um array. Podemos utilizar separadores também.

const elementos = ['Agua', 'Ar', 'Fogo'];

console.log(elementos.join());//Agua,Ar,Fogo

console.log(elementos.join(''));//AguaArFogo

console.log(elementos.join('-'));//Agua-Ar-Fogo

Keys()

O método keys() retorna um array iterador contendo a numeração das chaves (keys) de um array, para que possamos percorrer sobre elas.

const array1 = ['a', 'b', 'c'];
const iterador = array1.keys();

for (chave of iterador) {
console.log(key);//0, 1, 2
}

LastIndexOf()

O método lastIndexOf() retorna o último índice de um determinado elemento que existe dentro de um array.

Caso não for encontrado, ele retorna -1.

const animais = ['Passaro', 'Tigre', 'Onça', 'Jacaré'];

console.log(animais.lastIndexOf('Passaro'));//0

console.log(animais.lastIndexOf('Tigre'));//1

Map()

O método map() cria um novo array a partir do retorno de uma função que você criou.

const array1 = [1, 2, 3, 4];

function multiplicaPorDez(valor){
return valor * 10;
}

const map1 = array1.map(multiplicaPorDez);

console.log(map1);//10, 20, 30, 40

Array.Of()

O método array.of() cria um array a partir de argumentos.

console.log(Array.of('ola', 23, true));//['ola', 23, true]

console.log(Array.of());//[]

Pop()

O método pop() é responsável por deletar o último elemento existente em um array.

const numeros = [1, 2, 3, 4, 5];

numeros.pop();

console.log(numeros);//[1, 2, 3, 4]

Push()

O método push() adiciona um novo elemento no final de um array existente.

const numeros = [1, 2, 3, 4];

numeros.push(5);

console.log(numeros);//[1, 2, 3, 4, 5]

const animais = ['gato']

animais.push('cachorro', 'cobra', papagaio);

console.log(animais);//['gato', 'cachorro', 'cobra', 'papagaio']

Reduce()

O método reduce() é um método que pilar da programação funcional. Seu objetivo é executar uma função para cada elemento de um array, de modo a acumular um único valor de uma matriz.

function acumulador(acumulador, valorAtual){
return acumulador + valorAtual;
}

const arrayA = [10, 20, 30, 40];
console.log(arrayA.reduce(acumulador));//No primeiro Loop ele pega o valor do índice 0 e soma com o índice 1, e vai acumulando. É como se somássemos todos os numeros do array resultando em 100

function acumulador(acumulador, valorAtual){
return acumulador + valorAtual;
}

const arrayA = [10, 20, 30, 40];
console.log(arrayA.reduce(acumulador, 100));//Mesma lógica do código anterior, a diferença é que aqui estamos acumulando mais 100 a soma inteira. Resultando em 200

É importante ressaltar que este método executa o reduce da esquerda para a direita.

ReduceRight()

O método reduceRight() funciona de forma similar ao reduce, a diferença é que ele começa da direita para a esquerda.

function concatenar(acumulador, valorAtual){
return acumulador + ', ' + valorAtual;
}

const arrayB = ['um', 'dois', 'tres'];

console.log(arrayB.reduceRight(concatenar));//'tres', 'dois', 'um'

Reverse()

O método reverse() reverte a ordem do array.

var meuArray = ['um', 'dois', 'três'];
meuArray.reverse();

console.log(meuArray) // ['três', 'dois', 'um']

Shift()

O método shift() remove o primeiro elemento da lista do array.

const array1 = [1, 2, 3];

const resultado = array1.shift();

console.log(array1);//[2, 3]

Slice()

O método slice() serve para remover elementos dentro de um alcance no array.

const animais = ['touro', 'cobra', 'camelo', 'pato', 'leão'];

console.log(animais.slice(2))//Remove do índice 0 até o índice 1. ['camelo', 'pato', 'leão']

console.log(animais.slice(2, 4));//Fica somente com o índice 2 até o índice 4. ['camelo', 'pato']

console.log(animais.slice(-2));//Fica com os 2 últimos. ['pato', 'leão']

console.log(animais.slice());//Sozinho ele não corta nada. ['touro', 'cobra', 'camelo', 'pato', 'leão']

Some()

O método some() verifica se pelo menos 1 elemento retorna true na sua função que você criou. Caso contrário, retorna false.

const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function verificaMaiorQueNove(valor){
return valor > 9;
}

console.log(array1.some(verificaMaiorQueNove));

Sort()

O método sort() classifica os elementos de um array em ordem crescente, com o menor valor primeiro e o maior por último.

let numeros = [0, 1, 2, 3, 10, 20, 30];

numeros.sort();

console.log(numeros);//0, 1, 10, 2, 20, 3, 30

No código acima o sort() colocou 10 na frente do 2 pois a string '10' vem antes da string '2' ao fazer uma comparação entre string.

Para corrigir essa interpretação do JS, você pode passar uma função dentro do método, veja:

function comparar(a, b){
if(a > b) return 1;
if(a < b) return -1;
return 0;
}

let numeros = [0, 1, 2, 3, 10, 20, 30];

numeros.sort(comparar);

console.log(numeros);//0, 1, 2, 3, 10, 20, 30

Já quando temos um array de string, ela organiza de forma alfabética:

let animais = ['gato', 'leão', 'zebra', 'cachorro', 'aguia', 'golfinho'];

animais.sort();

console.log(animais);//["aguia", "cachorro", "gato", "golfinho", "leão", "zebra"]

Se você quiser organizar de trás para frente, você vai precisar criar uma função para isso:

function modificar(a, b){
if(a > b) return -1;
if(a < b) return 1;
return 0;
}

let animais = ['gato', 'leão', 'zebra', 'cachorro', 'aguia', 'golfinho'];

animais.sort(modificar);

console.log(animais);//["zebra", "leão", "golfinho", "gato", "cachorro", "aguia"]

Splice()

O método splice() é capaz de remover ou substituir elementos existentes e/ou adicionar novos elementos.

let numeros = ['um', 'três', 'quatro', 'cinco'];

numeros.splice(1, 0, 'dois');//Entre o 'três' e o 'um' ele adiciona a string 'dois'

console.log(numeros);//["um", "dois", "três", "quatro", "cinco"]

numeros.splice(4, 1, 'seis');//Substitui 'cinco' por 'seis'

console.log(numeros);//["um", "dois", "três", "quatro", "seis"]

ToLocaleString()

O método toLocaleString() retorna uma string representando os elementos do array.

const array1 = [1, 'a', new Date('12 Jun 2023 18:06:40 UTC')];
const localeString = array1.toLocaleString('pt-br', { timeZone: 'UTC' });

console.log(localeString);//"1,a,12/06/2023, 18:06:40"

ToReversed()

O método toReversed() retorna um novo array reverso sem modificar o array original.

const items = [1, 2, 3];

console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();

console.log(reversedItems); // [3, 2, 1]

console.log(items); // [1, 2, 3]

ToSorted()

O método toSorted() retorna um novo array organizado sem modificar o array original.

const array1 = ["Grande", "Pequeno", "Médio"];
const sortedArray = array1.toSorted();

console.log(sortedArray); // ["Grande", "Médio", "Pequeno"]
console.log(array1); // ["Grande", "Pequeno", "Médio"]

ToSpliced()

O método toSpliced() é capaz de remover ou substituir elementos existentes e/ou adicionar novos elementos sem alterar o array original.

const meses = ["Jan", "Mar", "Apr", "May"];

const meses2 = meses.toSpliced(1, 0, "Feb");
console.log(meses2); // ["Jan", "Feb", "Mar", "Apr", "May"]

const meses3 = meses2.toSpliced(2, 2);
console.log(meses3); // ["Jan", "Feb", "May"]

const meses4 = meses3.toSpliced(1, 1, "Feb", "Mar");
console.log(meses4); // ["Jan", "Feb", "Mar", "May"]

console.log(meses); // ["Jan", "Mar", "Apr", "May"]

ToString()

O método toString() retorna uma string representando a matriz especificada e seus elementos.

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());//"1,2,a,1a"

Unshift()

O método unshift() adiciona os elementos especificados ao início de um array e retorna o novo comprimento dele.

const array1 = [1, 2, 3];

array1.unshift(4, 5);

console.log(array1);//[4, 5, 1, 2, 3]

Values()

O método values() retorna um iterador onde podemos interagir com os valores de um array.

const array1 = ['a', 'b', 'c'];
const iterador = array1.values();

for (valor of iterador) {
console.log(valor);//a, b, c
}

With()

O método with() altera o valor de um índice especificado sem alterar o array original.

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6));//Altera o índice 2 para o valor 6. Resultado: [1, 2, 6, 4, 5]

console.log(arr);//Array original permanece intacto. Resultado: [1, 2, 3, 4, 5]

Como criar estruturas de chave e valor usando Arrays?

Arrays em javascript não são como arrays em outras linguagens de programação. Eles são apenas objetos com alguns recursos extras que os fazem parecer um array.

É aconselhável que, se tivermos que armazenar os dados em sequência numérica, use um array, caso contrário, use objetos sempre que possível.

Observe abaixo como podemos usar objetos para criar estruturas de chave e valor de maneira automatizada.

let obj = {};

//Os comandos abaixo estamos adicionando novas estruturas de chave e valor para dentro do objeto que está inicialmente vazio
obj['nome'] = 'Micilini';
obj['site'] = 'micilini.com';
obj['idade'] = 25;
obj['caracteristicas'] = ['leve', 'focado', 'professor'];

console.log(obj);

Sendo assim, não é possível criar estruturas de chave e valor usando Arrays no Javascript.

Entretanto existe uma estrutura de dados embutida disponível no ES6 chamada Map, que pode ser usada para armazenar os dados do par chave-valor.

Funções e Classes

Sim, no mundo do JS as funções (functions) e as classes (class) também são consideradas dados não primitivos.

No caso das funções o JS considera elas como objetos de primeira classe, uma vez que, elas podem ser passadas ​​para outras funções, receber retornos de funções e também podem ser atribuídas a variáveis​​e propriedades.

Para saber mais sobre funções, temos um conteúdo especial que fala tudo sobre elas.

Já as classes (class) não são consideradas objetos, mas sim um template de objetos em JS.

Sem mais spoilers, ok? Pois teremos uma jornada exclusiva onde falaremos tudo sobre classes e mais um pouco 😄

Conclusão

Neste conteúdo você aprendeu um pouco mais sobre os 3 tipos de dados não primitivos suportados no Javascript, são eles:

Te aguardo na próxima jornada 🙂