Forem: Dwaipayan C(Dtech-Dbug)

JavaScript: Look! Loops!

Dwaipayan C(Dtech-Dbug) — Thu, 23 Feb 2023 07:40:34 +0000

Now that we have covered control flows and have a little bit of idea about conditionals, its time we move to one of the most important concepts of programming - loops.

What is s Loop?

A loop is set of inctructions that are executed until a certain condition is met.

How about a practical example? Just to reassure - it's most definitely not rocket science.

Imagine, you have 4 identical boxes. One of the boxes have insert your incentive what you are looking for. How would you find that?

You would, most probably,search each of the boxes until you find just what you are looking for, right?

In the programming paradigm, you are just essentially looping through the boxes until you find what you are looking for.

Now, lets write a pseudo code for that? Shall we?

(loop through each of the 4 boxes)
if(the box has what you are looking for){
 break the loops;
}
else{
keep on searching, until you find what you are looking for
}

That was easy.

But wait. Hold On. There's a catch.
Since all the boxes are identical, you have to make sure to somehow differentiate or mark the boxes that are already searched, without that - you could potentially end up searching the 4 boxes forever, unless ofcourse you exit/break out of it. Come to think of it?

What are the different kinds of loops used in programming?

The two most widely used loops are - for-loops and while-loops.

Let's discuss in short about both of them to gain a better understanding of each.

For-Loops

A for loop is a type of loop in programming that is used to execute a set of statements repeatedly for a fixed number of times.

Typically, they involve:

a loop variable -> to keep track of the index of loop. Remember the 'marking' part in the practical example?
a condition -> this determines on what condition will the loop stop, or in other words how long shall the loop run. In the practical example of box-searching - 'find what you are looking' was the condition. Until that was met you had to keep searching the boxes. Making sense?
a step -> this increments the loop variable, after an iteration is completed to start the next iteration.

A general for loop syntax will look like this:

for (initialise loop variable; define condition; step)
{
// code block
// what to do
}

The control flows in this order:

The condition is checked, if its true the control enters the code block, if it's false the control exits the loop.
After the control is inside the code block the block is executed and the loop variable is stepped.
Back to step 1.

Challenge!
Guess the output of the below snippet.

for(let i=0; i < 10; i++)
{
console.log(i)
}
// guess the output?

While-Loops

A while loop is a type of loop in programming that repeatedly executes a block of code as long as a specified condition is true.

The principles of the while-loop is pretty similar to for-loops,but the semantics are quiete different.

For example a typical, while loop syntax will look like:

// loop variable init
let i = 0;

while(condition){
 // code block

 // step up or step down the loop variable
// in this case, since the loop var is initialised with 0, we will increment it by 1
i++;
}

Note: while implementing while loops, we have to be extra cautious about stepping up or stepping down the variable otherwise we might run into an infinite loop.

Consider the following example:

while(true){
 console.log('RUNNING INIFINITE WHILE LOOP)
}
// this code doesnt know when to stop, therefore it wont.
// this can cause problems like memory leaks

When to use for and while loops?

Anything that can be achieved with for loops can be achieved with while loops.

However, they have their own specific use cases.

For-Loops are the best when you know eaxctly how many times you want to execute the set of instructions.

While-Loops, when you dont know how long should a loop run, but you only know the condition on which the loop can exit.

Some important concepts/keywords of loops:

break : the break keyword can be used to exit a loop prematurely when a certain condition is met, saving the time to iterate any further.
continue : the continue keyword can be used to skip the current iteration and go to the next value.

To put things into perspective using the box-searching pseudo-code example:


// considering there are 4 boxes, and one of them has your thing of interest in it

// note here i = represents the current box

for(let i = 0; i < 4; i++)
{
 if(i doesn't have the thing of interest in it){
  continue;
}
else{
  break;
}
}

Note: you can initialize the loop variable with 1, but a more widely adopted approach is initializing it with 0.
Interested to learn more? Read about 0-based indexing.

It's a Wrap!

Loops are one of the most fundamental tools for problem solving.
The most common types of loops are for-loops and while-loops.
While both of them can be used interchangeably, they do have their own use case.
For-loops are more generally used when the numbers of times the loop has to run is known or fixed.
While-loops are more generally used when the number of times the loop should run is unknown and only the condition on which the loop exits is known.
While-loops are particularly tricky, if not written properly as they might lead to problems like inifinite loops which in turn results to memory leaks and buggy code.

With that, we have a slightly better idea about loops and how to use them in context.

Variations of For-loops in JS

This part is only if you are willing to explore a little more. No harm if you skip this section.

JavaScript has a couple of variations of for loops introduced in ECMAScript 2015:

for...of: read about it here
for...in: read about it here

JavaScript: Control Flows and Conditional Programming

Dwaipayan C(Dtech-Dbug) — Mon, 08 Nov 2021 12:27:54 +0000

Control Flow

If a program contains more than one statement - they are executed in an order. The order of execution is in such a way that it tells a story, from top to bottom.

Consider the below snippet :

let myName = "Dtech-Dbug";

console.log("My Name is :" + myName);
//o/p : My Name is :Dtech-Dbug

The above snippet, although hard-coded, really tells a story :

First we define a variable named myName
Then we print that in the console.

Note : Console.log() is a native binding in JavaScript, a function more specifically. All it does is print anything you pass in between the parenthesis onto the console.

A rather simple schematic representation of the above code block would be a top-down arrow.

Conditional Flows

Not all the time will programs be super simple and a straight and simple top down arrow.
There can(and WILL) very well be cases where the program needs to be branched and the execution needs to follow a certain branch based on the current situation at hand.

Let us consider a real world scenario where branching and execution based on branching occurs.

Imagine this is 2014 and you are excited to watch the FIFA WC final between Argentina and Germany. You are a supporter of Argentina and decided that if Argentina wins then you would drink a beer to celebrate.

If we transform the above paragraph into pseudo-codes it will pretty simply look like:


if(Argentina)
{
Drink a beer to celebrate all night;
}

Now, this is not actual code. This is a pseudo-code.

Pseudo-Code : are text based details that help in designing algorithms or code.

Pseudo-Codes can be very easily be converted into actual codes, as you can guess, by the looks of the above snippet.

Back to the snippet of pseudo-code. While the pseudo-code talks about the situation that might follow the win of Argentina, it does not say anything about any other possibilities or occurrence.

Now, if you remember the final game that year, Argentina did not make it. 😭😭 Because Germany Scored at 113' and bagged the WC. :')

You were prepared for only if Argentina wins and that did not quite happen. You clearly missed out to think the opposite case i.e, what happens when Argentina does not win! So, what now?

Well it turns out in programming(and in real world) - the onus is on the programmer to design an algorithm or code that is self defensive by handling the various cases that may occur.

With that being mentioned, the previous snippet can be reworked to look like:


if(Argentina)
{
Drink a beer to celebrate all night;
}

if(Germany)
{
Drink three beers to forget the pain and sleep;
}

Now the program or the pseudo-code more precisely, is quite self-defensive as it is handling another possibility.

It turns out in a crucial game like the FIFA WC - a match between two teams, say A and B, can really have one of two possibilities. Either A wins or B wins, neglecting any other factors that might cause the game to stop like natural causes.

With this information at our disposal we can further modify the pseudo-code by thinking like, there can only be two situations in the final:

either Argentina wins
or Argentina does not win - i.e, Germany wins

With this informal language, we can re-design the pseudo-code to look like:


// the situation when Argentina Wins
if(Argentina)
{
Drink a beer to celebrate all night;
}

// the situation when Argentina does not win i.e, Germany wins
else
{
    Drink three beers to forget the pain and sleep;
}

Code It Yourself (CIY)

Imagine a problem statement where you are to categorize a number within the categories: Even, Prime, Odd, Even-Prime and print the categories onto the console.

If you remember your numbers,

Even numbers are numbers completely divisible by 2 - i.e, leaves 0 as remainder.
Prime numbers are numbers which are only divisible by itself and 1.
Odd numbers are numbers which are not even - i.e, they are not completely divisible by 2.
Even Prime numbers are numbers which have feats of both Even numbers and Prime numbers. There exists only one such number and that is 2.

Now, how shall we go about the problem and write a code that solves the given problem statement?

A little bit of interruption here - I would highly encourage you to try to start forming the pseudo-codes yourself and refer here if you are stuck. If you are very new to programming or JavaScript please stick by, sorry for the interruption.

Forming the Pseudo-Code

// if number is 0
if(number is equal to 0)
{
 console.log('Not a natural number')
}

// if number is 2, it is even-prime
if(number is equal to 2)
{
    console.log('Even Prime Number');
}

// check for prime
if(number % 1 is equal to 0 and number % number is equal to 0)
{
    console.log('Prime Number');
}

else
{
    // check for even
    if (number % 2 is equal to 0)
    {
        console.log('Even Number');
    }

    // check for odd
    else
    {
        console.log('Odd Number');
    }


}

Pretty verbose as it is but this is the pseudo-code that covers all the instances.
And it follows a specific branch of execution for different values of the number - that is mentioned repeatedly in the pseudo-code.
The actual code can be very well transformed from this snippet itself.

Points to note

we are preemptively checking for the case where the number can be 0. Bc, technically there is no reason not for that occurrence. And it is always a good idea to think and handle all the edge cases and make the program more self-defensive.
the % operator is called the modulo operator. It is an arithmetic operator that quite simply returns the remainder of integer divisions. So the expression 4 % 2 basically returns the remainder value after dividing 4 by 2 - which is 0. Therefore, all even numbers have 0 as remainders when divided by 2.
while using conditionals, there can be a lot of branches and you can use nested conditionals. Nested conditionals is a fancy term meaning using conditionals inside conditionals. Notice the if-else blocks inside the first else block. That is nested conditional so
to speak.

There you have your first take home assignment - transform the pseudo-code into actual code and share it on Twitter or Linkedin and tag me, if you will! 🤗🥰

Wrapping Up

Execution of statements in a program occurs in a specific flow which essentially tells a story - a story that the programmer wrote and asked the machine to decipher. 📕
Not all programs are easy and just a straight road. 🦕
More than many programs are branched and the execution follows a certain situation at hand.These kind of execution is called conditional execution. And the statements which represent conditional execution are typically in the form of if(p) then q and they called conditional statements/sentences. 🦦
In the form if(p) then q; p is more mathematically referred to as the hypothesis of the conditional and q is called the conclusion of the conditional. From our FIFA WC example above: Drinking beer and celebrating all night was a conclusion to the hypothesis if Argentina Wins. 🍺
The onus is on us programmers to make the program as self defensive as possible by handling not just one obvious case but other cases as well. Analogous to the form 👇

if(p) then q;

if(r) then s;

else t;

The control only enters a block if the hypothesis is true. Consider the below snippet 🐳

let x = 2;

if (x === 3) {
  // x === 3 is hypothesis
  // hypothesis is false; since we declared x to be 2
  // this if block is skipped totally
  console.log("x is three");
}

// control comes down to this else block
else {
  console.log("x is not three");
}

// output : x is not three

Conclusion

If you are new to programming, consider solving the above assignment and tag me on twitter/linkedin w/ the end code. 🤝
If you found this article a good read consider leaving a reaction or sharing the article w/ your friends who share similar interests. Comment below if you don't get something and I would be happy to cooperate. 🧙‍♂️

Wanna talk about tech, life or even share a song suggestion?
Find me here 🧙‍♂️

Relevant Hyperlinks

What are Algorithms, in simple terms?

JavaScript: The Beginning

Dwaipayan C(Dtech-Dbug) — Sun, 07 Nov 2021 09:28:47 +0000

Program Structures

Learning programming is very less about memorizing the cryptic syntactic sugars and more of the programming fundamentals itself the bits which makes a program. Because the fundamentals are the same everywhere, across all programming languages - the syntactic sugars differ.

Although we will be using JavaScript to understand the concepts and the glossy details. But rest assured most of the concepts are shared across all programming languages.

Let us quickly go through the scope of this blog.

Expressions? 🤯
Statements? 🤔
What are bindings? 😵
Binding Conventions 😎
Environment 🌳
Conventions of well-designed programs 🎨

Expressions

Every block/line of code that produces a value is called an expression.
Every value written literally like 'Programmer' or 'JavaScript' or any numerics like 2 is an expression.
An Expression within a parenthesis (expression) is also an expression.
Unary or Binary Operations involving expressions is also an expression.

This is the beauty of language based interface - as most of English can be directly used in logic formation and deductions.

Consider the following example below :

If the program has bugs or the program involves division by 0. The program will crash.

This is an excellent example of the beauty of language based interface. The above example is really comprised of two sentences :

If the program has bugs

If the program involves division by 0

We used two sub sentences to form a single sentence - and similarly two sub expressions to form a single expression.

The above example is essentially a conditional statement, in the form of if(p or q) then r.
Where p , q, r are just statement variables which can be substituted by actual english.

If an expression corresponds to a sentence fragment, a JavaScript statement corresponds to a full sentence. A program is a list of statements.

Note : A statement is an expression that has a consistent truth value. i.e, it can either be true or false but never both. On the contrary, a sentence is an expression that bears inconsistent truth values meaning for some cases it may be true and other cases false.

Statements

We introduced the fundamenetals of statements just a few lines ago.
The simplest statement in programming paradigm is an expression that ends with a semi-colon.

Example :


Hello World;
!false;

That is it. That is a statement. Although very trivial and useless admittedly, but does not change the fact that the above lines are two statements.

🎯 A statement only amounts to something when it affects the environment(in context of the program scope). It could be something as simple as printing something on the console or updating a variable which is then used by some other block of code. Either cases the statements are likely to affect the program and it's state. These changes and similar changes alike are called SIDE EFFECTS .

Note: JavaScript is lenient sometimes and ignores missing semi-colons in certain cases. But the best practice would be to use them - in order to ignore the nuances of missing terminating characters.

How does JavaScript keep an internal state or remember values? 🤔

To catch and hold values, JavaScript uses something called Bindings or simply variables.
Consider the snippet below :

let Greet = "Hello World, JavaScript is amazing!";

The above line is literally indicating a binding and it is another kind of statement.

The special keyword let indicates that the sentence is going to define a binding.
(More about these special keywords, soon)
Followed by the name of the binding.
And we immediately assigned a value to the binding by using the = and an expression, which is Hello World, JavaScript is amazing!

Note: = in programming is assignment operator. Not equality operator!

By the example statement - it creates a binding called Greet to point towards the value Hello World, JavaScript is amazing!

When a binding points towards a value - it does not essentially gets tied to it forever.
Meaning, that at any point of time, we can use the = operator again on existing bindings to make it point towards a new value.

Continuation of the previous example :

let Greet = "Hello Reader";

let Question = "How are you liking JavaScript?";

As obvious as it seems - we made the binding named Greet point to a new value now. And also defined a new binding named Question.

When bindings are defined, we can use their names as expressions. Example :

let Greet = "Hello Reader";

let Question = "How are you liking JavaScript?";

let Welcome = Greet + Question;

// the binding named welcome will hold the value "Hello Reader How are you liking JavaScript?"

The above example may seem a little cryptic if you are an absolute beginner to programming. But what it is doing essentially is just concatenating two strings because we used an expression that includes a binary operation between two expressions Greet + Question

Consider a simple example for usage of defined bindings as expressions.
Imagine Santa Clause 🎅 gives you 1000$ on Christmas and again 2000$ on New Year's eve.
The equivalent code will look like :

let FirstGiftBySanta = 1000;

let SecondGiftBySanta = FirstGiftBySanta + 2000;

console.log(SecondGiftBySanta);
//output : 3000 (1000 + 2000)

When you define a binding, and do not assign it any value to point at, it ends up pointing to a bogus address/garbage values. Hence if you try to retrieve the value of such a binding you are likely to see undefined

But, you can assign a value to it later in your code. Example :

let LuckyNumber;

console.log(LuckyNumber);
//output : undefined

LuckyNumber = 3;

console.log(LuckyNumber);
//output : 3

Note: To assign value to a pre-defined binding you do not have to implictly use the special let keyword again. Why? We have already used it to define a binding LuckyNumber in the above snippet.But not essentially asked it to point at a value. So in order to make a predefined binding point at something, we just simply use the = operator and the expression we want the binding to grab or point at.

You can also use a single special let keyword to define more than bindings seperated by a comma. Like :

let WholeNumber = 0,
  NaturalNumber = 1,
  EvenNumber = 2;

console.log(Wholenumber + NaturalNumber + EvenNumber);
//output : 0 + 1 + 2 = 3

At this moment, let us not get into the nuances of the special keywords like let, var, const
Although similar, they have subtle difference.
Check them out in details here, in this fine blog by FreeCodeCamp : let vs. var vs. const in js

Binding Names

Naming identifiers or bindings or variables is one of the things most people struggle with. But the best practise is naming it in such a way that is self explanatory and relevant to it's purpose.

Consider the below snippet :

let x = "Sweet";

console.log(x);
//output : Sweet

let Dessert = "Sweet";

console.log(Dessert);
//output : Sweet

Both the code blocks essentially does the same thing and produces the same value. But they differ largely in the way they are defined. A person can't just read x, and guess what it is pointing at, on the other hand the variable Dessert is much more sensible than just x. So any person reading the code can guess what the variable Dessert is all about and be completely clueless about x, unless they get to line where x is defined.

Although it does not make much sense or difference in toy programs like these, but in real world scenarios where the codebase is usually large and messy - naming convention has to be followed for better productivity and not waste time guessing what an identifier identifies!

Naming conventions

Use identifiers relevant to it's purpose and avoid random variables.
You can use characters, numerics to name variables but don't start a variable name with a digit.
You can use sepcial characters like _ or $ to name variables, but no other special characters.
You can not use reserved keywords to name variables.

Reserved keywords are the bindings used by the program itself, native bindings of the program. Some examples of reserved keywords in JavaScript are :
catch try finally console propmt window process... etc.
The list is super long and does not need to be memorized.

Environment

The ecosystem within which all the bindings and their values exist at a given point of time is called the environmet or in a more fancy term the world of the program.
On startup, the environment is not empty as it contains the native bindings that are part of the program itself.Bindings like the reserved keywords and etc.

Conventions Of writing well-designed programs

There is no single answer to good coding conventions, just a few shared practices amongst developers keeping readability, reusability and maintainability in mind. Below are some aspects that when taken care of can skyrocket productivity.

Identifiers - Let us agree that naming bindings/varaiales or more mathematically identifiers is hard. It is really tempting to give it a random name to save time (which is totally okay for testing and trials) but it comes with more problems than benefits. Random names are not explanatory and anyone reasing the code will certainly be lost trying to guess what the identifier identifies, unless they get to the line where the identifier is defined. The best convention is to assign self explanatory, and names relevant to the binding's purpose. Hence, ditch all those x , y , z as far as possible and go for userInput, arrayOfShoppingItems, primeNumber.
Indentations - This is one of the aspects that makes codes more readable. Honestly, the computer does not care if you are indenting the codes or writing everything in a single line. Infact, you can write an entire program in a single line and if it is correct it will execute just fine. More interestingly, the machine codes that all the codes we write ultimately gets converted to (by the compiler software) for the computer to read and execute is a giant cryptic line of code which is super messy and absolutely not comprehensible by human. But the purpose of indentation is to make the code more readable - so that in the future you, the programmer or any other programmer working on the codebase can actually visually discern between the each statements and hence read the codes efficiently.
Terminating Character - Though there are some cases where absence of a ; does not affect the program(in High-level languages only). But it is the best practice to use it so as to save the nuances of remembering the scenarios where a ; matters and where not.

That is it. Congratulations for writing your very own program 🎊

Forem: Dwaipayan C(Dtech-Dbug)

JavaScript: Look! Loops!

What is s Loop?

What are the different kinds of loops used in programming?

For-Loops

While-Loops

When to use for and while loops?

Some important concepts/keywords of loops:

It's a Wrap!

Variations of For-loops in JS

JavaScript: Control Flows and Conditional Programming

Control Flow

Conditional Flows

Code It Yourself (CIY)

Wrapping Up

Conclusion

Relevant Hyperlinks

JavaScript: The Beginning

Program Structures

Table of contents

Expressions

Statements

How does JavaScript keep an internal state or remember values? 🤔

Binding Names

Naming conventions

Environment

Conventions Of writing well-designed programs

Acknowledgements and Hyperlinks