Undefined: qual o significado, causas e como corrigir?   

Undefined, ou “Indefinido” em português, pode ser definido pelo dicionário como algo que não se pode definir, explicar, vago. E quando falamos de indefinido, ou undefined em JavaScript, não estamos nos referindo a algo muito diferente. 

Apesar de o undefined não ser um tema tão discutido, ele é importante e não deve ser negligenciado, uma vez que vai auxiliar o desenvolvimento da estrutura do seu código e até mesmo ajudará a evitar erros.

Caso conheça o tema, esse texto será ótimo para se aprofundar e entender melhor o que undefined dentro de JavaScript significa.

Leia com calma e, se quiser, replique os códigos para que auxilie no processo de compreensão e aprendizado da temática.

Nesse post você verá:

• O que significa undefined no Javascript?
• Quais as diferenças entre undefined e null?
• As diferenças de forma prática
• Quais as principais causas do undefined?
• O que causa o undefined em matrizes?
• Dicas para checar e corrigir o undefined e null de maneira correta!

O que significa undefined no Javascript?

Quando estamos falando sobre undefined, estamos falando sobre valores indefinidos, ou seja, há uma variável, mas não há valor atribuído a ela. Ainda, pode ser um objeto que não existe. 

Quais as diferenças entre undefined e null?

A diferença entre o termo undefined e null não é muito discutida dentro da comunidade JavaScript. Por vezes, algumas pessoas programadoras não entendem muito bem a diferença.

Agora, vamos resolver suas dúvidas acerca do tema e  ensinar de uma vez por todas as diferenças entre os casos. É importante atentar-se às diferenças, uma vez que o uso inadequado pode ocasionar problemas no código, principalmente em casos da necessidade de testes.

Dessa forma, quando nos referimos a uma variável undefined, como já foi descrito acima, estamos falando de uma variável que não possui valor algum. Porém, quando estamos falando de null, tratamos de um valor que pode ser atribuído a alguma variável e é representado por “nenhum valor”. 

Nesse sentido, undefined é uma variável, enquanto null é um objeto, ou valor de um objeto. No caso de null, é um objeto sem propriedades e imutável. Para fazer a verificação do tipo de objeto é só utilizar o operador “typeof” que retornará “objeto” como tipo. 

As diferenças de forma prática

Nas operações aritméticas

//demonstração da soma para usar a diferença entre undefined e null
undefined + 1;
//NaN
null + 3;
// 3

Aqui podemos ver que o undefined retornou um valor NaN enquanto null atuou como o valor zero na soma da operação, logo 0 + 3 = 3. 

Indefinidos e nulos são falsos

!!undefined;
//false
!!null;
//false

Quando são utilizados na lógica condicional, ambos retornam falso.

Quais as principais causas do undefined?

Não Inicialização da Variável

Para explicar esse ponto, vamos começar mostrando um código:

let minhaVariavel;
minhaVariavel; // -> undefined

Podemos ver que quando a minhaVariavel é criada, não é atribuído valor algum a ela, logo, ela é tida como undefined. Para resolver problemas de variáveis não inicializadas, o melhor caminho é sempre que for possível atribuir um valor inicial.

Uma curiosidade interessante é que poderia ser inicializado a criação da minhaVariavel com const que pede obrigatoriamente a atribuição de um valor, logo, o estado de inicialização com undefined é impossível.

Coesão

Quando nos referimos a coesão, estamos falando sobre o que caracteriza o grau de elementos em um módulo, como: classe, método, bloco de código etc. Tal qual podem ser classificados em coesão alta ou baixa. Logo, com um módulo de alta coesão, os elementos ficam concentrados em apenas uma tarefa, assim será possível: testar, reutilizar, refatorar de maneira simples e melhorar o foco e compreensão do código. Para que um sistema seja bem projetado a alta coesão é imprescindível aliado. 

Definindo Parâmetros

Para criação de funções definidas é importante utilizar uma quantidade específica de parâmetros, ou seja, valores esperados:

function multiply(x, y) {
	x; // -> 2
	y; // -> 6
	return x * y;
}
multiply(2, 6); // -> 12

No momento que definimos os parâmetros x e y e eles recebem 2 e 6 respectivamente, a multiplicação é efetuada conforme o valor esperado.

Porém, quando algum valor é omitido ele torna-se undefined. 

Vamos modificar um argumento no código:

function multiply(x, y) {
	x; // -> 2
	y; // -> undefined
	return x * y;
}
multiply(2, 6); // -> NaN

Como podemos observar, multiply(6) como não é repassado o valor do segundo parâmetro, não obtemos resposta. Para evitar esses casos, se for o objetivo, não esqueça de manter os valores padronizados. 

Acessar propriedades não existentes. 

Para acessar uma propriedade não existente, JavaScript nos retornará um valor undefined também. Para visualizarmos, podemos abordar o seguinte exemplo:

let musicaFavorita =  {
	nome = 'geleira do tempo'
};
musicaFavorita.segunda // => undefined

Definimos musicaFavorita como um objeto com apenas uma propriedade nome. Ao tentar acessar uma propriedade não existente, como segunda em musicaFavorita.segunda temos como retorno um estado undefined, gerando assim, um erro. 

O que causa o undefined em matrizes?

Para falar de undefined em matrizes podemos primeiro tentar acessar um elemento de uma matriz. 

Para isso, criamos o seguinte exemplo:

const cores = ['preto', 'branco', 'rosa']
cores[7]; // => undefined
cores[-1]; // => undefined

Como podemos ver, a nossa matriz tem 3 elementos, logo nós temos acesso apenas aos índices 0, 1 e 2.

Como podemos ver, não há índice 7 e -1, logo, quando tentamos acessar cores[7] e cores[-1], teremos como retorno o undefined. 

Em JavaScript, é possível encontrar matrizes esparsas que possuem índices onde não há elementos definidos.  Ou seja, quando um slot vazio é acessado em um array esparso, também temos undefined. 

Assim, é importante lembrar que ao trabalhar com matrizes é importante utilizar índices que sejam válidos nas matrizes e procurar evitar criar matrizes esparsas. 

Dicas para checar e corrigir o undefined e null de maneira correta!

Como já foi dito anteriormente, para checar o tipo de um objeto utilizamos o operador typeof. Para o undefined é bastante utilizado pois evita o lançamento de erros em variáveis não inicializadas. 

É importante deixar explícito que apesar de ser uma técnica comumente utilizada, é interessante que seja evitada, uma vez que JavaScript é uma linguagem de escopo estático, ou seja, para saber se uma variável é definida ou não é só verificar a definição global no contexto no qual está inserida. 

Para exemplificar o uso do typeof, vamos fazer um exemplo. Lembrando que typeof retornará uma string que nos dirá o tipo do operando. 

const lista = []
const countador = 2
 
typeof lista // "object"
typeof contador // "number"
typeof ator // "undefined"

Como a variável ator não recebeu nenhum valor, foi retornado a string indefinida. Agora vamos supor que temos um objeto filme e ele possui uma única propriedade:

const filme = {
  nome: 'minha mae é uma peça'
}

para verificar se a propriedade ator está definida neste objeto:

if (typeof filme.ator === 'undefined') {
  // ator is undefined
}

Como vimos, filme só tinha definida a propriedade nome. Como chamamos ator, uma propriedade na qual não havíamos definido, nos foi retornado o undefined. 

Agora, você quer saber como evitar o undefined e corrigir esses erros? Vem comigo que vamos conversar sobre isso! 

Verificando a existência de propriedades

Muito se foi falado em exemplos acerca de consultar propriedades inexistentes e isso automaticamente retorna como resultado o undefined, então, quando estiver codando não esqueça de verificar quais são as propriedades existentes do seu objeto criado para assim evitar esse tipo de erro. 

Felizmente, JavaScript vai poder lhe ajudar com essa missão e você pode consultar propriedades específicas para saber se existem ou não, como:

‘prop’ in obj: verifica se o objeto tem propriedade própria ou herdada

typeof obj.prop !== ‘undefined’: verifica o tipo de valor dessa propriedade

Coalescing nulo 

o operador nullish coalescing é responsável por verificar e avaliar para valores padrão se o operando é undefined ou null. É muito utilizado para acessar propriedades de objetos. 

Padronize o valor dos parâmetros

Por vezes, é possível definir padrões para os parâmetros que não tem um valor definido. Para isso é interessante sempre utilizar o recurso de parâmetros padrão do ES2015, pois não tem comparações diretas com undefined, além de que esse recurso é intuitivo e expressivo. Logo, pode ser utilizado sempre que for necessário definir valores padrão para parâmetros opcionais. 

Cuidado com automatização

Em JavaScript temos uma lista de instruções que deve terminar com ponto e vírgula (;): 

• declarações, como let, const, var, import, export, continue, break
• demonstrações, debugger, throw, return
• declaração de expressões e declaração vazia

Caso utilize-as, lembrese de usar o ponto e vírgula ao final. Quando esquecemos de adicionar o ponto e vírgula o próprio ASI(Automatic Semicolon Insertion) insere por nós. Porém, também podemos ter erro no código, então não esqueça de fazer suas próprias verificações para evitar erros nas expressões. 

Esperamos que, se você já conhecia o undefined, tenha se aprofundado ainda mais na temática. E para você que ainda não conhecia ou tinha familiaridade com o texto, tenha se tornado enriquecedor no aprimoramento do seu desenvolvimento, uma vez que entender o que é undefined vai auxiliar na construção de códigos e futuros sistemas/projetos que você possa vir a desenvolver.

Desse modo, vimos que entender a fundo sobre undefined, suas diferenças entre null faz total diferença no processo de construção e aprimoramento do aprendizado de pessoas desenvolvedoras. Ter familiaridade com o conceito e até mesmo saber o porque de não utilizá-lo, auxilia na construção de projetos. 

Gostou desse conteúdo? Então, vem aprender um pouco sobre JavaScript compreendendo as Arrays, como criá-las e utilizá-las!