JavaScript Classes

The newest way to encapsulate code in JavaScript (or just an alternate syntax for the way we already had)

	
		object.js

					🔒
			
	const todoObject = {

	todos: [],
	count: 0,

	add: function(content) {
		const todo = {
			id: this.count++,
			content: content,
		};
		this.todos.push(todo);
	},

	listTodos(todos) {
		this.todos.forEach( function(todo) {
			console.log(todo);
		});
	},

};

todoObject.add("Go for a run");
todoObject.add("Play tennis");
todoObject.listTodos();

		constructor.js

					🔒
			
	function TodoConstructor() {

	this.todos = [];
	this.count = 0;

	this.add = function(content) {
		const todo = {
			id: this.count++,
			content: content,
		};
		this.todos = [...this.todos, todo];
	};

	this.listTodos = function(todos) {
		this.todos.forEach( function(todo) {
			console.log(todo);
		});
	};
}

var todoConstructor = new TodoConstructor()

todoConstructor.add("Go for a run");
todoConstructor.add("Play tennis");
todoConstructor.listTodos();

		class.js

					🔒
			
	class TodoClass {

	constructor() {
		this.todos = [];
		this.count = 0;
	}

	add(content) {
		const todo = {
			id: this.count++,
			content: content,
		};
		this.todos = [...this.todos, todo];
	}
	
	listTodos(todos) {
		this.todos.forEach( function(todo) {
			console.log(todo);
		});
	}
}

var todoClass = new TodoClass()

todoClass.add("Go for a run");
todoClass.add("Play tennis");
todoClass.listTodos();

Deliverables

Fulling working 'todo' app using classes (working form) (rendering todos) (add, remove, and toggle complete)

Comparison

See the Pen Comparison by perpetual.education (@perpetual-education) on CodePen.

You can use this to add a few features to each and see how the syntax differs.