Advanced JavaScript: Play With Object in JavaScript

Sourav Kayal
11y
6.2k
0
0

Article

This is the second presentation of the Advanced JavaScript article series. As the name indicates, this series provides somewhat deeper concepts of JavaScript. The previous article provided the history of JavaScript and the importance of JavaScript in modern web applications. You can read it here.

Advance JavaScript

In this article we will understand the concept of objects in JavaScript. The first concept is that JavaScript is an interpreted language and executes in the user's browser. In each and every browser (that is compatible with JavaScript) the parser is available and it's executing the code. If there is any confusion in that, I suggest you run the Date() function in JavaScript and it will always show the system date, even if it is wrong.

Objects in JavaScript

Nearly everything in JavaScript is an object. Even primitive datatypes (except null and undefined) can be treated as an object. Here are some examples:

Dates are objects in JavaScript
Arrays and strings are always objects
Math and regular expressions are always objects
The most interesting fact is that, functions are also objects in JavaScript

Ok, so the concept is that everything (almost) in JavaScript is an object or at least they behave like an object. We all now have the concept of objects in Object Oriented Programming. They have properties and methods. The syntax to access a property of an object is:

objectName.propertyName

String is an object

Let's create a simple object. As we have explained earlier, a string is also an object in JavaScript. We will use one example of a string.

function TestScript() {

var val = "JavaScript";

alert("Length of String is:- " + val.length);

}

</script>

</head>

<div>

</div>

</form>

</body>

</html>

In this example we are declaring a string (that is an object) and accessing the length property of the string object. It shows the number of characters in a string.

String Example
Few more objects in JavaScript

Here is a few more examples of JavaScript. As we said, in JavaScript, Date, Array and Math are all objects.

function TestScript() {

//Create Date Object

var date = new Date();

//Create Array Object

var array = new Array("Sourav", "Kayal");

//Math object has random() function

var data = Math.random();

}

</script>

Create object and set property on the fly

In this example we will create an object on the fly and we will set few properties on that. This object creation is very similar to object creation in high-level programming languages. The difference is that it does not require a class definition.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>

<!DOCTYPE html>

function TestScript() {

var author = new Object();

author.name = "Sourav Kayal";

author.interest = "JavaScript";

author.publisher = "cshrpcorner.com";

alert("Name :- " + author.name + "Interest:- " + author.interest + "Publisher:- " + author.publisher);

}

</script>

</head>

<div>

</div>

</form>

</body>

</html>

Here is sample output.

Create Object

Set property of object using constrictor

In the example above we saw that, to create an object on the fly, if we want to set a property of the object when it's created then we need to implement a constructor. Try to understand the following example.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>

<!DOCTYPE html>

function person(name, surname) {

this.name = name;

this.surname = surname;

}

function TestScript() {

var p = new person("Sourav", "Kayal");

alert("Name:- " + p.name + " Surname:- " + p.surname);

}

</script>

</head>

<div>

</div>

</form>

</body>

</html>

Here the person function behaves like a constructor and it takes the name and surname as an argument. We can even implement constructor overloading in this context. We are using the "this" operator to identify the current object. This is the output.

property of Object
Function is an object

As we said earlier, even a function in JavaScript is an object and it's called a function object. The following function definition is very similar with a function definition in the C family of languages.

function Addition(num1, num2) {

this.num1 = num1;

this.num2 = num2;

alert(num1 + num2);

}

function TestScript() {

var value = new Addition(10, 20);

}

</script>

</head>

<div>

</div>

</form>

</body>

</html>

Here is output.

Function object

Another style to define a function.

This is another style to define a function and the result is absolutely the same in both (the above style and this style).

var Addition = function (num1, num2) {

this.num1 = num1;

this.num2 = num2;

alert(eval(num1) + eval(num2));

}

function TestScript() {

var value = new Addition(10, 20);

}

</script>

What the difference is

An obvious question in people's minds is, what is the difference between the two syntaxes? Let's try to understand them.

function hello() {

}

var hello = function () {

}

The first one is a regularly named function and the second one is a normal variable declaration with an anonymous function attached to it. Since this article is all about objects, we will not delve deeper into this topic. I am planning to present one dedicated article on this with a detailed explanation including an example.

Property of object is also an object

Let's see how to attach a function object to the property of another object. Here person is one object and in the next line we are assigning an anonymous function to the name property of the person object. Hence the name property of the person object is behaving as a function object.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>

<!DOCTYPE html>

var person = {};

person.name = function (name1) {

alert("I am " + name1);

}

function TestScript() {

person.name("sourav kayal");

}

</script>

</head>

<div>

</div>

</form>

</body>

</html>

Here is the output of the code above.

Property of object

Conclusion

In this article we have understood the concept of objects in JavaScript. Hope you have understood them. In a future series we will explain various interesting topics of JavaScript.