Just JavaScript - The Object Expression
Written by Ian Elliot   
Thursday, 12 June 2014
Article Index
Just JavaScript - The Object Expression
String Values
Comparison Operators
Functions In Expressions

As in most programming languages the expression is an important part of JavaScript, but it isn't quite the same. This is where the idea that JavaScript has some weird type conversions arises. But JavaScript isn't too fussy about type and it doesn't really do conversions. 

Just JavaScript 
A Radical Look At JavaScript

  1. In The Beginning Was The Object
  2. The Function Object
  3. How Functions Become Methods
  4. The Object Expression

JustJavaScripticon

 

 

 

Expressions form a mini-computer language inside most computer languages. The good news is that the way that they work is more or less the same in all languages. The symbols used for the operators change, the priorities change, and occasionally there are some additional operators. 

An expression is essentially a generalization of the way arithmetic works. For standard arithmetic we only have four operators +, -, * and / standing in for the usual symbols for add, subtract, multiply and divide. These are all binary operators and take a value on the left and one on the right, the operands, and combine the two values to give a new value.  

Object expressions

In programming languages, and in JavaScript in particular, there are generally a lot more operators than four, but they work in the same way taking two values and producing a new value. 

In JavaScript you can think of a binary operator as taking two objects and producing a new object. 

In many cases this distinction isn't important, but thinking in this way does make it easier to understand what is going on. 

For example, take a careful look at:

var a=new Number(2);
a.myProperty="Hello World";
alert(a.myProperty);
a=a+1;
alert(a);
alert(a.myProperty);

What do you expect to see? 

First we create a Number object with value 2 and a custom property myProperty. When you display the property it shows "Hello World" as you would expect. Next we add one to a and display its value, which is 3 as you would expect, but now the property is "undefined". 

All we did was add one to a, surely this can't have modified the property? 

It not only modified the property, it created a new object. When you add two Number objects together the result is a new Number object.

You can make this clearer by writing:

a=a+new Number(1);

and you will see that now the + operator takes the object referenced by a and the Number object we have creates and adds their values together. As the result is a new object, it isn't surprising that it doesn't have the custom property you set on the first Number object. 

Once you realize that this is the way things work it makes things seem more logical. 

Of course primitive values are operated on in their unwrapped non-object state in reality but for the sake of a good logical story we can ignore this as it makes no practical difference to how things behave. 

All objects have value

In principle any operator in JavaScript can take two objects, any two objects, and produce a new object. 

In JavaScript there are three important types of operator - those that produce Number objects, those that produce String objects and those that produce Boolean objects. It turns out that the way Boolean operators work is different for various reasons which we will return to. For now let's just concentrate on Number and String operators. 

The only String operator is concatenation which is represented by the same symbol as addition, +.

The main Number operators are +,-,* and /. Other Number operators work in similar ways so it is reasonable just to consider these four. 

You can use any object in an expression, not just Number and String.  For example:

myObject1+myObject2;

is perfectly valid irrespective of what the objects are.  

How can general objects be included in expressions? 

The answer to this question is that every JavaScript object has a value as returned by the valueOf method.

The valueOf method is intended to return an object that is somehow regarded as the "value" of the object. 

Usually the value is a Number or a String but in fact it can be any object you care to return.

In practice, however, if it is going to be used with the standard operators it has to be a primitive object - i.e. a Number or a String.  

When you use an object in an expression its valueOf method is automatically called to find a primitive value to use in the expression. 

For example,

var myObject={};
myObject.valueOf=function(){return 1;};
var a=new Number(2);
a=a+myObject;
alert(a);

You can see that the  myObject's valueOf function returns 1. You can also see that in:

a+myObject;

myObject behaves as if it had a value of 1 - as you would expect.

in other words:

a+myObject;

is equivalent to:

a.valueOf()+myObject.valueOf()

Notice that when you write

a+1;

you can think of this too as:

a.valueOf()+1.valueOf();

All operands in an string or numeric expression have an implied valueOf call to provide the primitive value used in the evaluation of the expression.

The concatenation operator

This simple picture is made more confusing by the way + is used to represent addition and String concatenation. 

How does JavaScript tell when you mean add and when you mean concatenate?

The rule is very simple. 

If either operand in 

Object1 + Object2

returns a String from its valueOf method then the operator is String concatenation.  

For example:

var myObject1={};
myObject1.valueOf=function(){return "MyString1";}; var myObject2={};
myObject2.valueOf=function(){return "MyString2"};
a = myObject1 + myObject2;

In this case both valueOf methods return String objects and so the operator is concatenation and the result is

MyString1MyString2

The same rule applies to the += operator which is concatenation if either a or b is a String in a+=b.  However, notice that a+=b is the same as a=a+(b) which is not always the same as a=a+b because b will be evaluated first. 

Now we come to the interesting question of what happens if only one of the two objects involved in the expression has a String value?

In this case by the rule we have just introduced the + is String concatenation but only one of the objects is a String.

The answer to this question is slightly more complicated than you might think - but very reasonable once you understand it.

But first a simple quiz.

Expression quiz

To make sure you have all of this worked out, see if you can answer the following questions:

  1. What is            1 + 2 + "3" + 4 + 5

  2. What is                       1 + "2" * 3

  3. What is                        "4" + 1 + "2" * 3

  4. What is the value of a    a="1";
                       a = a + 2 + 2;

  5. What is the value of a    a = "1";
                       a += 2 + 2;

Try to work them out without typing in the code and then see if you are right by running the code. The answers and explanations are on the next page.

 

Banner

<ASIN:0596805527>

<ASIN:193398869X>

<ASIN:0137054890>

<ASIN:1449381871>

<ASIN:1430230541>

 



Last Updated ( Wednesday, 18 June 2014 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.