Retorno de JavaScript indefinido

1. indefinido en JavaScript
2. Escenarios que devuelven indefinido como salida
3. Diferencia entre indefinido y nulo
4. Conclusión

JavaScript tiene menos bibliotecas o marcos que otros lenguajes de programación. null e undefined representan valores vacíos en JavaScript.

Para reducir los errores que ocurren junto con undefined, es imprescindible tener una comprensión clara del motivo por el que se devuelve undefined. Veamos una descripción general rápida de indefinido en JavaScript.

indefinido en JavaScript

Entre los seis tipos primitivos de JavaScript, indefinido es un tipo especial de primitivo con su valor como indefinido. Simplemente, el único valor que tiene el tipo indefinido es indefinido.

undefined es una variable de alcance global que es una propiedad que no se puede escribir ni configurar. De acuerdo con las especificaciones de ECMA, el valor undefined se devuelve cuando a una variable no se le ha asignado un valor.

// uninitialized variable
let letters;
console.log(letters);

// non-existing array elements
let vowels = ['a', 'e'];
console.log(vowels[3]);

// non-existing object properties
let flower = {name: 'Rose'};
console.log(flower.color);

Producción :

undefined
undefined
undefined

Como parece en la salida, el valor indefinido se devuelve al acceder a una variable no inicializada, elementos de matriz no existentes o propiedades de objeto. Después de ejecutar cada fragmento de código por separado, podemos obtener tres salidas indefinidas.

Veamos las situaciones en las que JavaScript devuelve “indefinido” y algunas mejores prácticas para resolver la devolución de “indefinido”.

Escenarios que devuelven indefinido como salida

Acceso a una variable no inicializada

Si declaramos una variable sin inicializar un valor, la variable devolverá indefinida.

Código:

let letters;
console.log(letters);

Producción :

undefined

Al igual que en el fragmento de código, ninguno de los valores se asigna a la variable declarada letras. Como puede ver en la salida anterior, devuelve indefinido con la llamada de la variable, pero si asignamos un valor a la variable, devuelve el valor de abajo.

Código:

let letters = 5;
console.log(letters);

Producción :

5

Acceso a una propiedad inexistente

En el caso de acceder a una propiedad inexistente, se devuelve indefinido en lugar de arrojar un error. El siguiente ejemplo lo demuestra bien.

Código:

let flower = {name: 'Rose'};
console.log(flower.color);

Producción :

undefined

Aquí la propiedad del objeto flor tiene una propiedad como nombre. Pero al acceder, hemos llamado a la propiedad color, que es una propiedad inexistente de ese objeto.

Como se muestra en la salida, devuelve el valor indefinido como salida.

Como práctica recomendada, podemos verificar la disponibilidad de la propiedad usando la siguiente sintaxis antes de acceder a ella. Entonces podemos deshacernos de devolver indefinido como salida.

Sintaxis:

'propertyName' in objectName

Código:

let flower = {name: 'Rose'};

if ('color' in flower) {
  console.log(flower.color);
}

Parámetros de función de llamada

Cuando llamamos a una función con menos argumentos en lugar del número definido de argumentos, devuelve indefinido ya que no pasa todos los argumentos. Por lo tanto, tenemos que llamar a la función con el mismo número de argumentos.

Código:

function multiply(a, b, c) {
  a;
  b;
  c;
  return a * b;
}
console.log(multiply(5, 3));

Producción :

15

Ha asignado valores para a y b, 5 y 3, respectivamente al llamar a la función con dos argumentos para que devuelva 15 como salida después de asignar esos valores.

El siguiente código llama a la misma función con los mismos dos valores después de alterar la expresión de la declaración de retorno para multiplicar a, b y c por completo.

Código:

function multiply(a, b, c) {
  a;
  b;
  c;
  return a * b * c;
}
console.log(multiply(5, 3));

Producción :

NaN

Como se muestra en la salida, devuelve NaN en lugar de valores computacionales. La razón de que aparezca es que no pasa todos los argumentos y el valor de c permanece indefinido.

la instrucción return de una función

Otra instancia en la que la salida devuelve como “indefinido” es si alguna función no tiene una declaración de “retorno” o tiene una declaración de “retorno” sin una expresión cercana.

Por ejemplo, declaremos una función llamada sq_num que genera un número cuadrado de acuerdo con la entrada dada.

Código:

// doesn't have a return statement
function sq_num(x) {
  const result = x * x;
}
console.log(sq_num(2));

// return statement without an expression
function sq_num(x) {
  const result = x * x;
  return;
}
console.log(sq_num(2));

Producción :

undefined
undefined

Debemos declarar la instrucción return y una expresión mencionada en el siguiente código para que funcione esta función sq_num como se esperaba. A través de eso, podemos obtener el resultado computacional de la función como se muestra a continuación.

Código:

function sq_num(x) {
  const result = x * x;
  return result;
}
console.log(sq_num(2));

Producción :

4

Acceso a elementos fuera de límites en matrices

Si accedemos a elementos no definidos dentro de la matriz, se puede considerar que accedemos a elementos fuera de límites. Si ocurre tal situación, se devuelve el valor indefinido.

Código:

const animals = ['elephant', 'tiger', 'monkey'];
console.log(animals[5]);
console.log(animals[-1]);

Producción :

undefined
undefined

De la misma manera, las matrices dispersas presentan el mismo problema. Las matrices dispersas son matrices con espacios y elementos no indexados.

Al acceder a las ranuras vacías de la matriz, también devuelve el valor indefinido.

Código:

const SparseArray = ['elephant', , 'monkey'];
console.log(SparseArray);

Producción :

["elephant", undefined, "monkey"]

Aquí se crea la matriz SparseArray con tres elementos, faltando el segundo. Como se ve a continuación, devuelve indefinido al acceder al segundo elemento.

Código:

const SparseArray = ['elephant', , 'monkey'];
console.log(SparseArray[1]);

Producción :

undefined

Aparte de los escenarios anteriores, el valor undefined se devuelve junto con el operador void. A continuación se muestran ejemplos de cómo devuelve indefinido a pesar del resultado de la evaluación.

Código:

void 2;
console.log(void (true));

Producción :

undefined

Diferencia entre indefinido y nulo

JavaScript tiene valores “nulos” e “indefinidos” que representan valores vacíos.

Cuando una variable no tiene un valor asignado explícitamente, JavaScript le asigna el valor primitivo de indefinido. Como su nombre lo indica, null es un valor primitivo que representa una ausencia intencional de cualquier otro valor asignado.

Usando el operador typeof, podemos ver una distinción entre nulo e indefinido como se muestra a continuación.

typeof undefined;
typeof null;

undefined
object

En general, nulo indica que faltan objetos, mientras que indefinido es el valor utilizado en una variable no inicializada.

Conclusión

Este artículo describe la aparición de undefined junto con las variables no inicializadas, las propiedades inexistentes, los índices fuera de límite y el operador void.

Junto con lo discutido, algunas de las mejores prácticas se pueden aplicar mientras se usan junto con los ejemplos. Aparte, observamos la diferencia entre nulo y los valores definidos y sus instancias de uso.

Como buena práctica, deberíamos ser responsables de reducir la ocurrencia de undefined al reducir el uso de variables no inicializadas y arreglos dispersos.