Started with ES2015, need some real example

JavaScript
1

Hello.

I took a look at the ES2015 specs, and I didn’t find any real example that I could learn something from it.

I have this example in ES5 way https://jsfiddle.net/8megmudL/ , could anyone help me and convert it to ES2015, and explain it a bit :slight_smile:

I’m not student and this is not mine homework, just want to learn something new :slight_smile:

Thank you :slight_smile:

BTW if you have some simple real ES2015 app examples please send it :slight_smile:

2

“Converting” would probably be a bit misleading since ES5 code is always valid ES6 code as well… however a few minor ES6-specific improvements would be possible I think. :-)

(function() {	

  // Within this function, `obj` and `target` aren't supposed
  // to be reassigned, so you might declare them as constants
  // to ensure this (and make it immediately clear to the reader)
  const obj = breakFastMenu.food;

  // Not ES6, but much shorter anyway... ^^
  const target = document.body;

  // You can iterate over the elements of an array (or any iterable,
  // for that matter) with `for ... of` now; `item` as declared with `let` 
  // will only be available within the scope of that loop
  for (let item of obj) {
  	
    // The destructuring assignment is just a very nice shorthand :-)
    var {name, price, description, calories} = item;

    target.innerHTML += '<p>' + name + '</p>';
    target.innerHTML += '<p>' + price + '</p>';
    target.innerHTML += '<p>' + description + '</p>';
    target.innerHTML += '<p>' + calories + '</p>';
  }
})();
2 Likes
3

Thanks @m3g4p0p, I decided to continue to play with ES2015, and I like it :slight_smile: It’s seems like a bit OOP

'use strict';

class Car {

	constructor(brand,model,year) {
		this.brand = brand;
		this.model = model;
		this.year = year;
	}

	toString() {
		return `
			<h2>${this.brand}</h2>
			<p>This is ${this.model} from ${this.year} year.</p>
		`;
	}

	print() {
		const wrapper = document.getElementById('wrapper');
		wrapper.innerHTML += this.toString();
	}
}

const bmw = new Car('BMW', 'e46', 2005);

bmw.print();

Very basic example, but I like ES2015 way :slight_smile:

4

I like most of what ES2015 brings, but why do I feel that classes are a backwards step?

1 Like
5

I don’t have a lot of experience with JS, but I like classes, it’s just syntatic sugar :slight_smile:

6

Possibly because people coming from a classical OOP background will use them and never even realise that all the other ways of creating classes in a prototyping OOP language like JavaScript even exist.

7

Although I do expect expert JavaScript developers to understand how object creation and inheritance works, I think that most of the time, we don’t actually need to know or care. I especially came to this realization when using Python, and I discovered that Python’s class and inheritance mechanism works almost exactly the same as JavaScript’s. Python “classes” are runtime objects that you can monkey patch, and inheritance also happens at runtime by delegation. Except the Python community doesn’t make a big fuss about it, nor did that knowledge change how I wrote and organized the program, because the truth is the vast majority of the time we don’t need to know or care how the class and inheritance mechanism works under the hood. We only need to know the abstract behavior is provides.

8

though there are more than subtle differences between objects created via object literal / Object.create() and instantiation by new.

1 Like
9

What do you find are the more interesting differences between them?

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.