A Comprehensive Guide to Learning Modern JavaScript

Gain the Latest and greatest in Javascript with our Modern Javascript Tutorial!

We cover everything from the basics to advanced topics, all explained in simple terms.

Get up-to-date on your coding skills today!  

JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g. complex animations, clickable buttons, popup menus etc). it is used by programmers across the world to create dynamic and interactive web content.

This Tutorial designed to help you to understand every aspect of the JavaScript programming language, quickly and efficiently. Here we learn JavaScript, We concentrate on the language itself here, with the minimum of environment-specific notes. 


JavaScript is a lightweight, cross-platform, and interpreted compiled programming language which is also known as the scripting language for webpages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client side developments as well as Server side developments.

The developer console is a practical tool that recognize tracing of scripts in the production system.  Developer tools permit us to see errors, run commands, examine variables, and much more. You can also use option (Shift + CTRL + J) on Windows.

A code editor is the place where programmers spend most of their time.

There are many options, for instance:

  • Visual Studio Code
  • Sublime Text
  • Notepad++
JavaScript Fundamentals:

A basic JavaScript program is determine to print Hello world as an output. 

We will use these three ways to print ‘Hello, World!’. 

  1. console.log(‘Hello, World!’);
  2. alert(‘Hello, World!’);
  3.  document.write(‘Hello, World!’);

Variables are containers for storing data (values).

There are 3 ways to declare a JavaScript variable:

    • Using var
    • Using let
    • Using const

JavaScript variables can hold different data types: numbers, strings, objects and more:

  1. Primitives/ Value Types
  • String
  • Number
  • Boolean
  • Null
  • Undefined
  1. Reference Types
  • Object
  • Date
  • Array

There are three browser-specific functions to interact with visitors: alert, prompt, and confirm.

The alert shows a message. The prompt shows a message asking the user to input text. It returns the text or, if Cancel button or Esc is clicked, null. The confirm shows a message and waits for the user to press “OK” or “Cancel”. It returns true for OK and false for Cancel or Esc.

  1. alert(“Hello”);
  2. result = prompt(title, [default]);
  3. result = confirm(question);

Template Literals use back-ticks (` `) rather than the quotes (” “) to define a string:

  •   let text = `Hello World!`;

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Arithmetic Operator is used to performing mathematical operations such as addition, subtraction, multiplication, division, modulus, etc.

%Modulus (Remainder)

The assignment (=) operator is used to assign a value to a variable. The assignment operation evaluates to the assigned value.

OperatorExampleSame As
=x = yx = y
+=x += yx = x + y
-=x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x ** y

Logic operators are used to find the logic between variables in JavaScript.There are three logical operators in JavaScript: || (OR), && (AND), ! (NOT) operators.

&&logical and
||logical or
!logical not

A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical, string, logical, or object values.

==equal to
===equal value and equal type
!=not equal
!==not equal value or not equal type
>greater than
<less than
>=greater than or equal to
<=less than or equal to
?ternary operator

It returns the type of a variable.

typeofReturns the type of a variable
instanceofReturns true if an object is an instance of an object type

Bit operators work on 32 bits numbers.

Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.

&Bitwise AND(10==20 & 20==33) = false
|Bitwise OR(10==20 | 20==33) = false
^Bitwise XOR(10==20 ^ 20==33) = false
~Bitwise NOT(~10) = -10
<<Bitwise Left Shift(10<<2) = 40
>>Bitwise Right Shift(10>>2) = 2
>>>Bitwise Right Shift with Zero(10>>>2) = 2

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when “something” invokes it (calls it).

A JavaScript function does not perform any checking on parameter values (arguments).

The return statement ends function execution and specifies a value to be returned to the function caller.

let x = myFunction(43);  

function myFunction(a, b) {
  return a * b;            

JavaScript comments can be used to explain JavaScript code, and to make it more readable.

JavaScript comments can also be used to prevent execution, when testing alternative code.

There are two types of comments in JavaScript.

  1. Single-line Comment
  2. Multi-line Comment
Data types:
JavaScript strings are for storing and manipulating text. A JavaScript string is zero or more characters written inside quotes.
let fname= “iqra”;
let lname = “technology”;

All JavaScript numbers are stored as decimal numbers (floating point).

In JavaScript, numbers are primitive data types.

Bigint values represent numeric values which are too large to be represented by the number primitive.

let x = BigInt(“123456789012345678901234567890”);

The Javascript standard defines true and false values as a unique data type called a Javascript boolean.

The undefined property indicates that a variable has not been assigned a value, or not declared at all.

let car;    // Value is undefined, type is undefined

‘Null’ is a keyword in JavaScript that signifies ‘no value’ or nonexistence of any value.

let number  = null;


The JavaScript ES6 introduced a new primitive data type called symbol. Symbols are immutable (cannot be changed) and are unique.

JavaScript objects are written with curly braces {}.

Object properties are written as name:value pairs, separated by commas.

const person = {firstName:“iqra”, lastName:“technology”, course:“javascript”};

JavaScript array is an object that represents a collection of similar type of elements.

const array_name = [item1, item2, …];   

Objects: the basics:

The name:values pairs in JavaScript objects are called properties:

PropertyProperty Value

Access object properties in two ways:

  • person.lastName;
  • person[“lastName”];

Objects can also have methods.

Methods are actions that can be performed on objects.

Methods are stored in properties as function definitions.

In JavaScript, the this keyword refers to an object.

Which object depends on how this  is being invoked (used or called).

Array Methods:

The JavaScript method toString() converts an array to a string of (comma separated) array values.i.e.

const Courses= [“Javascript”“SQL”“HTML”“CSS”];
document.getElementById(“demo”).innerHTML = Courses.toString();



The join() method also joins all array elements into a string.

It behaves just like toString(), but in addition you can specify the separator:

const Courses= [“Javascript”“SQL”“HTML”“CSS”];
document.getElementById(“demo”).innerHTML = Courses.join(” * “);


Javascript * SQL * HTML * CSS

The pop() method removes the last element from an array:

const Courses= [“Javascript”“SQL”“HTML”“CSS”];
document.getElementById(“demo”).innerHTML = Courses.pop();



The sort() method sorts the items of an array in a specific order (ascending or descending).i.e.

const Courses= [“Javascript”“SQL”“HTML”“CSS”];




The reverse() method reverses the elements in an array.i.e.

const Courses= [“Javascript”“SQL”“HTML”“CSS”];




The push() method adds a new element to an array (at the end):i.e.

const Courses= [“Javascript”“SQL”“HTML”“CSS”];
document.getElementById(“demo”).innerHTML = Courses;



The shift() method removes the first array element and “shifts” all other elements to a lower index.i.e.

const Courses= [“Javascript”“SQL”“HTML”“CSS”];
document.getElementById(“demo”).innerHTML =Courses.shift();



The unshift() method adds a new element to an array (at the beginning), and “unshifts” older elements:


const Courses= [“Javascript”“SQL”“HTML”“CSS”];
document.getElementById(“demo”).innerHTML =Courses.unshift(“C#”);



length is a property of arrays in JavaScript that returns or sets the number of elements in a given array.


const Courses=[“Javascript”,”HTML”,”SQL”];





The forEach() method executes a provided function for each array element.i.e.

const numbers = [45, 4, 9, 16, 25];

let txt = “”;
document.getElementById(“demo”).innerHTML = txt;

function myFunction(value, index, array) {
txt += value + “<br>”;

Array elements can be deleted using the JavaScript operator delete.


const Courses= [“Javascript”“SQL”“HTML”“CSS”];

delete Courses[0];

document.getElementById(“demo”).innerHTML =
“The first Course is: ” + Courses[0];


The first Course is: undefined.

The concat() method creates a new array by merging (concatenating) existing arrays:

The concat() method does not change the existing arrays. It always returns a new array. 


const Course1= [“Javascript”, “HTML”];
const Course2= [“SQL”, “C#”];
const AllCourses= Course1.concat(Course2);

The splice() method can be used to add new items to an array:


const Courses= [“Javascript”,  “HTML”“CSS”];

const result=Courses.splice(2,0,“SQL”)  




The slice() method slices out a piece of an array into a new array.


Strings and Numbers:

Strings are used for storing text/characters. For example, “Hello World” is a string of characters.i.e.

let answer1 = “It’s alright”;
let answer2 = “He is called ‘Johnny'”;
let answer3 = ‘He is called “Johnny”‘;

String methods help you to work with strings.

  • length
  • slice()
  • replace()
  • split()


The JavaScript string search() method is used to search the regular expression in the given string. This method returns -1, if match is not found.

  • String indexOf()
  • String lastIndexOf()


Template Literals use back-ticks (“) rather than quotes(“”,’’) to define a string.

With template literals, you can use both single and double quotes inside a string.

Template literals allow multiline strings.

Template literals provide an easy way to interpolate variables and expressions into strings. This method is called string interpolation.i.e.

let firstName = “Mudassir”;
let lastName = “Shaikh”;

let text = `Welcome ${firstName}, ${lastName}!`;


Welcome Mudassir Shaikh

Number methods help you work with numbers.

The toString() Method: The toString() method returns a number as a string.i.e.

let x = 123;
(100 + 23).toString();


Class is a keyword used in object-oriented programming to define a blueprint or a template for creating objects that have similar attributes and methods. Its basic syntax involves using the keyword “class” followed by the name of the class and a colon, and then indenting the class body to define its attributes and methods.

class Animal
{ constructor(name, sound)
{ this.name = name; this.sound = sound; } makeSound()
{ console.log(`${this.name} says ${this.sound}`);
} } const cat = new Animal(‘Cat’, ‘Meow’); cat.makeSound()
Cat says Meow

Class inheritance is a mechanism in object-oriented programming that allows a new class (called a subclass or derived class) to be based on an existing class (called a superclass or base class), inheriting its attributes and methods.

lass Animal {
constructor(name, sound) {
this.name = name;
this.sound = sound;

makeSound() {
console.log(`${this.name} says ${this.sound}`);

class Cat extends Animal {
constructor(name) {
super(name, ‘Meow’);

class Dog extends Animal {
constructor(name) {
super(name, ‘Woof’);

const cat = new Cat(‘Kitty’);
Kitty says Meow


Static properties and methods are class-level variables and functions in object-oriented programming that belong to the class itself rather than to any instance of the class, and can be accessed directly using the class name without the need for object instantiation.

class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;

getArea() {
return this.width * this.height;

const rect = new Rectangle(5, 3);

 Output 15

Extending built-in classes used is the ability in object-oriented programming to add new methods or properties to existing built-in classes, such as String, Array, or Object, in order to customize their behavior to suit specific needs.
class MyString extends String
{ shout()
{ return this.toUpperCase() + ‘!’; } } const myStr = new MyString(‘hello’); console.log(myStr.shout());
console.log(myStr instanceof String);

“instanceof” is an operator in object-oriented programming used to check whether an object belongs to a specific class or a subclass, returning a boolean value of true or false accordingly..

Error handling:
Object properties configuration:
Promises, async/await:
Generators, advanced iteration:
Browser: Document, Events, Interfaces

Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.

Introduction to Events:
UI Events:
Forms, controls:
Document and resource loading:
Advance topics

List of extra topics that assume you’ve covered the first two parts of tutorial. There is no clear hierarchy here, you can read articles in the order you want.

Frames and windows:
Binary data, files:
Network requests:
Storing data in the browser:
Web components:
Regular expressions: