Understanding Undefined Value returned from a Function, clearer

Hi!
To all those who had a difficulty understanding this topic in the Basic Javascript lesson, I leave this here in case it helps someone else. I struggled for more than an hour on this and the next small code helped me understand.

var sum = 0;
function addSum(num) {
  sum += num;
  document.write("num= " + num);
  document.write(" , sum= " + sum + "</br>");
  //return num; //With this it's fixed.
}
//console.log("This is a test"); //didn't work :(
document.write("This is a second test: ");
document.write("Result of addSum= " + addSum(3) + "</br></br>");
document.write("</br>Result of 2nd addSum= " + addSum(1)); //If you change the value of assSum to nothing you'll see how the operations turn to a value of *undefined*.

document.write("</br></br>So this means the following :</br>A function always has a return value, even if not stated in a statement.</br>When a function is called and has no return value, the function processes the inner code but the returned value is 'undefined'.");
document.write("</br>(^_^)");

I played with it here: https://codepen.io/Newincome/pen/bJmwRM

Kind regards!!

Roger that
Thank you very much @camperextraordinaire