Objects as associative arrays Scripting client side

Objects in javascript are two-faced. They combine two important functional.

The first is an associative array: a structure suitable for storing any data. In this chapter, we will look at using objects as arrays.

The second is language capabilities for object-oriented programming. We will study these possibilities in the subsequent sections of the textbook.

Associative arrays

An associative array is a data structure in which you can store any data in key-value format.

It can be easily represented as a cabinet with signed drawers. All data is stored in boxes. By name, you can easily find the box and take the value that lies in it.

Unlike real cabinets, you can add new named “boxes” to an associative array at any time or delete existing ones. Next we will see examples of how this is done.

By the way, in other programming languages such data structure is also called “dictionary” and “hash” .

Creating objects

An empty object ( “empty cabinet” ) can be created with one of two syntaxes:

 1. o = new Object(); 
 2. o = {}; // пустые фигурные скобки 

Usually everyone uses the syntax (2) , because he is shorter.

Object operations

An object can hold any values that are called object properties . Properties are accessed by property name (sometimes referred to as “by key” ).

For example, create a person object to store information about a person:

var person = {}; // пока пустой

Basic operations with objects are:

Assigning properties by key.
Reading properties by key.
Deleting property by key.

To access the properties, use the “through point” entry, of the объект.свойство type:

  var person = {}; 

 // 1. присвоение  
 // при присвоении свойства в объекте автоматически создаётся "ящик"  
 // с именем "name" и в него записывается содержимое 'Вася'  
  person.name = 'Вася' ; 

 person.age = 25; // запишем ещё одно свойство: с именем 'age' и значением 25 

 // 2. чтение  
  alert(person.name + ': ' + person.age); // вывести значения 

 // 3. удаление  
  delete person.name; // удалить "ящик" с именем "name" вместе со значением в нём 

Next operation:

Check for the existence of a property with a specific key.

For example, there is a person object, and you need to check if the age property exists in it.

To check for existence, there is an in operator. Its syntax is "prop" in obj , and the name of the property is in the form of a string, for example:

  var person = { }; 

  if ( "age" in person ) { 
    alert( "Свойство age существует!" ); 
 }  

However, another way is often used - comparing the value with undefined .

The fact is that in JavaScript you can refer to any property of the object, even if it does not exist . There will be no error.

But if the property does not exist, then the special value undefined will be returned:

`1`	`var` `person = {};`

2

`3`	`alert(person.lalala);` `// undefined, нет свойства с ключом lalala`

Thus, we can easily check the existence of a property — by getting it and comparing it with undefined :

`1`	`var` `person = { name:` `"Василий"` `};`

2

`3`	`alert(person.lalala ===` `undefined` `);` `// true, свойства нет`

`4`	`alert(person.name ===` `undefined` `);` `// false, свойство есть.`

Difference between in and checks === undefined

There are two means for checking the presence of a property in an object: the first is the in operator, the second is to get it and compare it with undefined .

They are almost identical, but there is one small difference.

The fact is that it is technically possible that the property is and equals undefined :

  var obj = {}; 
  obj.test = undefined ; // добавили свойство со значением undefined 

 // проверим наличие свойств test и заведомо отсутствующего blabla  
  alert(obj.test === undefined ); // true 
  alert(obj.blabla === undefined ); // true 

... At the same time, as can be seen from the code, with a simple comparison, the presence of such a property will be indistinguishable from its absence.

But the in operator guarantees the correct result:

  var obj = {}; 
  obj.test = undefined ; 

  alert( "test" in obj ); // true 
  alert( "blabla" in obj ); // false 

As a rule, in the code we will not assign undefined , so that both checks work correctly. And as a value denoting uncertainty and uncertainty, we will use null .

Access through square brackets

There is an alternative syntax for working with properties, using the brackets объект['свойство'] :

  var person = {}; 

  person[ 'name' ] = 'Вася' ; // то же что и person.name 

  alert(person[ 'name' ]); 

  delete person[ 'name' ]; 

In square brackets you can pass a variable:
obj[key] uses the value of the key variable as the property name:

`1`	`var` `person = { age: 25 };`

`2`	`var` `key =` `'age'` `;`

3

`4`	`alert(person[key]);` `// выведет person['age']`

The person['age'] and person.age identical. On the other hand, if the name of a property is stored in a variable ( var key = "age" ), then the only way to access it is with square brackets person[key] .

Appeal through a dot is used if we already know the name of the property at the stage of writing the program. And if it is determined in the course of execution, for example, entered by a visitor and written into a variable, then the only choice is square brackets.

Property Name Restrictions

The name of the property when accessing "through the point" imposed syntactical restrictions - about the same as the variable name. It cannot begin with a number, contain spaces, etc.
When accessed through square brackets, you can use any string.

For example:

  person[ 'день рождения!'  ] = '18.04.1982' ; 
 // запись через точку "person.день рождения! = ..." невозможна  

In both cases, the property name must be a string . If a value of another type is used, JavaScript will automatically string it.

Properties ad

An object can be filled with values when created by specifying them in curly braces: { ключ1: значение1, ключ2: значение2, ... } .

This syntax is called literal (the original is literal ), for example:

Objects as associative arrays

The following two code fragments create the same object:

  var menuSetup = { 
     width: 300,  
     height: 200,  
      title: "Menu" 
 };  

 // то же самое, что:  

  var menuSetup = {}; 
 menuSetup.width = 300;  
 menuSetup.height = 200;  
  menuSetup.title = 'Menu' ; 

Property names can be listed in quotes or without quotes if they satisfy the constraints for variable names.

For example:

  var menuSetup = { 
     width: 300,  
      'height' : 200, 
      "мама мыла раму" : true 
 };  

Importance: 3

Mini-task on the syntax of objects. Write a code line by line for each action.

Create an empty user object.
Add the name property with the value of Вася .
Add the surname property with the value Петров .
Change the name value to Сергей .
Remove the name property from the object.

Decision

  var user = {}; 
  user.name = "Вася" ; 
  user.surname = "Петров" ; 
  user.name = "Сергей" ; 
  delete user.name; 

[Open task in new window]

Nested objects in the ad

The property value can be an object:

  var user = { 
    name: "Таня" , 
   age: 25,  
   size: {  
     top: 90,  
     middle: 60,  
     bottom: 90  
   }  
 }  

  alert( user.name ) // "Таня" 

  alert( user.size.top ) // 90 

Here, the value of the size property is the {top: 90, middle: 60, bottom: 90 } object.

Object Output, Firefox

For debugging purposes, sometimes you want to display the entire object. Firefox has a non-standard toSource method for this.

  var user = { 
    name: "Таня" , 
   size: {  
     top: 90,  
     middle: 60  
   }  
 }  

 alert( user.toSource() ); // работает только в Firefox 

In other browsers it is not, but the object can be viewed through the developer tools: debugger or console.log .

Enumerate properties and values

To iterate over all properties from an object, the loop is used for the properties for..in .. This is a special syntactic construct that does not work like a regular for (i=0;i<n;i++) loop for (i=0;i<n;i++) .

Syntax:

  for (key in obj) { 
   /* ... делать что-то с obj[key] ... */  
 }  

In this case, the property names will be sequentially written in the key .

Variable declaration in a for (var key in obj) loop for (var key in obj)

Variables can be declared directly in the loop:

  for ( var key    in menu) { 
   // ...  
 }  

So sometimes they write for short code.

For example:

  var menu = { 
     width: 300,  
     height: 200,  
      title: "Menu" 
 };  

  for ( var key in menu) { 
     // этот код будет вызван для каждого свойства объекта  
     // ..и выведет имя свойства и его значение  

      alert( "Ключ: " + key + " значение:" + menu[key]); 
 }  

Of course, instead of key can be any other variable name.

The number of properties in the object

There is no one method that would return the number of properties. Cross-browser method is to loop through the properties and count:

  function getKeysCount(obj) { 
    var counter = 0; 
    for ( var key in obj) { 
     counter++;  
   }  
    return counter; 
 }  

And this is how the function of checking for “emptiness” looks like:

  function isEmpty(obj) { 
    for ( var key in obj) { 
      return false ; // если цикл хоть раз сработал, то объект не пустой => false 
   }  
   // дошли до этой строки - значит цикл не нашёл ни одного свойства => true  
    return true ; 
 }  

The order of the properties

Are the properties ordered in objects? In theory, i.e. according to the specification - no. In practice, everything is more complicated.

Browsers adhere to an important agreement on how to iterate through properties. It, though not spelled out in the standard, but rather reliably, because a lot of existing code depends on it.

IE <9 browsers, Firefox, Safari scroll through the keys in the same order in which the properties were assigned.
Opera, modern IE, Chrome guarantee order preservation only for string keys. Numeric keys are sorted and go to string.

That is, if the properties in the object are string, then such an object is ordered. Properties will be sorted in the order of their assignment:

  var user = { 
    name: "Вася" , 
    surname: "Петров" 
 };  
 user.age = 25;  

  for ( var prop in user) { 
   alert(prop); // name, surname, age 
 }  

Consider now the case when the keys are “numerical”. As we know, objects in JavaScript can have keys only as strings, but if the string is in integer form, some interpreters recognize this and process such keys differently.

For example, consider an object that specifies a list of options for selecting a country:

  var codes = { 
   // телефонные коды в формате "код страны": "название"  
    "255" : "Танзания" 
    "7" : "Россия" , 
    "38" : "Украина" , 
   // ..,  
    "1" : "США" 
 };  

We want to bring these options to the visitor in the same order, that is, "Tanzania" at the beginning, and "USA" - at the end (this is if our office is located in Zanzibar, then this order will be most relevant).

However, when browsing them through for..in some browsers (IE9 +, Chrome, Opera) will display the keys not in the order in which they are specified, but in a sorted order :

  var codes = { 
    "255" : "Танзания" , 
    "7" : "Россия" , 
    "38" : "Украина" , 
    "1" : "США" 
 };  

  for ( var key in codes) { 
    alert(key + ": " +codes[key]); // 1, 7, 38, 255 в IE9+, Chrome, Opera 
 }  

Breaking the order arose because the keys are numerical. To bypass it, you can use a small hack, which is that all keys are artificially made lowercase. For example, add them the first additional character '+' .

In this case, the browser will consider the keys as string and preserve the brute force order:

  var codes = { 
    "+255" : "Танзания" , // передаём 255 в виде строки, чтобы браузер сохранил порядок 
    "+7" : "Россия" , 
    "+38" : "Украина" , 
    "+1" : "США" 
 };  

  for ( var key in codes ) { 
    var value = codes[key]; 
    var id = +key; // ..если нам нужно именно число, преобразуем: "+255" -> 255 
 
    alert( id + ": " + value ); // 255, 7, 38, 1 во всех браузерах 
 }  

Transfer by reference

Common values: strings, numbers, booleans, null/undefined copied "by value" .

This means that if the message variable stores the value "Привет" and it is copied with the phrase = message , then the value is copied, and we will have two variables, each of which stores the value: "Привет" . "Привет"

Objects are assigned and transmitted "by reference . "

The variable does not store the object itself, but a link to its place in memory. To better understand this - comparable to ordinary variables.

For example:

var message = "Привет" ; // значение в переменной

Objects as associative arrays

And this is what the user = { name: "Вася" } variable looks like.

Attention: the object is outside the variable . In a variable, there is only a reference (“the address of the place in memory where the object lies”).

Objects as associative arrays

When copying a variable with an object, this link is copied, and the object still remains in a single copy.

It turns out that several variables refer to the same object:

  var user = { name: "Вася" }; // в переменной - ссылка 
  var admin = user; // скопировали ссылку 

Objects as associative arrays

Since the object is only one, in whatever variable it is not changed - this is reflected in the others:

  var user = { name: 'Вася' }; 

  var admin = user; 

  admin.name = 'Петя' ; // поменяли данные через admin 

 alert( user.name ); // 'Петя', изменения видны в user 

Variable with an object as a “code” to a data safe

Another analogy: the variable to which the object is assigned, in fact, does not store the data itself, but the code to the safe where it is stored.

When passing it to a function, this code is copied to local variables, so that the variable can make changes to these data.

"Real" copying object

So, when transferring an object somewhere, only the link to it is copied.

To copy the data itself, you need to get it from the object and copy it at the primitive level.

Like that:

  function clone(obj) { 
    var obj2 = {}; 

   // если свойства могут быть объектами, то нужно перебирать и их  
    for ( var key in obj) obj2[key] = obj[key]; 

    return obj2; 
 }  

  var user = { name: 'Вася' }; // user - ссылка на объект 

  var admin = clone(user); 

  admin.name = 'Петя' ; // поменяли данные в admin 
 alert(user.name); // 'Вася' 

Importance: 5

Create a multiplyNumeric function that takes an object and multiplies all numerical properties by 2. For example:

 // до вызова  
  var menu = { 
     width: 200,  
     height: 300,  
      title: "My menu" 
 };  

 multiplyNumeric(menu);  

 // после вызова  
 menu = {  
     width: 400,  
     height: 600,  
      title: "My menu" 
 };  

PS To check the number, use the function:

  function isNumeric(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n) 
 }  

Decision

  var menu = { 
   width: 200,  
   height: 300,  
    title: "My menu" 
 };  

  function isNumeric(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
 }  

  function multiplyNumeric(obj) { 
    for ( var key in obj) { 
      if (isNumeric( obj[key] )) { 
       obj[key] *= 2;  
     }  
   }  
 }  

 multiplyNumeric(menu);  

  alert( "menu width=" +menu.width+ " height=" +menu.height+ " title=" +menu.title); 

[Open task in new window]

Compact representation of objects

Hardcore coders only

This section refers to the internal structure of the data structure and requires special knowledge. It is not required to read.

An object, as described, takes a lot of memory space, for example:

  var user = { 
    name: "Vasya" , 
   age: 25  
 };  

It contains information about the name property and its string value, as well as the age property and its numerical value. Imagine that there are many such objects.

It turns out that the information on the names of the properties name and age duplicated in each object.

To avoid this, browsers use a special "compact representation of objects."

When creating a set of objects of the same type (with the same fields), the interpreter remembers how many fields it has and what they are, and stores this data in a separate structure. And the object itself is in the form of a continuous data array.

For example, for objects of the form {name: "Вася", age: 25} a structure will be created that describes this kind of objects: "the name string, then the age ", and the objects themselves will be represented in the data: Вася25 . And instead of a string, there will usually be a pointer to it.

The browser for accessing the property will know from the structure where it lies and will go to the desired position in the data. It is very fast, and saves memory, when there are many similar objects in a single structure description.

What happens if a new field is added to the object? For example:

user.admin = true ;

In this case, the browser looks to see if there is already a structure under which such an object fits (“string name , integer age , logical admin ”). If not, it is created. The changed object data is bound to it.

Details of the application and implementation of this storage method vary from browser to browser. Apply additional optimizations.

You can learn more about the internal structure of types, for example, from the presentation Know Your Engines (Velocity 2011).

Total

Objects are associative arrays with additional features:

Access to the elements is provided:
- Directly by key obj.prop = 5
- Through the variable in which the key is stored:
  var key = "prop" ;
  obj[key] = 5
Deleting keys: delete obj.name .
Loop by keys: for (key in obj) , the search order corresponds to the order of declarations for string keys, and for numeric keys it depends on the browser.
The existence of a property can be checked by the in : if ("prop" in obj) operator, as a rule, it works and a simple if (obj.prop !== undefined) comparison if (obj.prop !== undefined) .
The variable does not store the object itself, but a link to it. Copying such a variable and passing it to a function duplicate the link, but the object remains alone.

Objects as associative arrays

Associative arrays

Creating objects

Object operations

Access through square brackets

Properties ad

Nested objects in the ad

Enumerate properties and values

The number of properties in the object

The order of the properties

Transfer by reference

Compact representation of objects

Total

Comments

To leave a comment

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone