DEV Community

Cover image for 5 ways to write 1 function
Charles Loder
Charles Loder

Posted on

1

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"


Enter fullscreen mode Exit fullscreen mode

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"


Enter fullscreen mode Exit fullscreen mode

This produces the same result as before.

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



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


Enter fullscreen mode Exit fullscreen mode

Great!

Except, we can have unexpected consequences:



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


Enter fullscreen mode Exit fullscreen mode

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"


Enter fullscreen mode Exit fullscreen mode

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"


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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">;

Enter fullscreen mode Exit fullscreen mode




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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay