Javascript Loop which includes variables

Question

I wrote this Javascript code.

function updateCost(plotcode) {
    if (plotcode == "KKPP") {
        alert("Fully Invalid!!!");
        KKPP();
    } else if (plotcode == 1) {
        var pValue = parseInt(localStorage.plot1);
        var opValue = 2 * pValue;
        var mval = 760;
        if (opValue >= mval) {
            var opValue = mval;
        }
        var k = (localStorage.plot1 = opValue - 10);
    } else if (plotcode == 2) {
        var pValue = parseInt(localStorage.plot2);
        var opValue = 2 * pValue;
        var mval = 760;
        if (opValue >= mval) {
            var opValue = mval;
        }
        var k = (localStorage.plot2 = opValue - 10);
    } else if (plotcode == 3) {
        var pValue = parseInt(localStorage.plot3);
        var opValue = 2 * pValue;
        var mval = 820;
        if (opValue >= mval) {
            var opValue = mval;
        }
        var k = (localStorage.plot3 = opValue - 20);
    } else {
        alert("Invalid Plot Code");
        KKPP();
    }

    alert("Rent of Plot " + plotcode + " is updated to " + k);
    addtoHistory("Plot " + plotcode, "Rent Updated to " + k);
}

This code is very long.

As you can see the code is repeating in this format

} else if (plotcode == 7) {
    var pValue = parseInt(localStorage.plot7);
    var opValue = 2 * pValue;
    var mval = 940;
    if (opValue >= mval) {
        var opValue = mval;
    }
    var k = (localStorage.plot7 = opValue - 40);

again and again

How can I put this inside a loop, or is there anything else that I can do to make this short?

`var` has function scope, hence there are 10 `var`s too much in your function. — Andreas, Aug 27 '21 at 08:41
You would benefit from storing your plots in an array and save in localStorage using JSON.stringify and retrieve using JSON.parse - this ONLY at the beginning and when changed — mplungjan, Aug 27 '21 at 08:42
@Andreas There are no `var`s "too much" in the code, just obsolete ones. Redeclaring a variable with `var` doesn't change the code's behaviour. — Oskar Grosser, Aug 27 '21 at 12:01
@mplungjan I have only started learning js, so can you explain how to do it , briefly? — Random Kindle, Aug 28 '21 at 00:42
@Random Kindle I suggest you this tutorial https://javascript.info/ — Totati, Aug 28 '21 at 10:25

Totati · Answer 1 · 2021-08-27T09:26:38.190

Hmmm, I suggest you to store the valid plotcodes and their data in an array. You need some hardcoded values.

conts PLOTCODE_DATAS = [{plotcode: 1, mval: 760, substrahend: 10 }, ...];

Now you can easily use find or a for loop.

With find

function updateCost(plotcode) {
    if (plotcode == "KKPP") {
        alert("Fully Invalid!!!");
        KKPP();
        return;
    } 
    const plotcodeData = PLOTCODE_DATAS.find(d => d.plotcode === plotcode);
    if(!plotcodeData) {
        alert("Invalid Plot Code");
        KKPP();    
    }
    const pValue = parseInt(localStorage["plot" + plotcode]);
    let opValue = 2 * pValue;
    if (opValue >= plotcodeData.mval) {
        opValue = plotcodeData.mval;
    }
    const k = (localStorage["plot" + plotcode]= opValue - plotcodeData.substrahend);

    alert("Rent of Plot " + plotcode + " is updated to " + k);
    addtoHistory("Plot " + plotcode, "Rent Updated to " + k);
}

With for loop

function updateCost(plotcode) {
    if (plotcode == "KKPP") {
        alert("Fully Invalid!!!");
        KKPP();
        return;
    }
    for(let plotcodeData of PLOTCODE_DATAS) {
        if(plotcodeData.plotcode === plotcode) {
            const pValue = parseInt(localStorage["plot" + plotcode]);
            let opValue = 2 * pValue;
            if (opValue >= plotcodeData.mval) {
                opValue = plotcodeData.mval;
            }
            const k = (localStorage["plot" + plotcode]= opValue - plotcodeData.substrahend);

            alert("Rent of Plot " + plotcode + " is updated to " + k);
            addtoHistory("Plot " + plotcode, "Rent Updated to " + k);
            return;
        }
    }
    alert("Invalid Plot Code");
    KKPP();  
}

Your data can look even like this:

With map

conts PLOTCODE_DATAS = new Map([[1, {mval: 760, substrahend: 10}], ...]);
...
const plotcodeData = PLOTCODE_DATAS.get(plotcode);

With unreadable minimaml

conts PLOTCODE_DATAS = [[1, 760, 10], ...]);
...
const plotcodeData =  PLOTCODE_DATAS.find(d => d[0] === plotcode);
// OR
for(let plotcodeData of PLOTCODE_DATAS) {
   if(plotcodeData[0] === plotcode) { ...

But I don't recommend thit one.

Oh I can store the values in an array, thanks. – Random Kindle Aug 28 '21 at 03:50 — Random Kindle, Aug 28 '21 at 03:50

score 1 · Accepted Answer · answered Aug 27 '21 at 08:39

1

Try it like this:

function cost(i, mval){
    var pValue = parseInt(localStorage["plot" + i]);
    var opValue = 2 * pValue;
    if (opValue >= mval) {
        var opValue = mval;
    }
    var k = (localStorage["plot" + i] = opValue - 20);
}

answered Aug 27 '21 at 08:39

Tobias S.

21,159
4
27
45

1

Add a "map" that "returns" the value for `mval` for a given `plotcode` (`i` in your example) and you don't need an additional `mval` parameter: `var plotcodeMap = { "1": 760, "2": 760, "3": 940 }; var mval = plotcodeMap[plotcode];` – Andreas Aug 27 '21 at 08:44

Javascript Loop which includes variables

2 Answers2