What is the best way to generate a random temperature value for every day of a month using an array with 30 date/day items?

Question

What is the best way to generate a random temperature value for every day of a month using an array with 30 date/day items?

In a hypothetical scenario where there are 30 days in a month, temperatures ranging randomly between 7 and 16°C are assigned to each day. Below is the code snippet used:

let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24, 25, 26, 27, 28, 29, 30
]

let temperature = Math.floor(Math.random() * (16 - 7 + 1)) + 7;

for (let i = 0; i < arrMont.length; ++i) {
    arrMonth[i] = temperature;
    console.log(arrMonth[i]);
}

The issue reported is that only the temperature for the last day is displayed. Can you spot the mistake I made?

Output on the console:

30: 11

javascript arrays random mapping assign

Answer 1

Answer №1

An easy enhancement to your existing code is to convert your variable into an arrow function, like this:

const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);

By doing this, every time you call 'temperature()', you'll receive a fresh value.

let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
]

const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);


for (let i = 0; i < arrMonth.length; ++i) {
    arrMonth[i] = temperature()
    console.log(arrMonth[i])
}

Answer 2

An easy enhancement to your existing code is to convert your variable into an arrow function, like this:

const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);

By doing this, every time you call 'temperature()', you'll receive a fresh value.

let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
]

const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);


for (let i = 0; i < arrMonth.length; ++i) {
    arrMonth[i] = temperature()
    console.log(arrMonth[i])
}

Answer 3

Answer №2

We are looking at a request from the original poster that involves a task related to mapping in JavaScript.

However, since the original poster also desires to display dates and days with precision, it is recommended to follow a separation of concerns approach, where each task is handled by a distinct function.

This allows flexibility for the original poster to experiment with various tasks and customize them according to their requirements...

function getRandomValueFromTemperatureRange() {
  // generates random values between 7 and 16 (inclusive).
  return (Math.floor(Math.random() * 10) + 7);
}

function createTemperedDateItem(date) {
  return {
    date,
    temperature: getRandomValueFromTemperatureRange(),
  };
}
function renderTemperedDateItems(dateList) {
  const listRootNode = document.createElement('dl');

  dateList.forEach(dateItem => {
    const { date, temperature } = dateItem;

    const dateNode = document.createElement('dt');
    const temperatureNode = document.createElement('dd');

    dateNode.title = 'Date within Month';
    temperatureNode.title = 'Temperature in °C';

    dateNode.textContent = date;
    temperatureNode.textContent = temperature;

    listRootNode.appendChild(dateNode);
    listRootNode.appendChild(temperatureNode);
  });
  document.body.appendChild(listRootNode);
}

const arrMonth = Array.from(
  { length: 30},
  (elm, idx) => (idx + 1)
);
console.log({
  arrMonth,
  temperedDateList: arrMonth.map(createTemperedDateItem),
});

renderTemperedDateItems(
  arrMonth.map(createTemperedDateItem)
);

dl { margin: 0!important; }
dl::after { clear: both; display: block; content: ''; }
dt { float: left; }
dd::after { display: inline; content: ' °C'; }

body { margin: 0 0 100px 0!important; }
.as-console-wrapper { max-height: 100px!important; }

Answer 4

We are looking at a request from the original poster that involves a task related to mapping in JavaScript.

However, since the original poster also desires to display dates and days with precision, it is recommended to follow a separation of concerns approach, where each task is handled by a distinct function.

This allows flexibility for the original poster to experiment with various tasks and customize them according to their requirements...

function getRandomValueFromTemperatureRange() {
  // generates random values between 7 and 16 (inclusive).
  return (Math.floor(Math.random() * 10) + 7);
}

function createTemperedDateItem(date) {
  return {
    date,
    temperature: getRandomValueFromTemperatureRange(),
  };
}
function renderTemperedDateItems(dateList) {
  const listRootNode = document.createElement('dl');

  dateList.forEach(dateItem => {
    const { date, temperature } = dateItem;

    const dateNode = document.createElement('dt');
    const temperatureNode = document.createElement('dd');

    dateNode.title = 'Date within Month';
    temperatureNode.title = 'Temperature in °C';

    dateNode.textContent = date;
    temperatureNode.textContent = temperature;

    listRootNode.appendChild(dateNode);
    listRootNode.appendChild(temperatureNode);
  });
  document.body.appendChild(listRootNode);
}

const arrMonth = Array.from(
  { length: 30},
  (elm, idx) => (idx + 1)
);
console.log({
  arrMonth,
  temperedDateList: arrMonth.map(createTemperedDateItem),
});

renderTemperedDateItems(
  arrMonth.map(createTemperedDateItem)
);

dl { margin: 0!important; }
dl::after { clear: both; display: block; content: ''; }
dt { float: left; }
dd::after { display: inline; content: ' °C'; }

body { margin: 0 0 100px 0!important; }
.as-console-wrapper { max-height: 100px!important; }

What is the best way to generate a random temperature value for every day of a month using an array with 30 date/day items?

Answer №1

Answer №2

Similar questions

In my Node.js application using Express and Passport, I encountered an issue where res.locals.users is functioning properly but the data it

Substituting terms using their position indices

The JQuery script has not been initialized, causing the function to not activate

JavaScript has been used to modify a cell's URL in jqGrid

How can one determine if a DOM element has been generated dynamically?

What sets apart accessing an array using a pointer from accessing a regular variable through a pointer?

The ins and outs of function returns and callback mechanisms

Using a Svelte click event to toggle a boolean value in an array from a div

In search of a React.js/Redux OpenID library or example, particularly focused on Steam OpenID integration

Error with Laravel and Vue template integration

What is the best way to access an item within an item using HTML and AngularJS?

How can I use Ajax to populate a div with data from a php script?

Tips on how to make the cursor blink in an input text box after tab switching

Iterate through the classes for updates rather than focusing on individual id fields

JXBrowser comparable

Retrieve a dynamic value from an object

When using the Google Maps API fetch() method, the response is empty. However, when accessing the same

What is the best way to convert a char array in order to compare it with an unsigned char array?

Explicitly linking controllers with Angular scope objects

In case of an API error with the Nuxt fetch method, ensure that the entire site responds with a 404