JavaScript 101: Breaking Down Functions
Tags: javascript, beginners, explainlikeimfive
Published: 2019-06-10 15:28:12

---
title: JavaScript 101: Breaking Down Functions
published: true
description: Functions are at the core of what we do in JavaScript so it's essential that we understand what they do and how they work. But what exactly are functions?
tags: javascript, beginners, explainlikeimfive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1lgv51pd660sd35yz060.png
series: JavaScript 101
---

Functions are at the core of what we do in JavaScript so it's essential that we understand what they do and how they work. But what exactly are functions? A JavaScript function is a block of code that performs a specific task and is executed when something calls it. Think of it like a recipe that's giving you the ingredients (parameters) and the directions (function body) for what you need to do.

## Defining a function

Here's a function broken down into what you'll need: the name, parameter(s) and the function body.

```javascript
function name(parameter) {
 // function body
}
```
The first step in defining your function is giving your function a name. Your function name can include letters, numbers, underscores and dollar signs. For example, your function could be named `helloWorld`, `helloWorld1`, `hello_world` or `$helloWorld`.

```javascript
function helloWorld() {
 // 
}
```

Next, you need to define your function's parameters. Function parameters go inside the function's parentheses and are separated by commas. 

```javascript
function helloWorld(name) {
 // code to be executed
}
```

Here's  an example of a function with multiple parameters.

```javascript
function helloWorld(name, age) {
 // code to be executed
}
```

> Quick tip! You may have heard the terms parameters and arguments used in the same way. They are very similar but should not be used to describe the same thing. _Parameters_ are used when defining a function (what goes inside the parentheses) while _arguments_ are the values the function receives from each parameter when the function is executed.

> So if you define a variable such as `const param1 = 'Hello World';` and then define your function `function helloWorld(param1) {}`. What's inside the parentheses is your parameter while the `param1` variable that you defined as 'Hello World' is your argument.

Finally, the code to be executed will be placed inside the curly brackets. All together everything looks like this:

```javascript
function helloWorld(name) {
 console.log('Hello ' + name);
}
```

## Invoking a function

Great! We have defined our function but how do we get it to run? You can invoke (or run) a function by referencing the function name followed by parentheses. Let's invoke the function we defined earlier.

```javascript
helloWorld('Kara');

// Hello Kara
```

Here I'm passing in 'Kara' as our argument and invoking our function. Then `Hello Kara` is logged to the console! 

And there you have it! You now know how to define and invoke your function. Just remember, that all functions will **always** return a value. If there is no function body then your function will return as undefined. 

```javascript
function helloWorld() {}; // define your function

helloWorld(); // invoke your function

// undefined
```

--- 

Be sure to follow me on [Twitter](https://twitter.com/karaluton) for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.