Simple Concepts about Types and Objects in JavaScript OOP

This free JavaScript tutorial helps you to understand and use simple types and objects in JavaScript OOP (Object Oriented Programming). It's small post and very easy to learn, please go to the full JavaScript article for details.


Sampled by © JavaScriptBank.com

When I first started working with Javascript, I was a little surprise to know that you've got two "basic" types in BLOCKED SCRIPT there are simple types and objects. Simple types are numbers, strings, bools, null and undefined. Everything else is an object.

Objects are associated with two interesting features in BLOCKED SCRIPT

  • unlike most OO languages, there really isn't the concept of a class in Javascript. It does support (probably a better word would be emulate?) many of the OO concepts you find in a OO language. For instance, inheritance relies on the prototype property (more about this in future posts). Using it well is a must if you want to write Javascript code;
  • they're "mutable" and can be seen as a container of properties defined by the pair name/value (they're similar in features to what you get when you work with hashtables in.NET). Property names must be string and their values can be any Javascript value (except undefined because this value is used for identifying inexistent properties).

So, if there isn't a class concept, how do you create new objects in Javascript? You've got two options here: you can create an object literal (which I tend to call anonymous object) or you can create a function that initializes the fields of an object. In this post, we'll concentrate on looking at the basic features associated with object usage and we'll only be using object literals.

An object literal is delimited by curly braces and contains 0 or more properties defined through name:value pairs. Take a look at the following snippet:

var user = {
    name: "Luis",
    address: "Funchal"
};

You'll see that many developers delimit the name of a property with " or '. You only need to do that if the name you're using isn't a valid Javascript identifier or if it is a reserved keyword. Accessing the value is really simple too. For starters, we can use the well-known . notation:

alert(user.name);

Or you can use the not so well known indexer syntax:

alert(user["name"]);

The . syntax is the most used approach and you'll only see the indexer property being used in advanced scenarios (ex.: when you don't know beforehand the name of the property) or when the name isn't a valid Javascript identifier. Notice that the indexer syntax allows several interesting scenarios. For instance, the following snippet enumerates the properties of the user object:

for (var propName in user) {
    alert(propName + ":" + user[propName]);
}

The specs don't mention anything about the order in which the fields are enumerated, so don't take any dependencies on that. Accessing an inexistent property returns undefined:

alert(user.something);//undefined 

However, setting an inexistent property results in adding that property to the object. So, if the previous line of code was preceded by the next, it would return a valid value:

user.something = { msg: "Howdy" };

Btw, notice that the something property references another anonymous object (or, if you prefer the Javascript jargon, literal object). You can also remove an existing property from an object. To do that, we need to use the delete keyword. Try the following snippet:

user.something = { msg: "Howdy" };
alert(user.something);
delete user.something;
alert(user.something);

Running it will show you two alert messages: the first shows the info object and the second returns the undefined message. What I'm saying next won't probably mean much now, but it's important to remember that delete will only remove a property from the object if it exists (it won't remove prototype properties!).

And I guess this wraps this post.  In the next post, we'll keep looking at objects and we'll talk about functions and their role in Javascript OO. Keep tuned!

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB


Top view articles
Top 10 Beautiful Christmas Countdown Timers
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com