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
Front End Technology Articles
Page 603 of 652
What is the use of sinon.js?
SinonJS provides stand-alone test spies, stubs and mocks. It is a library that we can use to create object mocks for unit testing.Spies − Fake functions that we can use to track executions.Stubs −Functions replacements from which we can return whatever we want or have our functions work in a way that suites us to be able to test multiple scenarios.Mocks −Fake methodsAll these objects help in unit testing our code.
Read MoreHow to create an object property from a variable value in JavaScript?
JS has 2 notations for creating object properties, the dot notation and bracket notation.To create an object property from a variable, you need to use the bracket notation in the following way −Exampleconst obj = {a: 'foo'} const prop = 'bar' // Set the property bar using the variable name prop obj[prop] = 'baz' console.log(obj);OutputThis will give the output −{ a: 'foo', bar: 'baz' }ES6 introduces computed property names, which allow you to do −Exampleconst prop = 'bar' const obj = { // Use a as key a: 'foo', // Use the value of prop ...
Read MoreHow to terminate javascript forEach()?
You can't break from the forEach method and it doesn't provide to escape the loop (other than throwing an exception).You can use other functions like _.find from lodash instead −_.find − it breaks out of the loop when the element is found. For example,Example_.find([1, 2, 3, 4], (element) => { // Check your condition here if (element === 2) { return true; } // Do what you want with the elements here // ... });Throw an exception from forEach. For example,Exampletry { [1, 2, 3, 4].forEach((element) => { // Check your condition here if (element === 2) { throw new Error(); } // Do what you want with the elements here // ... }) } catch (e) { // Do nothing. }
Read MoreHow can I trigger an onchange event manually in javascript?
You can dispatch events on individual elements using the dispatchEvent method. Let's say you have an element test with an onChange event −Event handler −document.querySelector('#test').addEventListener('change', () => console.log("Changed!"))Triggering the event manually −const e = new Event("change"); const element = document.querySelector('#test') element.dispatchEvent(e);This will log the following −Changed!
Read MoreHow to delete a localStorage item when the browser window/tab is closed?
To clear a localStorage data on browser close, you can use the window.onunload event to check for tab close.Let's say you have a local storage object called MyStorage as a global for the sake of this example. Then you can write an event handler −Examplewindow.onunload = () => { // Clear the local storage window.MyStorage.clear() }This will clear the local storage on the tab/window close.
Read MoreIncrement a date in javascript without using any libraries?
To add one day to date in JS, the setDate function is the best way. You can create the following function on the Date prototype to add days to the date.ExampleDate.prototype.addDays = function(days) { let d = new Date(this.valueOf()); d.setDate(d.getDate() + days); return d; } let date = new Date(); console.log(date.addDays(1));This will log the next day.
Read MoreHow to programmatically set the value of a select box element using JavaScript?
We can set the value of a select box using Javascript using the following. Suppose we have the following select box − Select Apple Strawberry Cherry Guava To set the value of this select element, we need to access it using querySelector. Then set the value. For example −Example// Search the select box const mySelectBox = document.querySelector('#my-select'); // Set the value to 3 or Strawberry mySelectBox.value = 3;
Read MoreJavaScript Encapsulation using Anonymous Functions
Object-oriented programming languages allow data hiding using private fields. They use these to hide the internals of classes. In JS there is no such in build support to hide/encapsulate the inner workings.We have Anonymous functions that can give you encapsulation in JS. Let us look at an example −Exampleconst HIDDEN_CONST = 100; function fnWeWantToHide(x, y) { return (x + y) * HIDDEN_CONST } console.log(fnWeWantToHide(1, 2))If we write the above code out in the open this code will pollute the global namespace with these names. Instead what we can do is wrap this in an IIFE(immediately invoked functional expressions). For ...
Read MoreSafely setting object properties with dot notation strings in JavaScript
You can use lodash's set method to set properties at any level safely. Setting first-level properties are pretty straightforward. Nested property access is tricky and you should use a tested library like lodash for it.You can set a deeply nested object in the following way −Examplelet _ = require("lodash"); let obj = { a: { b: { foo: "test" }, c: 2 } }; _.set(obj, "a.b.foo", "test1"); _.set(obj, "a.c", { test2: "bar" }); console.log(obj);OutputThis will give the output −{ a: { b: { foo: 'test1' ...
Read MoreSafely Accessing Deeply Nested Values In JavaScript
You can use lodash's get method to get properties at any level safely. Getting first-level properties is pretty straightforward. Nested property access is tricky and you should use a tested library like lodash for it.You can access a deeply nested object in the following way −Examplelet _ = require("lodash"); let obj = { a: { b: { foo: "test" }, c: 2 } }; console.log(_.get(obj, "a.b.foo")); console.log(_.get(obj, "a.c")); console.log(_.get(obj, "a.test")); console.log(_.get(obj, "a.test.x"));OutputThis will give the output −test 2 undefined undefinedYou can also write your own ...
Read More