Devolver false en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Devolver false en JavaScript
Muhammad Muzammil Hussain 12 octubre 2023
JavaScript JavaScript Return
  1. Sentencias return en JavaScript
  2. Usar el método preventDefault() en JavaScript
  3. Utilice el método Return False en JavaScript
  4. Cuándo y por qué usar return false en JavaScript
  5. Diferencia entre return false y preventDefault() en JavaScript
Devolver false en JavaScript

Este artículo explicará la declaración return false de JavaScript, la necesidad de usarla y cómo usarla en programas de JavaScript. También explicará la diferencia entre declaraciones return false y preventDefault.

Sentencias return en JavaScript

Las sentencias return de JavaScript omiten las ejecuciones de las funciones y regresan a la función de llamada. Las sentencias return pueden o no devolver ningún valor.

A continuación se muestra un ejemplo de una sentencia return simple en JavaScript.

//  This return statement returns the product of 'x' and 'y'
function myFunction(x, y) {
  return x * y;
}

Asimismo, podemos devolver verdadero o falso en una simple función de JavaScript.

function is_Equal(num1, num2) {
  if (num1 == num2) {
    return true;
  } else {
    return false;
  }
}

Usar el método preventDefault() en JavaScript

Este método detiene el evento si se puede detener, lo que significa que no se producirá la acción predeterminada que pertenece al evento. Simplemente evita el comportamiento predeterminado del navegador.

Podemos usar la función preventDefault() de muchas maneras como:

  1. Una vez que haga clic en el enlace, evitará que el enlace siga la URL.
  2. Si hace clic en una casilla de verificación, la función alternará la casilla de verificación.
  3. Si hace clic en el botón Submit, impedirá enviar un formulario.

Utilice el método Return False en JavaScript

Return false sigue los siguientes tres pasos.

  1. Detiene el comportamiento predeterminado del navegador.
  2. Evita que el evento propague el DOM.
  3. También detiene la ejecución de devolución de llamada y vuelve inmediatamente.

Los desarrolladores usan el return false en muchos casos diferentes.

  1. Se basa en el valor booleano (verdadero o falso). Si un campo de formulario está vacío, la función genera un mensaje de alerta, que devuelve falso, lo que impide que se envíe el formulario.
// without using preventDefault or return false
<!DOCTYPE html>
<html>

<head>
	<title>
		without PreventDefault( ) or Return false
	</title>
	<script>
		function f_Child() {
			alert('Link Clicked');
		}

		function f_Parent() {
			alert('div Clicked');
		}
	</script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
		without PreventDefault( ) or Return false
	</h1>


	<div onclick='f_Parent()'>
		<a href='https://www.delftstack.com/'
		onclick='f_Child()'>Click here to visit delfstack.com</a>
	</div>
	<br>
	<br>
</body>

</html>

En el ejemplo anterior, el enlace Delftstack mencionado se abrirá como el comportamiento predeterminado del navegador, ya que no hemos utilizado preventDefault o return false.

  1. El siguiente ejemplo muestra que el uso de preventDefault cambiará el comportamiento predeterminado del navegador.
// using preventDefault
<!DOCTYPE html>
<html>

<head>
	<title>
		with PreventDefault()
	</title>
	<script>
		function f_Child() 
        {
			event.preventDefault();
			event.currentTarget.innerHTML = 'Click event prevented'
			alert('Link Clicked');
		}

		function f_Parent() 
        {
			alert('div Clicked');
		}
	</script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
				using preventDefault
			</h1>

	<div onclick='f_Parent()'>
		<a href='https://www.delftstack.com/'
		onclick='f_Child()'>Click here to visit delftstack.com</a>
	</div>
	<br>
	<br>
</body>

</html>
  1. Mientras que en el siguiente ejemplo, return false evita que el evento se propague a través del DOM.
// using return false
<!DOCTYPE html>
<html>

<head>
	<title>
		Return false
	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
			using return false
	</h1>

	<div>
		<a href='https://www.google.com'>Click here to visit google.com</a>
	</div>
	<script>
		$('a').click(function(event) 
        {
			alert('Link Clicked');
			$('a').text('Click event prevented using return FALSE');
			$('a').contents().unwrap();
			return false;
		});
		$('div').click(function(event) 
        {
			alert('Div clicked');
		});
	</script>
	<br>
	<br>
</body>

</html>

Por lo tanto, el uso de return hace que su código se cortocircuite y detenga la ejecución inmediatamente, y use la declaración return false para evitar que suceda algo.

Cuándo y por qué usar return false en JavaScript

  1. La declaración Return false se usa para evitar que algo suceda.
  2. Cuando se llama a una declaración return false en una función, la ejecución de esta función se detiene. Si se especifica, se devuelve un valor dado a la persona que llama a la función.
  3. En los controladores de eventos, como onsubmit, devolver falso es una forma de saber que el evento no se activará. Entonces, en el caso de onsubmit, esto significaría que el formulario no se envía.

Ejemplo:

<!DOCTYPE html>
<html>

<head>
  <title>
	  Return false Statement in JavaScript
  </title>
  <script>
	  function validateForm() 
	{
		  var a = document.forms["myForm"]["fname"].value;
		// use of return false statement if name field is empty
		  if (a == "") 
		{
			  alert("Please enter value in name field");
			  return false;
		  }
	  }
  </script>
</head>

<body style="text-align:center;">
  <h1 style="color: rgb(128, 0, 6);"> 
		  Return False Statement
  </h1>
  <form name="myForm" 
		action="/action_page.php" 
		onsubmit="return validateForm()" 
		method="post">
	  Name:
	  <input type="text" name="fname">
	  <input type="submit" value="Submit">
  </form>
</body>

</html>

Diferencia entre return false y preventDefault() en JavaScript

En JavaScript, tanto return false como preventDefault() se utilizan para detener el comportamiento predeterminado del navegador, pero sus funcionalidades y usos son ligeramente diferentes.

La principal diferencia entre estas declaraciones es que el código después de return false no se ejecutará, mientras que el código después de preventDefault() sí se ejecutará.

Artículo relacionado - JavaScript Return