Javascript - Object

1 - 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.

3 - Example

3.1 - 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);

4 - Management

4.1 - Initialization

Reference/Operators/Object_initializer

Objects can be initialized using:

4.1.1 - 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

4.1.2 - 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);

4.2 - Key: Property

4.3 - instanceOf

4.4 - type

4.5 - Copy / Clone

4.5.1 - 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);

4.5.2 - 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);

4.6 - Immutability

4.7 - Create

4.7.1 - 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");
} 


4.8 - Merge

4.8.1 - 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);

4.8.2 - 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" }

4.8.3 - 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);

4.9 - Equality

4.10 - 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:

4.11 - Schema

5 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap