Need a refresher on functions in JavaScript? Here is a quick overview

A function can be defined as a procedure that contains some code. Once defined, a function can be invoked by simply using its name.

To define a function:

  • use a keyword function followed its name
  • followed by parentheses that would include any parameters the function uses (if any)
  • followed by the function body denoted by curly braces

You can define a function once and then call it repeatedly in different parts of your program.

Typically, if I know I would need to use some code more than once in my program, I extract it to a function.

Function names can be anything that is considered to be a valid variable name in JavaScript. I urge you to use meaningful names that describe what the function is doing. Please be nice to your fellow developers.

To invoke a function, type its name and pass arguments (if it takes any).

The values that passed to a function are called arguments. The names between the parentheses that are part of the functions definition are called parameters. The way I like to remember which one is which is as follows.

  • I associate the word arguments with phrase actual values (both start with an “a”).
  • I associate the word parameters with the word placeholders (both start with a “p”).

Parameters are considered to be local variables. They are not accessible outside of the function definition.

Functions are objects, they can be assigned to variables, just like any other value.

Function can be passed as an argument to another function, and it can also be returned from a function. This is because functions in JavaScript are first-class objects.

There are also higher-order functions.

They :

  • take other functions as arguments

and/or

  • return a function

When the function is passed as an argument to another function, it loses its original execution context. I’ll get back to this in a minute.

Sometimes the function body does not include a return statement. This means the implicit return value of that function is undefined .

Function definitions

There is more than one way to define a function in JavaScript.

  • Function declaration
  • Function expression
  • Arrow function (technically it should be under function expression)

There is also a fourth way, via a function constructor, which I won’t cover in this article.

Feel free to read about a function constructor, on MDN (Read about Function here, about Function constructor() here).

Function declarations are the most common way to define a function. It has the following form:

Function declarations are pretty great. You can invoke them before you define them.

You can have the definition somewhere at the bottom of your code, but you can call the function somewhere at the top. Like this:

Function expressions come in many forms. They could be defined as a function definition that does not immediately start with the keyword function.

Any of the following is considered a function expression:

Immediately Invoked Function Expression is a function that is defined and invoked at the same time.

You cannot invoke a function expression before it is defined.

The following code works:

The following code will raise ReferenceError: Cannot access 'displayGreeting' before initialization

The thing about function expressions is that the name given to a function expression is not visible in the scope that defines them. Like this:

Arrow function is a third way to define a function.

Arrow functions are actually function expressions. They are always anonymous.

If an arrow function contains a single expression, you can:

  • omit curly braces denoting the function body
  • omit the return statement.

Like this:

Arrow functions inherit execution context from the context that surrounds them.

Consider the following example.

The code outputs:

undefined John!
undefined Jane!
undefined Jim!
undefined Jen!

Functions lose their original context when passed to other functions as arguments.

So the execution context of function on line 6 is lost.

Instead of the execution context being the participants object, it is the global object.

When I reference this.greeting on line 6 it resolves to undefined.

It happens because this(execution context) references the global object.

JavaScript tries to access a property greeting on the global object.

But that property doesn’t exist!

So, this.greeting resolves to undefined.

There are multiple ways I can solve this particular context loss issue. One way is to use an arrow function.

I could also use bind, apply , or call methods, as well as preserving context by saving it to a local variable.

Here is the solution that uses an arrow function:

Outputs:

Hello John!
Hello Jane!
Hello Jim!
Hello Jen!

Arrow functions inherit their execution context from the surrounding context.

That’s why this on line 6 refers to object participants and this.greeting on line 6 does resolve to Hello.

Photo by Joe Caione on Unsplash

Thank you for reading!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Olga Shi

Olga Shi

Software Engineer. likes video games, Muay Thai, doing DIY projects, reading real books.