Introduction to JavaScript Literals
JavaScript Literals are constant values that can be assigned to the variables that are 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. Consider an example, var name = “john”, a string variable named name is declared and assigned a string value “john”. The literal “john” represents, the value john for the variable name. There are different types of literals that are supported by JavaScript.
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, must have minimum one digit (0-9). No blank or comma is allowed within an integer. It can store positive numbers or negative numbers. In integers, literals in JavaScript can be supported in three different bases. The base 10 that is Decimal (Decimal numbers contain digits (0,9) ) examples for Decimal numbers are 234, -56, 10060. Second is base 8 that is Octal (Octal numbers contains digits (0,7) and leading 0 indicates the number is octal), 0X 073, -089, 02003. Third is base 16 that is Hexadecimal numbers (Hexadecimal numbers contains (0,9) digits and (A,F) or (a, f) letters and leading 0x or 0X indicates the number is hexadecimal), examples for hexadecimal numbers are 0X8b, – 0X89, 0X2003.
Let us understand with 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 numbers or fraction numbers or even can have an exponent part as well. Examples for hexadecimal numbers are 78.90, -234.90, 78.6e4 etc.
Let us understand with 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 string we can use + operator. Examples for string are “hello”, “hello world”, “123”, “hello” + “world” etc.
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 are a list of expressions or other constant values, each of which expression known as an array element. An array literal contains a list of element s within square brackets ‘ [ ] ‘ . If no value is a pass when it creates an empty array with zero length. If elements are passed then its length is set to the number of elements passed. Examples for string are var color = [ ], var fruits = [“Apple”, “Orange”, “Mango”, “Banana”] (an array of four elements).
Let us understand with 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 collection zero or more key-value pairs of a comma-separated list, which are enclosed by a pair of curly braces ‘ { } ‘.Examples for object literal with declaration are var userObject = { }, var student = { f-name : “John”, l-name : “D”, “rno” : 23, “marks” : 60}
Let 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:
