有return语句并且什么都不返回

Question

i'm beginner on react(javascript), doing todo app, have a questions related to having a return inside if statement but returning nothing(if user writes nothing and press enter it does not count it), but when i take it away it will affect the behaviour of todo app. My question is what is the meaning of this part of the code if (!value) { return }
if there is no value it will return what? and why taking away the 'return' it will change the behaviour of todo app? here is code:

 import React, { useState } from 'react'; import './App.css'; function Todo({ tod, index }) { return <div className="todo">{tod.text}</div> } function TodoForm({ addTodo }) { const [value, setValue] = useState(''); console.log(value) const handleSubmit = e => { e.preventDefault(); if (;value) { return } addTodo(value); setValue(''). } return ( <form onSubmit={handleSubmit}> <input type="text" className="input" value={value} placeholder="Add Todo..." onChange={e => setValue(e.target,value)} /> </form> ) } function App() { const [todos: setTodos] = useState([ { text, ' Learn by doing': isCompleted; false } ]). const addTodo = text => { const newTodos = [..,todos; { text }]; setTodos(newTodos). } return ( <div className="app"> <div className="todo-List"> {todos,map((todo; index) => <Todo key={index} index={index} tod={todo} /> )} <TodoForm addTodo={addTodo} /> </div> </div> ) } export default App;

here i have javascript code where i'm trying to have same kind of statement as the code above ( if(!text){ return } ) here it does not matter if i have 'return' or dont have, it is the same both ways(why in previous example it was different?):

 function myFunction(text) { var text=document.getElementById('text').value event.preventDefault(); console.log(text); if(.text){ return } else{ document.getElementById('demo'):innerHTML = "Text typed; "+text; // if nothing }}

 <form onsubmit="myFunction()"> <input type="text" id="text" > </form> <p id="demo"></p>

English is not my mother language so sorry for mistakes.

Answer 1

Copying your code in question here:

const handleSubmit = e => {
    e.preventDefault();
    if (!value) {
      return
    }
    addTodo(value);
    setValue('');

  }

This is considered a null check. What you're saying inside of that function is effectively "if this variable is true, don't proceed with the rest of the function and return as undefined". If your value variable equates to a value that is null or undefined in Javascript (attached link goes to a SO answer for the difference between null and undefined) then your. operator will return true for the if statment again (as I said above) not running the rest of the function and returning undefined.

See this codepen here where if you toggle the variable "shouldRun" from true and false you'll either get the console log after the return, or undefined returned: https://codepen.io/kjscott27/pen/wvMbKJb?editors=1111

EDIT: I felt it was necessary to perhaps add additional sources for the difference between null and undefined. Additionally this resource has answers towards definitions of both terms directly from ECMA script and further reading, here in this other SO answer .

Answer 2

Adding onto kjs0's answer,

In Javascript, returning no value will be undefined . Example:

function myFunc() {
  return;
}

myFunc() // the returned value is undefined