How to terminate javascript forEach()?

Ayush Gupta
Updated on 27-Nov-2019 12:17:48

380 Views

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. }

Most efficient method to groupby on an array of objects in Javascript

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

7K+ Views

The most efficient method to group by a key on an array of objects in js is to use the reduce function.The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.Exampleconst people = [    { name: 'Lee', age: 21 },    { name: 'Ajay', age: 20 },    { name: 'Jane', age: 20 } ]; function groupBy(objectArray, property) {    return objectArray.reduce((acc, obj) => {       const key = obj[property];       if (!acc[key]) {          acc[key] = [];     ... Read More

How can I trigger an onchange event manually in javascript?

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

21K+ Views

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!

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

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

1K+ 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

51 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.

How to check if element exists in the visible DOM?

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

568 Views

We can use the Node.contains method to do this check. The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.ExampleFor example, you are looking for an element with id test, you can use the following −const elem = document.querySelector('#test'); console.log(document.body.contains(elem));This will log true or false based on whether the element is present in the visible DOM.

Increment a date in javascript without using any libraries?

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

94 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

578 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

257 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

The Pros and Cons of Using Ajax

Ayush Gupta
Updated on 27-Nov-2019 10:35:33

5K+ Views

Ajax is a set of web development techniques using many web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.Any other technology Ajax also has its own pros and cons. Let's look at some of those.Pros −Allows applications to render without data and fill data as the application gets it from the server.Gives platform independence to application developersFaster page rendersMore responsive applicationsNo rerenders of whole pages are needed to update only a single area.Cons−Any user whose ... Read More

Advertisements