DEV Community: Robiul H.

JavaScript Loop Best Practices for Optimal Performance

Robiul H. — Thu, 03 Aug 2023 16:45:35 +0000

Introduction

JavaScript Loop is a fundamental part of any programming language, and JavaScript is no exception. JavaScript loop is a powerful tool that allows developers to iterate over collections of data, perform operations on each item, and make decisions based on certain conditions.

However, loops can quickly become a source of problems if not implemented properly. Poorly written loops can lead to performance issues, bugs, and code that is difficult to maintain.

Whether you're a beginner or an experienced developer, writing efficient and effective loops can be a challenging task.

In this comprehensive guide, we'll explore the best practices for writing JavaScript loop that will help to take your code from noob to pro. We'll start with the basics, including choosing the right loop type and optimizing loop performance.

Then we'll dive into more advanced topics like using functional programming techniques and being careful with the asynchronous loops to avoid weird things in your code.

Whether you're working with arrays, objects, or other data structures, our tips and tricks will help you write clean, concise, and bug-free loops.

So if you're ready to master the art of JavaScript loop , buckle up and let's dive in!

Choosing the Right Type of Loop

When you are writing a loop in JavaScript, the First thing you need to do is choose the right type of loop. JavaScript offers several types of loops, including for loop, while loop, and do-while loop, each with its own strengths and weaknesses. Depending on the specific requirements of your code, one type of loop may be more efficient or more readable than another.

Therefore, it's essential to consider the situation and choose the appropriate loop type to achieve the desired results.

let's enlighten them one by one:

Starting with the most popular one, The For loop. It's the most common type of loop in JavaScript and is often used when you know how many times you want to execute a block of code.

For example, imagine you have an array of numbers and you want to calculate their sum:

let numbers = [1, 2, 3, 4, 5] 
let sum = 0 
for (let i = 0; i < numbers.length; i++) { 
    sum += numbers[i] 
} 
console.log(sum) // Output: 15

Here, the for loop is used to iterate over each element in the numbers array and add its value to the sum variable. Next While loop, it is useful when you want to repeatedly execute a block of code until a certain condition is met.

For example, imagine you want to generate random numbers between 0 and 1 until you get a number greater than 0.5:

let randomNumber = Math.random() 
while (randomNumber <= 0.5) { 
    randomNumber = Math.random() 
} 
console.log(randomNumber) // Output: a number greater than 0.5

In this case, the while loop repeatedly generates a new random number until it gets one that is greater than 0.5.

Next Do-while loop, It's similar to while loop, but the difference is that a do-while loop will always execute its block of code at least once, regardless of whether the condition is initially true or false.

For example, imagine you want to ask the user to enter a number between 1 and 10, and keep asking until they enter a valid number:

let number 
do { 
number = prompt('Enter a number between 1 and 10:') 
} while (number < 1 || number > 10) 
console.log(number) // Output: a number between 1 and 10

In this case, the do-while loop repeatedly prompts the user to enter a number until they enter a number between 1 and 10.

So, as you can see, choosing the right type of loop depends on the specific task you are trying to accomplish. If you know how many times you want to execute a block of code, a for loop may be the best choice. If you want to repeatedly execute a block of code until a certain condition is met, while loop or do-while loop may be more appropriate.

By selecting the right type of loop, you can make your code more efficient and easier to read.

Use the Right Loop Control Statement

After choosing the appropriate loop for your desired task, the Next thing you need to know is how to use the right loop control statement. There are two main loop control statements available in JavaScript: break and continue.

These Loop control statements allow you to control the flow of a loop. break is used to exit a loop completely when a certain condition is met, On the other hand, continue is used to skip the current iteration of the loop and move on to the next one.

For example, let's say you have an array of numbers and you want to find the first even number in the array using a for loop. You can use break to exit the loop once you find the first even number:

const numbers = [1, 3, 2, 5, 4, 7, 6] 
for (let i = 0; i < numbers.length; i++) { 
    if (numbers[i] % 2 === 0) { 
        console.log(`The first even number is ${numbers[i]}`) 
        break 
    } 
}

In this example, the loop will exit as soon as it finds the first even number (which is 2). Without the break statement, the loop would continue iterating through the rest of the array.

On the other hand, let's say you want to print out all the odd numbers in the array, skipping over any even numbers. You can use continue to skip the even numbers:

const numbers = [1, 3, 2, 5, 4, 7, 6] 
for (let i = 0; i < numbers.length; i++) { 
        if (numbers[i] % 2 === 0) { 
            continue 
        }         
    console.log(`Odd number: ${numbers[i]}`) 
}

In this example, the loop will skip over the numbers and only print out the odd numbers (which are 1, 3, 5, and 7). Without the continue statement, the loop would print out all the numbers in the array.

Now we know how to choose the right loop for our task also when to use break and continue.

let's move to the next thing we need to think of when writing a loop and this is optimizing the Loop performance.

Optimizing The Loop Performance

In normal situations, it may not create a big change in our code performance but when we will work with a large number of data Optimizing the loop performance will become one of the most important things. Because Loop performance can have a significant impact on the overall performance of your JavaScript code.

Therefore, it's essential to profile and optimize the performance of your loops.

Here are some tips for optimizing loop performance:

Avoiding unnecessary calculations

One way to optimize loop performance is by avoiding unnecessary calculations.

To Understand the point let's have a look at the example below:

suppose you have a loop that iterates over an array. In that case, when you use a for loop to iterate over an array, the length of the array is checked in each iteration to see if the loop should continue.

For example, consider the following code:

let arr = [1, 2, 3, 4, 5] 
for (let i = 0; i < arr.length; i++) { 
    console.log(arr[i]) 
}

In each iteration of the loop, arr.length is checked to see if i is less than the length of the array.

However, arr.length is a property of the array, and accessing it in each iteration can be expensive if the array is very large.

Note: In JavaScript, an array is a special type of object that can store a collection of values of any data type. Every array has a length property, which represents the number of elements in the array. This length property is automatically updated as elements are added to or removed from the array. Since an array is an object, it can have properties and methods just like any other object. However, the length property is unique to arrays and allows for easy access to the number of elements in the array.

To improve performance, you can cache the length of the array outside the loop, like this:

let arr = [1, 2, 3, 4, 5] 
let len = arr.length // caching the length outside the loop 
for (let i = 0; i < len; i++) { 
    console.log(arr[i]) 
}

By doing this, you avoid accessing the length property of the array in each iteration, which can improve the performance of your code. This technique can be particularly useful when working with large arrays.

Note: It's worth noting that modern JavaScript engines like V8 are optimized to handle loops efficiently, and in some cases, caching the length of the array may not provide a significant performance boost. However, it's still a good practice to follow, especially when working with large arrays or in performance-critical code.

Use efficient loops

Another way to optimize loop performance is by using efficient loops.

For example, for loop is generally more efficient than the forEach loop when iterating over arrays.

Let's see the code snippet below to understand this:

let arr = [1, 2, 3, 4, 5] // Using for loop for iterating over the array 
for (let i = 0, len = arr.length; i < len; i++) { 
    console.log(arr[i]) 
}

In the above example, we are using a for loop to iterate over the arr array. But the question is we could do the same using the forEach loop.

why this is the better approach. right?

This topic is a bit complex and deserves a separate blog post to explain briefly. But one of the main reasons is When we use the forEach loop, it creates a new function scope for every element in the array. This means that for each element, a new function is created, and when the iteration is done, those functions are destroyed.

This process is not an issue if the array is small. However, for larger arrays, it can slow down the loop's execution.

On the other hand, for loop creates a single function scope for the entire loop, which means that it only has to create and destroy a single function scope.

Also, for loop provides a way to get control over the loop iteration using the break and continue which forEach loop simply doesn't provide.

That's why the for loop is more optimized for looping over arrays.

Minimize DOM manipulation

In loops, it's important to minimize DOM manipulation as much as possible. Because, When working with the Document Object Model (DOM) in JavaScript, manipulating the DOM can be a time-consuming process.

Each time you make a change to the DOM, the browser has to reflow and repaint the page, which can slow down your application, especially when working with large numbers of elements.

For Example:

// Inefficient DOM manipulation 
for (let i = 0; i < 1000; i++) { document.getElementById('myDiv').innerHTML += '<p>' + i + '</p>' 
} 
// More efficient DOM manipulation let output = '' 
for (let i = 0; i < 1000; i++) { 
    output += '<p>' + i + '</p>' 
} 
document.getElementById('myDiv').innerHTML = output

In the given example, the first loop is inefficient because it manipulates the DOM on every iteration. The innerHTML property of the myDiv element is updated with a new paragraph element on every iteration, resulting in a total of 1000 manipulations of the DOM.

On the other hand, The second loop is more efficient because it minimizes DOM manipulation. Instead of updating the DOM on every iteration, the loop concatenates a string of HTML to a variable called output.

Once the loop is complete, the output string is used to update the innerHTML property of the myDiv element just once, resulting in a single manipulation of the DOM.

Avoid Common Mistakes

There are a few common mistakes that developers normally do and you should be aware of and avoid common mistakes when working with loops in JavaScript:

Modifying Loop Variables Inside the Loop

Modifying loop variables inside the loop can lead to unexpected results or errors. It's generally not a good practice to modify loop variables inside the loop. Instead, you should use a separate variable to store any values that you want to modify.

For example, consider the following loop:

for (let i = 0; i < 10; i++) { 
    console.log(i); i++; // modifying i inside the loop 
}

In this loop, i is being modified inside the loop, which can lead to unexpected results. Instead, you should use a separate variable to store any values that you want to modify, like this:

for (let i = 0; i < 10; i++) { 
    console.log(i); 
    let modifiedValue = i + 1; // using a separate variable to modify i 
}

Not Using Curly Braces

It's possible to write a loop without curly braces, but it's generally not recommended. Without curly braces, it can be difficult to read and understand your code, and it can also lead to unexpected results or errors.

For example, consider the following loop:

for (let i = 0; i < 10; i++) 
console.log(i);

This loop does not have curly braces, which can make it difficult to read and understand the code. It's better to always use curly braces, even for single-line statements:

for (let i = 0; i < 10; i++) { 
    console.log(i); 
}

Be careful of Infinite Loop

An infinite loop is a loop that never stops. This can happen if you don't set up the correct exit condition or if the exit condition is never met. Infinite loops can cause your program to crash or hang, and they can be difficult to debug.

For example:

consider a loop that always increments the value of a variable but never checks if it has exceeded a certain value:

let count = 0 
while (count < 10) { 
    console.log(count) 
}

This code will result in an infinite loop because the count variable is never incremented beyond 0.

That's why you should always be careful about infinite loops. To avoid infinite loops, make sure you set up the correct exit condition and test it thoroughly.

Off-by-One Errors

Off-by-one errors occur when you use the wrong comparison operator or when you don't take into account the initial value of a loop variable. These errors can lead to incorrect results in your program or even crashes in some cases.

For example, let's say you have an array with 10 elements, and you want to loop through it and perform some operation on each element.

Here's how you might write the loop:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
for (let i = 0; i < arr.length; i++) { 
    console.log(arr[i]); 
}

This code will loop through all 10 elements of the array and print their values to the console. However, what if you accidentally use the wrong comparison operator and write i <= arr.length instead of i < arr.length?

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
for (let i = 0; i <= arr.length; i++) { 
    console.log(arr[i]); 
}

This code will result in an off-by-one error, because it will try to access an element that doesn't exist when i is equal to arr.length. The loop will run a total of 11 times instead of 10, and the final iteration will throw an error because arr[10] is undefined.

To avoid off-by-one errors, always double-check your loop conditions to make sure you're using the correct comparison operator and taking into account the initial value of your loop variable.

By avoiding these common mistakes , you can ensure that your loops are running as intended and reduce the chances of errors or crashes in your program. It's always a good idea to double-check your loops for these mistakes before running your code.

Use Recursion if needed

While loops are powerful, sometimes recursion can be an even more elegant solution.

It is particularly useful for traversing hierarchical data structures, where it's not possible to know how many levels of nesting there are in advance. It can also lead to simpler and more elegant code than using nested loops, especially in cases where the depth of the structure is not known in advance.

Note: It's important to use recursion carefully and avoid infinite recursion, which can lead to a stack overflow error.

For example:

Let's say you have a nested array of numbers, and you want to find the sum of all the numbers in the array, including the nested ones. One way to do this is by using recursion. Here's an example of how you could use recursion to find the sum:

const nestedArray = [[1, 2, [3]], 4]; 
function sumArray(arr) { 
    let sum = 0; 
     for (let i = 0; i < arr.length; i++) { 
        if (Array.isArray(arr[i])) { 
            // If the element is an array, call the function recursively 
            sum += sumArray(arr[i]); } else { 
            // If the element is a number, add it to the sum 
            sum += arr[i]; 
        } 
      } 
return sum; 
} 
console.log(sumArray(nestedArray)); // Output: 10

In this example, we used Recursion because the input data, nestedArray, is a hierarchical data structure and the function need to traverse all the elements of the structure, regardless of the number of levels of nesting.

Recursion allows the function to call itself repeatedly until it reaches the deepest level of nesting and returns a value that can be used to calculate the final sum. The function checks whether each element in the array is an array itself, and if it is, the function calls itself with that element as the input.

This process repeats until all the nested arrays are traversed and the function reaches the deepest level of nesting, which is a number.

At that point, the function returns the number to the previous level of recursion, which can then use that value to calculate the sum of all the elements in the current level of nesting.

Conclusion

JavaScript loop is a fundamental part of any developer's toolbox, but they can be tricky to master. By following these best practices, you can write more efficient and effective loops that will help take your code to the next level.

Choose the right type of loop, use the right loop control statement, optimize loop performance, avoid common mistakes, and consider using recursion when appropriate. By keeping these tips in mind, you'll be well on your way to becoming a JavaScript loop expert.

So take the time to evaluate and optimize your loops, and your code will be better for it.

If you enjoyed reading the post and found it helpful, you can support me by buying me a cup of coffee as a token of appreciation. Your support means a lot to me and encourages me to keep creating valuable content for you. Thank you!

Visit my personal Blog where I write more content like this: Roblog

Simplify Your Code with Arrow Functions in JavaScript

Robiul H. — Mon, 29 May 2023 12:06:15 +0000

Arrow functions were introduced in ECMAScript 6 (ES6) as a concise syntax alternative to traditional function expressions.

They have a more compact syntax and automatically bind the this value lexically, resulting in a more intuitive and predictable behavior compared to regular functions.

Here are a few benefits of using arrow functions:

Compact Syntax: Arrow functions allow you to write functions with a more concise syntax, reducing the amount of code you need to write and read. They are especially useful for short, one-line functions.
Lexical this Binding: Unlike regular functions, arrow functions don't have their own this value. Instead, they inherit the this value from the enclosing scope. This behavior eliminates the need for bind, call, or apply when dealing with the context of this.
Implicit Return: Arrow functions with a single expression automatically return the result of that expression. This simplifies the code by eliminating the need for explicit return statements.

Now, let's explore some specific scenarios where arrow functions can help you simplify your code:

Shorter Function Definitions

Arrow functions are perfect for concise function definitions, especially when the function body is a single statement or expression. Consider the following example:

// Regular function expression
const add = function (a, b) {
  return a + b;
};

// Arrow function
const add = (a, b) => a + b;

In this case, the arrow function add provides a more concise and readable way to define the function. The return statement is implicitly handled, reducing the code clutter and improving code readability.

Iterating over Arrays

Arrow functions are commonly used when working with arrays and performing operations like mapping, filtering, or reducing. They allow you to write more succinct code by eliminating the need for explicit function declarations and return statements.

const numbers = [1, 2, 3, 4, 5];

// Using regular functions
const squaredNumbers = numbers.map(function (num) {
  return num ** 2;
});

// Using arrow function
const squaredNumbers = numbers.map((num) => num ** 2);

The arrow function in this example simplifies the mapping operation by removing the function keyword and return statement. This results in cleaner and more readable code.

Callback Functions

Arrow functions are ideal for callback functions, as they provide a concise way to define inline functions. Whether you're working with event handlers, asynchronous operations, or functional programming constructs, arrow functions can make your code more elegant.

// Regular function expression
button.addEventListener('click', function () {
  console.log('Button clicked');
});

// Arrow function
button.addEventListener('click', () => console.log('Button clicked'));

In this example, the arrow function condenses the event listener callback function into a single line, improving code readability and reducing visual noise.

Handling Asynchronous Operations

When working with asynchronous operations, such as fetching data from an API or making AJAX calls, arrow functions can simplify the syntax and improve code readability. The concise syntax of arrow functions makes them well-suited for handling asynchronous callbacks.

// Regular function expression
fetch('https://api.example.com/data')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  });

// Arrow function
fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data));

In this example, arrow functions eliminate the need for verbose function expressions and return statements, making the code more streamlined and easier to follow.

Binding Context to Event Handlers

When working with event handlers, arrow functions can help simplify code by automatically binding the context of this. With traditional functions, you often need to use bind or assign this to a variable to preserve the correct context.

// Regular function expression
button.addEventListener('click', function () {
  console.log(this); // refers to the button element
});

// Arrow function
button.addEventListener('click', () => {
  console.log(this); // refers to the lexical scope where the arrow function is defined
});

In this case, the arrow function preserves the context of this, eliminating the need for additional workarounds and improving code clarity.

By leveraging arrow functions in these scenarios and more, you can simplify your code, make it more readable, and increase your productivity as a JavaScript developer.

Remember to use them judiciously and consider the specific context and requirements of your code when deciding to use arrow functions.

Conclusion

Arrow functions in JavaScript offer a powerful way to simplify your code and enhance readability. Their compact syntax, implicit return, and lexical this binding make them a valuable tool in your coding arsenal.

By leveraging arrow functions, you can write cleaner, more concise code that is easier to understand and maintain.

Thank you!

Visit my personal Blog where I write more content like this: Roblog

Is javascript compiled or interpreted language?

Robiul H. — Thu, 11 May 2023 08:58:17 +0000

Introduction

You have probably read that JavaScript is an interpreted language, while others argue that it's not an interpreted language and that it's actually a compiled language.

This can be confusing,

I was often confused because I received conflicting answers whenever I read books or articles about JavaScript being an interpreted or compiled language. But the truth is that it depends on how the language is implemented.

Let me explain.

To clarify this point, let's first examine what are compiler and interpreter also the difference between them

Compiler

A compiler is a software tool that translates human-readable source code into machine-executable code. The process of compilation involves several stages, including

lexical analysis
syntax analysis (parsing)
semantic analysis
code generation
optimization

During lexical analysis, the compiler breaks down the source code into a series of tokens, which are individual units of meaning. For example, in the statement "x = 5 + 3;", the tokens would be "x", "=", "5", "+", and "3". The lexer also assigns a type to each token, such as "identifier", "operator", or "literal".

Then, during syntax analysis (parsing), the compiler checks the order and structure of the tokens to ensure that they form a valid program. This involves analyzing the grammar of the programming language and constructing a syntax tree that represents the structure of the program.

After the syntax analysis is complete, the compiler performs semantic analysis to check for logical errors in the code. This involves verifying that the program follows the rules of the language, such as type checking, scoping rules, and function calls.

Once the compiler has verified the correctness of the program, it generates machine code or bytecode that can be executed by the computer. This involves translating the syntax tree and semantic information into low-level instructions that can be executed by the computer's hardware.

Finally, the compiler performs optimization to improve the efficiency of the generated code. This process involves analyzing the code and making changes to improve the memory usage.

Overall, the compiler is an essential tool for translating human-readable source code into machine-executable code. The compilation process involves several stages, each of which is critical for producing correct and efficient code.

Interpreter

An interpreter is a program that reads and executes code written in a high-level programming language directly, without requiring an intermediate compilation step. Unlike a compiler, which translates the entire source code into machine code before execution, an interpreter reads and executes the source code line by line, translating and executing each statement as it is encountered.

When an interpreter runs a program,

it first performs lexical analysis and parsing of the source code to generate an abstract syntax tree (AST) representing the program's structure.
The interpreter then walks through the AST, executing each node in turn. During execution, the interpreter may generate and manipulate additional data structures to represent the state of the program, such as a symbol table for tracking variable values.

One advantage of using an interpreter is that it allows for more dynamic and interactive development, as programmers can test and modify their code on the fly without having to recompile the entire program. However, interpreting code can be slower than executing compiled code, since the interpreter has to perform additional work to translate and execute each statement.

Overall, an interpreter provides a convenient way to execute code in a high-level language, but may not be as performant as compiled code in certain situations.

Compiler vs. Interpreter in a simple way

There is a lot of technical information about compilers and interpreters, so let's make it simple:

And like everything else in life, let's try to understand it with a cup of tea.

Let's say you want to make a cup of black tea, you go to Google and search for the ingredients list, this is what you came up with:

Black tea leaves
Water
Sugar (optional)
Milk (optional)

There are 2 ways to make the tea, the Compiler or the Interpreter way.

The compiler will first, before doing any steeping, organize all the ingredients in front of him, the specific amounts of every single ingredient, only then, will he steep all the ready components of the tea.

The interpreter will take his cup and will start by reading the ingredients, line by line. he will boil the water, add the tea leaves, steep them for a few minutes, add sugar or milk if desired, and then strain the tea into the cup.

The build (preparation) time of the compiler will be longer than the interpreter's. However, the run (steeping) time will be much shorter.

Now that you know the difference let’s talk about JavaScript.

Is JavaScript Compiled or an Interpreted Language?

When I first started learning JavaScript, I, like many others, was taught that it was an interpreted language, and I believed it for a long time. However, after conducting further research, I have come to realize that this is not entirely accurate.

While many people still consider JavaScript to be an interpreted language, there is evidence to suggest that it is actually a compiled language. One example of this can be seen in the way that the JavaScript engine handles bugs.

When you encounter a syntax error in your JavaScript code, the engine will typically alert you to the problem before it even begins executing the code. This suggests that the code is compiled and validated before it is executed, which is a characteristic of compiled languages.

You can try this for yourself by opening the following HTML code in your browser and checking the console:



console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World!);

The last line of code is missing a closing quotation mark, which should trigger a syntax error. However, if JavaScript were truly an interpreted language, the console would have already printed the first nine lines before throwing an error.

Instead, the program crashes immediately,



Uncaught SyntaxError: Invalid or unexpected token

Thats indicating that it was compiled and validated before execution.

While there is still debate over whether JavaScript is truly a compiled language or not, it's clear that it's not entirely accurate to call it an interpreted language.

Another way to prove that JavaScript is not an entirely interpreted language is through the concept of hoisting. For example, consider the following code:



max(1, 2);
// 2
function max(num1, num2){
  return num1 > num2 ? num1 : num2;
}

In traditional programming languages, a function must be defined before it can be called. However, in JavaScript, the function can be called before it is defined. This behavior is known as hoisting, and it's a fundamental aspect of how JavaScript works.



Note: We will explore more about `hoisting` in other blog for now this explanation is enough.

How does the JavaScript engine know about the max function before it reaches the declaration? The only reasonable answer to this question is that the code must first be compiled before execution.

So, JavaScript is a compiled language, right?

Well, it's complicated. In the past, every programming language was fairly easy to categorize as either compiled or interpreted. However, with the modern approach of running source code, a sort of "in-between" area has been created.

How does JavaScript actually get translated?

JavaScript has come a long way since its inception as a simple scripting language. In the early days, JavaScript engines were only interpreters, which executed code line by line. However, as JavaScript became more popular and its use cases expanded, performance issues emerged. Interpreting code on-the-fly resulted in a loss of performance, especially for complex applications. This led to the development of new engines that use a just-in-time (JIT) compiler.

A JIT compiler is different from traditional compilers, such as those used for C++. Traditional compilers have plenty of time to optimize the code during compilation, but JIT compilers must compile code just before it's executed. As soon as the JavaScript code is about to run, it gets compiled into executable bytecode.

Despite the differences in how JavaScript is compiled compared to other compiled languages, the process still follows some of the same rules as traditional compilers. The JavaScript code is parsed before execution, which makes it look like a parsed language. However, the code is converted to binary form before execution.

To better understand this process, let's take a closer look at how code execution works behind the scenes:

First, the code is transpiled using tools like Babel or Webpack.
The transpiled code is given to the engine, which parses it to an Abstract Syntax Tree (AST).
The AST is then converted to bytecode that is understood by the machine. This is an Intermediate Representation (IR), which is further optimized by the JIT compiler.
After optimization, the JS Virtual Machine (VM) executes the code.



Some people argue that the JS VM is "interpreting" the bytecode, but this is not entirely accurate. If we were to use that definition, we would also have to say that Java, which is another JVM-driven language, is also interpreted.

Thus, we can conclude that JavaScript is executed in three phases:

Parsing
Compiling
Executing

JavaScript code is initially interpreted before any execution begins. For example, consider the following code:



console.log("Hello");
for(var i = 0;i<4;i++) {
    console.log(Hello);
}

The output shows the interpreter behavior in the above code example, where first Hello is printed to the console, and then an error is reported. This output strongly supports the fact that JavaScript is an interpreted language.

While it may seem like JavaScript code is being executed line by line, this is only true during the parsing phase. In reality, the entire code is compiled at once to convert it into machine-readable code before execution. Therefore, JavaScript is a just-in-time compiled language that uses an interpreter in its first phase.



Note: JavaScript can operate in an interpreted manner in older browsers. However, every modern browser currently supports "JIT", so JavaScript code is always compiled. Whether JavaScript is compiled or interpreted depends on the environment in which it is run. If it runs in older browsers, it's interpreted. If it runs in modern browsers, it's compiled.

Explaining JIT in JavaScript

Now that we have a basic understanding of how JavaScript works and what JIT compilers are, let's delve deeper into how JIT compilers work and why they're important.

But don't worry, we won't get too technical with jargon. Instead, we'll explore JIT compilers in simple terms to understand how they work, why they're important, and the reason they were introduced in the first place.

JIT (just-in-time) compilation is a technique used by modern JavaScript engines to improve the performance of JavaScript code. Unlike traditional compilers that optimize code during compilation, JIT compilers take a middle-ground approach. They initially interpret the code and then selectively compile parts of it that are used repeatedly. This approach balances fast start-up time with improved performance.

When a JavaScript engine encounters a function, it can either interpret the code on-the-fly or compile the code before execution. Interpreting the code can be faster to start execution but slower in terms of overall performance, as the code is translated line-by-line each time the function is executed. Compiling the code before execution can be slower to start, but it can result in faster execution due to machine code optimizations.

In this approach, the code is compiled into machine code, which is then executed by the processor.

JIT compilers take a middle-ground approach, where they initially interpret the code and then selectively compile parts of it that are used repeatedly. As a result, JIT compilers offer a balance of fast start-up time and improved performance.

To understand how JIT compilers work, let's consider an example:



function add(a, b) {
  return a + b;
}

for (let i = 0; i < 100000000; i++) {
  add(i, i + 1);
}

In this code, we have a simple add function that adds two numbers and a loop that calls this function 100 million times with different inputs.

When the JavaScript engine first encounters this code, it will interpret it on-the-fly and execute it. However, as the loop runs repeatedly, the engine detects that the add function is being called repeatedly and decides to compile it to machine code to improve performance.

The JIT compiler analyzes the code and optimizes it for the specific inputs being used in the loop.

For example, it may decide to inline the add function, which means replacing the function call with the actual addition code, eliminating the overhead of calling a function. Additionally, it may also perform other optimizations such as constant folding or dead-code elimination, which remove unnecessary computations.

Overall, JIT compilers help improve the performance of JavaScript code by selectively compiling parts of it that are used repeatedly, while still allowing for fast start-up times.

Now that we have a better understanding of how the JIT compiler works, let's delve into the issues we previously discussed and their underlying causes.

Why the Pre-execution syntax error alerts

Let's explore the reason behind syntax error alerts in JavaScript using the same example we discussed earlier.



console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World from javascript!");
 console.log("Hello World!);

In the case of the code example provided, the JavaScript engine compiles the code before execution, and the syntax error is detected during the compilation phase. This is because the engine uses the JIT compiler that optimizes code on the fly as it's executed. When the engine encounters an error during the compilation phase, it immediately throws an error without executing any code.

Therefore, the fact that JavaScript detects syntax errors during the compilation phase suggests that it's more like a compiled language than an interpreted one.

What is the story of hoisting?

Let's now understand the hoisting in the context of JIT engine using the code we used before:



max(1, 2);
// 2
function max(num1, num2){
  return num1 > num2 ? num1 : num2;
}

So, how does the JavaScript engine know about the max function before it reaches the declaration?

The answer lies in the Just-In-Time (JIT) compilation process that occurs behind the scenes when JavaScript code is executed in modern browsers.

During the optimization step, the JIT compiler can analyze the code to determine which functions are likely to be called frequently and which variables are likely to be accessed repeatedly. By identifying these patterns, the compiler can optimize the code for faster execution, which can result in significant performance gains.

In the case of hoisting, the compiler can recognize the pattern of a function being declared at the top of its scope and optimize the code accordingly.

Conclusion

In summary, while JavaScript is commonly thought of as an interpreted language, it is actually a Just-In-Time compiled language. Modern JavaScript engines use a JIT compiler to optimize the code for execution. This compiler allows JavaScript to be executed much faster and in an efficient way than traditional interpreted languages. While the compiling of Javascript works in a different way, if compared to other compiled languages, it still follows some rules that reflect the process of compiling.

JavaScript code is parsed before execution, which makes it look like a parsed language, but the code is actually converted to binary(machine code that is directly executed by the computer's hardware) form before execution. This conversion process involves several steps, including transpiling the code, parsing it to an Abstract Syntax Tree (AST), converting it to bytecode, and optimizing it with a JIT compiler.

So, to answer the question "Is javascript compiled or interpreted language?" the answer is that it is a bit of both. It is interpreted in older browsers, but in modern browsers, it is compiled with the help of a JIT compiler.

Visit my personal Blog where I write more content like this: Roblog

Resource:

Javascript variables (Beginner thinking)

Robiul H. — Fri, 05 May 2023 04:11:06 +0000

Programming is all about manipulating and displaying data, which can be any kind of information used in computer programs, such as social media usernames, age, and profile photos. To work with this data and create interesting things, programmers need a way to store and keep track of it. This is where the concept of variables comes in.

Variable is an essential concept in almost every programming language, and there is much to know and understand about it. It is important for us to have a clear and deep understanding of these concepts related to the Variable.

In this post, we will explore almost all of the concepts related to variables in programming, but from a beginner's perspective. We will keep things simple to understand, and use examples to explore everything.

Even if you are new to programming and don't have much knowledge about JavaScript, you will be able to understand all the concepts we cover.

So, let's get started!

variables in javascript

In JavaScript, a variable is a named reference to a memory location that can hold different types of data, such as numbers, strings, booleans, objects, or functions. To access or modify the data stored in a variable, we use its name.

It's a little confusing, right?

let's have a look at the computer memory.

If you have a basic understanding of computer memory then you must know that Computer memory has millions of cells on it and every cell has its own address.

In our program, if we want to store value to access it later throughout the program, we have to keep it somewhere in the computer memory and we will need a way to call that value whenever we need.

we could have done that using the memory address after storing the data in the memory.

The problem is we can't use this address directly in our program. because you know the computer works in the binary system and in the binary system this memory address looks too weird and confusing. also, it's almost impossible to memorize.

Here variable comes in to solve this problem.

Variable gives us the simplest solution to handle it. We can simply create a variable and assign it to the value we want to store. now we don't need to memorize the weird and confusing memory address we can do the same using a simple and human-readable name.

When we are creating a variable and assigning a value to it. behind the since the Compilers and interpreters store the data inside the memory and replace the symbolic names of variables with the real data location/memory address.

That means our data is stored in memory and the variable is pointing to this memory location.

Note: In real scenarios, memory allocation is not as simple as I discussed here. also, Primitive type and Reference type values are treated differently when assigning them to variables in javascript. but for this post, I have avoided the advanced things and kept it simple so you can get an overall idea of how things work behind the scenes.

If you are still confused with it, simply think of variables as named containers that hold information and can be referred to the data simply by naming the container.

That means,

Creating a variable
Giving a standard name to the variable
Assigning a value to it.

Think of these steps as

Taking a container
Labeling it
Putting something in this container.

Note: A Javascript variable is a container, not a value, this means that variables arent themselves values; they are a named container for values.

Declaring Variables

Before you use a variable in a JavaScript program, you must create it, we call this declaring a variable.

we can Declare a JavaScript Variable using var or let :

var name; 
let age;

Here we are creating two variables, one using var and one using let.

var and let are the keywords that tell JavaScript youre declaring a variable.

name and age are the names of those variables.

In Javascript, Semicolons(;) are totally optional (unless you want to have multiple statements in a single line, of course). (similar to a full stop(.) in the English language.)

Note: Though Semicolons(;) are optional in javascript, there are many languages where Semicolon(;) is a big factor. In those languages you must end the line using a semicolon otherwise will occur an error to your program.

You can also declare multiple variables with the same var or let keyword:

var name, age;
let birthYear, address;

There is another keyword to declare variables in javascript which is const. This is used to declare the constant variables in javascript.
const Pi = 3.1416
we will talk about this in any other blog.

Naming Variables

Not only in JavaScript but also, in all other languages variables must be identified with unique names following some rules and regulations. These unique names are called identifiers. These Identifiers or names can be short (like a, b, and c) or more descriptive (age, name, userName).

Rules for variable Name

There are some general rules to follow when we are choosing a name (unique identifiers) for the variable.

Here are the rules below:

Names can contain letters, Number digits(0-9), underscores _, and dollar signs $ but Spaces and special symbols/punctuation characters (like @, !, #, etc.) are not allowed to be used in the variable's name.

Note: In Javascript '_' and '$' are just like letters. They don't have any special meaning.

Variable names must be started with either a letter, an underscore _, or the dollar sign $. It is not allowed to start variable names using numbers (0-9).
JavaScript Names/identifiers are case sensitive (Variables named apple and APPLE are two different variables.).
There are some reserved words, which cannot be used as variable names in your program because they are used by the language itself.

For example: let, var, for, and function are reserved.

The code below gives an Uncaught SyntaxError:

let var = 5; // Uncaught SyntaxError: Unexpected token 'var'
let function = 5; // Uncaught SyntaxError: Unexpected token 'function'

In JavaScript, When the variable name contains multiple words, it is generally written in camelCase.

That is: words go one after another, every word except the first one starting with a capital letter.

For example, firstName, lastName, birthYear, etc.

It is possible to use almost any language in a variable name, but not recommended. We should use English in variable names even if were writing a small script. so that if people from other countries need to read it they can read it. Because we will write code for global developers not only for our region.

Here are some valid and invalid variable names below:


// Example of valid variables names
let camelCased // first word is lowercase any additional word starts with an uppercase letter
let here2num // number in the middle, but not starting with numbers
let JAVASCRIPT_IN_UPPERCASE // uppercase letters with underscores
let _Javascript_ //start and end with an underscore, with letters in the middle
let $_$ // dollar signs and underscores
let $_foo3 // mix the dollar sign, underscores, letters and numbers
let _12foo //start with underscores and contain numbers and letters
let _ // contains only underscore
let $ // contain only a dollar sign

// Example of invalid variables names

let random% // Don't use the percentage symbol
let 11years // Don't start with number(s)
let some-let // Don't use dashes
let one variable // Don't use spaces
let function // Don't use reserved keywords

Naming variable Good practices

Giving a good name to the variable is one of the most important and complex skills in programming. Proper descriptive variable names can create a good impression for a programmer in the viewer's eyes.

In a real project, most of the time a programmer spends modifying and extending an existing code base rather than writing something completely new. When we return to the code after doing something else for a while or maybe for a long period of time, its much easier to get back into a flow for those codes that is well-labeled. Or, in other words, when the variables have been declared with good names.

So, Please spend time thinking about the right name when you are declaring a variable. Doing so will make you benefited in the future.

Though variable names can be created in any way you want, it's a good practice to use human-readable, obvious meanings and maximally descriptive (the value the variable is referencing). If we name a variable as user then we should name related variables as currentUser or newUser.
Stay away from short names like a, b, and c. These kinds of short names are easy to type. But these are only useful in small programs. When you will work on a big project, will forget the context of these kinds of names.

Note: Though There is no limit to the length of the variable name and it can be almost unlimited in length, You should avoid creating extremely long variable names. Shorter variable names help the JavaScript engine to execute the program faster.

Since JavaScript is case-sensitive, apple and Apple are two different identifiers. But we should not use both of them in our program. Because this will occur confusion in the long term.
The best way to create a variable is to use multiple words in camelCase. (e.g., myVarName).

Undefined value of a variable

When we declare a variable without assigning a value to it will have the value undefined.

It's the default behavior of javascript. Though this container should be empty, it is not. It still contains a value that is undefined.

Note: undefined is one type of data in javascript. we will see about undefined and other data types in any other blog in detail.

If you want to see their value, you can do that by simply doing console.log() in your web browser's console the output will be undefined.

let name, age, birthYear;
console.log(name); // undefined
console.log(age); // undefined
console.log(birthYear); // undefined

Undeclared/Unassigned variable

Suppose you want to use a variable in a statement, but you haven't declared this variable yet. In this case, your code will throw a ReferenceError showing that the variable is not defined. In short, if we want to access an undeclared variable, the code will throw a runtime error.

Example:

console.log(xyz); // ReferenceError: xyz is not defined

Try running the above line in the browser console.

In the real program, You should never try accessing a variable without declaring it.

Note: Don't get confused with the undefined and Unassigned/Undeclared variables they are very different things. An undefined variable is a variable that has been declared in the program but has not been initialized with a value. In contrast, an undeclared variable is a variable that has not been declared yet.

Assigning value to the variable

After the declaration has been completed, we can use the equal(=) sign to assign a value to the variable:

Example:

let age;
age = 22;

where the age is the name of the variable and it is assigned a value of 22.

Note: In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator like in algebra. Though the following does not make sense in algebra:
x = x + 10;

But In JavaScript, it makes perfect sense:

First It calculates the value of x + 10 and assigns the result to variable x. In simple words, The value of x is incremented by 10.

Note: in JavaScript, the "equal to" operator is written like ==.

Also, the variable declaration and initialization can be combined. that means variable initialization can be done in the declaration:

var greetings = "Hello";
let name = "Robiul"

// or,
var greetings = "Hello", name = "Robiul";

//The same declaration can even span across multiple lines using comma(,):

var greetings = "Hello", 
      name = "Robiul";

Note: we can assign a variable value from user input

// Gets user input
var name = prompt("What is your name?");
var age = prompt("What is your favorite age? ");
console.log(name)  
console.log(age)

Changing/Updating/Re-assigning the Value of a Variable.

The meaning of the word variable is anything that can vary. That means once the initialization is finished we can change or update the value of the variable later on in the program if required.

It is similar to re-initializing the variable. We can update/change the value by just typing the name of the variable followed by an equals sign(=) and then followed by the new value we want it to store.

var greetings = "Hello";
let myHobby = "Drawing";
console.log(greetings); // Hello
console.log(myHobby); // Drawing

// changing the value 
greetings = "Hi";
myHobby = "Programming"
console.log(greetings); // Hi
console.log(myHobby); // Programming

// also, we can change the value as many times as we want:

let message;
message = "Hello";
console.log(message); // Hello
message = "World"; 
console.log(message); // World

javascript variable doesn't contain the history of the variable, which means when we change the value of a variable it removes the old data and stores the new one.

Note: There are a few functional programming languages, like Scala or Erlang that don't allow changing variable values.

In such languages, once the value is assigned in a variable, its there forever. If we want to reassign the variable or want to change the value of the variable, the language forces us to create a new variable (declare a new variable). We cant reuse the old one.

Accessing JavaScript variables

As a beginner, you might be thinking about what is the procedure to access/use the value that is stored in a specific variable. It's simpler than declaring and assigning the variable. You just need to write the name of the variable that contains the value you want to access and you are done. This things also called referencing a variable.

// Declare and initialize the variable
var myNumVariable = 85
let myTextVariable = 'This is text.'

// Access the values in myNumVariable and myTextVariable
myNumVariable
// 85
myTextVariable
// 'This is text.'

// Re-assign myNumVariable and myTextVariable
myNumVariable = 50
myTextVariable = 'This is a updated Text'

// Access the values in myNumVariable and myTextVariable again
myNumVariable
// 50
myTextVariable
// 'This is a updated Text'

Basic usage of variables

Once you declare a variable and initialize it, you can reference this variable by name anywhere elsewhere in your code.

var x = 10;
x + 2;
console.log(x) // 12

You can use an already declared variable when declaring a new variable.

var x = 100;
var y = x + 102;
console.log(y) // 202

you can do all kinds of arithmetic operations with JavaScript variables, using operators like =, +, *, and more. :

let x = 5 + 2 + 3;
console.log(x) // 10

You can also add a string to another string, but strings will be concatenated:

let x = "John" + " " + "Doe";
console.log(x) // John Doe

Note: During arithmetic operations If you put a number in quotes, the rest of the numbers will be treated as strings, and all of them will be concatenated. Now try this:
let y = "5" + 2 + 3;
console.log(y) // 523
This is called coercion in javascript

Why should we use variable

So far we have discussed what is variable, how to create it, and how it works in our program. But haven't discussed why this is so important and why should we use the variable.

Let's have a look at this too. we will discuss some point on how variable helps programmers to write optimized and efficient code :

To Understand these points let's see a program of a pretty simple and state-forward game called guess my number. This game logic is very simple, we will use a number in our code and the user will have to guess the number if the user guesses the correct number our program will show a successful message and if the user is wrong the program will show a failed message.

if(userInput==20){
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<20){
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>20){
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

Here in this program, we have used the number 20 to make our program logic. This program will perform fine but this program is not well coded.

let's see what's wrong with this program and why this is not well coded and how variable makes our life easy and help us to make our code more efficient and optimized:

The first problem with this program is we have to memorize the number 20 or have to check the number again and again whenever we will use it in our program. Maybe it doesn't seem a big problem for a small program and simple value like this but imagines a program that has a thousand lines of code and maybe hundreds of value like this number or maybe some huge numbers like 204025021, 12242250221 and we can't memorize all of them.

let myNum = 20;
if(userInput==myNum){
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

Now here comes the second problem with this code. that is when we will try to change the number we have to change the number from every place where we have used the number. and imagine when we will work on a big project we have to use a variable in several places. if we would need to change the value from all the places how painful and time-consuming it would be.

let myNum = 20;
console.log(myNumber) // 20
if(userInput==myNum){
console.log(myNumber) // 20
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log(myNumber) // 20
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log(myNumber) // 20
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}
// change the value
myNum = 30;
console.log(myNumber) // 30
if(userInput==myNum){
  console.log(myNumber) // 30
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log(myNumber) // 30
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log(myNumber) // 30
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

how simple it is! right?

Another program with this program is we are using the number in a statical way. That means our program is not dynamic now. If we need any changed value we have to edit the source code which is very bad. To write a modern program we should have a feature to change the value dynamically.

  let myNum = prompt("enter a number?");
if(userInput==myNum){
  console.log("Hurrah, You guess the correct number.");
}else if(userInput<myNum){
  console.log("Sorry, Your guessed number is small. Please try a bigger one.")
}else if(useInput>myNum){
  console.log("Sorry, Your guessed number is Big. Please try a bigger one.")
}

Now our code is dynamic we can change the value whenever we want without changing or editing the source code.

Thus, variable helps us to write optimized, developer-friendly, and easy-to-understand code.

Note: Though variable helps us in many ways. but too many variables can harm the code performance very badly and it's can increase the server cost. so, we should be careful when we are declaring a variable.

Recap

A variable is a computer memory location paired with an associated symbolic name, which contains some information or data referred to as a value.
We can simply think of variables as named containers that hold information and can be referred to the data simply by naming the container.
We can Declare a JavaScript Variable using var or let.
All JavaScript variables must be identified with unique names. These unique names are called identifiers.
There are some general rules to follow when we are constructing a name (unique identifiers) for the variable.
A variable declared without a value will have the value undefined.
A variable that has not been declared yet is called an undeclared.
After the declaration, we can use the equal(=) sign to assign value to the variable
You can combine variable declaration with variable initialization. that means initialization can be done in the declaration.
Once a variable has been initialized with a value, you can change (or update) that value anytime and anywhere within its scope by giving it a different value.
We can access a value of a variable simply by using the name of the variable. This is also called referencing a variable.
You can reference a variable by name elsewhere in your code.
You can use a variable when declaring other variables.
You can do arithmetic with JavaScript variables, using operators like = and +.
You can also add strings, but strings will be concatenated.
variable helps us to write optimized and efficient code. Though it is helpful in many ways, too many variables can be harmful. so, we should be careful of it.

Visit my personal Blog where I write more content like this: Roblog

DEV Community: Robiul H.

JavaScript Loop Best Practices for Optimal Performance

Introduction

Choosing the Right Type of Loop

Use the Right Loop Control Statement

Optimizing The Loop Performance

Avoiding unnecessary calculations

Use efficient loops

Minimize DOM manipulation

Avoid Common Mistakes

Modifying Loop Variables Inside the Loop

Not Using Curly Braces

Be careful of Infinite Loop

Off-by-One Errors

Use Recursion if needed

Conclusion

Other posts of mine:

Simplify Your Code with Arrow Functions in JavaScript

Shorter Function Definitions

Iterating over Arrays

Callback Functions

Handling Asynchronous Operations

Binding Context to Event Handlers

Conclusion

Other posts of mine:

Is javascript compiled or interpreted language?

Introduction

Compiler

Interpreter

Compiler vs. Interpreter in a simple way

Is JavaScript Compiled or an Interpreted Language?

How does JavaScript actually get translated?

Explaining JIT in JavaScript

Why the Pre-execution syntax error alerts

What is the story of hoisting?

Conclusion

Resource:

Other posts of mine:

Javascript variables (Beginner thinking)

variables in javascript

Declaring Variables

Naming Variables

Rules for variable Name

Naming variable Good practices

Undefined value of a variable

Undeclared/Unassigned variable

Assigning value to the variable

Changing/Updating/Re-assigning the Value of a Variable.

Accessing JavaScript variables

Basic usage of variables

Why should we use variable

Recap

Resources