Resumo : neste tutorial, você aprenderá sobre JavaScript undefined
e 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 null
valor.
JavaScript também tem o null
valor. Além disso, tem o undefined
valor. E ambos os valores null
e undefined
representam valores vazios em JavaScript.
O que é indefinido
O undefined
é um tipo primitivo em JavaScript. Então undefined
é um tipo. E o undefined
tipo tem exatamente um valor que é undefined
.
JavaScript usa o undefined
valor 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); // undefined
Linguagem de código: JavaScript ( javascript )
É uma boa prática sempre inicializar uma variável sempre que possível. Neste exemplo, você pode inicializar a counter
variável com zero, assim:
let counter = 0;
console.log(counter); // 0
Linguagem 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); // undefined
Linguagem de código: JavaScript ( javascript )
Neste exemplo, o counter
objeto possui uma propriedade current
. Acessar a max
propriedade que não existe no counter
objeto 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 in
operador:
'propertyName' in objectName
Linguagem 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 in
operador para verificar se a max
propriedade existe no counter
objeto 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 defaultValue
se object.propName
for undefined
ou 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,'$'); // $100
Linguagem de código: JavaScript ( javascript )
E voltou $100
como 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 undefined
Linguagem 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); // $100
Linguagem de código: JavaScript ( javascript )
4) Funções retornam um valor
Uma função que não possui uma return
instruçã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); // undefined
Linguagem de código: JavaScript ( javascript )
Da mesma forma, quando uma função possui uma return
instruçã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); // undefined
Linguagem de código: JavaScript ( javascript )
Considere o seguinte exemplo:
const add = (a,b) => {
return
a + b;
};
let result = add(10,20);
console.log(result); // undefined
Linguagem 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 return
palavra-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 undefined
o 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 undefined
valor. Por exemplo:
const colors = ['red', 'green', 'blue'];
console.log(colors[3]); // undefined
Linguagem de código: JavaScript ( javascript )
Neste exemplo, o colors
array não possui nenhum elemento no índice 3. Portanto, o colors[3]
retorno é undefined
.
Resumo
- O
undefined
é um tipo primitivo que possui um único valorundefined
. - 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
return
instrução ou comreturn
instrução mas sem expressão retornaundefined
.