5 ways to write 1 function
Tags: beginners, javascript, tutorial
Published: 2023-08-28 13:07:27

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:

```js
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:

```js
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:

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

Great!

Except, we can have unexpected consequences:

```js
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:

```js
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:

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function).

We have two more options to use — [function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function) or [arrow syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

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:

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

We do not have to explicitly put a `return` statement.

And we can look extra cool with [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

```js
const greet = (name) => `Hi, ${name}`;
```

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) that can be said about functions, that can't be said here.

Happy coding!