ES5 vs ES6 Object Example

CSS

* {
  box-sizing: border-box;
  transition: all 0.2s;
  scroll-behavior: smooth;
}

JS

const temperatures = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};

// change code below this line
// ES5 Version
/*
const today = temperatures.today;
const tomorrow = temperatures.tomorrow;
*/

// ES6 Version
const { yesterday, today, tomorrow } = temperatures;

// you can also replace variable names this way, like this
const { yesterday: LastDay } = temperatures;

// now LastDay also has the same value as yesterday

// change code above this line

console.log(LastDay) // should be 75
console.log(yesterday) // should be 75
console.log(today); // should be 77
console.log(tomorrow); // should be 80

function run_function() {
  var my_result = "A Result";
  write_result("Today is " + today);
  return my_result;
}

// this is a common function just to write the content into the result div
function write_result(result) {
  var result_html = document.getElementById("result");
  result_html.innerHTML = result;
}

HTML

<div id='result' class='mb-3 alert alert-primary'>..</div>
<button onclick='run_function();' class='btn btn-primary mb-1'>Run Function</button>

Working Result

Test Result Below