Javascript - Object

About

object in javascript

An object is a data type in Javascript.

An object follows a json data structure with key that holds property value. The value may be of a variable or a function

In JavaScript, a function is an object. As the scope in Javascript is function based, an object represents also a scope (see the this variable)

The object inheritance follows the prototypical model.

Example

With Function

A function is also an object and can be a property of an object.

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

// New family object
var family = {};
family.mother = new Person("Nico", "Gerard", 41);
family.father = new Person("Madelief", "Gerard", 9);
family.daughter = new Person("Melissa", "Gerard", 6);
family.son = new Person("Rixt", "Van Der Veen", 8);

Management

Initialization

Reference/Operators/Object_initializer

Objects can be initialized using:

Constructor (new)

function myObject(arg){
   this.prop1 = arg;
   this.prop2 = arg + arg;
   this.prop3 = arg.toUpperCase;
}

var obj1 = new myObject("foo");
console.log("An object obj1 was created with the following structure:");
console.log(obj1);

More, see Javascript - Object Constructor

Syntax / Literal Notation

A object with two fields (JSON (JavaScript Object Notation)). All initializations are equivalent

point = {x:3,y:2}
point.x = 3
point.y = 2
  • Other access pattern
point["x"] = 3
point["y"] = 2

An object in Javascript has the same syntax than the JSON (JavaScript Object Notation) format. Curly brackets {} indicate then an object.

Example

var computer = {
    os: "windows",
    memoryGb:  4,
    color: "blue",   /* A property name must not begin with a number */
    bit64: true
};

console.log(computer.os);
console.log(computer.memoryGb);
console.log(computer.color);
console.log(computer.bit64);

Key: Property

instanceOf

type

Copy / Clone

Spread

Spread syntax.

As this is not implemented on all browser, you may need to use a transpiler. The below code worls with babel.

var user = { name: "Name" };
var userExtend = {...user, age: 44};
console.log(user);
console.log(userExtend);

Copy with Jquery Extend

var foo = { a: "a" };
console.log(foo.a);
console.log(foo.b);

// One time property copying
var bar = $.extend({}, foo);
bar.b = "b";
console.log(bar.a);
console.log(bar.b);

Immutability

Create

With delegation (Prototype)

prototype Delegation

var foo = { a: "a" };

// bar is a new object where foo is its prototype
var bar = Object.create(foo);
console.log("bar got the property of its prototype: "+bar.a);
if ("a" in bar) {
    console.log("a is seen as a property of bar");
} 


foo.b="b";
console.log("bar got also the new properties of its prototype: Example with b: "+bar.b);
if ("b" in bar) {
    console.log("b is also seen as a property of bar");
} 

Merge

Jquery Extend

Jquery

  • Default behavior: The value of the extended object is overwritten
obj1 = { color: "blue" };
obj2 = { color: "red", length: 10 };
jQuery.extend(obj1, obj2);
console.log(obj1);
  • Getting a new object without modifying the passed object
obj1 = { color: "blue" };
obj2 = { color: "red", length: 10 };
obj3 = $.extend({}, obj1, obj2);
console.log("Obj1 value is ")
console.log(obj1);
console.log("Obj3 value is ");
console.log(obj3);

Xtend

https://www.npmjs.com/package/xtend - Node - Library

var extend = require("xtend")
 
// extend returns a new object. Does not mutate arguments
var combination = extend({
    a: "a",
    b: 'c'
}, {
    b: "b"
})
// { a: "a", b: "b" }

Object.assign (ES6)

All objects get merged into the first object. See Reference/Global_Objects/Object/assign

obj1 = { color: "blue" };
obj2 = { color: "red", length: 10 };
obj3 = { name: "TheName" };
Object.assign(obj1, obj2, obj3);
console.log("Obj1 value is ")
console.log(obj1);

Equality

Serialization / Deserialization

Language - Serialization/Deserialization (Data Storage Structure) - Encoding/Decoding - Codec

Example from object to string to object:

  • Creating an object
class Color {
   name;
   constructor(name){
      this.name = name;
   }
   getName(){
       return this.name;
   }
}
var blue = new Color("blue");
  • Serialization
blueString = JSON.stringify(blue);
console.log(blueString);
  • Deserialization (<note tip>To modify a string in another type (such as date), you would use a third function as parameter called a reviver</note>).
var obj = JSON.parse(blueString);
var blueObj = Object.assign(new Color(), obj);
console.log("I have a beautiful "+blueObj.getName()+" color");

Serialization and deserialization of object are used to:

Schema

Documentation / Reference


Powered by ComboStrap