ES5 vs ES6 Object Example

here you can see the syntax changes between ES5 vs ES6 Object declaration, you can still access the values in the same way.

Demo

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

..

External Link for ES5 vs ES6 Object Example

Other Items in javascript
Page Views

This page has been viewed 159 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹