DEV Community: Hemanth Kumar R

Loops in javascript

Hemanth Kumar R — Sat, 16 Oct 2021 05:45:19 +0000

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false when analysed. A loop will continue running until the defined condition returns false.

The three most common types of loops are
• for
• while
• do while

for loop

Syntax

for ([initialization]; [condition]; [final-expression]) {
// statement
}

The javascript for statement consists of three expressions and a statement:
Description
• Initialization - Run before the first execution on the loop. This expression is commonly used to create counters. Variables created here are scoped to the loop. Once the loop has finished it’s execution they are destroyed.
• Condition - Expression that is checked prior to the execution of every iteration. If omitted, this expression evaluates to true. If it evaluates to true, the loop’s statement is executed. If it evaluates to false, the loop stops.
• Final-expression - Expression that is run after every iteration. Usually used to increment a counter. But it can be used to decrement a counter too.
• statement - Code to be repeated in the loop
any of these three expressions or the statement can be omitted. For loops are commonly used to count a certain number of iterations to repeat a statement. Use a break statement to exit the loop before the condition expression evaluates to false.
Common Pitfalls
Exceeding the bounds of an array
When indexing over an array many times it is easy to exceed the bounds of the array (ex. try to reference the 4th element of a 3 element array).
// This will cause an error.
// The bounds of the array will be exceeded.
var arr = [ 1, 2, 3 ];
for (var i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}

    output:
    1
    2
    3
    undefined

There are two ways to fix this code. Set the condition to either i < arr.length or i <= arr.length - 1
Examples
Iterate through integers from 0-8
for (var i = 0; i < 9; i++) {
console.log(i);
}

output:
0
1
2
3
4
5
6
7
8

Break out of a loop before condition expression is false
for (var elephant = 1; elephant < 10; elephant+=2) {
if (elephant === 7) {
break;
}
console.info('elephant is ' + elephant);
}

output:
elephant is 1
elephant is 3
elephant is 5

for...in loop
The for...in statement iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.
for (variable in object) {
...
}
Required/OptionalParameterDescriptionRequiredVariableA different property name is assigned to variable on each iteration.OptionalObjectObject whose enumerable properties are iterated.
Examples
// Initialize object.
a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }

// Iterate over the properties.
var s = ""
for (var key in a) {
  s += key + ": " + a[key];
 s += "<br />";
  }
document.write (s);

// Output:
// a: Athens
// b: Belgrade
// c: Cairo

// Initialize the array.
var arr = new Array("zero", "one", "two");

// Add a few expando properties to the array.
arr["orange"] = "fruit";
arr["carrot"] = "vegetable";

// Iterate over the properties and elements.
var s = "";
for (var key in arr) {
 s += key + ": " + arr[key];
 s += "<br />";
}

document.write (s);

// Output:
//   0: zero
//   1: one
//   2: two
//   orange: fruit
//   carrot: vegetable

// Efficient way of getting an object's keys using an expression within    the for-in loop's conditions
var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0;
for (myKeys[i++] in myObj);

document.write(myKeys);

//Output:
//   a
//   b
//   c

for...of loop
The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set, Arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
for (variable of object) {
statement
}
DescriptionvariableOn each iteration a value of a different property is assigned to variable.objectObject whose enumerable properties are iterated.
Examples
Array
let arr = [ "fred", "tom", "bob" ];

 for (let i of arr) {
     console.log(i);
 }

 // Output:
 // fred
 // tom
 // bob

Map
var m = new Map();
m.set(1, "black");
m.set(2, "red");

 for (var n of m) {
     console.log(n);
  }

 // Output:
 // 1,black
 // 2,red
 Set
  var s = new Set();
  s.add(1);
  s.add("red");

  for (var n of s) {
     console.log(n);
   }

  // Output:
  // 1
  // red
Arguments object
 // your browser must support for..of loop
 // and let-scoped variables in for loops

  function displayArgumentsObject() {
      for (let n of arguments) {
         console.log(n);
       }
    }


  displayArgumentsObject(1, 'red');

   // Output:
   // 1
   // red

while loop
The while loop starts by evaluating the condition. If the condition is true, the statement(s) is/are executed. If the condition is false, the statement(s) is/are not executed. After that, while loop ends.
Here is the syntax for while loop:
Syntax:
while (condition)

{

 statement(s);

}

statement(s): A statement that is executed as long as the condition evaluates to true.
condition: Here, condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When condition evaluates to false, execution continues with the statement after the while loop.
Example:
var i = 1;
while (i < 10)
{
console.log(i);
i++; // i=i+1 same thing
}

How to Iterate with JavaScript While Loops
While loops will run as long as the condition inside the ( ) is true. Example:
while(condition){
code...
}
Hint 1:
Use a iterator variable such as i in your condition
var i = 0;
while(i <= 4){
}
Spoiler Alert Solution Ahead!
Solution:
// Setup
var myArray = [];

// Only change code below this line.
var i = 0;
while (i <= 4){
  myArray.push(i);
  i++;
}

Do...while loop
The do...while loop is closely related to while loop. In the do while loop, the condition is checked at the end of the loop.
Here is the syntax for do...while loop:
Syntax:
do {

  *Statement(s);*

} while (*condition*);

statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.
condition: Here, a condition is a Boolean expression. If Boolean expression evaluates to true, the statement is executed again. When Boolean expression evaluates to false, the loops ends.
Example:
var i = 0;
do {
i = i + 1;
console.log(i);
} while (i < 5);

Output:
1
2
3
4
5

How to Iterate with JavaScript Do…While Loops
• Do...While loops makes sure that the code is executed at least once, and after the execution, if the condition inside the while() is true, it continues with the loop, otherwise it stop.
Solution:
var myArray = [];
var i = 10;

do {
 myArray.push(i);
 i++;
} while(i <= 10);

Comments in HTML,CSS and JAVASCRIPT

Hemanth Kumar R — Fri, 15 Oct 2021 17:14:58 +0000

Single line HTML comments
To comment out a single line of HTML, place the text or code you are commenting between comment tags: .

Here’s how this looks in the code:

  <!-- The text in here will be invisible on the website -->

Here's some regular HTML content!

When you load the website, the HTML comment won’t show up on the page itself:

Website showing text content but not the HTML comment
But if you inspect the website code in your browser, you will still be able to see the HTML comment text:

Code inspector in the browser showing the comment
Multiline HTML comments
To create a multiline or block HTML comment, you still use the comment () tags, but you can have more than one line in your comment. As long as you contain the comment text between the tags, it will be included in the comment.

Here’s an example of a multiline HTML comment:

<!-- 
  The text in here will be invisible on the website!
   Here's another line of the comment.
   You can have as many lines as you want! 😁
-->

And here's that regular HTML content again.

Here’s how it will look on the website:

Website text without HTML comment showing
And you can see the whole HTML comment in the inspector:

Browser inspector showing the multiline HTML comment
How to write comments in CSS
Single line CSS comments
To make a single line CSS comment, put the comment text or code between /* */tags.

Here’s an example:

   /* This text will be ignored by the browser! */

.description {
font-size: 1rem;
line-height: 1.25rem;
color: #202020;
}
Multiline CSS comments
To write multiline or block CSS comments, you can use the same /* */ tags, and put the comment content on multiple lines.

Here’s what a multiline CSS comment would look like:

   /* 
    This text will be ignored by the browser! 
    And this will also be included in the comment!
    One last line of comment for good measure 😁
   */

.description {
font-size: 1rem;
line-height: 1.25rem;
color: #202020;
}
How to write comments in JavaScript
Single line JavaScript comments
To create a single line comment in JavaScript, begin the line with two forward slashes (//).

Here’s an example of that:

     // This text is a comment and will be ignored!

You can also add a single line comment on the same line as some code. As long as the comment is the last content on that line, it will work.

Here’s what that would look like:

console.log('Test code here!'); // This is a console log message
Multiline JavaScript comments
If you want to create a multiline or block comment in JavaScript, enclose the comment text between /* */ tags. (This is the same method as in CSS.)

Here’s what that will look like:

     /* 
      Function: doSomeAwesomeThing()
      This does something awesome, but I don't know what! 
    */

function doSomeAwesomeThing(){
console.log('Run awesome function');
}
In closing
Adding comments to your code in HTML, CSS, and JavaScript will help other people to understand what your code is about.

It’s also helpful when you’re working on a project in development and need to temporarily comment out some code while testing. But just make sure to not leave comments in production code!

JavaScript working in Leyman words

Hemanth Kumar R — Tue, 05 Oct 2021 18:21:01 +0000

How do you think a JavaScript program is executed?
So every browser provides a JavaScript engine that runs the JavaScript code.
there are two methods commonly known, one is where the whole code file is run and transformed to machine language known as Compiled language and the other is a code file executed line by line also known as interpreted type . so JavaScript is an interpreted language i.e. program is executed sequentially and hence it’s called single-threaded language at runtime.

now, JavaScript called a Client-side Scripting Language. That means that it is a computer programming language that runs inside an Internet browser the browser provides JavaScript engine which is a program or an interpreter that executes JavaScript code. A JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to byte code in some form.

The way JavaScript works is interesting. Inside a normal Web page you place some JavaScript code . When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it.

The engine used for JavaScript consists of two main components:

Heap Memory— this is where the allocation of memory happens.
Call Stack — this is the place where the stacks are getting called and the code executes.

Like any other programming language, JavaScript runtime has one stack and one heap storage. A heap is a free memory storage unit where you can store memory in random order. Data that is going to persist in for a considerable amount of time go inside the heap. Heap is managed by the JavaScript runtime and cleaned up by the garbage collector.
What we are interested in is stack. A stack is LIFO (last in, first out) data storage that stores the current function execution context of a program.

so now imagine a small program consisting of a variable, function and o/p statement now the whole program is executed line by line where the variable encountered is stored separately in the memory with value undefined (i.e all variables will be recorded in the memory at once that are existing in the whole program )and then next imagine a pointer which points to all different variable numbered sequentially. then when in the same program a function is encountered a separate execution context is created like a sub task and is executed line by line so if a variable is assigned a value in that function then after completing the function the subtask value is stored into the stack above the already existing element in the stack that is the Global Execution context so this process repeats until there are more functions and the stack is accumulated accordingly. once the end is reached then the stack starts popping out the elements where this elements value is assigned to the variable in the memory which was earlier undefined and the process repeats till the stack is empty so all this happens simultaneously .

Global execution context as an environment where the code runs.
There can be multiple execution context in a program but a single Global execution context.
The stack is cleared after each operation as well as memory after the operation.

Overview

the program is divided into 3 parts that is the variable part ,the function part and the output part, these are the basic building blocks of a program where all data stored should be outputted at one point of the time. Now variables are stored in memory sequentially and when the function is encountered it is treated as subtask and the execution takes place separately for each function and pushed into the call stack and the value or outcome of that function is stored into stack then the same process completes till the end of the program and then the stack is popped and the associated value is assigned to related variables which were earlier undefined and the memory is erased after the value is outputted.