Front End Technology Articles - Page 474 of 860

How to delete a localStorage item when the browser window/tab is closed?

Ayush Gupta
Updated on 27-Nov-2019 10:44:59

2K+ Views

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.

Difference between MEAN.js and MEAN.io?

Ayush Gupta
Updated on 27-Nov-2019 10:43:50

100 Views

MEAN is an acronym for MongoDB, Express, Angular, and Node.js.MEAN.js and MEAN.io are the same things essentially as they both are scaffolded applications or a basic set up to use the above 4 things. These libraries/tools have these set up for you already.These allow you to not spend time on setting up the basic infra, rather focus on building the application.

Increment a date in javascript without using any libraries?

Ayush Gupta
Updated on 27-Nov-2019 10:41:22

169 Views

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.

How to programmatically set the value of a select box element using JavaScript?

Ayush Gupta
Updated on 27-Nov-2019 10:39:19

958 Views

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;

JavaScript Encapsulation using Anonymous Functions

Ayush Gupta
Updated on 27-Nov-2019 10:37:08

414 Views

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 More

Safely setting object properties with dot notation strings in JavaScript

Ayush Gupta
Updated on 27-Nov-2019 10:34:36

930 Views

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 More

Safely Accessing Deeply Nested Values In JavaScript

Ayush Gupta
Updated on 27-Nov-2019 10:27:51

396 Views

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

Accessing nested JavaScript objects with string key

Ayush Gupta
Updated on 27-Nov-2019 10:23:09

2K+ Views

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

Query-string encoding of a Javascript Object

Ayush Gupta
Updated on 27-Nov-2019 10:16:51

205 Views

The query string is made up of query parameters and used to send data to the server. This part of the URL is optional. It needs to be constructed by the developer. This can be done using a native method called encodeURIComponent.The encodeURIComponent() function encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the characterUsing the new ES6 format, objects can be query string encoded in the following way −Examplelet obj = {    name: 'John',    age: 25,    city: 'Chicago' ... Read More

Different techniques for copying objects in JavaScript

Abdul Rawoof
Updated on 02-Sep-2022 11:38:47

367 Views

In JavaScript, objects are the collection of a key value pairs. The properties of the object are the keys and is denoted with a string. The value of the key is the value of the property of the given object. Types/Techniques of object copying There are 2 types of copying objects in any language namely: deep copy, and shallow copy. Shallow Copy In this technique an object is copied as little as possible. For suppose if you copy a collection using this technique the structure of the collection is copied to the destination, not the elements. Example Following is an ... Read More

Advertisements