Functions in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2024-01-17 03:59:48

Functions are one of the fundamental building blocks in JavaScript. A function is basically a set of statements that performs a task or calculates a value. Let me show you a couple of examples.

So, I'm going to declare a function using the function keyword.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pqgqmdogpceffzaxavg.png)

 Now, we need to give it a name. Let's call that `greet`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip7mps5u499hcjhbaxn1.png)

After that, we need to add parenthesis. That's part of the syntax for declaring functions and then curly braces.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5mp7ubsriddfu1k8hnl.png)

Now, what we have here inside the curly braces is what we refer to as the body of this function. And this is where we add all these statements to define some kind of logic in our application. For example, the logic for this function should be to display a message on the console.

So, here we can add `console.log('Hello World');`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tflsr9x1tv2dcx6vrf2u.png)

Now note that here we have a statement. So, we terminated with a semicolon but when we are declaring a function, we don't need to add semicolon at the end because we are not declaring it like a variable like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8senzlozdjs1rls6ibj.png)

OK. This is a function declaration.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4t2btmtle1ic649okknu.png)

So now we have a function. We can call this function like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax8vc7r4i4l4a1tq5gb9.png)

So, we add the name of the function and parenthesis again, and then semicolon to indicate that this is a statement.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2j87pl8rmmxk2bj5ckko.png)

Save the changes.

Now we have hello world on the console.

Announcement: If you are interested in joining 500+ learners learning coding daily for free, consider following me on X [here](https://twitter.com/KarlgustaAnnoh)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p34q7874z1jpevghq6ef.png)

But that's pretty boring.

Let me show you how to make this more interesting. Our functions can have inputs and these inputs can change how the function behaves. So, let's say instead of displaying `Hello World`, we want to display the name of the person here, like `Hello John`. So we can add a variable here in between parentheses.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn8frhgivfbw6m0zpa5v.png)

We refer to this variable as a parameter. So, this greet function has one parameter called `name`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5js5rjm2rhsc9he046y.png)

And essentially, name is like a variable that is only meaningful inside of this function.

So, inside of this function, we can work with this name variable, but it will not be accessible outside of this function.

The name is an input to this function. So instead of displaying `Hello World`, we can display Hello then add a plus here to concatenate two strings so we can add name after.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ijayd5wr8vyr5hglyfu.png)

Now when calling the great function, we need to pass a value for the name variable or name parameter more accurately.

So we can pass John here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2id8adiw9ulu6ta97kdt.png)

Now we refer to this as an argument. So John is an argument to the `greet` function and name is a parameter of the `greet` function. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47z3q8bujqiz99pq62pa.png)

It's one of the things that a lot of programmers don't know. They don't know the difference between a parameter and an argument. So, a parameter is what we have here at the time of declaration,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scg0lvu1xugp5jt7ou3n.png)

But the argument is the actual value with supply for that parameter.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hja8kltwq0ybop16ppp3.png)

OK. Now let's save the changes.

So, we have `Hello John`. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxyfgzdexc5lpuc8t8mb.png)

Now, we can reuse this function but with a different input. So, we can copy this line here and change on to Mary.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mf1zptz0kamt7hkgp4z.png)

Save the changes.

Now, we have two different messages on the console.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2mr2qtkeo7kq3fko37i.png)

Now, a function can have multiple parameter. So here we can separate parameters using a comma. So, let's add another parameter like last name.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddh7dbcuntzwk0rnqmfm.png)

Now we can change our console.log.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chhifs2fpatbsjb96242.png)

Now when calling this `greet` function, we should pass another argument for the last name. But, let's see what happens if we don't do this.

So, I'm going to save the changes.

See what we got.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cnzqet2iv15hs6syrfj.png)

As I told you before, the default value of variables in JavaScript is `undefined`. So, because we did not pass a value for the last name, by default it's undefined.

So, I'm going to pass another argument here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knon1asdbnwzbx12vexz.png)

And we don't need the second call to the greet function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfgsh5oop6w27g4c1o5k.png)

Save the changes.

Now we have `Hello John Smith`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv5qmdrxuh0z10apppg4.png)