Simplifying Known Vanilla JS to Advanced ES

All The below codding snippets works perfectly. Need to make sure that the below snippets of code can be simplified using any of an advanced ECMA standards

let pauseAllcount = 0, resumeAllcount = 0;
this.xUserDetails.forEach((el, indx) => {
if (this.xUserDetails[indx].userProctorSignal === 1) {
pauseAllcount++;
} else if (this.xUserDetails[indx].userProctorSignal === 0) {
resumeAllcount++;
}
});

The above snippets could be written as

let pauseAllcount = 0, resumeAllcount = 0;
pauseAllcount = this.xUserDetails.filter(x => x.userProctorSignal === 1).length;
resumeAllcount = this.xUserDetails.filter(x => x.userProctorSignal === 0).length;

Results will be one and same. But I'm afraid that iterating over the same array twice, I might risk the performance overhead cost by O(2n). Will this same block of code couldn't be written to reduce no of lines and replaced by advanced ECMA approach giving optimistic solutions?...

Likewise showing all the below 5 coding snippets could be simplified with advanced ECMA

I Code:

if (this.pageReqDetails.RowTot === this.xUserDetails.length) {
if (this.userdetails.every(x => x.extensionTime === this.userdetails[0].extensionTime)) {
this.timeForallUser = this.userdetails[0].extensionTime;
}
if (pauseAllcount === this.xUserDetails.length) {
this.toggleButtonDisplayType = 1;
} else if (resumeAllcount === this.xUserDetails.length) {
this.toggleButtonDisplayType = 0;
this.timeForallUser = 0;
} else {
this.toggleButtonDisplayType = -1;
this.timeForallUser = 0;
}
} else {
this.timeForallUser = 0;
}

II Code:

let flagPauseAll = false, flagResumeAll = false;
if (this.pageReqDetails.RowTot === this.xUserDetails.length) {
this.xUserDetails.forEach((el, indx) => {
if (type === 0) {
if (el.extensionTime === time) {
this.timeForallUser = 0;
this.toggleButtonDisplayType = 0;
} else {
flagResumeAll = true;
}
} else if (type === 1) {
if (el.extensionTime === time) {
this.timeForallUser = time;
this.toggleButtonDisplayType = 1;
} else {
flagPauseAll = true;
}
}
});
}
if (flagPauseAll || flagResumeAll) {
this.timeForallUser = 0;
this.toggleButtonDisplayType = -1;
}

III Code:

let countAllResume = 0, countAllPause = 0;
this.userdetails.forEach(x => {
if (type === 1) {
x.userProctorSignal = 1;
x.extensionTime = time;
} else if (type === 0) {
x.userProctorSignal = 0;
x.extensionTime = 0;
x.xextensionTime = 0;
}
});
this.xUserDetails.forEach((el, indx) => {
if (type === 1 && el.userProctorSignal === 1) {
el.userProctorSignal = type;
el.extensionTime = time;
el.xextensionTime = time;
countAllPause++;
}
if (type === 0 && el.userProctorSignal === 0) {
el.userProctorSignal = 0;
el.extensionTime = 0;
el.xextensionTime = 0;
countAllResume++;
}
})
if (this.xUserDetails.length === countAllPause) {
this.timeForallUser = time;
this.toggleButtonDisplayType = 1;
} else if (this.xUserDetails.length === countAllResume) {
this.timeForallUser = 0;
this.toggleButtonDisplayType = 0;
}

IV Code:

this.userdetails.forEach((el, indx) => {
if (el.examUserId === examUserDetail.examUserId) {
this.userdetails[indx] = examUserDetail;
el.xextensionTime = time;
el.extensionTime = time;
}
});

V Code:

if (this.userdetails[i].extensionTime !== null && this.userdetails[i].extensionTime > 0) {
this.userdetails[i].extensionTime /= 60;
this.userdetails[i]['xextensionTime'] = this.userdetails[i].extensionTime;
} else if (this.userdetails[i].extensionTime === null || this.userdetails[i].extensionTime === 0) {
this.userdetails[i].extensionTime = 0;
this.userdetails[i]['xextensionTime'] = 0;
}

The above 5 coding snippets were written in a old school manner with vanilla JS. As I require further assistance of converting this into advanced & much smaller lines of code that would suffice a lot.

Any help with single or partial snippets which could be simplified would be great and are always welcome to post..

> I might risk the performance overhead cost by O(2n)

I suggest you benchmark it.

I'm afraid I can't help with all snippets but I'll post some findings.

There are a couple of things with code II.

First of all, you rely on some external flag type and you change your values only if it is 0 or 1, so if you check it in advance you may save some cycles not iterating all your elements.

Another thing is that though you iterate over all items in an array they still overwrite the same values which means that you can examine just the last one which would change complexity from O(n) to O(1).

The third thing is that both your flag variables lead to the same outcome so you can remove them and then reorganize your if statements to reduce code duplication.

With these things in mind I've reworked the code a bit

if (this.pageReqDetails.RowTot === this.xUserDetails.length && (type === 0 || type === 1)) {
const el = this.xUserDetails[this.xUserDetails.length];
if (type === 0 && el.extensionTime === time) {
this.timeForallUser = 0;
this.toggleButtonDisplayType = 0;
}
else if (type === 1 && el.extensionTime === time) {
this.timeForallUser = time;
this.toggleButtonDisplayType = 1;
}
else {
this.timeForallUser = 0;
this.toggleButtonDisplayType = -1;
}
}

It's not necessarily advanced JS but it's faster and a bit shorter

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bohdan Stupak5y ago
Accepted answer
code IV
this.userdetails
    .filter(el => el.examUserId === examUserDetail.examUserId)
    .forEach((el, indx) => {
        el = examUserDetail;
        el.xextensionTime = time;
        el.extensionTime = time;
});
Bohdan Stupak5y ago
> I might risk the performance overhead cost by O(2n)
I suggest you benchmark it.
I'm afraid I can't help with all snippets but I'll post some findings.
There are a couple of things with code II.
First of all, you rely on some external flag type and you change your values only if it is 0 or 1, so if you check it in advance you may save some cycles not iterating all your elements.
Another thing is that though you iterate over all items in an array they still overwrite the same values which means that you can examine just the last one which would change complexity from O(n) to O(1).
The third thing is that both your flag variables lead to the same outcome so you can remove them and then reorganize your if statements to reduce code duplication.
With these things in mind I've reworked the code a bit
if (this.pageReqDetails.RowTot === this.xUserDetails.length && (type === 0 || type === 1)) {
const el = this.xUserDetails[this.xUserDetails.length];
if (type === 0 && el.extensionTime === time) {
    this.timeForallUser = 0;
    this.toggleButtonDisplayType = 0;

}
else if (type === 1 && el.extensionTime === time) {
    this.timeForallUser = time;
    this.toggleButtonDisplayType = 1;
}
else {
        this.timeForallUser = 0;
        this.toggleButtonDisplayType = -1;
}
}
It's not necessarily advanced JS but it's faster and a bit shorter