Forem: Dharmarajsinh Jethva

Execution Model of JavaScript

Dharmarajsinh Jethva — Sun, 26 Sep 2021 09:53:18 +0000

JS has been often classified as a scripting interpreted language. However, the truth to this matter is that there are more than one ways of interpreting (pun intended & left to your interpretation).

Models of Execution

The usual method that we think of, when the phrase interpreted language is mentioned, is the line by line execution of the source code. In this processing model, each line is transformed into machine code, the transformed line of code is executed and only after that does the processing model continue to the next line.

There is another processing model called compilation where the entire source code is taken and transformed at once into machine instructions and these instructions are saved into another file. Once the compiled machine instructions file is created, executing this file will run the output of original code.

Is JS interpreted? A prologue to JS execution

The question still remains that whether JS employs this method of line by line conversion of code, followed by execution, we commonly refer to as 'interpretation'? Well, the answer is little more subtle than a yes or a no answer. JavaScript engines have amalgamated both of these above mentioned processing models into how they execute JS. Even though, these engines don't generate a compiled machine instruction file, JS is still compiled before it starts executing. I know. I know. That was a lot to take in just one sentence but just give this idea five minutes and the pieces to the puzzle of JS's execution mechanism will suddenly start to fit. Keeping this idea in mind that JS first compiles the entire code, let's continue ahead.

The behavior that JS compiles it's code first, is noticeable through something as plain as 'syntax errors' and 'hoisting'.

Making a Syntactical Error

console.log("Hello World"); // this won't be printed
var wrongJS => 'this will throw an error';

If JS was interpreted, transformed, and executed line by line without moving to the next line before completing this process, the first line would've printed "Hello World" to the console because the error lies on line 2. But, it doesn't get executed line by line without getting compiled first and it didn't print to the console because of the syntax error. This is one such example portraying that there are certain elements of compilation at play here.

Hoisting a Function Declaration

print_hello();

function print_hello(){
  console.log("Hello");
}

Again, if JS was interpreted line by line, it couldn't have looked ahead on line 3 without executing line 1. That would mean that JS didn't know what print_hello() is on line 1 and it should've rightfully thrown a reference error. But, it didn't throw an error and instead, it successfully executed the function and printed to the console.

These examples clearly poke some holes in the theory that JS is a strictly interpreted language. So, does that mean JS is entirely a compiled language? Hold your horses. As I said, JS engines implement a mixture of both these methods.

Conclusion

From the evidence of the above give peculiar cases, it should suffice to say that JS engines have a compiler which compiles the code into a byte code and this byte code is then fed into an interpreter which generates a machine code to be executed. This is a high level explanation of how JS code gets run without getting into the details of the baseline compilers, JIT compilers, interpreters and what not.

Fun fact: As JS engines don't have typical compilation step of being compiled ahead of time, the compiled code isn't always optimized because they don't always have as much time to optimize it. Hence, they use optimizing compilers to optimize the repeated pieces of code during the execution by keeping a track of executed code and the data that's used for execution.

Hopefully, the idea about how JS engines execute code has started to make more sense. We'll explore this concept more in future post of scoping mechanisms.

Functions in JavaScript

Dharmarajsinh Jethva — Sat, 25 Sep 2021 06:52:28 +0000

Functions - A Brief History

In the advent of programming, we created our systems using routines and subroutines. This, later, transformed to the creation of systems using programs, subprograms and functions. And, these days, we're only left with functions, at least that's what the majority of the programming community knows and works with everyday.

What are Functions? Why are they needed?

Functions are a group of statements, packaged as a single entity, that performs a certain task. They can be called upon or "invoked" many times. They can receive zero or more inputs and return zero or more outputs.

For example, let's say we want to square a few numbers.

An implementation without the use of functions would look like this:

var number2 = 2;
var square_of_number2 = number2 * number2;
console.log(square_of_number2);

var number3 = 3;
var square_of_number3 = number3 * number3;
console.log(square_of_number3);

Now, let's look at an implementation that is created using functions:

function square(number){
  return number*number;
}

var square_of_number2 = square(2);
var square_of_number3 = square(3);

The code looks so much cleaner just by comparing the above two methods.

Advantages of Creating Functions

Code looks clean and organized.
DRY principle is followed.
Enable reuse of code in the program.

Ways of creating Functions in JS

There are 4 ways of creating functions in JavaScript, each with their own unique subtleties. The order below denotes my preference of using these methods, from most used to never used.

Function Declarations (always named)
Function Expressions (can be named or anonymous)
Arrow Functions (always anonymous)
Using Function constructor (don't ever do it; security reasons and performance issues)

Function Declaration

To quote MDN ,

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

The name of the function.

A list of parameters to the function, enclosed in parentheses and separated by commas.

The JavaScript statements that define the function, enclosed in curly brackets, {...}.

In other words, if any JS statement starts literally with the function keyword, then it's a Function Declaration.

Why prefer using Function Declaration?

Standard syntax (found across languages)
Only way to define a function which hoists
Has a name attached to it; more readable error stack traces

console.log(calculateSquare(2)); // hoisting
// OUTPUT: 4

function calculateSquare(number) {
        return number * number;
}

Parameters & Arguments

The placeholder which accepts a value as an input in the function is called a Parameter.
When declaring a function, we specify it's parameters.

In the previous example code, number is a parameter.

The value passed into the function while it's being invoked is called an argument.

In the previous example code, the value 2 is an argument.

Default Parameters

Parameters can be assigned a default value. This default value is used when an argument value isn't passed into the function or if undefined is passed.

function defaultParamFunction(param1 = 'some value') {
    console.log(param1);
}

defaultParamFunction(); // no argument is passed
// OUTPUT: 'some value'

defaultParam('overridden'); // argument is passed
// OUTPUT: 'overridden'

Function Expressions

A different approach to creating a function is by using the Function Expressions syntax.

These can be of 2 types: Named Function Expressions and Anonymous Function Expressions.

Named Function Expressions are very uncommon. Very rarely encountered but should be used the most.

// named function expression
const variable_name = function function_name() {
        console.log("Hello World");
}

// anonymous function expression
const another_variable_name = function () {
        console.log("Hello World");
}

My advice is to always name any and all functions expressions. The same reasoning that is used for why one should always use function declaration follows here.

Why use named function expressions?

More self documenting code
More debuggable stack traces

IIFEs (Immediately Invoked Function Expressions)

As the name suggests, these are function expressions which are invoked/called immediately where they're defined.

The syntax involves wrapping the function into a set of parentheses () and then invoking it with another set of parentheses ().

// function definition is wrapped in parentheses
( function immediately_invoked() {
    console.log("Hello World");
} )(); // notice the invoking set of parentheses

Arguments can also be passed to IIFEs.

(
function iife(param1) {
        console.log(param1);
}
)(1); // argument 1 passed here

Arrow Functions

With arrow functions, function keyword isn't used to define a function. Instead, a fat arrow => is used to define a function.

Arrow functions are anonymous by definition.

// syntax for defining an arrow function
const function_name = () => { // more characters
    // function body
}

// syntax for a normal function declaration
function function_name() { // less characters
    // function body
}

Don't use arrow functions as a generic replacement of function declaration just because they seem shorter to write. Because if we just compare the two defined functions in the above example, it's clearly visible that arrow functions take more characters to write them as compared to writing the same function in Function Declaration way (compare the characters in the first line of declaration).

Don't use Arrow Functions. Why?

They are syntactically anonymous which means while debugging, stack traces show errors in these functions as "Anonymous Function"
It doesn't have a this keyword. It binds this lexically.(More about this in future posts)
They only seem shorter at a glance but take almost as much as or more characters than a function declaration.

Arrow Function IIFEs

IIFEs can also be defined using the arrow function syntax.

// notice the first wrapping parenthesis
(
() => {
        console.log("Hello World");
}
)();

Function Constructor

Functions can also be created using the Function Constructor syntax. But, it's advised not to use this syntax at all unless absolutely necessary. This creates function dynamically in the scope and these functions are only available to be called in the global scope.

// syntax

const variable_name = new Function('arg1', 'arg2', ..., 'argN', 'functionBody');

For example:

const square_number = new Function('number', 'return number*number;');

console.log(square_number(2));
// OUTPUT: 4

Fun fact: Function constructor can be invoked with or without the new keyword.

Summary

Declaration vs Expression vs Arrow


// 01 Function Declaration
function function_name() {
    // body
}

// 02-a Function Expression (Named)

var variable_name = function function_name() {
        // body
}


// 02-b Function Expression (Anonymous)

var variable_name = function() {
        // body
}


// 03 Anonymous Arrow Function

var variable_name = () => {
    // body
}

// 04 Function Constructor

var variable_name = new Function('param_name', 'function body');

To summarize, there are 4 different ways of creating functions in JavaScript.

But, (in my opinion) prefer using Function Declaration over other types of function designs. Named Function Expression can also be used. Don't use Anonymous Function Expression and Arrow Function unless absolutely necessary and definitely not as a generic replacement for Function Declaration. Never use Function Constructor to create a function.