A JavaScript function is a block of code designed to perform a particular task, A JavaScript function is executed when "something" invokes it or we can say when the function is called.
function sayMyName(){
console.log("H");
console.log("A");
console.log("R");
console.log("s");
console.log("H");
}
console.log(sayMyName); //this is a reference of function
//outputs: [Function: sayMyName]
sayMyName(); //this executes the function
//outputs:
// H
// A
// R
// S
// H
console.log(sayMyName()); //this will provide a little different output
//outputs:
// H
// A
// R
// S
// H
// undefined
Reason for the extra undefined
Both are execution of the function, only difference is that sayMyName() calls the function and logs the value, but console.log(sayMyName()) also logs the return value of the function and this function does not return any value explicitly, therefore returning a default value of undefined.
Adding 2 numbers in JS using functions
function addTwoNumbers(number1, number2){
console.log(number1 + number2);
}
//while defining a function, the variables passed are called parameters
addTwoNumbers(3, 4);
//outputs: 7
addTwoNumbers(3, "4"); //type conversion occurs
//outputs: 34
addTwoNumbers(3, "a");
//outputs: 3a
addTwoNumbers(3, null);
//outputs: 3
addTwoNumbers(3, undefined);
//outputs: NaN
//while calling function, the value we pass are known as arguments
Can we store the output value of a function inside a variable, let's find out
function addTwoNumbers(number1, number2){
console.log(number1 + number2);
}
const result = addTwoNumbers(3,5);
//outputs: 8
console.log("Result: ", result);
//outputs: Result: undefined
Now why does this undefined appear as it outputs 8 while running the code
the 8 is not known as the return value of the function addTwoNumbers.
The 8 is the output of the console.log statement inside the function. The function itself does not return a value; it only logs the result to the console. The return value of the function is undefined by default because there is no return statement.
Creating a function that returns a value
function subtractTwoNumbers(number1, number2){
let output = (number1 - number2);
return output;
console.log("harsh"); // won't get printed as code below return statement
// doesnt get executed
}
const return_result = subtractTwoNumbers(10, 5);
console.log(return_result);
//outputs: 5
In JavaScript, the return statement is used to send a value back from a function. This value can be captured and used anywhere in our code (as we stored the return value in "return_result" and printed it). Understanding that any code after a return statement is not executed is crucial for proper function design and avoiding unnecessary code execution. This simple yet powerful concept is foundational for working effectively with JavaScript functions.
We can also write the above function as
function subtractTwoNumbers(number1, number2){
return number1 - number2;
}
const Finalresult = subtractTwoNumbers(20, 10);
console.log(Finalresult);
//outputs: 10
Let's create another function
function loginUserMessage(username){
if(username === undefined){
console.log("Please enter your name");
return;
}
return `${username} just logged in`
}
console.log(loginUserMessage("harsh"));
//outputs: harsh just logged in
console.log(loginUserMessage(""));
//outputs: just logged in
console.log(loginUserMessage());
//outputs: Please enter your name
//undefined