JavaScript Function Declaration

Avelon Pang
3 min readJan 31, 2021

What is a function?

A function is one of the fundamental building blocks in JavaScript and is an object that contains a sequence of statements to perform a task or calculate a value. Every function has an input, code and an output, which all rely upon what you are trying to do (print a message, calculate values, etc.). Basically, functions combine a series of steps under a name. Although there are other ways to write a function, we will be focusing on function declarations.

In order to define a function, we should follow the function syntax:

  1. Use the function keyword, followed by the name of the function you give it. Although function names are arbitrary, it is best practice to have it be self-descriptive. For instance, if we want to write a function that greets a user, it probably wouldn’t be helpful if we named the function “whatever” versus “greeting”. Not only does it make it easier (for you and others) to follow your code, but it helps with debugging and keeping your code clean since no additional comments for clarification are needed.
  2. Followed by the function name, is a list of parameters to the function (named variable(s) passed into a function enclosed in parentheses and separated by comas).
  3. The JS statements that define the function are enclosed in curly braces/brackets {}. Meaning that the function has its own code-block that creates its own scope (very much like if/else statements).

Fun Fact! Did you know that console.log() is a function in JavaScript? It accepts a parameter (arrays, objects, messages) and returns the value of the parameter given .

Parameters VS Arguments

Although parameters and arguments are often interchangeably used, it’s good to clarify the subtle difference. Parameters are variables listed as a part of the function definition, whereas arguments are values passed to the function when it is executed.

Calling VS Invoking()

When you call a function, you are directly telling it to run, but when you invoke a function you are letting it be run by something. Once a function is defined, we can invoke it multiple times by using the invocation operator () (an open and closed parentheses), after referencing the function’s name. With the arguments of that function declaration passed inside the invocation operator, the function can then return the results of the process (calculated value, printed string, success/failure data).

Function Declaration and Invocation

Above we have a function that has a set of arguments, our code and output. We called the function referencing it by name with some parentheses on the end where we passed the input we provided the function. We can also set it to a variable beforehand if we want to do something with the return value later.

Now that you know how to write a function declaration, let’s check out the other ways we can write JavaScript functions that return the same results!

To check each return value and avoid any potential errors (since each function has the same name and mathematical operation), I only ran one function at a time

I invite you to explore other ways to write functions and to get some practice in! Happy Coding :)

MDN Function Declarations

6 Ways to Declare JS Functions

JS Function Definitions

--

--

Avelon Pang

Full stack software developer with a passion for applying new technologies and a zest for technical problem solving. Bilingual in English and Mandarin.