¿Cómo reemplazar un valor si es nulo o indefinido en JavaScript?

En JavaScript, si una variable no se inicializa con ningún valor, se establece en undefined . Podemos establecer un valor predeterminado si un valor no está definido. Esto se puede hacer de dos maneras.

Ejemplo 1: Usando controles if (Fuerza bruta). En este método, verificaremos manualmente si un valor no es nulo o no está definido , si es así, configúrelo en algún valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
        content="ie=edge">
    <title>Demo</title>
</head>
  
<body>
    <h1 style="color: green; 
            text-align: center;">
        GeeksforGeeks
    </h1>
    <h3 style="text-align: center;">
        Replace a value if null or undefined
    </h3>
    <div style="margin-top: 50px;
                text-align: center;">
        <input type="text" id="anyId">
        <button type="submit"
                onclick="defaultValue_ifcheck()">
        Submit
        </button>
    </div>
  
      
    <script>
  
        // By using if-check 
        function defaultValue_ifcheck() {
            var oldValue = document.getElementById("anyId").value;
            var newValue;
            if (!oldValue) {
                newValue = 
                "This is default value: Geeksforgeeks";
            } else {
                newValue = oldValue;
            }
            alert(newValue);
        }
    </script>
</body>
</html>                    

Producción:

Ejemplo 2: mediante el uso del operador lógico OR (||). En este método, si el valor es nulo o indefinido , simplemente se reemplazará por el valor predeterminado establecido por el usuario.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" 
          content="ie=edge">
    <title>Replace a value if null or undefined</title>
</head>
  
<body>
    <h1 style="color: green; 
               text-align: center;">
        GeeksforGeeks
    </h1>
    <h3 style="text-align: center;">
        Replace a value if null or undefined
    </h3>
    <div style="margin-top: 50px;
                text-align: center;">
        <input type="text"
               id="anyId">
        <button type="submit" 
                onclick="defaultValue_or()">
          Submit
        </button>
    </div>
</body>
<script>
  
    // By using Logical OR (||)
    function defaultValue_or() {
        var oldValue = document.getElementById("anyId")
        .value;
        var newValue = oldValue ||
            "This is default value: Geeksforgeeks";
        alert(newValue);
    }
</script>
  
</html>

Producción:

Nota: En el Método 2, no use el siguiente newValue = 10 || valor antiguo; . Siempre establecerá newValue en 10 porque 10 siempre devolverá verdadero.

Publicación traducida automáticamente

Artículo escrito por sanjeev2552 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta