JavaScript indefinido

Resumo : neste tutorial, você aprenderá sobre JavaScript undefinede como lidar com ele de forma eficaz.

Se você trabalha com outras linguagens de programação, como Java ou C# , poderá descobrir que essas linguagens têm nullvalor.

JavaScript também tem o nullvalor. Além disso, tem o undefinedvalor. E ambos os valores nulle undefinedrepresentam valores vazios em JavaScript.

O que é indefinido

O undefinedé um tipo primitivo em JavaScript. Então undefinedé um tipo. E o undefinedtipo tem exatamente um valor que é undefined.

JavaScript usa o undefinedvalor nas seguintes situações.

1) Acessando uma variável não inicializada

Quando você declara uma variável e não a inicializa com um valor, a variável terá um valor de undefined.Por exemplo:

let counter;
console.log(counter); // undefinedLinguagem de código:  JavaScript  ( javascript )

É uma boa prática sempre inicializar uma variável sempre que possível. Neste exemplo, você pode inicializar a countervariável com zero, assim:

let counter = 0;
console.log(counter); // 0Linguagem de código:  JavaScript  ( javascript )

2) Acessando uma propriedade inexistente de um objeto

Se você acessar uma propriedade inexistente de um objeto , você obterá undefined. Por exemplo:

let counter = {
   current: 0
};
console.log(counter.max); // undefinedLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, o counterobjeto possui uma propriedade current. Acessar a maxpropriedade que não existe no counterobjeto retorna undefined.

É uma boa prática verificar se o imóvel existe antes de acessá-lo. JavaScript fornece algumas maneiras de fazer isso.

E a forma mais comum de verificar se o objeto possui uma propriedade é usar o inoperador:

'propertyName' in objectNameLinguagem de código:  JavaScript  ( javascript )

Observe que você precisa colocar o nome da propriedade do objeto entre aspas simples ou duplas.

O exemplo a seguir usa o inoperador para verificar se a maxpropriedade existe no counterobjeto antes de acessá-lo:

let counter = {
   current: 0
};

if('max' in counter) {
    console.log(counter.max);
}Linguagem de código:  JavaScript  ( javascript )

Se você deseja atribuir um valor padrão quando a propriedade de um objeto não existe, você pode usar o operador de coalescência nulo ( ??):

const propValue = object.propName ?? defaultValue;Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, o operador de coalescência nulo ( ??) retorna defaultValuese object.propNamefor undefinedou null.

Observe que o operador de coalescência nulo está disponível desde ECMAScript 2020.

let counter = { current: 0 };
const max = counter.max ?? 100;Linguagem de código:  JavaScript  ( javascript )

3) Parâmetros de função

Ao chamar uma função com vários parâmetros, geralmente você passa o mesmo número de argumentos. Por exemplo:

const formatCurrency = (amount, currency) => {
   return currency === '$' ?
     `$${amount}`: `${amount} ${currency}`;
}
Linguagem de código:  JavaScript  ( javascript )

A formatCurrency()função possui dois parâmetros. Ao chamá-lo, você pode passar dois argumentos como este:

formatCurrency(100,'$'); // $100Linguagem de código:  JavaScript  ( javascript )

E voltou $100como esperado.

Mas quando você chama a formatCurrency()função e não passa todos os argumentos, os parâmetros dentro da função se tornam undefined. Por exemplo:

formatCurrency(100); // 100 undefinedLinguagem de código:  JavaScript  ( javascript )

Para evitar esta situação, você pode definir um valor padrão para os parâmetros da função como este:

const formatCurrency = (amount, currency = '$') => {
   return currency === '$' ?
     `$${amount}`: `${amount} ${currency}`;
}Linguagem de código:  JavaScript  ( javascript )

E ao chamá-lo sem passar o segundo argumento, você obterá um valor adequado:

formatCurrency(100); // $100Linguagem de código:  JavaScript  ( javascript )

4) Funções retornam um valor

Uma função que não possui uma returninstrução retorna implicitamente undefined. Por exemplo:

const log = (message) => {
  const time = (new Date()).toLocaleTimeString();
  console.log(`${time}: ${message}`);
};

const result = log('Hi');
console.log(result); // undefinedLinguagem de código:  JavaScript  ( javascript )

Da mesma forma, quando uma função possui uma returninstrução sem expressão, ela também retorna undefined. Por exemplo:

const add = (a,b) => {
    const result = a + b;
    return;
}

let result = add(10,20);
console.log(result);  // undefinedLinguagem de código:  JavaScript  ( javascript )

Considere o seguinte exemplo:

const add = (a,b) => {
    return 
       a + b;
};

let result = add(10,20);
console.log(result); // undefinedLinguagem de código:  JavaScript  ( javascript )

A add()função retorna undefined. Deveria ter retornado 30 em vez disso.

O problema é que quando você cria uma nova linha entre a returnpalavra-chave e a expressão retornada ( a + b), o compilador Javascript insere automaticamente um ponto e vírgula (;) antes da nova linha. Esse recurso é chamado de inserção automática de ponto e vírgula (ASI) em JavaScript.

A add()função será semelhante a esta para o compilador JavaScript:

const add = (a,b) => {
    return;
       a + b;
};Linguagem de código:  JavaScript  ( javascript )

É por isso que você obtém undefinedo resultado de retorno.

5) Acessando elementos do array fora dos limites

Ao acessar um elemento do array que está fora dos limites, você obterá o undefinedvalor. Por exemplo:

const colors = ['red', 'green', 'blue'];
console.log(colors[3]); // undefinedLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, o colorsarray não possui nenhum elemento no índice 3. Portanto, o colors[3]retorno é undefined.

Resumo

• O undefinedé um tipo primitivo que possui um único valor undefined.
• Acessar uma variável não inicializada retorna undefined.
• Acessar uma propriedade inexistente de um objeto retorna undefined.
• Acessar um elemento da matriz fora dos limites retorna undefined.
• Uma função sem returninstrução ou com returninstrução mas sem expressão retorna undefined.