Learn how to quickly and easily create your first Object Literal, and give it properties and methods
There seems to be a bit of mystery surrounding the subject of JavaScript Object Literals. It is actually a simple concept and it’s easy to get started. There is a great deal of depth to the subject, but creating your first JavaScript Object Literal does not need to be complicated.
The simplest way to create an object literal is to assign an empty object to a variable. For example: var foo = {}; That is it. In that one line, you have created an object literal.
Now, that object is empty. Objects have two kinds of “things”: properties and methods. A property can be any valid JavaScript type (i.e. string, number, boolean, function, array, etc.). A method is essentially a property of the object to which you have assigned an anonymous function. So the property is now equal to a function. It is still a property of the object, but because it “does” something, we now call it a “method”.
Example # 1
|
1 2 3 4 5 |
var foo = {}; foo.drink = 'beer'; console.dir(foo); //drink -> ‘beer’ |
Here is the JSFiddle Link for Example # 1: http://jsfiddle.net/jzrDw/
In Example # 1, we create a new Object Literal by assigning an empty object to the variable “foo”. Next, we give foo a property named “drink” and assign a value of “beer” to it. In this case the value of “drink” is a string (“beer”), but it could easily have been a number (i.e. foo.drink = 5) or a boolean (foo.drink = true) or any valid JavaScript type.
Example # 2
|
1 2 3 4 5 6 7 8 9 |
var foo = {}; foo.drink = 'beer'; foo.say = function(){ console.log("hello world!"); }; console.dir(foo); |
In Example # 2, we have added a second property to foo. This property, “say” has an anonymous function assigned to it, so now we call it a “method”. That method: foo.say does not do too much; it just outputs “hello world!” to the console. But nonetheless, it is a method of foo.
Here is the JSFiddle Link for Example # 2: http://jsfiddle.net/PWHM5/
Here is an important note: In the first two examples, technically, we created an object literal by assigning an empty object to the variable “foo”. Then we added a property and a method using dot notation (i.e. foo.property = value). But true “Object Literal” syntax involves creating the object properties as you create the object.
Example # 3
|
1 2 3 4 5 6 7 8 9 10 |
var foo = { drink: 'beer', say: function(){ console.log("hello world!"); } }; console.dir(foo); |
In Example # 3, we use Object Literal Notation. In the end, we have the same result as the previous example, but we achieve it using true Object Literal Notation. The difference is that in the previous example, we created an empty object, and then added properties to it. In Example # 3, we created those properties as we created the object itself.
Here is the JSFiddle Link for Example # 3: http://jsfiddle.net/sGY7E/
Summary
There is plenty more to talk about here. For example, there is the subject of “context” in Object Literals. But this post is about getting started, and to show that creating a JavaScript Object Literal is no mystery. What you do with that object is up to you. But you can be sure that objects in JavaScript are important features of the language, as they allow you to write more powerful and expressive code.
A Video Tutorial About JavaScript Object Literals
Helpful Links for JavaScript Object Literals
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects
http://blog.kevinchisholm.com/javascript/difference-between-object-literal-and-instance-object/
[…] order to create an Object Literal, you assign a variable to an object. The syntax is as simple as var foo = {}. A constructor […]
[…] order to create an Object Literal, you assign a variable to an object. As a matter of fact, the syntax is as simple as var foo = {}. […]