Updated June 16, 2023
Introduction to JavaScript Literals
JavaScript Literals are constant values that can be assigned to the variables called literals or constants. JavaScript Literals are syntactic representations for different types of data like numeric, string, Boolean, array, etc. data. Literals in JavaScript provide a means of representing particular or some specific values in our program. For example, var name = “john,” a string variable named name is declared and assigned a string value “john.” The literal “john” represents the value of john for the variable name. JavaScript supports different types of literals.
What are the Types of JavaScript Literals?
Javascript literals hold different types of values. Examples of JavaScript Literals are given below:
1. Integer Literals
Integer literals are numbers that must have a minimum of one digit (0-9). No blank or comma is allowed within an integer. It can store positive numbers or negative numbers. JavaScript supports integer literals in three different bases. The base 10 is Decimal (Decimal numbers contain digits (0,9) ); examples for Decimal numbers are 234, -56, 10060. Second is base 8, Octal (Octal numbers contain digits (0,7) and leading 0 indicates octal), 0X 073, -089, 02003. Third is base 16, that is, Hexadecimal numbers (Hexadecimal numbers contain (0,9) digits and (A, F) or (a, f) letters and leading 0x or 0X indicate the number is hexadecimal); examples for hexadecimal numbers are 0X8b, – 0X89, 0X2003.
Let us understand with an example code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for numeric literals </title>
</head>
<body>
<h1>JavaScript Numbers </h1>
<p> Number can be written of any base.</p>
Decimal number : <b id="no1"></b><br>
Octal number : <b id="no2"></b><br>
Hexadecimal number : <b id="no3"></b><br>
<script>
document.getElementById("no1").innerHTML = 100.25;
</script>
<script>
document.getElementById("no2").innerHTML = 073;
</script>
<script>
document.getElementById("no3").innerHTML = 0X8b;
</script>
</body>
</html>Output:
2. Floating Number Literals
Floating numbers are decimal or fraction numbers or can have an exponent part. Examples of hexadecimal numbers are 78.90, -234.90, 78.6e4, etc.
Let us understand with an example code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for float literals </title>
</head>
<body>
<h1>JavaScript Float </h1>
<p> Float Examples are : </p>
1. <b id="no1"></b><br>
2. <b id="no2"></b><br>
3. <b id="no3"></b><br>
<script>
document.getElementById("no1").innerHTML = 100.25;
</script>
<script>
document.getElementById("no2").innerHTML = -78.34;
</script>
<script>
document.getElementById("no3").innerHTML = 56e4;
</script>
</body>
</html>Output:
3. String Literals
A string literals are a sequence of zero or more characters. A string literals are either enclosed in the single quotation or double quotation as (‘) and (“) respectively, and to concatenate two or more strings, we can use the + operator. Examples for string are “hello”, “hello world”, “123”, “hello” + “world” etc.
A list of special characters that can be used in JavaScript string are.
- \b: Backspace.
- \n: New Line
- \t: Tab
- \f: Form Feed
- \r: Carriage Return
- \\: Backslash Character (\)
- \’: Single Quote
- \ “: Double Quote
Let us understand with an example code –
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for float literals </title>
</head>
<body>
<h1>JavaScript String </h1>
<p> String Examples are : </p>
1. <b id="no1"></b><br>
2. <b id="no2"></b><br>
3. <b id="no3"></b><br>
4. <b id="no4"></b><br>
<script>
var str = "This is first string";
document.getElementById("no1").innerHTML = str;
</script>
<script>
var strobj = new String("This is string store as object");
document.getElementById("no2").innerHTML = strobj;
</script>
<script>
var str = "This is first string";
document.getElementById("no3").innerHTML = str.length;
</script>
<script>
var str = "This is first string";
document.getElementById("no4").innerHTML = str+" This is second string";
</script>
</body>
</html>Output:
4. Array Literals
Array literals comprise a list of expressions or constant values, with each expression referred to as an array element. An array literal contains a list of elements within square brackets’ [ ]’. Suppose no value is a pass when it creates an empty array with zero length. If elements are passed, its length is set to the number of elements passed. String examples are var color = [ ], var fruits = [“Apple”, “Orange”, “Mango”, “Banana”] (an array of four elements).
Let us understand with an example code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for float literals </title>
</head>
<body>
<h1>JavaScript Array </h1>
<p> Array Examples are : </p>
1. <b id="no1"></b><br>
2. <b id="no2"></b><br>
3. <b id="no3"></b><br>
4. <b id="no4"></b><br>
<script>
var fruits = ["Apple", "Orange", "Mango", "Banana"];
document.getElementById("no1").innerHTML = fruits;
</script>
<script>
document.getElementById("no2").innerHTML = fruits[0];
</script>
<script>
document.getElementById("no3").innerHTML = fruits[fruits.length - 1];
</script>
<script>
document.getElementById("no4").innerHTML = fruits.length;
</script>
</body>
</html>Output:
5. Boolean Literals
Boolean literals in JavaScript have only two literal values, that are true and false.
Let us understand with an example code.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for Boolean literals </title>
</head>
<body>
<h1>JavaScript Boolean </h1>
<p> Boolean Examples are : </p>
<script>
document.write('Boolean(12) is ' + Boolean(12));
document.write('<br>');
document.write('Boolean("Hello") is ' + Boolean("Hello"));
document.write('<br>');
document.write('Boolean(2 > 3) is ' + Boolean(2 > 3));
document.write('<br>');
document.write('Boolean(3 > 2) is ' + Boolean(3 > 2));
document.write('<br>');
document.write('Boolean(-12) is ' + Boolean(-12));
document.write('<br>');
document.write("Boolean('true') is " + Boolean('true'));
document.write('<br>');
document.write("Boolean('false') is " + Boolean('false'));
document.write('<br>');
document.write('Boolean(0) is ' + Boolean(0));
</script>
</body>
</html>Output:
6. Object Literals
Object literals are collections of zero or more key-value pairs of a comma-separated list, enclosed by a pair of curly braces ‘{ } ‘.Examples of an object literal with a declaration are var userObject = { }, var student = { f-name : “John”, l-name : “D”, “rno”: 23, “marks”: 60}
Let’s understand with an example code –
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for Object literals </title>
</head>
<body>
<h1>JavaScript Object </h1>
<p> Object Examples are : </p>
<p id= "no1"> </p>
<script>
// Create an object:
var student = {firstName:"John", lastName:"D", "rno" : 23, "marks" : 60 };
// Displaying some data from the object:
document.getElementById("no1").innerHTML =
student.firstName + " got " + student.marks + " marks.";
</script>
</body>
</html>Output:
Recommended Articles
This is a guide to javascript literals. Here we discuss the Introduction and types of Javascript literals with examples including integer literals, floating literals, boolean literals, etc. You may also look at the following articles to learn more –
