Blog

Type Conversions

JavaScript Type Conversions

Type Conversions in JavaScript refer to the automatic or explicit process of converting data from one data type to another in JavaScript. These conversions are essential for JavaScript to perform operations and comparisons effectively. JavaScript variables can contain the values of any data type as it is a weakly typed language.

There are two types of type conversion in JavaScript −

Implicit type conversion
Explicit type conversion

The implicit type conversion is also known as coercion.

Implicit Type Conversion

When type conversion is done by JavaScript automatically, it is called implicit type conversion. For example, when we use the ‘+‘ operator with the string and number operands, JavaScript converts the number to a string and concatenates it with the string.

Here are some examples of the implicit type conversion.

Converting to String (Implicit conversion)

In this example, we used the ‘+‘ operator to implicitly convert different values to the string data type.

"100"+24;// Converts 24 to string'100'+false;// Converts false boolean value to string"100"+null;// Converts null keyword to string

Please note that to convert a value to string using “+” operator, one operand should be string.

Let’s try the example below, and check the output −

<html><head><title>Implicit conversion to string </title></head><body><script>
  document.write("100"+24+"&lt;br/&gt;");
  document.write('100'+false+"&lt;br/&gt;");
  document.write("100"+null+"&lt;br/&gt;");
  document.write("100"+undefined+"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Converting to Number (Implicit conversion)



When you use the string values containing the digits with the arithmetic operators except for the '+' operator, it converts operands to numbers automatically and performs the arithmetic operation, which you can see in the example below.



Boolean values are also gets converted to a number.



'100'/50;// Converts '100' to 100'100'-'50';// Converts '100' and '50' to 100 and 50'100'*true;// Converts true to 1'100'-false;// Converts false to 0'tp'/50// converts 'tp' to NaN



Try the example below and check the output −



<html><head><title> Implicit conversion to Number </title></head><body><script>
	document.write(('100'/50)+"&lt;br&gt;");
    document.write(('100'-'50')+"&lt;br&gt;");
    document.write(('100'*true)+"&lt;br&gt;");
    document.write(('100'-false)+"&lt;br&gt;");
    document.write(('tp'/50)+"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Converting to Boolean (Implicit conversion)



When you use the Nullish (!!) operator with any variable, it implicitly converts its value to the boolean value.



num =!!0;// !0 = true, !!0 = false
num =!!1;// !1 = false, !!1 = true
str =!!"";// !"" = true, !!"" = false
str =!!"Hello";// !"Hello" = false, !!"Hello" = true



Null to Number (Implicit conversion)



In JavaScript, the null represents the empty. So, null automatically gets converted to 0 when we use it as an operand of the arithmetic operator.



let num =100+null;// Converts null to 0
num =100*null;// Converts null to 0



Undefined with Number and Boolean (Implicit conversion)



Using the undefined with the 'number' or 'boolean' value always gives the NaN in the output. Here, NaN means not a number.



<html><head><title> Using undefinedwith a number and boolean value </title></head><body><script>let num =100+undefined;// Prints NaN
  document.write("The value of the num is: "+ num +"&lt;br&gt;");
  num =false*undefined;// Prints NaN
  document.write("The value of the num is: "+ num +"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Explicit Type Conversion



In many cases, programmers are required to convert the data type of the variable manually. It is called the explicit type conversion.



In JavaScript, you can use the constructor functions or built-in functions to convert the type of the variable.



Converting to String (Explicit conversion)



You can use the String() constructor to convert the numbers, boolean, or other data types into the string.



String(100);// number to stringString(null);// null to stringString(true);// boolean to string



Example



You can use the String() constructor function to convert a value to the string.You can also use typeof operator to check the type of the resultant value.



<html><head><title> Converting to string explicitly </title></head><body><script>
    document.write(typeofString(100)+"&lt;br/&gt;");
    document.write(typeofString(null)+"&lt;br/&gt;");
    document.write(typeofString(true)+"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


We can also use the toString() method of Number object to convert number to string.



const num =100;
num.toString()// converts 100 to '100'



Converting to Number (Explicit conversion)



You can use the Numer() constructor to convert a string into a number. We can also use unary plus (+) operator to convert a string to number.



Number('100');// Converts '100' to 100Number(false);// Converts false to 0Number(null);// Converts null to 0
num =+"200";// Using the unary operator



However, you can also use the below methods and variables to convert the string into numbers.



Sr.No. Method / Operator Description
1 parseFloat() To extract the floating point number from the string.
2 parseInt() To extract the integer from the string.
3 + It is an unary operator.



Example



You can use the Number() constructor function or unary (+) operator to convert a string, boolean, or any other value to a number.



The Number() function also converts the exponential notation of a number to a decimal number.



<html><head><title> Converting to string explicitly </title></head><body><script>
  document.write(Number("200")+"&lt;br/&gt;");
  document.write(Number("1000e-2")+"&lt;br/&gt;");
  document.write(Number(false)+"&lt;br/&gt;");
  document.write(Number(null)+"&lt;br/&gt;");
  document.write(Number(undefined)+"&lt;br/&gt;");
  document.write(+"200"+"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Converting to Boolean (Explicit conversion)



You can use the Boolean() constructor to convert the other data types into Boolean.



Boolean(100);// Converts number to boolean (true)Boolean(0);// 0 is falsy value (false)Boolean("");// Empty string is falsy value (false)Boolean("Hi");// Converts string to boolean (true)Boolean(null);// null is falsy value (false)



Example



You can use the Boolean() constructor to convert values to the Boolean. All false values like 0, empty string, null, undefined, etc., get converted to false and other values are converted to true.



<html><head><title> Converting to string explicitly </title></head><body><script>
  document.write(Boolean(100)+"&lt;br/&gt;");
  document.write(Boolean(0)+"&lt;br/&gt;");
  document.write(Boolean("")+"&lt;br/&gt;");
  document.write(Boolean("Hi")+"&lt;br/&gt;");
  document.write(Boolean(null)+"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Converting Date to String/Number



You can use the Date object's Number() constructor or getTime() method to convert the date string into the number. The numeric date represents the total number of milliseconds since 1st January 1970.



Follow the syntax below to convert the date into a number.



Number(date);OR
date.getTime();



You can use the String() constructor or the toString() method to convert the date into a string.



Follow the syntax below to convert the date into the string.



String(date);OR
date.toString();



Let's try to demonstrate this with the help of a program.



<html><head><title> Coverting date to string / number </title></head><body><script>let date =newDate();let numberDate = date.getTime();
  document.write("The Numeric date is: "+ numberDate +"&lt;br/&gt;");let dateString = date.toString();
  document.write("The string date is: "+ dateString +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Conversion Table in JavaScript



In the below table, we have given the original values and their resultant value when we convert the original value to string, number, and boolean.



Value String conversion Number conversion Boolean conversion
0 "0" 0 false
1 "1" 1 true
"1" "1" 1 true
"0" "0" 0 true
"" "" 0 false
"Hello" "Hello" NaN true
true "true" 1 true
false "false" 0 false
null "null" 0 false
undefined "undefined" NaN false
[50] "50" 50 true
[50, 100] "[50, 100]" NaN true

Sr.No.	Method / Operator	Description
1	parseFloat()	To extract the floating point number from the string.
2	parseInt()	To extract the integer from the string.
3	+	It is an unary operator.

Value	String conversion	Number conversion	Boolean conversion
0	"0"	0	false
1	"1"	1	true
"1"	"1"	1	true
"0"	"0"	0	true
""	""	0	false
"Hello"	"Hello"	NaN	true
true	"true"	1	true
false	"false"	0	false
null	"null"	0	false
undefined	"undefined"	NaN	false
[50]	"50"	50	true
[50, 100]	"[50, 100]"	NaN	true

August 21, 2025

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 quoteslet str2 ='Hello World!';// Using single quoteslet str3 =Hello World!;// Using backticks
  document.write(str1 +"&lt;br&gt;");
  document.write(str2 +"&lt;br&gt;");
  document.write(str3 +"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;// Integerlet num2 =10.22;// Floating point number
  document.write("The value of num1 is "+ num1 +"&lt;br/&gt;");
  document.write("The value of num2 is "+ num2);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example (Exponential notation of numbers)



JavaScript also support exponential notaion of numbers. We have explained this in the below example code −



<html><head><title> JavaScript number Exponential notation </title></head><body><script>let num1 =98e4;// 980000let num2 =98e-4;// 0.0098
  document.write("The value of num1 is: "+ num1 +"&lt;br/&gt;");
  document.write("The value of num2 is: "+ num2);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 +"&lt;br/&gt;");
  document.write("The value of the bool2 is "+ bool2 +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 valuelet apartment ="Ajay";
  apartment =undefined;// Assigning the undefined value
  document.write("The value of the house No is: "+ houseNo +"&lt;br/&gt;");
  document.write("The value of the apartment is: "+ apartment +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 numberlet apartment ="B-2";
  appartment =null;// Updating the value to null
  document.write("The value of the houseNo is: "+ houseNo +"&lt;br/&gt;");
  document.write("The value of the apartment is: "+ apartment +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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)+"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 =newDate();
  document.write("The today's date and time is: "+ date +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 +"&lt;br/&gt;");
  first =true;// now it's Boolean
  document.write("The value of the first variable is "+ first +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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 +"&lt;br/&gt;");
  document.write("The data type of str is: "+typeof str +"&lt;br/&gt;");
  document.write("The data type of bool is: "+typeof bool +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 21, 2025

Constants

JavaScript constants are the variables whose values remain unchanged throughout the execution of the program. You can declare constants using the const keyword.

JavaScript const Keyword

The const keyword is introduced in the ES6 version of JavaScript with the let keyword. The const keyword is used to define the variables having constant reference.

A variable defined with const can’t be re-declared, reassigned. The const declaration have block as well as function scope.

Declaring JavaScript Constants

You always need to assign a value at the time of declaration if the variable is declared using the const keyword.

const x =10;// Correct Way

In any case, you can’t declare the variables with the const keyword without initialization.

const y;// Incorrect way
y =20;

Can’t be Reassigned

You can’t update the value of the variables declared with the const keyword.

const y =20; 
y =40;// This is not possible

Block Scope

A JavaScript variable declared with const keyword has block-scope. This means same variable is treated as different outside the block.

In the below example, the x declared within block is different from x declared outside the block. So we can re-declare the same variable outside the block

{const x ="john";}const x ="Doe"

But we can’t re-declare the const variable within the same block.

{const x ="john";const x ="Doe"// incorrect}

Constant Arrays and Objects in JavaScript

We can declare the arrays and objects using the const keyword, but there is a little twist in the array and object declaration.

The variable with the const keyword keeps the constant reference but not the constant value. So, you can update the same array or object declared with the const keyword, but you can’t reassign the reference of the new array or object to the constant variable.

Example (Constant Arrays)

In the example below, we have defined the array named ‘arr’ using the const keyword. After that, we update the array element at the 0th index and insert the ‘fence’ string at the end of the array.

In the output, you can observe that it prints the updated array.

<html><head><title> Constant Arrays </title></head><body><script>// Defining the constant arrayconst arr =["door","window","roof","wall"];// Updating arr[0]
  arr[0]="gate";// Inserting an element to the array
  arr.push("fence");//arr = ["table", "chair"] // re-assigning array will cause error.// Printing the array
  document.write(arr);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


When you execute the above code, it will produce the following result −



gate,window,roof,wall,fence




Example (Constant Objects)



In the below example, we created the 'obj' object with the const keyword. Next, we update the 'animal' property of the object and insert the 'legs' property in the object. In the output, the code prints the updated object.



<html><head><title> Constant Objects </title></head><body><script>// Defining the constant objectconst obj ={
     animal:"Lion",
     color:"Yellow",};// Changing animal name
  obj.animal ="Tiger";// Inserting legs property
  obj.legs =4;// Printing the object
  document.write(JSON.stringify(obj));// obj = { name: "cow" } // This is not possible&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


It will produce the following result −



{"animal":"Tiger","color":"Yellow","legs":4}





So, we can't change the reference to the variables (arrays and objects) declared with the const keyword but update the elements and properties.




No Const Hoisting



Variables defined with const keyword are not hoisted at the top of the code.



In the example below, the const variable x is accessed before it defined. It will cause an error. We can catch the error using try-catch statement.



<html>
<body>
   <script>
  document.write(x);	  const x = 10;	  
   </script>
</body>
</html>




Here are some other properties of the variables declared with the const keyword.




Block scope.



It can't be re-declared in the same scope.



Variables declared with the const keyword can't be hoisted at the top of the code.



Constant variables value is a primitive value.




Difference between var, let and const



We have given the comparison table between the variables declared with the var, let, and const keywords.



Comparison basis var let const
Scope Function Block Block
Hoisted Yes No No
Reassign Yes Yes No
Re-declare Yes No No
Bind This Yes No No



Which should you use among var, let, and const?




For the block scope, you should use the let keyword.



If you need to assign the constant reference to any value, use the const keyword.



When you require to define the variable inside any particular block, like a loop, 'if statement', etc. and need to access outside the block but inside the function, you may use the var keyword.



However, you can use any keyword to define global variables.



Re-declaring variables is not a good practice. So, you should avoid it, but if necessary, you may use the var keyword.

Comparison basis	var	let	const
Scope	Function	Block	Block
Hoisted	Yes	No	No
Reassign	Yes	Yes	No
Re-declare	Yes	No	No
Bind This	Yes	No	No

August 21, 2025

let Statement

What is JavaScript let statement?

The JavaScript let statement is used to declare a variable. With the let statement, we can declare a variable that is block-scoped. This mean a variable declared with let is only accessible within the block of code in which it is defined.

The let keyword was introduced in the ES6 (2015) version of JavaScript. It is an alternative to the var keyword.

The main reason behind introducing the let keyword is to improve the scoping behaviors of variables and the safety of the code.

Variable Declaration with let statement

Following is the syntax to declare a variable with let statement −

let var_name = value

Let’s have a look at some examples for variable declaration with let.

let name ="John";let age =35;let x =true;

Using let statement we can declare a variable of any datatypes, e.g., numeric, string, boolean, etc.

JavaScript Block Scope vs. Function Scope

The scope of the variable declared with the let keyword is a block-scope. It means if you define the variable with the let keyword in the specific block, you can access the variable inside that particular block only, and if you try to access the variable outside the block, it raises an error like ‘variable is not defined’.

{let x ="John";}//here x can't be accessed

The var keyword has a function scope, meaning if you define the variable using the var keyword in any function block, you can access it throughout the function.

functionfoo(){if(true){let x =5var y =10}// here x can't be accessed while y is accessible}

Sometimes, we require to define the variable with the same name in different blocks of one function. Conflicts may occur with the variable value if they use the var keyword.

Example

In the example below, we have defined the variable x using the let keyword and variable y using the var keyword. Also, we have assigned 10 and 20 values to both variables, respectively.

We defined the test() function, redeclared the x and y variables inside it, and initialized them with 50 and 100 values, respectively. We print variable values inside the function, and it prints the 50 and 100 as it gives first preference to the local variables over global variables.

<html><head><title> Variable declaration withlet keyword </title></head><body><script>let x =10;var y =20;functiontest(){let x =50;var y =100;
     document.write("x = "+ x +", y = "+ y +"&lt;br/&gt;");}test();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example



In the example below, we initialized the bool variable with a 'true' value. After that, we declared the variables x and y using the let and var keywords in the 'if' block.



We print the value of the x and y variable inside the 'if' block. We can't access the 'x' variable outside the 'if' block as it has blocked scope, but we can access variable y outside the 'if' block and inside the function block as it has function scope.



<html><head><title> Variable declaration withlet keyword </title></head><body><script>functiontest(){let bool =true;if(bool){let x =30;var y =40;
	    document.write("x = "+ x +", y = "+ y +"&lt;br/&gt;");}// x can't be accessible here
		 document.write("y = "+ y +"<br/>");}test();</script></body></html>



In this way, the let keyword is used to improve the scoping behaviors of the code.



Redeclaring Variables in JavaScript



You can't redeclare the variables declared with the let keyword in the same block. However, you can declare the variables with the same name into the different blocks with the same function.



Example



In the example below, you can observe that variables declared with the let keyword cant be redeclared in the same block, but variables declared with the var keyword can be redeclared in the same block.



The code prints the value of the newly declared variable in the output.



<html><head><title> Variable redeclaring </title></head><body><script>functiontest(){if(1){let m =70;// let m = 80; // redeclaration with let keyword is not	possiblevar n =80;var n =90;// redeclaration with var keyword is possible
			document.write("m = "+ m +", n = "+ n);}}test();</script></body></html>



Variable Hoisting



The hoisting behaviors of JavaScript move the declaration of the variables at the top of the code. The let keyword doesn't support hoisting, but the var keyword supports the hosting.



Example



In the example below, you can see that we can initialize and print the value of the variable n before its declaration as it is declared using the var keyword.



<html><head><title> Variable hoisting </title></head><body><script>functiontest(){// Hoisiting is not supported by let keyword// m = 100;// document.write("m = " + m + "<br/>");// let m;
     n =50;
     document.write("n = "+ n +"&lt;br/&gt;");var n;}test();&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


You can uncomment the code using the let keyword and check the error in the web console, as it doesn't support hoisting.

August 21, 2025

Variables

JavaScript Variables

JavaScript variables are used to store data that can be changed later on. These variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container.

Before you use a variable in a JavaScript program, you must declare it. In JavaScript, you can declare the variables in 4 ways −

Without using any keywords.
Using the ‘var‘ keyword.
Using the ‘let‘ keyword.
Using the ‘const‘ keyword.

The let and const keywords were introduced to JavaScript in 2015 (ES6). Prior to ES6, only var keyword was used to declare the variable in JavaScript. In this section, we will discuss ‘var’ keyword. We will cover the ‘let’ and ‘const’ keywords in subsequent chapters.

Variable Declaration in JavaScript

You can follow the syntax below to declare the variables without using any keywords.

<script>
   Money =10;
   Name ="tutorialspoint";</script>

Furthermore, you can use the var keyword to declare the variables as shown below.

<script>var money;var name;</script>

You can also declare multiple variables with the same var keyword as follows −

<script>var money, name;</script>

Variable Initialization using the Assignment Operator

Storing a value in a variable is called variable initialization. You can initialize a variable at the time of creation or at a later point in time when you need that variable.

For instance, you might create a variable named money and assign the value 2000.50 to it later. For another variable, you can assign a value at the time of initialization as follows.

<script>var name ="Ali";var money;
   money =2000.50;</script>

Note: Use the var keyword only for declaration or initialization, once for the life of any variable name in a document. You should not re-declare same variable twice.

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type. Unlike many other languages, you don’t have to tell JavaScript during variable declaration what type of value the variable will hold.

The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically.

JavaScript Data Types

In JavaScript, the variable can hold the value of the dynamic data type. For example, you can store the value of number, string, boolean, object, etc. data type values in JavaScript variables.

<script>var num =765;// Numbervar str ="Welcome";// Stringvar bool =false;// Boolean</script>

You will learn data types in detail in JavaScript Data Types chapter.

JavaScript Variable Names (Identifiers)

In JavaScript, a unique character sequence is used to name the variables called identifiers.

Here are some rules for the naming of the identifiers in JavaScript −

Valid characters − In JavaScript, a variable name can contain digits, alphabetical characters, and special characters like underscore (_) and dollar sign ($). JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an underscore character. For example, 123test is an invalid variable name but _123test is a valid one.
Case sensitivity − Variable names are case sensitive. It means Name and name are different identifiers.
Unicode support − The identifiers can also contain the Unicode. So, developers may define variables in any language.
Reserve keywords − You should not use any of the JavaScript reserved keywords as a variable name. For example, break or boolean variable names are not valid. Here, we have given a full list of the JavaScript revered keywords.

JavaScript Dollar Sign ($) and Under Score (_)

You can use the $ and _ to define the variables in JavaScript, as the JavaScript engine considers it a valid character.

Example (Demonstrating the identifiers)

In this example, we have defined the variables using the var keyword. The first variable name starts with the underscore, and the second variable name starts with the dollar sign.

Programmers can uncomment the third variable declaration to check the error generated by JavaScript when we start any identifier with the digit.

<html><head><title> Variables in JavaScript </title></head><body><script>var _abc ="Hi!";var $abc ="Hello!";//  var 9abc = "Bye!";  // This is invalid
    document.write("_abc "+ _abc +"&lt;br&gt;");
    document.write("$abc = "+ $abc +"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


It produces the following result −



_abc Hi!
$abc = Hello!




Undefined Variable Value in JavaScript



When you don't initialize the variable after declaring, it contains the undefined value. However, you can also assign the undefined value to the variable.



Example



Let's look at the example below −



<html><body><script>var num;
  document.write("The value of num is: "+ num +"&lt;br/&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This produces the following result −



The value of num is: undefined




JavaScript Variable Scope



The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes.




Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code.



Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.




Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable. Take a look into the following example.



Example



In the example below, we have defined the variable named myVar outside the function and initialized it with the 'global' value. Also, we have defined the variable with the same identifier inside the checkscope() function and initialized it with the 'local' value.



We print the myVar variable's value inside the function. So, the local variable takes preference over the global variable and prints the 'local' in the output.



<html><head><title> JavaScript Variable Scope Example</title></head><body onload =checkscope();><script>var myVar ="global";// Declare a global variablefunctioncheckscope(){var myVar ="local";// Declare a local variable
		 document.write(myVar);}</script></body></html>



This produces the following result −



local




Example



In the example below, we have defined the variables without using the var keyword. The name variable contains the value of the string type, and the number variable contains the value of the float data type.



When we define the variables without using any keyword, JavaScript considers them global variables and can use them anywhere inside the code.



<html><head><title> Variables without var keyword </title></head><body><script>
  name ="tutorialspoint";// String type variable
  number =10.25;// Number type variable
  document.write("name = "+ name +", number = "+ number +"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This produces the following result −



name = tutorialspoint, number = 10.25




Also, the identifier doesn't lose the previous value if we declare the variable using the var keyword with the value and re-declare the same identifier without initialization. Lets understand it via the example below.



Example



In the example below, we have declared the age variable and initialized it with 10. Again, we have declared the age variable but havent initialized it.



Still, it prints 10 in the output because it doesnt lose the previous initializations value. However, if we update the value of the age variable, it successfully updates it.



<html><head><title> Variables withvar keyword </title></head><body><script>var age =10;var age;
  document.write("age = "+ age +"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This produces the following result −



age = 10

August 21, 2025

Comments

JavaScript Comments

JavaScript comments are used to explain the purpose of the code. The comments are not executed as a part of program and these are solely meant for human developers to understand the code better.

You can use comments for various purposes, such as −

Explaining the purpose of a particular piece of code.
Adding documentation to your code for yourself and others who may read it.
Temporarily disabling or “commenting out” a block of code for testing or debugging without deleting it.

A good developer always writes a comment to explain the code.

Types of Comments in JavaScript

There are two common ways to write comments in JavaScript −

Single-line comments
Multi-line comments

Single-line comments in JavaScript

We can start the single-line comment with the double forward slash (//). We can write comment between // and end of the line.

Syntax

The syntax for the single-line comments is given below −

<script>// single-line comment message</script>

Example

In the example below, we have explained each step of JavaScript code using single-line comments. In the output, the code prints the concatenated string.

<html><head><title> Single line comments </title></head><body><script>// Defining the string1var string1 ="JavaScript";// Defining the string2var string2 ="TypeScript";// Printing the strings
document.write(string1," ", string2);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Multi-line comments in JavaScript



The multi-line comment is useful when we require to comment the multiple lines of code or explain the larger codes. We can write multi-line comments between the /* and */.



Syntax



The syntax for the multi-line comments is given below −



<script>/* First line of comment message
   The second line of the comment message */</script>



Example



In the example below, we have defined a function and explained it using the multi-line comments −



<html><head><title> Multi line comments </title></head><body><script>let result =addition(1123,8823);
document.write("Result = "+ result);/* This function accepts two values as parameters,
 adds them and returns the result*/functionaddition(a, b){var a =100;var b =200;return a+b;}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Always write comments in your code as it helps other collaborators to understand your code.



Using Comments to Prevent Execution



In addition to use comments to provide information about the code, we can also use them to prevent the execution of a particular piece of code.



Example



In the example below, we have commented the 'bool1 = false;' line to avoid execution of that code. In the output, we can see that value of the bool1 variable is true, as we commented out the code, which updates the bool1 variables value.



Also, we can add the single line code after writing the code, as we added after the document.write() method.



<html><head><title> Single line comments </title></head><body><script>var bool1 =true;// bool1 = false;
document.write("The value of the bool1 is: ", bool1);// print variable value&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example



In the example below, we have defined 'a' and 'b' variables. After that, we have written the code to swap values of 'a' and 'b' in 3 lines and comment out using the multi-line comments.



The output prints the actual values of the 'a' and 'b' as the browser ignores the commented code.



<html><head><title> Multi line comments </title></head><body><script>var a =100;var b =200;/* a = a + b;
b = a - b;
a = a - b; */
document.write("a = "+ a +"&lt;br&gt;"+"b = "+ b);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 21, 2025

Console.log() Method

JavaScript console.log() Method

The console.log() is one of the most important methods in JavaScript. It is used to print the message in the web console.

We can use the console.log() method to debug the code by printing the output in the console. For example, if the developer requests API and wants to check the data received as a response, they might use the console.log() method. Also, there are other use cases of the console.log() method.

Syntax

You can follow the syntax below to use the console.log() method −

console.log(msg1, msg2,, msgN);

You can pass different messages (msg1, msg2, …,msgN) by separating them with a comma as a parameter of the console.log() method.

Console.log() with client-sided JavaScript

Whenever we use the console.log() method in the front-end code, it prints the output in the browser’s console.

Here is shortcut to open the console in Chrome browser −

Press Ctrl + Shift + J together on Windows/Linux and Cmd + Option + J on Mac.

Most browsers have the same shortcut key to open the console. However, if you cant open the console in any browser, you may search on Google.

Alternatively, to open the Console, right click the mouse and follow Inspect -> Console options.

Example

In the example below, we have printed the “Hello World!” message using the console.log() method.

Also, we defined two integer variables and used another console.log() method to print the sum of num1 and num2. Here, developers can observe how we have printed variables in the console. The example also demonstrates that we can perform addition, multiplication, etc. operations in the console.log() method parameter.

<html><head><title> Console.log() method withHTML</title></head><body><h3> Message is printed in the console </h3><p> Please open the console before clicking "Edit & Run" button </p><script>
  console.log("Hello World!");var num1 =30;var num2 =20;
  console.log("The sum of ", num1," and ", num2," is: ", num1 + num2);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


It will produce the following result in the Console −



Hello World!
The sum of  30  and  20  is:  50




Example



In the example below, we have created the JavaScript object containing the name, domain, and description properties. We have printed the object in the web console using the console.log() method.



In the console, we can see that it prints the object, and we can expand the object by clicking the arrow given at the start of the object to see the detailed information.



<html><head><title> Console.log() method withHTML</title></head><body><h3> Message is printed in the console </h3><p> Please open the console before clicking "Edit & Run" button </p><script>// Defining the objectvar obj ={
     website:"Tutorialspoint",		 Domain:"www.tutorialspoint.com",
		 description:"This site is for learning."};
  console.log(obj);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


It will produce the following result in the Console −



{website: 'Tutorialspoint', Domain: 'www.tutorialspoint.com', description: 'This site is for learning.'}




Console.log() with server-side JavaScript



The console.log() method with the back-end code prints the output in the terminal where the back-end server is running.



Example



We have written the below code printing the Hello World! message into the app.js file and using the 'node app.js' command in the terminal to run the server. It prints the message in the terminal that we can observe.



let message ="Hello world!";
console.log(message);



This will produce the following result −



Hello world!




You can use the console.log() method with front-end and back-end code to debug the code by printing output in the console.

August 21, 2025

Hello World Program

Write “Hello World” Program in JavaScript

“Hello, World!” is often the first program, programmers write when learning a new programming language. JavaScript “Hello World” is a simple program, generally used to demonstrate the basic syntax of the language. This program will make use of different JavaScript methods to print “Hello World”.

Using document.write()

In JavaScript, the simplest way to print “Hello World” is to use document.write() method. The document.write() method writes the content (a string of text) directly to the HTML document or web page. Lets look at the following −

<script>
   document.write("Hello World)</script>

We should write the document.write() within the <script> and </script> tags. We can place the <script> inside the <head> or <body> section.

Example

Let’s try to write a JavaScript program that prints the “Hello World!” to the document or web page. In the below program, we placed the JavaScript code within the <head> section. You can try to put the JavaScript part inside the <body> section and execute the program.

<html><head><script>
  document.write("Hello World");&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;html&gt;</pre>


Using alert() method



We can use the window alert() method to print "Hello Word" in a dialogue box.



The alert() is a window method that instruct the browser to display an alert box with the message. We can write alert without passing any message to it.



<script>alert("Hello World")</script>



We can write alert() method as window.alert(). As window object is a global scope object, we can skip the "window" keyword.



Example



Let's try an example showing "Hello World" in the alert box. Try to execute the program by putting the <script> part within the <body> section.



<html><head><script>alert("Hello World");</script></head><body></body><html>



Using console.log()



The console.log() is a very convenient method to print the message to web Console. It is very useful to debug the JavaScript codes in the browsers. Let's look at the simple application of the console.log() to print the "Hello World" to the web console.



<script>
   Console.log("Hello World")</script>



We can use the console.log to print strings or JavaScript objects. Here in above code snippet, we have passed "Hello World" as a string argument to the console.log() method.



Example



Let's try to write a complete JavaScript program with HTML.



<html><head><script>
  console.log("Hello World");&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt; Please open the console before clicking "Edit &amp; Run" button &lt;/p&gt;&lt;/body&gt;&lt;html&gt;</pre>


It will produce the following message in the web console −



Hello World




Using innerHTML



The innerHTML property of an HTML element defines the HTML content of the element. We can use this property to display the Hello World message. By changing the innerHTML property of the element, we can display the message in HTML document or webpage.



To use innerHTML property of an element, we need to access that element first. We can use document.getElementById() method to access the element. Let's look at a complete example.



Example



In the example below, we define a div element with id, "output". We access this element using the document.getElementById("output"). Then we change the innerHTML property and display our message, "Hello World".



<html><head><title>Using innerHTML property</title></head><body><div id ="output"></div><script>
  document.getElementById("output").innerHTML ="Hello World";&lt;/script&gt;&lt;/body&gt;&lt;html&gt;</pre>

August 21, 2025

Syntax

JavaScript Syntax

JavaScript syntax comprises a set of rules that define how to construct a JavaScript code. JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between these tags as a script. A simple syntax of your JavaScript will appear as follows.

<script ...>
   JavaScript code
</script>

The script tag takes two important attributes

Language −This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.
Type −This attribute is what is now recommended to indicate the scripting language in use and its value should be set to “text/javascript”. JavaScript has become default lannguage in HTML5, and modern browsers, so now adding type is not required.

So your JavaScript segment will look like −

<script language ="javascript" type ="text/javascript">
   JavaScript code
</script>

Your First JavaScript Code

Let us take a sample example to print out “Hello World”. We call document.write method which writes a string into our HTML document. This method can be used to write text, HTML, or both. Take a look at the following code −

<html><head><title> Your first JavaScript program </title><head><body><script language ="javascript" type ="text/javascript">
  document.write("Hello World!")&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This code will produce the following result −



Hello World!




JavaScript Values



In JavaScript, you can have two types of values.




Fixed values (Literals)



Variables (Dynamic values)




JavaScript Literals



In the below code, 10 is a Number literal and Hello is a string literal.



<html><body><script>
  document.write(10);// Number Literal
  document.write("&lt;br /&gt;");// To add line-break
  document.write("Hello");// String Literal&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This code will produce the following result −



10
Hello




JavaScript Variables



In JavaScript, variables are used to store the dynamic data.



You can use the below keyword to define variables in JavaScript.




var



let



const




You can use the assignment operator (equal sign) to assign values to the variable.



In the below code, variable a contains the numeric value, and variable b contains the text (string).



<html><body><script>let a =5;// Variable Declaration
  document.write(a);// Using variable
  document.write("&lt;br&gt;");let b ="One";
  document.write(b);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This code will produce the following result −



5
One




Whitespace and Line Breaks



JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.



Semicolons are Optional



Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a separate line. For example, the following code could be written without semicolons.



<script>
   var1 =10
   var2 =20</script>



But when formatted in a single line as follows, you must use semicolons −



<script>
   var1 =10; var2 =20;</script>




It is a good programming practice to use semicolons.




Case Sensitivity



JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.



So the identifiers Time and TIME will convey different meanings in JavaScript.



In the code below, we compare the time and Time strings, which returns false.



<html><body><script>let a ="time";let b ="Time";
	  document.write("a == b? "+(a == b));</script></body></html>



This code will produce the following result −



a == b? false





Care should be taken while writing variable and function names in JavaScript.




JavaScript and Camel Case




Pascal Case − We can create variables like SmartWatch, MobileDevice, WebDrive, etc. It represents the upper camel case string.



Lower Camel Case − JavaScript allows developers to use variable names and expression names like smartwatch, mobileDevice, webDriver, etc. Here the first character is in lowercase.



Underscore − We can use underscore while declaring variables like smart_watch, mobile_device, web_driver, etc.





JavaScript doesnt allow adding the hyphen in variable name or expression name.




JavaScript Keywords



JavaScript contains multiple keywords which we can use for a particular task. For example, the function keyword can be used to define the function. The let, var, and const keywords can be used to define variables.



Lets understand the use of the keyword via the example below.



Example



In this example, we used the function keyword to define the function. We used the var keyword inside the function to define the sum variable.



Also, we used the let and const keywords outside the function to define two variables and initialize them with values. After that, we called the function using the function name and passed variables as an argument.



<html><body><script>functiongetSum(first, second){var sum = first * second;
     document.write("The product of "+ first +" and "+ second +" is "+ sum);}let first =3;const second =4;getSum(first, second);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This code will produce the following result −



The product of 3 and 4 is 12





JavaScript doesnt allow to use the of keywords as a variable or expression name.




JavaScript Identifiers



In JavaScript, identifiers are the name of variables, functions, objects, etc.



For example, p is an identifier in the below code.



<script>
   pet p =90;</script>



The 'test' is an identifier in the below code.



<script>functiontest(){}</script>



Here are the rules which you should follow to define valid identifiers.




Identifiers should always start with the alphabetical characters (A-Z, a-z), $(dollar sign), or _ (underscore).



It shouldnt start with digits or hyphens.



The identifier can also contain digits except for the start of it.




Comments in JavaScript



JavaScript supports both C-style and C++-style comments, Thus −




Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.



Any text between the characters /* and */ is treated as a comment. This may span multiple lines.



JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-line comment, just as it does the // comment.



The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->.




Example



The following example shows how to use comments in JavaScript.



<script>// This is a comment. It is similar to comments in C++/*
   * This is a multi-line comment in JavaScript
   * It is very similar to comments in C Programming
   */</script>



Operators in JavaScript



JavaScript contains various arithmetic, logical, bitwise, etc. operators. We can use any operator in JavaScript, as shown in the example below.



Example



In this example, we have defined var1 and va2 and initialized them with number values. After that, we use the * operator to get the multiplication result of var1 and var2.



<html><body><script>
  var1 =10
  var2 =20
  var3 = var1 * var2;
  var4 =10+20;
  document.write(var3," ",var4);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This code will produce the following result −



200 30




In this way, programmers can use other operators with operands.




When any of two operands of the + operator is a string, it converts the other operand to a string and merges both strings.




Expressions in JavaScript



You can create expressions in JavaScript by combining the variable, values, and operators.



For example, the below expression adds two numbers.



10+20;



The below expression multiplies the values of two variables.



a * b;



The below expression divides the value of variable c with 2.



c /2;



Example



In the below code, we have used the assignment and arithmetic expressions.



<html><body><script>let a =10;let b =2;let c = a;// Assigning a value of a to c. Assignment expression.let d = a + b;// Adding a and b. Arithmetic expression.let e = a - b;// Subtracting b from a.

  document.write("c = "+ c +"&lt;br&gt;");
  document.write("d = "+ d +"&lt;br&gt;");
  document.write("e = "+ e +"&lt;br&gt;");&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


This code will produce the following result −



c = 10
d = 12
e = 8




We will explore more expressions in the upcoming chapters.



JavaScript Character Set



JavaScript contains a set of Unicode characters.



The Unicode characters add special characters like emoji, symbols, etc. in the text.



For example, the below Unicode character will display the left arrow.



&larr




The Below Unicode character will display the RS (Rupees sign) symbol.



8360



However, there are a lot of syntaxes of JavaScript we need to cover, and it is not possible to cover them in a single chapter. So, we have covered only basic syntax in this chapter to get started with JavaScript, and we will cover other syntaxes in upcoming chapters.

August 21, 2025

Placement in HTML File

JavaScript Placement in HTML File

There is flexibility to place JavaScript code anywhere in an HTML document. However, the most preferred ways to include JavaScript in an HTML file are as follows −

Script in <head>…</head> section.
Script in <body>…</body> section.
Script in <body>…</body> and <head>…</head> sections.
Script in an external file and then include in <head>…</head> section.

You can follow the syntax below to add JavaScript code using the script tag.

<script>// JavaScript code</script>

In the following section, we will see how we can place JavaScript in an HTML file in different ways.

JavaScript in <head>…</head> section

If you want to have a script run on some event, such as when a user clicks somewhere,then you will place that script in the head as follows −

<html><head><script type ="text/javascript">functionsayHello(){alert("Hello World")}</script></head><body><input type ="button" onclick ="sayHello()" value ="Say Hello"/></body></html>

JavaScript in <body>…</body> section

If you need a script to run as the page loads so that the script generates content in the page, then the script goes in the <body> portion of the document. In this case, youwould not have any function defined using JavaScript. Take a look at the following code.

<html><head></head><body><script type ="text/javascript">
  document.write("Hello World")&lt;/script&gt;&lt;p&gt;This is web page body &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


JavaScript in <body> and <head> Sections



You can put your JavaScript code in <head> and <body> sections altogether as follows −



<html><head><script type ="text/javascript">functionsayHello(){alert("Hello World")}</script></head><body><script type ="text/javascript">
  document.write("Hello World")&lt;/script&gt;&lt;input type ="button" onclick ="sayHello()" value ="Say Hello"/&gt;&lt;/body&gt;&lt;/html&gt;</pre>


JavaScript in External File



As you begin to work more extensively with JavaScript, you will likely find cases where you are reusing identical JavaScript code on multiple pages of a site.



You are not restricted to be maintaining identical code in multiple HTML files. The script tag provides a mechanism to allow you to store JavaScript in an external file and then include it in your HTML files.



To use JavaScript from an external file source, you need to write all your JavaScript source code in a simple text file with the extension ".js" and then include that file as shown below.



For example, you can keep the following content in the filename.js file, and then you can use the sayHello function in your HTML file after including the filename.js file.



filename.js



functionsayHello(){alert("Hello World")}




External JavaScript file doesnt contain the <script> tag.




Here is an example to show how you can include an external JavaScript file in your HTML code using the script tag and its src attribute.



You may include the external script reference within the <head> or <body> tag.



<html><head><script type ="text/javascript" src ="filename.js"></script></head><body>...</body></html>



Also, you can create different modules to maintain code better and import each module in another JavaScript file or import all modules in a single HTML file.



You can follow the below code to add multiple scripts into a single HTML file.



<head><script src ="filename1.js"></script><script src ="filename2.js"></script><script src ="filename3.js"></script></head>



External References



You can add an external JavaScript file in the HTML using the below 3 ways.



1. Using the full file path



When you need to add any hosted JavaScript file or a file that doesnt exists in the same project into the HTML, you should use the full file path.



For example,



<head><script src ="C://javascript/filename.js"></script></head>



2. Using the relative file path



If you are working on the project and JavaScript and HTML both files are in different folders, you can use the relative file path.



<head><script src ="javascript\filename.js"></script></head>



3. Using the filename only



If HTML and JavaScript both files are in the same folder, you can use the file name.



<head><script src ="filename.js"></script></head>



Advantages of using the <script> tag



Here are the advantages of using the <script> tag to add JavaScript in the HTML.



Ease of Integration



The <script> tag allows developers to integrate JavaScript into the HTML file easily. Adding JavaScript to the HTML file allows you to add behavior and interactivity to the web page.



Immediate Execution



Whenever the browser finds a <script> tag on the web page, it immediately executes the JavaScript code defined inside that. It enables website visitors to interact with the web pages and get real-time updates immediately.



Inline and External scripts



You can use the <script> tag to add the inline or external script into the HTML file. If you want to load JavaScript before the HTML of a web page, you can add the <script. Tag in the <head> tag. Otherwise, you can add the <script> tag in the <body> tag.



External Libraries and Frameworks integration



The <script> tag enables you to add external libraries and frameworks to the HTML web page.



For example, in the below code, we have added JQuery to the web page using its CDN.



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>



Here, the "src" attribute contains the hosted link to the library.



Global Scope Access



Whatever code you define in the script tag has access to the global scope of the web page. You can access the global variables, functions, etc., anywhere in the code.

August 21, 2025