JavaScript 101: Ultimate JavaScript Guide

amandasuzzanne

Amanda Suzzanne

Posted on February 14, 2022

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
...
...
*/
Enter fullscreen mode Exit fullscreen mode

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.';     
Enter fullscreen mode Exit fullscreen mode
  • 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;   
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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!
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

The output will be:

12
Enter fullscreen mode Exit fullscreen mode

Variables can also be printed together with regular texts:

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

The output will be:

My favorite number is 12
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

The + operator also does string concatenation:

'Hello' + ' Mandy'; // "Hello Mandy"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

while(condition) {
//code to execute
step
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
amandasuzzanne
Amanda Suzzanne

Posted on February 14, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related