JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

Data Types
JavaScript Data Types
Data types in JavaScript referes to the types of the values that we are storing or working with. One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the type of values that can be represented and manipulated in a programming language.
JavaScript data types can be categorized as primitive and non-primitive (object). JavaScript (ES6 and higher) allows you to work with seven primitive data types
Strings of text e.g. "This text string" etc
Numbers, eg. 123, 120.50 etc
Boolean e.g. true or false
null
undefined
BigInt
Symbol
BigInt and Symbol are introduced in ES6. In ES5, there were only five primitive data types.
In addition to these primitive data types, JavaScript supports a composite data type known as object. We will cover objects in detail in a separate chapter.
The Object data type contains the 3 sub-data types
Object
Array
Date
Why are data types important?
In any programming language, data types are important for operation manipulation.
For example, the below code generates the “1010” output.
let sum = "10" + 10;
Here, the JavaScript engine converts the second operand to a string and combines it using the '+' operator rather than adding them.
So, you need to ensure that the type of operands is correct.
Now, let's learn about each data type with examples.
JavaScript String
In JavaScript, the string is a sequence of characters and can be created using 3 different ways given below −
Using the single quote
Using the double quote
Using the backticks
Example
In the example below, we have created strings using single quotes, double quotes, and backticks. In the output, it prints the same result for all 3 strings.
<html>
<head>
   <title> JavaScript string </title>
</head>
<body>
   <script>
      let str1 = "Hello World!"; // Using double quotes
      let str2 = 'Hello World!'; // Using single quotes
      let str3 = `Hello World!`; // Using backticks
      document.write(str1 + "<br>");
      document.write(str2 + "<br>");
      document.write(str3 + "<br>");
   </script>
</body>
</html>
JavaScript Number
A JavaScript number is always stored as a floating-point value (decimal number).
JavaScript does not make a distinction between integer values and floating-point values.
JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.
Example
In the example below, we demonstrate JavaScript numbers with and without decimal points.
<html>
<head>
   <title> JavaScript number </title>
</head>
<body>
   <script>
      let num1 = 10; // Integer
      let num2 = 10.22; // Floating point number
      document.write("The value of num1 is " + num1 + "<br/>");
      document.write("The value of num2 is " + num2);
   </script>
</body>
</html>
JavaScript Boolean
In JavaScript, the Boolean data type has only two values: true or false.
<html>
<head>
   <title> JavaScript Boolean </title>
</head>
<body>
   <script>
      let bool1 = true;
      let bool2 = false;
      document.write("The value of the bool1 is " + bool1 + "<br/>");
      document.write("The value of the bool2 is " + bool2 + "<br/>");
   </script>
</body>
</html>
JavaScript Undefined
When you declare a variable but don't initialize it, it contains an undefined value. However, you can manually assign an undefined value to the variable also.
<html>
<head>
   <title> JavaScript Undefined </title>
</head>
<body>
   <script>
      let houseNo; // Contains undefined value
      let apartment = "Ajay";
      apartment = undefined; // Assigning the undefined value
      document.write("The value of the house No is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>
JavaScript Null
When any variable's value is unknown, you can use the null. It is good practice to use the null for the empty or unknown value rather than the undefined one.
<html>
<head>
   <title> JavaScript null </title>
</head>
<body>
   <script>
      let houseNo = null; // Unknown house number
      let apartment = "B-2";
      appartment = null; // Updating the value to null
      document.write("The value of the houseNo is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>
JavaScript Bigint
JavaScript stores only 64-bit long floating point numbers. If you want to store a very large number, you should use the Bigint. You can create Bigint by appending n to the end of the number.
<html>
<head>
   <title> JavaScript Bigint </title>
</head>
<body>
   <script>
      let largeNum = 1245646564515635412348923448234842842343546576876789n;
      document.write("The value of the largeNum is " + largeNum + "<br/>");
   </script>
</body>
</html>
JavaScript Symbol
The Symbol data type is introduced in the ES6 version of JavaScript. It is used to create unique primitive, and immutable values.
The Symbol() constructor can be used to create a unique symbol, and you may pass the string as a parameter of the Symbol() constructor.
Example
In the example below, we created the sym1 and sym2 symbols for the same string. After that, we compared the value of sym1 and sym2, and it gave a false output. It means both symbols are unique.
<html>
<head>
   <title> JavaScript Symbol </title>
</head>
<body>
   <script>
      let sym1 = Symbol("123");
      let sym2 = Symbol("123");
      let res = sym1 === sym2;
      document.write("Is sym1 and Sym2 are same? " + res + "<br/>");
   </script>
</body>
</html>
JavaScript Object
In JavaScript, the object data type allows us to store the collection of the data in the key-value format. There are multiple ways to define the object, which we will see in the Objects chapter.
Here, we will create an object using the object literals.
Example
In the example below, we used the '{}' (Object literals) to create an obj object. The object contains the 'animal' property with the string value, the 'legs' property with the number value, and the value of the 'color' variable is assigned to the 'hourseColor' property.
The JSON.stringify() method converts the object to strings and shows it in the output.
<html>
<head>
   <title> JavaScript Object </title>
</head>
<body>
   <script>
      let color = "Brown";
      const obj = {
         animal: "Hourse",
         legs: 4,
         hourseColor: color
      }
      document.write("The given object is: " + JSON.stringify(obj) + "<br/>");
   </script>
</body>
</html>
JavaScript Array
In JavaScript, the array is a list of elements of the different data types. You can create an array using two square brackets '[]' and insert multiple comma seprated values inside the array.
<html>
<head>
   <title> JavaScript Array </title>
</head>
<body>
   <script>
      const colors = ["Brown", "red", "pink", "Yellow", "Blue"];
      document.write("The given array is: " + colors + "<br/>");
   </script>
</body>
</html>
JavaScript Date
You can use the JavaScript Date object to manipulate the date.
Example
In the example below, we used the Date() constructor to create a date. In the output, you can see the current date and time according to your time zone.
<html>
<head>
   <title> JavaScript Date </title>
</head>
<body>
   <script>
      let date = new Date();
      document.write("The today's date and time is: " + date + "<br/>");
   </script>
</body>
</html>
Dynamic Types
JavaScript is a dynamically typed language like Python and Ruby. So, it decides the variable's data type at the runtime but not at the compile time. We can initialize or reassign the value of any data type to the JavaScript variables.
Example
In the example below, we initialized the first variable with the string value. After that, we updated its values to the number and boolean value.
<html>
<head>
   <title> JavaScript dynamic data type </title>
</head>
<body>
   <script>
      let first = "One"; // it is string
      first = 1; // now it's Number
      document.write("The value of the first variable is " + first + "<br/>");
      first = true; // now it's Boolean
      document.write("The value of the first variable is " + first + "<br/>");
   </script>
</body>
</html>
Checking Data Types Using the typeof Operator
The typeof operator allows you to check the type of the variable.
Example
In the below example, we used the typeof operator to check the data type of the various variables.
<html>
<head>
   <title> typeof operator </title>
</head>
<body>
   <script>
      let num = 30;
      let str = "Hello";
      let bool = true;
      document.write("The data type of num is: " + typeof num + "<br/>");
      document.write("The data type of str is: " + typeof str + "<br/>");
      document.write("The data type of bool is: " + typeof bool + "<br/>");
   </script>
</body>
</html>
﻿
﻿
﻿

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Data Types

JavaScript Data Types

Why are data types important?

JavaScript String

Example

JavaScript Number

Example

JavaScript Boolean

JavaScript Undefined

JavaScript Null

JavaScript Bigint

JavaScript Symbol

Example

JavaScript Object

Example

JavaScript Array

JavaScript Date

Example

Dynamic Types

Example

Checking Data Types Using the typeof Operator

Example