Introduction to JavaScript References
JavaScript References are a very essential feature of JavaScript as it does not support for internal pointer concept which makes it different from other programming languages. Also, References cannot be used directly as JavaScript References are totally different compared to other References. In References, it is not all possible to refer the value from one object to another object directly. Only compound values like objects and arrays can be referenced or assigned using references. JavaScript References can point out to compound value and not to scalar primitive also has significance as it is mentioned above it cannot use references directly.
Syntax
The syntax for References works in a way that when the compound value is assigned to a variable then at that time a new reference is created.
var <array of var> =[x,y,z];
var <variable>= <array of var> // assign by reference
<variable> = [x,y,z]; //value gets reassigned (create new reference)Explanation: An array of the variable is declared and assigned value or the elements in that array. Take another variable into consideration and assign the variable with references. Assign to that same variable some values which signify that it has reassigned and created a new reference for the existing variable and set of values.
How JavaScript References works?
Let’s walk through the working of JavaScript References:
var months = [april,may,june];
(function (a)) {
a.push (60);
console.log(a);
a=[oct,nov,dec];
a.push (55);
console.log(a);
}) (months);
console.log(months);Explanation: A set of the variable is declared with months considered as a compound variable. That function as a variable is pushed with elements and get it printed till now the elements are not overridden and reassigned. Take those months and variables and then reassign the compound variable with a new set of values and get the compound variable printed. It will be easy to analyze the difference with the actual variable and reassigned compound variable with the references.
Types of JavaScript References
Basically, JavaScript has three types of data types that are passed as a reference namely Array, Function and Object. These are all considered as objects technically therefore collectively called Objects to refer. But still, a clear list of References is as follows:
- Array References
- Boolean References
- Class References
- Date References
- Error References
- Global References
- Json References
- Math References
- Number References
- Operators References
- RegExp References
- Statement References
- String References
Examples of JavaScript References
Here are the examples of References mention below
Example #1 – Program to refer Array References.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array References</h2>
<p id="demo"></p>
<script>
var months = ["Jan","Feb", "March"];
document.getElementById("demo").innerHTML = months;
</script>
</body>
</html>Output:
Example #2 – Program to refer Boolean References
Code:
<!DOCTYPE html>
<html>
<body>
<p>Display JavaScript Boolean References(12 > 8)</p>
<button onclick="BooleanFunction()"> Lets Try</button>
<p id="demo1"></p>
<script>
function BooleanFunction() {
document.getElementById("demo1").innerHTML = Boolean(12 > 8);
}
</script>
</body>
</html>Output:
Example #3 – Program to refer Class References
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class References</h2>
<p> This example demonstrates a simple class definition and its use. </p>
<p id="demo2"></p>
<script>
class Scooter {
constructor(brand) {
this.scootername = brand;
}
}
myscooter = new Scooter("Activa");
document.getElementById("demo2").innerHTML = myscooter.scootername;
</script>
</body>
</html>Output:
Example #4 – Program to refer Date References
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Date() Creation </h2>
<p> Date() function helps in creation of a new date object with the current date and time:</p>
<p id="demo3"></p>
<script>
var deff = new Date();
document.getElementById("demo3").innerHTML = deff;
</script>
</body>
</html>Output
Example #5 – Program to refer to Error References
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors References</h2>
<p>This example is written for notification purpose with"alert" as "addalert" to produce an intentional error.</p>
<p>The name property of the Error object as Referneces returns the name of the error and the message property as an object returns a description of the error:</p>
<p id="demo4" style="color:red"></p>
<script>
try {
addalert("Hello first time user!");
}
catch(err) {
document.getElementById("demo4").innerHTML =
err.name + "<br>" + err.message;
}
</script>
</body>
</html>Output:
Example #6 – Program to refer JSON References.
Code:
<!DOCTYPE html>
<html>
<body>
<script>
var myObj = { "name":"anu", "age":25, "city":"Uttar Pradesh", "gender":"female" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>
</body>
</html>Output:
Example #7 – Program to refer Math Reference
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math References </h2>
<p>Math.PI returns value of PI:</p>
<p id="piDemoa"></p>
<p>Math.sqrt(16) returns the square root of 16:</p>
<p id="sqrtDemob"></p>
<script>
var z = Math.PI;
var x = Math.sqrt(25);
document.getElementById("piDemoa").innerHTML = z;
document.getElementById("sqrtDemob").innerHTML = x;
</script>
</body>
</html>Output:
Example #8 – Program to refer Number Reference
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers References</h2>
<p>Numbers References can be written with or without any decimals:</p>
<p id="demo5"></p>
<script>
var z = 3.14;
var x = 3;
document.getElementById("demo5").innerHTML = z + "<br>" + x;
</script>
</body>
</html>Output:
Example #9 – Program to refer Operators References
Code:
<!DOCTYPE html>
<html>
<body>
<p>typeof operator is used to return type or the property of a variable, object, function or expression.</p>
<p id="demo6"></p>
<script>
document.getElementById("demo6").innerHTML =
typeof "ajay" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1, 2, 3, 4] + "<br>" +
typeof {name:'ajay', age:30} + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof myScooter + "<br>" +
typeof null;
</script>
</body>
</html>Output:
Example #10 – Program to refer RegExp References
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript References for Regular Expressions</h2>
<p>Click on the button to perform case-insensitive search for "educba" in a string.</p>
<button onclick="myFunctionq()">Try it</button>
<p id="demo8"></p>
<script>
function myFunctionq() {
var str = "Welcome to educba";
var patrn = /educba/i;
var result = str.match(patrn);
document.getElementById("demo8").innerHTML = result;
}
</script>
</body>
</html>Output:
Example #11 – Program to refer Statements references.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>My educba learning Page</h1>
<p id="demo5">First article.</p>
<script>
document.getElementById("demo5").innerHTML = "Hello educba.";
</script>
</body>
</html>Output:
Example #12 – Program to refer String References.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings references</h2>
<p>Strings are written inside quotes and any kind of quotes can be used single or double </p>
<p id="demo8"></p>
<script>
var car1 = "Volvo x80";
var car2 = 'Harrier X60';
document.getElementById("demo8").innerHTML =
car1 + " " + car2;
</script>
</body>
</html>Output:
Conclusion
JavaScript References are very useful as bringing References in usage helps developers to avoid mistakes and bring enhancement to the coding patterns and norms.
