Fun With JavaScript Functions

In this article, we will learn how to define and call a JavaScript function, and we’ll go deep into what is happening under the hood when using functions.

What is a function?

A function is a block of organized code used to perform a task, and it helps you write clean and reusable code.

What does a JavaScript function look like?

A JavaScript function is defined with the function keyword, followed by a name and parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:
(parameter1, parameter2, …)

The code to be executed, by the function, is placed inside curly brackets: {}

A JavaScript function can be defined as a declaration or as an expression.

We need to give the function a name that we will use when we want to call this function. Inside the parenthesis, we define the parameters this function can receive, and inside brackets, we write to code that needs to be executed when this function is called.

The difference between these two examples is about hoisting; when the JavaScript program runs will add into the memory the following values:

first : - f -
second: <uninitialized>

The function definition of first was already added in the memory, which means you can call the function first anywhere in the current file, even on the first line. Function second can only be called/used after the line it was assigned. This line of code will update the program’s memory at the address “second” is stored. Even if const “second” is hoisted, the second function will go into memory only after the value of the variable is evaluated.

first : - f -
second: - f -

What is function scope?

The function scope refers to the variable access, any variable defined inside the function has function/local scope, which means are accessible only inside the function.

What is the function context?

The context refers to the value of the keyword this. The best way to understand context is to play around and log the this keyword and see what is inside.

In this example, this value equals the “person” object. The value of this will be the object who calls the function.

The value of thiscan be controlled using the following three functions:

• bind - create a copy of the function and sets the value of this, and optionally sets the parameters
• call - sets the value of this and optionally sets the parameters, then immediately call the function
• apply — set the value of this and optional sets the parameters, then immediately call the function

The difference between call and apply:

• apply lets you invoke the function with arguments as an array
• call requires the parameters to be listed explicitly

A helpful mnemonic: "A for array and C for the comma."

If you set the context with bind you will not be able to change the context value again with call or apply .

Functions can be passed to other functions

Functions can be passed as parameters to the other function. For example, if you need to filter an array, you can create a filter function and pass the function as a parameter to the built-in array filter function.

I highly recommend reading and playing around with array functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

What is happening when a function is called?

You can call a function in JavaScript using its name followed by parenthesis and any parameters the function can receive.

When you call a function in JavaScript, a new execution context is created and pushed to the execution stack. The execution context has two phases: the creation and execution phases.

Creation Phase

During the creation phase, the JavaScript engine performs the following tasks:

• set the value of this
• setup a local memory zone for storing local data and closure

Execution Phase

The JavaScript engine executes the code line by line during the execution phase. After all the code is processed, the execution stack will be popped out of the execution stack, and the garbage collector will remove anything the program does not need from memory.

I will use the following code example to explain what is happening under the hood when a function is called. We have a simple square function with validation which returns a number or null depending on the input.

When the above program runs, it will first create the main execution context of the program, which will trigger the creation and execution phases discussed previously.

In the creation phase, the program memory will contain the square ,num and result addresses.

square: <uninitialized>
num: <uninitialized>
result: <uninitialized>

When the execution phase starts, each line of code is processed sequentially.
The first line will update the square variable in memory:

square: - f -
num: <uninitialized>
result: <uninitialized>

The second line will update the num variable in memory:

square: - f -
num: 2

The third line execution contains an assignment of a function call. The JavaScript engine will process the function code using a new execution context and update the memory with the value returned from the context.

The new execution context will have a particular zone in the memory to store anything defined inside the function.

square: - f -
num: 2
result: <uninitialized>
square memory environment: {
    num: 2
    maxSafeNum: <uninitialized>
}

The value of this will be the global/window object

The first function line is an assignment that will lead to memory update, maxSafeNum will change the value from undefinedto 94906269 .

square: - f -
num: 2
result: <uninitialized>
square memory environment: {
    num: 2
    maxSafeNum: 94906269
}

Then will go through the validation step; in our case, the input is smaller than maxSafeNum and will skip the return null; line of code. The last line of the squarefunction will return the value num * num, which means the execution phase is almost done, and the JavaScript engine will pop out the square execution context from the stack. It will assign the returned value to the result address in memory. The garbage collector will remove anything from the square memory environment.

square: - f -
num: 2
result: 4

I created a demonstration video with Remotion and React JS to explain what is happening under the hood in JavaScript when you call a function.

References and Further Reading

Functions - JavaScript | MDN