5 ways to write 1 function

One of the beauties of JavaScript is the many different ways available to accomplish a task.

One of the difficulties of JavaScript is the many different ways available to accomplish a task.

In this tutorial, we'll explore the diverse methods for crafting a basic function.

Our focus: a straightforward name logging function.

Let's proceed!

0. What is a function

A function is reusable piece of code that can optionally take arguments and can return a value, do something, or both.

1. The Fundamentals

Let's start with an incredibly simple function:

function greet() {
  console.log("Hi, Maria");
}

greet();
// "Hi, Maria"

When the greet() function is called, all it does is log the message "Hi, Maria" to the console.

This function is doing something; it is calling another function, console.log, which logs the string.

But what if we wanted to use the name elsewhere?

2. Incorporating Variables

If we want other functions to have access to the name, we can use a variable:

var name = "Maria";

function greet() {
  console.log("Hi, " + name);
}

greet();
// "Hi, Maria"

This produces the same result as before.

Also, now we can write other functions that use the variable:

function capitalize() {
  name = name.toUpperCase()
}

Great!

Except, we can have unexpected consequences:

capitalize();
greet();
// "Hi, MARIA"

Oh, no! Thankfully, there is a way to fix that, parameters.

3. Parameters

We can pass in parameter's to our functions so that they are scoped:

function greet(name) {
  console.log("Hi, " + name);
}

greet("Maria");
// "Hi, Maria"

Unlike the previous example, where the greeting's outcome could be changed due to modifications in a shared global variable (i.e. name), the use of parameters ensures that the greeting's content remains consistently reliant on the specific values passed into the function.This mitigates unexpected alterations and provides a more controlled and predictable behavior.

But what if we wanted to use this greeting in other places, not just the console?

4. Return Statements

If we want to use the greeting in other places, instead of logging the statement we can return it:

function greet(name) {
  return "Hi, " + name;
}

console.log(greet("Maria"));
// "Hi, Maria"

This time, instead of our function logging the greeting, it simply returning the greeting, which we can use any way we want.

In the example we just logged it again, but you could use it as a greeting on a website.

But what if we want to impress people with our cool looking code?

5. Embracing Arrow Syntax

The syntax we've been using is called a function declaration.

We have two more options to use — function expressions or arrow syntax.

There are real differences between all three, but for our purposes the results will be the same.

With the arrow syntax we can write our function like this:

const greet = (name) => "Hi, " + name;

We do not have to explicitly put a return statement.

And we can look extra cool with template literals

const greet = (name) => Hi, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">;

More to learn

We learned about the many ways to write a simple function and the pitfalls to some of those ways

There is a lot more that can be said about functions, that can't be said here.

Happy coding!