Basics Of JavaScript: Loops

Photo by Priscilla Du Preez on Unsplash

JavaScript, along with any other real programming language, is completely foreign to me. I only know that it is used in order to make your browser (or even your computer) do things. After all that’s the point of programming languages, right?

Today I decided to focus on learning the basics of JavaScript, in order to get my feet wet and understand what I actually have to learn, besides making sure that I always have the big picture in mind.

JavaScript is a single-threaded language, which means it can only perform one action at a time (in order) and cannot therefore do things concurrently. JS uses camelCase.

console.log(nameOfVariable) prints the result of your operations.

Loops

An important concept to understand in order to use JS is that of loops. Loops allow you to perform the same action over and over again; there are different kinds of them:

• for loops: they run a block of code a number of times until a certain condition is reached (the number of iterations that you specified). They are used when the number of iterations is known. Their syntax is: for (begin; condition; step){code}.
• for … in loops: they run a block of code through the properties of an object (enumerable properties). Their syntax is: for (variable in object){code}.
• for … of loops: they run a block of code through the properties of an array or a string (iterable collections). Their syntax is: for (variable of array){code}.
• while loops: they run a block of code as long as the condition you specified is evaluated as true (the condition is evaluated before the execution). They are used when the number of iterations is not known. Their syntax is: while (condition) {code}.
• do … while loops: they run a block of code as long as the condition you specified is evaluated as true (the condition is executed before the evaluation). Their syntax is: do {code} while (condition);.

Note: remember to add the updater++ to terminate the loop, otherwise you’ll obtain an infinite loop that could potentially go on forever.

You can break (exit) loops at any time with the “break” directive: if () break;. You can also skip the current iteration and move on to the next iteration of a loop with the “continue” directive: if () continue;.

In case you want to break out of an entire loop that contains other nested loops within it, you can use a label. Labels are identifiers followed by a colon that can be put before loops, allowing you to break out of them. For example: yourLabel: for () {... break yourLabel; ...}.

Notes:

1. It is better to use the strict equality operator “===” instead of the equality operator “==” (and “!==” instead of “!=”) when equaling two values. This is because the two equals compare for equality only after trying to convert your values, while the three equals compare for equality straight away, potentially avoiding you many problems. For example: alert("0" == false); // true while alert("0" === false); // false.
2. Strings can be enclosed within single quotes (‘ ’) or double quotes (“ ”), which have the same effect. Backticks (` `), on the other hand, are used to embed any kind of expression (including function calls) into your string; they can also span more than one line of code.
3. this.getBoundingClientRect() can be used to get the coordinates of an element (bottom, height, left, right, top, width).