JavaScript: Writing multiple functions with Array method

Question

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);

Nikolay Ermakov · Accepted Answer · 2016-02-15 02:57:19Z

1

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' );

edited Feb 15, 2016 at 2:57

answered Feb 14, 2016 at 4:44

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

axchink Over a year ago

This may be a silly question but, on the function compareStuff(stuffData), you're passing in the "stuffData" as a varible ? Where do you declare this? Also, when the Apple_Data is declared as var Apple_Data, where do you put this inside the function of function compareStuff?

Nikolay Ermakov Over a year ago

Yes, as a variable. I declare Apple_Data at the top of the script with var Apple_Data. Then at the bottom I call compareStuff function passing Apple_Data to it. In the scope of compareStuff function I refer to whatever is passed to this function as stuffData. You can change it to whatever you like, you don't need to keep same name, if you pass something to a function explicitly, as argument. But if you refer to something, that lives outside that function, you will refer to it by the exact name, like I do with e.g. imgSrc property of the passed object.

axchink Over a year ago

I must be doing something wrong, when I print these out by using document.getElementById("compareStuff").innerHTML = Apple_Data, it is only printing out [object] ...

Nikolay Ermakov Over a year ago

Change it to document.getElementById("compareStuff").innerHTML = Apple_Data.data

axchink Over a year ago

Perfect. Thank you very much. May I please ask , when you declared the variables, why is prev:false, necessary ?

|

Murad Hasan · Accepted Answer · 2016-02-14 03:19:43Z

1

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

answered Feb 14, 2016 at 3:19

Murad Hasan

9,5932 gold badges23 silver badges43 bronze badges

3 Comments

Nikolay Ermakov Over a year ago

Can you please clarify what browsers currently support this functionality?

Murad Hasan Over a year ago

@NikolayErmakov, from where the "browsers currently support this functionality?" comes??, its just an example how axchink can do this job.

Nikolay Ermakov Over a year ago

I afraid what the functionality you suggest can hardly help him do his job due to a very limited browser support at this time. You will notice that if you scroll the page you linked to the bottom. Or can he do this outside a browser?

Collectives™ on Stack Overflow

JavaScript: Writing multiple functions with Array method

2 Answers 2

15 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related