Understanding objects

In JavaScript objects, the arrays and even functions we create fall into the same data type: Object. Declaring an object is a fairly straightforward process:

var myObject = {};    // that's it! 

You may add properties or attributes to this object, which may belong to any type. It means you can add arrays, functions, or even other objects as properties of this object. Adding a new property to this object can be done in any of the two ways shown here:

var person = {}; 
person.firstName = 'Jason';    // via dot operator 
person['lastName'] = 'Krol';   // via square brackets 

Let's look at an example where we add arrays and functions as properties of this object:

var person = {}; 
person.firstName = 'Jason';    // properties 
person.lastName = 'Krol'; 
person.fullName = function() {  // methods 
  return this.firstName + ' ' + this.lastName; 
}; 
person.colors = ['red', 'blue', 'green'];  // array property 

You can see in the preceding code that we defined a basic object called person and assigned it some properties and a function. It's important to note that the use of the this keyword in the fullName function. The this keyword refers to the object that the function is a part of. So via the this keyword, the function will be able to access the other properties that are part of the object it belongs to.

Apart from the approach of adding properties after the object creation, we can also attach the initial object properties as part of its creation, as follows:

// define properties during declaration 
var book = { 
  title: 'Web Development with MongoDB and NodeJS', 
  author: 'Jason Krol', 
  publisher: 'Packt Publishing' 
}; 
console.log(book.title); 
// => Web Development with MongoDB and NodeJS 
book.pageCount = 150;    // add new properties 

In the preceding example, we are creating objects without specifying any class from which they should be created by using {}. So, this results in the creation of this new object from the Object base class from which other composite types such as arrays and functions are extended. So, when you use {}, it is equivalent to a new Object().

Here, the objects we create via the use of the object literal {} are instances of the Object class. To define custom classes for our application, we will need to use functions and prototypes. Mozilla has a fairly good tutorial on introducing this whole point, available at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript. The es6 has enhanced the object properties by adding various features as:
First and foremost of all is property shorthand. Now with es6 we can assign property using a variable. Lets understand this using the following example:
let publisher = 'Packt Publishing';
let book = { publisher };
console.log(book.publisher);

In the preceding snippet, the variable value is implicitly assigned to object property and there is no need to have a property specified while declaring an object.

The next amazing feature is computation of property key in object literals. To learn this feature, let's add a property to the preceding object called book.

let edition = 3;
let book = {publisher,[ `Whats new in ${edition} ? `] : "es6 and other improvisation"}
The es6 introduces us to one of the most awaited feature called the template literals. You may have noticed a kind of interpolation operation used in preceding snippets with placeholder ${}. It is nothing but a concatenation of variable in string without using any operator, such as +. The template literal enhances the feature of readability in JavaScript which is quite essential. For more information follow the link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals.

Once we run the preceding code, we note that es6 enables us to perform any computation for property names using a square bracket. Lastly, we can follow an elegant feature of the method notation in the object property for all functions. This can be seen in the following example:

 

var person = { 
        firstName : 'Jason', 
        lastName : 'Krol', // properties 
       fullName() {  // method notation 
                      return this.firstName + ' ' + this.lastName; 
} 
}; 

Always remember that objects are nothing but an address of a memory location and not actual storage. For instance, firstName: 'Jason' is stored in memory location with address person.firstName. Until now, we have learned about a single point of storage called as variables, moving further let's learn multiple point of storage.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.122.11