DEV Community

Majeedat Abdulwahab
Majeedat Abdulwahab

Posted on

What are JavaScript Functions? A Beginners Guide to Writing And Using Them.

In programming, JavaScript functions are very versatile, handy, and absolutely essential. Whether you are making a calculator or building a web app, functions are your best friend.

But wait, what exactly are functions? Don't worry; I've got you covered! Let's dive into this magical world of reusable code, one step at a time.


What Is a Function, Anyway?

A function is essentially a block of code written with the aim of performing a certain task. You write it once and can call upon it every time you need it.


How to Write a Function

Let's write our first function, step by step.

function greet() {
  console.log("Hello, world!");
}
greet()
Enter fullscreen mode Exit fullscreen mode

Here's what's happening:

  • function: This keyword tells JavaScript you're about to define a function.
  • greet: This is the function's name. (It can be almost anything, but keep it descriptive!)
  • (): These parentheses are for any input the function might need.
  • {}: Curly braces contain the instructions your function will follow.

When you invoke this function by typing greet() in your console, your computer says with politeness:

Hello, world!


Parameters and Arguments

Functions get even cooler when you give them parameters. Think of these as variables that customize the function's behavior.

function greet(name) {
  console.log(`Hello, ${name}!`);
}
Enter fullscreen mode Exit fullscreen mode

Now, when you invoke the function with a name:

greet("Majeedat");
Enter fullscreen mode Exit fullscreen mode

The output is:
Hello, Majeedat!

Wait, Parameters? Arguments? What's the Difference?

  • Parameters: These are placeholders you define when declaring the function.
  • Arguments: These are the actual values you provide when you invoke the function.

Returning a Value

Some functions don't just log messages, they can return something.

function add(a, b) {
  return a + b;
}
Enter fullscreen mode Exit fullscreen mode

When you invoke it:

let result = add(5, 3);
console.log(result);
Enter fullscreen mode Exit fullscreen mode

Output:
8

The return keyword sends a value back to wherever the function was invoked.


Function Expressions

Here’s another way to define functions:

const greet = function(name) {
  console.log(`Hi, ${name}!`);
};
Enter fullscreen mode Exit fullscreen mode

This is called a function expression because you’re assigning a function to a variable.


Arrow Functions

Arrow functions are a modern, shorter way to write functions.

const greet = (name) => {
  console.log(`Hey, ${name}!`);
};
Enter fullscreen mode Exit fullscreen mode

For one-liners, you can even skip the curly braces:

const add = (a, b) => a + b;
console.log(add(2, 4)); // Output: 6
Enter fullscreen mode Exit fullscreen mode

Why Are Functions So Useful?

  1. Reusability: Write once, use everywhere.
  2. Readability: They make your code cleaner and easier to understand.
  3. Modularity: Break your code into small, manageable chunks.

Common Mistakes Beginners Make with Functions

A. Forgetting to Call the Function: Excellent, you have declared a function, but now don't forget to actually invoke it.

   function greet() {
     console.log("Oops, you forgot to call me!");
   }
   // Nothing happens until you do this:
   greet();
Enter fullscreen mode Exit fullscreen mode

B. Mismatched Arguments: This occurs if a function that expects, say, two arguments and you pass in one. Things will not likely work as they should. Here is a simple addition function that, depending on implementation detail, may actually be called a multifunction since it returns the first of a single argument.

function add(a, b) {
    return a + b;
}
console.log(add(5));    // Output: NaN (Not a Number)
Enter fullscreen mode Exit fullscreen mode

C. Infinite Loops: A function that calls itself without an end.


Wrapping Up

JavaScript functions are the backbone of dynamic and interactive web applications. With a little practice, they'll soon become second nature to you.

Now that you’ve got the basics, why not create a function of your own?

Until next time, your friendly neighborhood writer, MJ

Bye!!!

Top comments (0)