JavaScript Loops - JavaScript: The Ultimate Crash Course Learning JavaScript within a Day with New Approach for Faster Programming (Save Time and Effort) (2016)

JavaScript: The Ultimate Crash Course Learning JavaScript within a Day with New Approach for Faster Programming (Save Time and Effort) (2016)

Chapter 3: JavaScript Loops

Loops in JavaScript’s enable a programmer to quickly and easily do something repeatedly. A loop is basically a computerized version of having to do something several times and another thing several more times. If you want to take eight steps to the east, this can be expressed as below in JavaScript:

var step;

for (step = 0; step < 8; step++) {

// Runs 8 times, with values of step 0 through 7.

console.log('Walking east one step');

}

You will learn about several kinds of loops in this programming language, but one thing for sure is that they all do the same thing, which is repeating the same action a number of times. The number of times can be zero. What the different types of loop mechanisms offer are different ways to determine the start point and the end points of the loop. There are various situations that will be more easily served by one type of loop compared to the others.

JavaScript provides a variety statements that will be used for loops/. These are:

1. For statement:

This statement will repeat until a specified condition evaluates to a false. Here is an -example statement:

for ([initialExpression]; [condition]; [incrementExpression])

statement

The results of a for loop execution are:

· The initializing expression, if any, will be executed.

· The condition expression will be evaluated. If the value of condition is true, the loop statement will execute it. If the value of condition is false, the for loop will terminate it. If the condition expression is totally omitted, the condition will then be assumed to be true.

· The statement executes. If you want to execute multiple statements, use a block statement ({ ... }) in order to group those statements.

· The update expression, which is incrementExpression, will execute if it is present then the control returns to step 2.

2. The do…while statement

This kind of statement will repeat until a specified condition evaluates to false. This is how it looks:

do

statement

while (condition);

your statements will be executed once before the condition is checked. If you want to execute more than one statements, you use a block statement ({ ... }) so as to group those statements. If the conditions turns out to be true, the statement will execute again. The condition should be checked after every execution. If you find it false, the execution is stopped and total control is now passed on to the statement that follows do…while. Here is an example:

do {

i += 1;

console.log(i);

} while (i < 5);

3. The while statement

This statement will execute its statements as long as a specified condition evaluates to true. This is how a while statement will look like:

while (condition)

statement

If the condition evaluates to false, the statement in that loop stops executing and the control now is passed to the statement that follows the loop.

You have to test the condition before the statement in the loop is executed. If the results are true, the statement is executed and the condition is tested once more. This is done until the condition returns false.

In order to execute multiple statements, use a block statement ({ ... })so as to group those statements. Example:

n = 0;

x = 0;

while (n < 3) {

n++;

x += n;

}

4. The label statement

This statement will provide a statement with an identifier that will let you refer to it elsewhere in your program. You can use the label statement in order to identify a loop, then use the break or the continue statements in order to indicate whether a program will interrupt the loop or it will continue its execution. This so how the label statement looks like:

label :

statement

Where the value of the label can be any JavaScript identifier that is not entirely a reserved word and the statement that you identify with the label statement can be any statement. Here is an example of a label markLoop identifying a while loop:

markLoop:

while (theMark == true) {

doSomething();

}

5. Break statement

The break statement is used to terminate a loop, switch or in conjunction with a label statement. When it is used without the label, it will terminate the innermost enclosing while, do..while, for, or switch immediately, then transfer the control to the statement that follows. When break is used with label on the other hand, it will terminate the specified labeled statement. This is how the break statement looks like:

break;

break label;

Where the first form of the syntax terminates the innermost enclosing loop or switch, the second form of the syntax terminates the specified enclosing label statement. Example:

for (i = 0; i < a.length; i++) {

if (a[i] == theValue) {

break;

}

}

6. Continue statement

This is the statement that will be used to restart a while, do..while, for or label statements. When the statement is used without a label, it will terminate the current iteration of the innermost enclosing while, do-while, or for statement and continue executing the loop with the next iteration. This contrasts the working of the break statement in that continue does not terminate the execution of the loop entirely. When used in a while loop, it jumps back to the condition and in a for loop, it jumps to the increment-expression. This is how its syntax looks like:

continue;

continue label;

Here is an example of a while loop with a continue statement that executes when the value of i is three. In the example, n takes on the values one, three, seven, and twelve:

i = 0;

n = 0;

while (i < 5) {

i++;

if (i == 3) {

continue;

}

n += i;

}

7. for...in statement

This statement iterates a specific variable over all the enumerable properties of an object. Its syntax is as below:

for (variable in object) {

statements

}

8. for...of statement

This is the statement that will create a loop that will Iterate over objects that can be iterated for instance Array, Map, Set, arguments object among many. It will invoke a custom iteration hook with statements that are to be executed for the value of each distinct property. Its syntax will look like:

for (variable of object) {

statement

}

Chapter 4: JavaScript Functions and Scope

Functions in JavaScript contain blocks of code which needs to be executed repeatedly. Functions here can take zero or more arguments, and they can return a value if they opt to. There is more than one way in which you can create functions in JavaScript:

- Function declaration: function foo() { /* do something */ }

- A named function expression: var foo = function() { /* do something */ }

Here are examples of different types of functions:

i) A simple function will be illustrated as:

var greet = function(person, greeting) {

var text = greeting + ', ' + person;

console.log(text);

};

greet('Rebecca', 'Hello');

ii) A function that returns a value will be illustrated as:

var greet = function(person, greeting) {

var text = greeting + ', ' + person;

return text;

};

console.log(greet('Richard','hello'));

iii) A function that returns another function will be illustrated as:

var greet = function(person, greeting) {

var text = greeting + ', ' + person;

return function() { console.log(text); };

};

var greeting = greet('Richard', 'Hello');

greeting();

The Self-Executing Anonymous Functions

This is a common pattern in JavaScript today. The pattern creates a function expression, then immediately executes the function. This is a pattern that will be very useful if you do not want to create a mess in the global namespace with your code. Note that all the variables that will be declared inside of the function will be visible on the outside. This is how the self-executing anonymous function will look like:

(function(){

var foo = 'Hello world';

})();

console.log(foo); // undefined!

JavaScript functions as arguments

Functions are very important in JavaScript; they are treated as first-class citizens and this means that they can be assigned to variables with ease or they can be passed over to the other functions as arguments. The syntax for passing an anonymous function as an argument will be:

var myFn = function(fn) {

var result = fn();

console.log(result);

};

myFn(function() { return 'hello world'; }); // logs 'hello world'

while the syntax for passing a named function as an argument will be:

var myFn = function(fn) {

var result = fn();

console.log(result);

};

var myOtherFn = function() {

return 'hello world';

};

myFn(myOtherFn); // logs 'hello world'

Testing

There is a way one can test the type of variable in JavaScript. This is shown by use of typeof operator in order to determine the type of a specific value. Below is an illustration of how one can test the type of various variables in programming:

var myFunction = function() {

console.log('hello');

};

var myObject = {

foo : 'bar'

};

var myArray = [ 'a', 'b', 'c' ];

var myString = 'hello';

var myNumber = 3;

typeof myFunction; // takes back 'function'

typeof myObject; // takes back 'object'

typeof myArray; // takes back 'object' -- careful!

typeof myString; // takes back 'string';

typeof myNumber; // takes back 'number'

typeof null; // takes back 'object' -- careful!

if (myArray.push && myArray.slice && myArray.join) {

// probably an array

// (this is called "duck typing")

}

if (Object.prototype.toString.call(myArray) === '[object Array]') {

// Definitely an array!

// This is widely considered as the most robust way

// to determine if a specific value is an Array.

Scope

Scope is basically a variable that is available in a certain code at a given time. If you are unable to understand scope, you will have constant issues with debugging, therefore this is very important. When you declare a variable inside a function using the var keyword, it will only be available to the code inside of that function and the code outside the function will not be able to access the variable. Again, functions that have been defined inside that function will be able to access the declared variable.

Those variables that will be declared inside a function without the var keyword are not local to the function as this means that JavaScript will go back the scope chain up to the window scope in order to find the point where the variable was defined at first. If there was no declaration at the beginning, the variable will then be declared in the global scope, and this can have great expected consequences.

The example below shows functions that have access to variables defined in the same scope:

var foo = 'hello';

var sayHello = function() {

console.log(foo);

};

sayHello(); // logs 'hello'

console.log(foo); // also logs 'hello'

This example shows that a code outside the scope in which a variable was defined does not have access to the variable

var sayHello = function() {

var foo = 'hello';

console.log(foo);

};

sayHello(); // logs 'hello'

console.log(foo); // doesn't log anything

Chapter 5: JavaScript Features

JavaScript is a very powerful programming language. It is quite popular as a client scripting language for different web browsers. It can be used in any web application in order to implement simple but very important features, roller of images. It has been used for many years now to add beautiful effects to web pages because of its powerful features, and this is something that makes it one of the best programming languages in the entire world today. Here are some of the best features that should prompt you to learn this great programming language:

JavaScript’s browser support

With JavaScript, one does not need to install flash plugin in their browser, like it is required when one wants to access any flash content. This is because all browsers have fully accepted JavaScript as their main scripting language, therefore they provide an integrated support for it. What a programmer would have to do is just to handle some of the tasks that depend on DOM of different browsers properly and you will be free to use JavaScript on your browser.

JavaScript as a functional programming language

Programmers using JavaScript are at liberty to code in a functional programming style, which is easy and more exciting than any other style. This is because of a number of reasons. A function in JavaScript can be assigned to variables, just the same way as any other type of data. A function can also accept another function as its parameter. It can also return a function. You can also have functions that do not have any names as well. This is the ability that many programmers would love to enjoy as they work.

JavaScript can be used on both the client and on the server side

JavaScript has access to the document model object of any browser therefore one can easily change the structure of web pages at runtime. This is what gives users of the programming language more control over their browsers. You can use the language to add different effects to webpages. The programming language can also be used on the server side as well, for instance it is used in Alfresco to create web scripts. This is what makes it very easy for a programmer to add custom tasks to Alfresco.

Its ability to detect the user's browser and OS

This is something that will help a programmer to be able to perform operations that are dependent on the platform when it is required.

The ability to detect the user's browser and OS allows your script to perform platform-dependent operations, if necessary.

JavaScript’s support for objects

JavaScript is a programing language that is oriented by objects but it handles objects and inheritance in a much different way when compared to how other programming languages that are object oriented do. What it does is that it offers immense support to object oriented concepts but then it remains simple to learn and use. That is why this programming language can be used to execute both the simple tasks and the complex tasks. This is also what has enables it to stay top in the list as one of the most preferred programming languages in the industry today. It is now the best language to learn for people who are interested in computer programming due to its support for object oriented concepts and function concepts. It is also easy to use and you only need a browser and a text editor to enjoy what it has to offer.

Conclusion

Many people believe that one has to actually go back to school in order to learn a programming language and other computer skills, but this is not true at all. The internet has brought a lot of possibilities in our lives and so much information is out there. This eBook can get you started in JavaScript without necessarily attending classes, and you can learn so much more with time to program like an expert.

Other people believe that programming languages are meant for certain kinds of people, which is also a myth. JavaScript is a programming language that can be learned by any kind of person, for any reason at all. You do not have to be a mathematic genius or a science guru to be able to program like an expert. This is something that anyone can do with so much ease. Like you have already seen, it is a very easy programming language to learn, which opens opportunities for all kinds of people.

An effective way to learn programming language is to learn the basics, then practice as much as you can. Practice is what makes one a pro and coding gets better with a lot of practice. You have to dedicate a considerable amount of time to it as well, for the skills to be well mastered. Check out what other people are doing and try new ways of programming and see how much you will have achieved in a short period of time.