DEV Community

Aman Kumar
Aman Kumar

Posted on

Understanding JavaScript Functions in a Fun Way! 🎉

#webdev #javascript #beginners #programming

1. Creating Functions 🛠️

Functions are one of the most important building blocks in JavaScript! Let’s explore how to create and use them with simple examples.

Example 1: Print Your Name 🖨️ 

function myname() {
    console.log("A");
    console.log("y");
    console.log("u");
    console.log("s");
    console.log("h");
}
myname();
Enter fullscreen mode Exit fullscreen mode
  • Explanation: The function myname() logs each letter of the name "Ayush" to the console when called. The () after myname is used to execute the function.

2. Functions with Parameters & Arguments 📏

Example 2: Add Two Numbers ➕ 

function addTwoNumbers(number1, number2) {
    console.log(number1 + number2);
}
addTwoNumbers(3, 4); // Output: 7
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Here, number1 and number2 are parameters that receive values (arguments) when the function is called. In this case, 3 and 4 are the arguments passed in, giving the result 7.

But notice that this function doesn’t actually return anything! So if we tried to capture the result, it would be undefined:

const result = addTwoNumbers(3, 4);
console.log(`Result: ${result}`); // Output: Result: undefined
Enter fullscreen mode Exit fullscreen mode

3. Returning Values from Functions 🎁

To fix the issue of the function not returning anything, we can use the return keyword to actually send the result back!

function addTwoNumbers2(number1, number2) {
    return number1 + number2; // Returns the sum of number1 and number2
}
const result = addTwoNumbers2(3, 4);
console.log(result); // Output: 7
Enter fullscreen mode Exit fullscreen mode
  • Explanation: Now, the function returns the result instead of just printing it. This way, we can use it in other parts of the code.

4. Function with Default Parameters 🛡️

Sometimes, we may want to provide a default value for a function's parameter in case nothing is passed. Let’s see how that works.

Example 3: User Login ✍️ 

function userLogin3(username = "sam") {
    return `${username} just logged in.`;
}
console.log(userLogin3()); // Output: sam just logged in.
console.log(userLogin3("Ayush")); // Output: Ayush just logged in.
Enter fullscreen mode Exit fullscreen mode
  • Explanation: If no argument is passed to the userLogin3() function, the default value sam is used. If we pass a name like "Ayush," it will log "Ayush just logged in." instead!

5. Handling Undefined Values ❓

What if the user forgets to provide a username? Let’s build in a safeguard.

Example 4: Prompting for Input 🔑 

function userLogin2(username) {
    if (!username) { 
        console.log("Please enter a username.");
        return; // Stops the function if username is not provided
    }
    return `${username} just logged in.`;
}
console.log(userLogin2()); // Output: Please enter a username.
console.log(userLogin2("Ayush")); // Output: Ayush just logged in.
Enter fullscreen mode Exit fullscreen mode
  • Explanation: The function checks if username is undefined (i.e., no value was provided). If it is, it asks the user to input a username.

Recap 📝

  • Functions can print, return values, and accept arguments.
  • We can use parameters to pass information into functions and provide default values.
  • The return keyword is key for returning values and stopping function execution when needed.

Now you’re all set to create and manipulate functions like a JavaScript pro! 🚀

Top comments (0)