Learn the Basics of JavaScript Functions

Copy Link LinkedIn Message Facebook Email X

What happens when you have a piece of code that you need to repeat many times in many different parts of your code? Or perhaps you have a very long operation, spanning hundreds of lines and it is very difficult to understand what is going on? You'll want to modularize your code. You want to slice it up into logical components that you may be able to reuse later in your code, or even in another project.

Functions are the main way to achieve this.

The usual syntax you will see for when a function is called is:

helpBecomeProficientAtFunctions();

Often, if a function has a clear name, you will be able to tell what it does by looking at the function name. If the next lessons were a function they might be called helpBecomeProficientAtFunctions()!

Let's dive deeper into the subject and learn how to create your own functions!

How to Write a JavaScript Function

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

Let's try to understand each element from the example provided above:

1. The function keyword.
2. The function name, greet.
3. The parameter name in brackets. You don't need a parameter, but this function has one.
4. The main body of the function in curly brackets, which in this case. prints Hello, and then concatenated the value of the parameter when it is called.

Naming Convention for Functions

Remember that JavaScript naming conventions are that names are generally camel cased. They can be made up of letters and while they cannot begin with a number, they can contain numbers, dollar signs, and underscores.

How to call a Function

Writing functions allow you to define a set of instructions, inside the curly braces, but the instructions will not be executed until the function is called with the appropriate arguments.

The function from the example above would be called or "invoked" like this:

greet("Homer"); // "Hello, Homer"

To call a function in JavaScript, you simply need to write the function's name followed by parentheses. If it requires an argument, you must provide it within the parentheses. Additionally, ensure that the function has been defined before you attempt to call it.

In the context of functions, the terms "parameters" and "arguments" are often used interchangeably but have different meanings. In essence, parameters are used to define a function, setting up a framework for the inputs the function will accept, while arguments are the real data inputs provided when the function is invoked. More on that in a lesson coming up soon, Understanding JavaScript Function Arguments and Parameters

Summary: Learn the Basics of JavaScript Functions

• JavaScript functions are a useful way to prevent repeating yourself
• Function names must follow the camel case naming conventions
• To call a function means to instruct the program to execute the code defined within the function
• You can call a function by writing its name and providing arguments if necessary

### How to Write a JavaScript Function

A JavaScript function is composed of several elements:

1. The function keyword.
2. A function name, such as greet.
3. One or more parameters, such as name, enclosed in parentheses.
4. The body of the function, enclosed in curly braces, which contains the code to be executed when the function is called. For example, it can print Hello, followed by the value of the parameter provided during the function call.