CODEWITHSUNDEEP
javascriptarrays
axchink
axchink

Reputation: 179

JavaScript: Writing multiple functions with Array method

I need help with writing multiple, repetitive functions into a one function that passes in variables instead of having to write it over and over again.

Currently, I have JavaScript functions that do the same thing, just with a different variable and strings. 

var Apple_Data = Info.Apple; // grabs string objects from JSON file
var Banana_Data = Info.Banana; // grabs string objects from JSON file
function CompareApple() {

                if (counter == 0) {
                    prev_Apple_Data = Apple_Data;

                }

                if (Apple_Data > prev_Apple_Data) {
                    if ((Math.abs(Apple_Data - prev_Apple_Data) >= prev_Apple_Data / 2))
                        document.getElementById("Apple_img").src = "img/yelow.png",
                    StartCnt(1);
                    else if ((Math.abs(Apple_Data - prev_Apple_Data) <= prev_Apple_Data / 2))
                        document.getElementById("Apple_img").src = "img/green.png";

                }

                else if (Apple_Data < prev_Apple_Data) {
                    if ((Math.abs(Apple_Data - prev_Apple_Data) >= prev_Apple_Data / 2))
                        document.getElementById("Apple_img").src = "img/yelow.png",
                    StartCnt(1);
                    else if ((Math.abs(Apple_Data - prev_Apple_Data) <= prev_Apple_Data / 2))
                        document.getElementById("Apple_img").src = "img/green.png";
                }

                prev_Apple_Data = Apple_Data;
}

function CompareBanana() {

                if (counter == 0) {
                    prev_Banana_Data = Banana_Data;

                }

                if (Banana_Data > prev_Banana_Data) {
                    if ((Math.abs(Banana_Data - prev_Banana_Data) >= prev_Banana_Data / 2))
                        document.getElementById("Banana_img").src = "img/yelow.png",
                    StartCnt(1);
                    else if ((Math.abs(Banana_Data - prev_Banana_Data) <= prev_Banana_Data / 2))
                        document.getElementById("Banana_img").src = "img/green.png";

                }

                else if (Banana_Data < prev_Banana_Data) {
                    if ((Math.abs(Banana_Data - prev_Banana_Data) >= prev_Banana_Data / 2))
                        document.getElementById("Banana_img").src = "img/yelow.png",
                    StartCnt(1);
                    else if ((Math.abs(Banana_Data - prev_Banana_Data) <= prev_Banana_Data / 2))
                        document.getElementById("Banana_img").src = "img/green.png";
                }

                prev_Banana_Data = Banana_Data;
}

If I want to write these in 1 function that passes in variables instead, how will I do it? I was thinking the process would be something such as, having to make 4 different empty arrays 

Var PreviousData = []; 
Var CurrentData = [];
Var DeclaredData = []; 
Var ImageArray = [];

and then write a function that passes in these arrays

function Compare(PreviousData, CurrentData, DeclaredData, ImageArray){ 
    if (counter ==0){
        PreviousData = DeclaredData; 
    }
    if (Declared_Data > PreviousData) {
                    if ((Math.abs(Declared_Data - PreviousData) >= PreviousData / 2))
                        document.getElementById("ImageArray").src = "img/yellow.png",
                    StartCnt(1);
                    else if ((Math.abs(Declared_Data - PreviousData) <= PreviousData / 2))
                        document.getElementById("ImageArray").src = "img/green.png";

                }

                else if (Declared_Data < PreviousData) {
                    if ((Math.abs(Declared_Data - PreviousData) >= PreviousData / 2))
                        document.getElementById("ImageArray").src = "img/yellow.png",
                    StartCnt(1);
                    else if ((Math.abs(Declared_Data - PreviousData) <= PreviousData / 2))
                        document.getElementById("ImageArray").src = "img/green.png";
                }
}

the counter and the Math.abs is written there to loop through objects and currently works.

and then initialize the function by something like

Compare(previousData, info.Apple, DeclaredData, ImageArray);

Upvotes: 1

Views: 333

Answers (2)

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

You can simplify your code to this:

var infoUpd = {
   'prev': false
};

for (key in Info) {
    infoUpd[ key ] = {
        'data': Info[ key ],
        'img': document.getElementById(key+"_img")
    }
}


function compareStuff( key ) {
        var stuffData = infoUpd[ key ];
    if ( infoUpd.prev ) {
        var calcResult = Math.abs(stuffData.data - infoUpd.prev) >= (infoUpd.prev / 2);
        if (stuffData.data !== infoUpd.prev) {
            if ( calcResult ) {
                stuffData.img.src = "img/yelow.png";
            } else {
                stuffData.img.src = "img/green.png";
            }
        }
    }
    infoUpd.prev = stuffData.data; 
}

compareStuff( 'Apple' );
compareStuff( 'Banana' );

Upvotes: 1

Murad Hasan
Murad Hasan

Reputation: 9583

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. You can use this properties to accomplish your complete work.
Lets have a look with different example:

function setBackgroundColor(element, color = 'rosybrown') {
  element.style.backgroundColor = color;
}

setBackgroundColor(someDiv);            // color set to 'rosybrown'
setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too
setBackgroundColor(someDiv, 'blue');    // color set to 'blue'

Here i use a function setBackgroundColor to style the background color of element. You can do it for your purpose.

For more details visit default_parameters

Upvotes: 1

Related Questions