Creating JavaScript Objects by Literal Notation

Introduction
The aim of this article is to quickly make you understand the meaning of Program
Objects (OOP) and how to create them in JavaScript. I assume in this article that you
know the meaning of variables and functions in JavaScript, but you might not have
understood JavaScript objects. There are three ways of creating JavaScript objects and in
this article I show you the one that is indicated by the title (of this article). Let us start.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Variables, Functions and Objects in JavaScript
Let us look at two variables and a function. The two variables hold two numbers. The
function adds the two numbers. These are the two variables and the function:

var num1 = 5;
var num2 = 8;
function add ()
{
answer = num1 + num2;
return answer;
}

var result = add();
alert(result);

As you can see in the code, there are two variables. The function adds the values of the
two variables, and returns the answer. Lower down in the code, the function is called, and
the return value is assigned to a new variable, result. The last statement displays the
result.

Now in programming (in a program code) you would find some functions that work with
certain variables, such that if you remove one of the variables, the rest of the variables
and the functions will not be very useful; if you remove one of the functions, the rest of
the functions and the variables will not be very useful. In other words, the variables and
functions in question form a set. The above group of statements is such a set. Would it
not be nice if we had such a set in one unit? In fact, many modern programs have such
sets in one unit, called an object. Many modern computer languages have each, its own
syntax for creating an object. JavaScript has three ways of doing this and in this article
we learn one of the ways.

Properties and Methods
A programming object fundamentally has what is called properties and methods. This is
not a big deal. In the above script we have one function, which works with two variables.
If we are to make this “set”, an object, then the variables would become the properties
and the function would become the method. You can have more than one method in an
object, just as you can have more than one property. As you can see it is not a big deal,
all you have to do is to know the syntax that will make the variables, properties and the
functions, methods.

The Literal Notation
A variable declaration begins with an optional, “var” reserved word, and then followed
by the name of the variable. An object name is a variable name. Assume that you want to
give the name, myObject to an object. You can declare the object as,

var myObject

To any declaration, you can assign a literal. You can assign a string (in quotes for
example); a string in quotes is a literal. You can also assign a set of statements enclosed
by a pair of curly braces. This pair of curly braces and their enclosed statements form a
literal object. Basically, the statements consist of properties, which are like variables and
methods, which are like functions. There is the use of the reserved word, “this”. “this”
used within the curly braces refers to the object (having the statements). It is a substitute
for the name of the object. We now look at an example.

Example of an object with the Literal Notation
The following script has the code of an object with literal notation (see explanation
below):

myObject = {
numA:5,
numB:8,
add:function ()
{
answer = this.numA + this.numB;
return answer;
}
};

result = myObject.add();
alert(result);

The first script statement is the object. You have the name of the object, followed by the
assignment operator. After that you have the curly braces with its statements. Note that at
the end of the curly braces, you have a semi colon (you do not have this semi colon after
the closing brace in other situations).

Let us turn our attention now to what is inside the curly braces. Inside the curly braces,
you have two properties and one method. The properties and methods in the curly braces
are separated by commas. These properties and methods are like statements in the object
literal but they are separated by commas and not semicolons.

Facebook
Twitter
Pinterest