Javascript - Object

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > ECMAScript - Grammar Standard > 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.

Advertising

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

Advertising

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

Advertising

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

Both == and === object equality operator will simply check whether the references match, not anything about the underlying values.

var a = [1,2,3]; 
var b = [1,2,3]; 
var c = "1,2,3"; 
console.log( a == c ); // true 
console.log( b == c ); // true 
console.log( a == b ); // false

5 - Documentation / Reference

web/javascript/es/object/object.txt · Last modified: 2019/06/18 16:31 by gerardnico