In this sample from W3 School Array Sort, the function displayCars seems to be called 2 times. It's called before the first function and inside the first function. Could someone explain the reasoning behind this? I'm having trouble understanding why. Thanks in advance.

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

displayCars();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

<div id="demo"></div>

In this sample from W3 School Array Sort, the function displayCars seems to be called 2 times. It's called before the first function and inside the first function. Could someone explain the reasoning behind this? I'm having trouble understanding why. Thanks in advance.

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

displayCars();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

<div id="demo"></div>

• javascript
• arrays
• sorting

Share Improve this question Follow edited Feb 8, 2018 at 15:08 Zenoo 12.9k44 gold badges4646 silver badges7070 bronze badges asked Feb 8, 2018 at 15:06 frootloopsfrootloops 29111 gold badge88 silver badges2121 bronze badges 9

• 1 It only runs once. – Zenoo Commented Feb 8, 2018 at 15:08
• Works fine for me... "Volvo 2016<br>Saab 2001<br>BMW 2010" – M. Gara Commented Feb 8, 2018 at 15:09
• 4 They probably want to display the list unsorted when the page loads, and then when someone wants to sort, they sort and display the list again. – Frank Modica Commented Feb 8, 2018 at 15:09
• 1 I guess you call myFunction() somewhere else in the code. – RaV Commented Feb 8, 2018 at 15:09
• 1 @L_Church Perhaps. But, since the title of the question asks why it runs twice, that's what we are answering. – Scott Marcus Commented Feb 8, 2018 at 15:17

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 6

It's actually only being called once because the second call for displayCars() is inside of myFunction, which is never being called.

Change the code to call myFunction and stay away from W3 Schools as it is well known to have incorrect and outdated information. Use the Mozilla Developer Network instead.

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

myFunction();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

<div id="demo"></div>

I is caalled twice to show the result before sorting and after sorting.

You need to add the call of myFunction as well.

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML +=
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year + '<hr>';
}

var cars = [{ type: "Volvo", year: 2016 }, { type: "Saab", year: 2001 }, { type: "BMW", year: 2010 }];

displayCars(); // show content

myFunction();  // sort and show content

<div id="demo"></div>

The function is not called twice in your snippet. I'm assuming there's more code we haven't seen, which calls myFunction; the purpose of calling the function twice would then be to show the effect of the sorting function. Assuming myFunction is called after the display function, the program would do the following:

• Display the cars in the (unsorted) order they start in
• Run myFunction which sorts the cars then displays them again

This would allow the user to see the difference between the car list before and after it's sorted.

It is called once, but why is it mentioned twice in the code is for you to see the results as they are and after they've been sorted.

It is run only once. You are not call myFunction() function. If you call it the array will sort. Try this one.

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}]

myFunction();

function myFunction() {
    cars.sort(function(a, b){return a.year - b.year});
    displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}

myFunction() will sort array. displayCars() will show array.