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.

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 394 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.

❤👩‍💻🕹

Random Quote
You want to be the best, you MUST put the long yards in! Nothing comes easy in life so stop wishing and start DOING! So many people would rather bitch and moan than help themselves. Dont be one of those negative drainers, start today, make a small change and keep going forwards with this attitude!
Unknown