This version is going to be about objects. Objects can be thought of properties/details about something. For example, your laptop/computer might have an operating system, purchase year and screen size and these can be listed as below -
1
2
3
operatingSystem Mac
purchaseYear 2011
screenSize 15 inches
This example itself can be translated into JavaScript code like so -
[translated object]
1
2
3
4
5
{
operatingSystem: 'Mac',
screenSize: '15 inches',
purchaseYear: 2011
}
Note that 2011 is a number and hence can be left as such. We can assign this object to a variable.
You use an object when you basically want to group some related data. When to use an array and an object? Check out this question.
Objects and functions
Sometimes, we want the properties of the object to handle something slightly more complicated. The easiest way is by turning to functions. You can place a function in an object. Let’s consider the following object -
[functions inside objects]
1
2
3
4
5
6
7
8
var gordon = {
name: 'Gordon',
sayName: function() {
console.log(this);
}
}
console.log(gordon.sayName());
[result]
1
> { name: 'Gordon', sayName: [Function] }
Note that we don’t give a name to this function inside an object because we can call it by the name of the property. Also, an important concept here is the this keyword. The this keyword is used by an object to refer itself. However, using just this in the console.log() prints out the entire object, which is not what we want. So let’s change it to display just a name.
[refining this keyword based log]
1
2
3
4
5
6
7
8
var gordon = {
name: 'Gordon',
sayName: function() {
console.log(this.name);
}
}
console.log(gordon.sayName());
[result]
1
> Gordon
This new console.log statement prints just the name. Now, for some terminologies. The kind of function written here, inside an object, is called a method and since it has no name, it is called an anonymous function. We call the anonymous function by its property.
Requirements
All the requirements for version 3 are built around objects
[ ] It should store the todos array in an object
[ ] It should have a displayTodos method
[ ] It should have a addTodo method
[ ] It should have a changeTodo method
[ ] It should have a deleteTodo method
Storing TODOs array in an object
Let’s recreate what we did in the previous steps but try to use objects this time.
[storing the todos]
1
2
3
4
5
var todoList = {
todos: ['item 1', 'item 2', 'item 3']
};
console.log(todoList);
[result]
1
> { todos: [ 'item 1', 'item 2', 'item 3' ] }
That’s it for storing todos. The important thing to remember here is that there is no semicolon (;) after the property is defined inside an object.
Updated requirements
[X] It should store the todos array in an object
[ ] It should have a displayTodos method
[ ] It should have a addTodo method
[ ] It should have a changeTodo method
[ ] It should have a deleteTodo method
Displaying TODOs with an object
If you remember from our previous attempt, we tried to display the todo items with the help of a function. Here, we try to create a function within this new object based on the example discussed previously.
We are going to create an anonymous function for this new object based on our previous function.
[creating an anonymous function to change todos based on position]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var todoList = {
todos: ['item 1', 'item 2', 'item 3'],
displayTodos: function() {
console.log('My Todos: ', this.todos);
},
addTodo: function(todo) {
this.todos.push(todo);
this.displayTodos();
},
changeTodo: function(position, newValue) {
this.todos[position] = newValue;
this.displayTodos();
}
};
console.log(todoList.changeTodo(0, 'first'));
[result]
1
> My Todos: [ 'first', 'item 2', 'item 3' ]
Updated requirements
[X] It should store the todos array in an object
[X] It should have a displayTodos method
[X] It should have a addTodo method
[X] It should have a changeTodo method
[ ] It should have a deleteTodo method
Deleting a TODO with an object
Hopefully, you are starting to see a pattern here. Let’s continue that by using our deleteTodo function.
[creating an anonymous function to delete a todo]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var todoList = {
todos: ['item 1', 'item 2', 'item 3'],
displayTodos: function() {
console.log('My Todos: ', this.todos);
},
addTodo: function(todo) {
this.todos.push(todo);
this.displayTodos();
},
changeTodo: function(position, newValue) {
this.todos[position] = newValue;
this.displayTodos();
},
deleteTodo: function(position) {
this.todos.splice(position, 1);
this.displayTodos();
}
};
console.log(todoList.deleteTodo(1));
[result]
1
> My Todos: [ 'item 1', 'item 3' ]
Updated requirements
[X] It should store the todos array in an object
[X] It should have a displayTodos method
[X] It should have a addTodo method
[X] It should have a changeTodo method
[X] It should have a deleteTodo method
Version 3 conclusions
We have met all the requirements and although the code is small, having everything in an object is useful for organization. The key takeaway from this version is the this keyword. The final version of this code can be found in version03.js