JavaScript 101: Ultimate JavaScript Guide

Introduction to JavaScript

JavaScript is an object-oriented programming and scripting language that is used to provide dynamic and interactive content on webpage. It can work in all modern browsers including Internet explorer, Google Chrome, Firefox and Opera.

JavaScript statements are separated using semicolons.

Comments are used to prevent the execution of statements and are ignored by the compiler during execution. the follow the following syntax:

// For single line comment

/* For block of lines comment
...
...
*/

JavaScript data types

Data types specify the kind of data that can be stored and manipulated within a program. there are 6 basic data types in JavaScript:

• String - It is used to represent textual data and is created using single or double quotes surrounding one or more characters as shown:

var a = 'Hi there!';  
var b = "Hi there!";
var c = "Let's have a cup of coffee."; 
var d = 'He said "Hello" and left.';  
var e = 'We\'ll never give up.';     

• Number - It is used to represent positive or negative numbers with or without decimal place, or numbers written using exponential notation:

var a = 25;         
var b = 80.5;       
var c = 4.25e+6;    
var d = 4.25e-6;   

• Boolean - It can hold only two values: true or false. It is typically used to store values like yes (true) or no (false), on (true) or off (false), etc. The Boolean values also come as a result of comparisons in a program.

var isReading = true;   
var isSleeping = false;

var a = 2, b = 5, c = 10;
alert(b > a) // Output: true
alert(b > c) // Output: false

• Undefined - It can only have the special value undefined. If a variable has been declared, but has not been assigned a value, it has the value of undefined.

var a;
var b = "Hello World!"

alert(a) // Output: undefined
alert(b) // Output: Hello World!

• Null - It can only have the special value null. A null value means that there is no value. It is not equivalent to an empty string ("") or 0, it is simply nothing. A variable can be explicitly emptied of its current contents by assigning it the null value.

var a = null;
alert(a); // Output: null

var b = "Hello World!"
alert(b); // Output: Hello World!

b = null;
alert(b) // Output: null

JavaScript variables

A variable is used to store information in a computer's memory. Its value can change all throughout a script.
Variables are declared using one of three keywords: let, const, var.
let is used for declaration of block-level variables. The declared variable is available from the block it is enclosed in.

let a;
let name = 'Mandy';

const is used for declaration variables whose values are never intended to change. The variable is available from the block it is declared in.

const Pi = 3.14;

var is the most commonly used and it does not have the restrictions that the other two keywords have since it was traditionally the only way to declare a variable in JavaScript. A variable declared with the var keyword is available from the function it is declared in.

var a;
var name = 'Mandy';

Some rules to be followed when naming variables are:

• Ensuring that the variable name is descriptive to make it easy to understand what the variable refers to.

• Ensuring the variable name is of appropriate length for it to be descriptive enough.

• Do not use spaces in variable names.

• Do not use special symbols in variable names, the only exception being the underscore (_).

• Ensuring that the first letter of the variable name is either a letter or an underscore.

Variables are printed by including the variable name in a document.write() command. When printing the value of a variable, the variable name is NOT enclosed in double quotes. For example:

var myNumber = 12;
document.write(myNumber);

The output will be:

12

Variables can also be printed together with regular texts:

var myNumber = 12;
document.write("My favorite number is " + myNumber);

The output will be:

My favorite number is 12

Operators

The numerical operators which can be used are +, -, *, / and % which is the remainder operator(modulo). Values are assigned using =, and there are also compound assignment statements such as += and -=.

x += 5;
x = x + 5;

The + operator also does string concatenation:

'Hello' + ' Mandy'; // "Hello Mandy"

When a string is added to a number (or other value) everything is converted into a string first, which might be confusing:

'3' + 4 + 5;  // "345"
 3 + 4 + '5'; // "75"

Comparisons can be made using <, >, <= and >= and they work for both strings and numbers. The double equals operator performs type coercion given different types. To avoid type coercion, the tripe-equals operator is used:

123 == '123'; // true
1 == true; // true

123 === '123'; // false
1 === true;    // false

Control Structures

For...loop - It repeats the block of code specified number of times and has the following syntax:

for(start point; condition; step) {
//code to execute
}

While...loop - It repeats the block of code until condition is true and has the following syntax:

while(condition) {
//code to execute
step
}

Do...while loop - It repeats the block of code until a condition is true, but first executes the code and then checks the condition. It has the following syntax:

do {
//code to execute
step:
} while (condition);

For..in loop - It iterates through the properties of an object. the code is executed as many ties as many properties are in the object. It has the following syntax:

for (let property in object) {
//code to execute
}

For...of loop - It iterates through the values of the iterable object and has the following syntax:

for (let value of iterable) {
//code to execute
}