Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Javascript Articles
Page 62 of 534
Effective Function Signatures with Default and Rest Parameters in JavaScript
Following is the code for to implement function Signatures with Default and Rest Parameters in JavaScript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } Function Signatures with Default and Rest Parameters CLICK HERE Click on the above button to call the add() function with multiple parameters let BtnEle = document.querySelector(".Btn"); let resEle = document.querySelector(".result"); function add(a = 0, b = 0, ...param) { let total = 0; total += a + b; param.forEach((item) => { total += item; }); return total; } BtnEle.addEventListener("click", (event) => { resEle.innerHTML = "The total sum = " + add(2, null, 22, 11, 33, 44, 55); }); OutputOn clicking the ‘CLICK HERE’ button −
Read MoreHow to import an Object with Sub Objects and Arrays in JavaScript?
Following is the code for importing an object with Sub objects and arrays in JavaScript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result{ font-size: 18px; font-weight: 500; } Importing an Object with Sub Objects and Arrays let sampleEle = document.querySelector(".sample"); let obj = JSON.parse(sampleEle.innerHTML); script.jsimport obj from "./sample.js"; let resultEle = document.querySelector(".result"); for (let i in obj) { resultEle.innerHTML += "Property = " + i + " : Value = " + obj[i] + ""; }sample.jsexport default{ firstName: "Rohan", lastName: "Sharma", school: { name: "St Marks", address: "USA", }, sports: ["cricket", "football"], };OutputThe above code will produce the following output −
Read MoreFormatted Strings Using Template Strings in JavaScript
Following is the code for formatted strings using template strings in Javascript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result, .sample { font-size: 20px; font-weight: 500; color: blueviolet; } .sample { color: red; } Formatted Strings Using Template Strings JavaScript `The person name is ${personObj.name}. His age and rollno are ${personObj.age} and ${personObj.rollno} respectively` CLICK HERE Click on the above button ...
Read MoreWhen you should not use JavaScript Arrow Functions?
The arrow functions should not be used as an object method because an arrow function does not have its own this. It takes this value of the enclosing lexical scope which is the window object instead of the object itself. This can cause problems as we would now be setting and accessing the window object properties instead of the intended object.Following is the code showing when should you not use JavaScript arrow functions −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { ...
Read MoreUsing ‘{ }' in JavaScript imports?
Following is the code using {} in javaScript imports −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 18px; font-weight: 500; color: rebeccapurple; } Using '{ }' in javascript imports CLICK HERE Click on the above button to execute the imported function script.jsimport {test, tellTime as showTime} from "./sample.js"; let resultEle = document.querySelector('.result'); document.querySelector('.Btn').addEventListener('click', ()=>{ resultEle.innerHTML+=test(); resultEle.innerHTML+=showTime(); })sample.jsfunction testImport() { return "Module testImport ...
Read MoreImplement Private properties using closures in JavaScript
Following is the code to implement private properties using closures in JavaScript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } Private properties, using closures 0 CLICK HERE Click on the above button to increment the above counter using closures let BtnEle = document.querySelector(".Btn"); let resEle = document.querySelector(".result"); function test() { let a = 0; return function incrementA() { a++; return a; }; } let storeVal = test(); BtnEle.addEventListener("click", (event) => { resEle.innerHTML = storeVal(); }); OutputOn clicking the ‘CLICK HERE’ button the counter will increase on each click −
Read MoreDe-structuring an object without one key
Following is the code to de-structure an object without one key −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result, .sample { font-size: 18px; font-weight: 500; color: rebeccapurple; } .result { color: red; } De structuring an object without one key. {"firstName":"Rohit", "lastName":"Sharma", "age":22} CLICK HERE Click on the above button to destructure the above object let resEle = document.querySelector(".result"); let obj = ...
Read MoreSum of nested object values in Array using JavaScript
Following is the code to sum nested object values in array using JavaScript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 18px; font-weight: 500; color: rebeccapurple; } Sum of nested object values in Array CLICK HERE Click on the above button to sum the nested object values of json array let json = { storeData: [ { ...
Read MoreCan we modify built-in object prototypes in JavaScript
Following is the code for modifying built-in object prototypes in JavaScript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } Modify built-in object prototypes Click Here Click on the above button to call the alert method let resEle = document.querySelector(".result"); let BtnEle = document.querySelector(".Btn"); window.alert = function (msg) { resEle.innerHTML = "Custom Alert function has been triggered"; resEle.innerHTML += "Alert Message = " + msg; }; BtnEle.addEventListener("click", () => { alert("Hello World"); }); OutputOn clicking the ‘Click Here’ button −
Read MoreBinding an object's method to a click handler in JavaScript
Following is the code for binding an object’s method to a click handler in JavaScript −Example Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } Binding an object's method to a click handler in JavaScript Click Here Click on the above button to know how many times you have clicked the button let resEle = document.querySelector(".result"); let BtnEle = document.querySelector(".Btn"); let testObj = { a: 0, timesClicked() { this.a += 1; resEle.innerHTML = "Times clicked = " + this.a; }, }; BtnEle.addEventListener("click", () => { testObj.timesClicked(); }); OutputOn clicking the ‘Click Here’ button −
Read More