Object Manipulation Statements

  • Revision slug: JavaScript/Guide/Obsolete_Pages/Object_Manipulation_Statements
  • Revision title: Object Manipulation Statements
  • Revision id: 118168
  • Created:
  • Creator: happysadman
  • Is current revision? No
  • Comment 12 words added

Revision Content

Object Manipulation Statements

JavaScript uses the for...in, for each...in, and with statements to manipulate objects.

for...in Statement

The for...in statement iterates a specified variable over all the properties of an object. For each distinct property, JavaScript executes the specified statements. A for...in statement looks as follows:

for (variable in object) {
   statements
}

Example
The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.

function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
      result += obj_name + "." + i + " = " + obj[i] + "<br>";
   }
   result += "<hr>";
   return result;
}

For an object car with properties make and model, result would be:

car.make = Ford
car.model = Mustang

Arrays
Although it may be tempting to use this as a way to iterate over Array elements, because the for...in statement iterates over user-defined properties in addition to the array elements, if you modify the Array object, such as adding custom properties or methods, the for...in statement will return the name of your user-defined properties in addition to the numeric indexes. Thus it is better to use a traditional for loop with a numeric index when iterating over arrays.

for each...in Statement

for each...in is a loop statement introduced in JavaScript 1.6. It is similar to for...in, but iterates over the values of object's properties, not their names.

with Statement

The with statement establishes the default object for a set of statements. JavaScript looks up any unqualified names within the set of statements to determine if the names are properties of the default object. If an unqualified name matches a property, then the property is used in the statement; otherwise, a local or global variable is used.

A with statement looks as follows:

with (object) {
   statements
}

Example
The following with statement specifies that the Math object is the default object. The statements following the with statement refer to the PI property and the cos and sin methods, without specifying an object. JavaScript assumes the Math object for these references.

var a, x, y;
var r = 10;
with (Math) {
   a = PI * r * r;
   x = r * cos(PI);
   y = r * sin(PI/2);
}

Note: While using a with statement can make your program more concise, improper use of with can significantly slow down your program. See Core JavaScript 1.5 Reference:Statements:with.

{{ PreviousNext("Core_JavaScript_1.5_Guide:Loop_Statements:continue_Statement", "Core_JavaScript_1.5_Guide:Comments") }}

{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/物件的操作語法", "fr": "fr/Guide_JavaScript_1.5/Instructions_de_manipulation_d\'objets", "ja": "ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_manipulacji_obiektem" } ) }}

Revision Source


<h3 name="Object_Manipulation_Statements">Object Manipulation Statements</h3>
<p>JavaScript uses the <code>for...in</code>, <code>for each...in</code>, and <code>with</code> statements to manipulate objects.</p>
<h4 name="for...in_Statement">for...in Statement</h4>
<p>The <a href="/en/Core_JavaScript_1.5_Reference/Statements/for...in" title="en/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> statement iterates a specified variable over all the properties of an object. For each distinct property, JavaScript executes the specified statements. A <code>for...in</code> statement looks as follows:</p>
<pre>for (variable in object) {
   statements
}
</pre>
<p><strong>Example</strong><br>
The following function takes as its argument an object and the object's name. It then iterates over all the object's properties and returns a string that lists the property names and their values.</p>
<pre>function dump_props(obj, obj_name) {
   var result = "";
   for (var i in obj) {
      result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
   }
   result += "&lt;hr&gt;";
   return result;
}
</pre>
<p>For an object <code>car</code> with properties <code>make</code> and <code>model</code>, result would be:</p>
<pre class="eval">car.make = Ford
car.model = Mustang
</pre>
<p><strong>Arrays</strong><br>
Although it may be tempting to use this as a way to iterate over <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> elements, because the <strong>for...in</strong> statement iterates over user-defined properties in addition to the array elements, if you modify the Array object, such as adding custom properties or methods, the <strong>for...in</strong> statement will return the name of your user-defined properties in addition to the numeric indexes. Thus it is better to use a traditional <a href="/en/Core_JavaScript_1.5_Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for">for</a> loop with a numeric index when iterating over arrays.</p>
<h4 name="for_each...in_Statement">for each...in Statement</h4>
<p><a href="/en/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="en/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> is a loop statement introduced in <a href="/en/New_in_JavaScript_1.6" title="en/New_in_JavaScript_1.6">JavaScript 1.6</a>. It is similar to <code>for...in</code>, but iterates over the values of object's properties, not their names.</p>
<h4 name="with_Statement">with Statement</h4>
<p>The <a href="/en/Core_JavaScript_1.5_Reference/Statements/with" title="en/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> statement establishes the default object for a set of statements. JavaScript looks up any unqualified names within the set of statements to determine if the names are properties of the default object. If an unqualified name matches a property, then the property is used in the statement; otherwise, a local or global variable is used.</p>
<p>A <code>with</code> statement looks as follows:</p>
<pre>with (object) {
   statements
}
</pre>
<p><strong>Example</strong><br>
The following <code>with</code> statement specifies that the <code>Math</code> object is the default object. The statements following the <code>with</code> statement refer to the <code>PI</code> property and the <code>cos</code> and <code>sin</code> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p>
<pre>var a, x, y;
var r = 10;
with (Math) {
   a = PI * r * r;
   x = r * cos(PI);
   y = r * sin(PI/2);
}
</pre>
<p>Note: While using a <code>with</code> statement can make your program more concise, improper use of <code>with</code> can significantly slow down your program. See <a href="/en/Core_JavaScript_1.5_Reference/Statements/with" title="en/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a>.</p>
<div class="noinclude">
<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Loop_Statements:continue_Statement", "Core_JavaScript_1.5_Guide:Comments") }}</p>
</div>
<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/物件的操作語法", "fr": "fr/Guide_JavaScript_1.5/Instructions_de_manipulation_d\'objets", "ja": "ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_manipulacji_obiektem" } ) }}</p>
Revert to this revision