JavaScript Fundamentals: Objects

Jyoti gupta
3 min readApr 4, 2021

--

Upon a homely object. Love can wink.

— William Shakespeare, The Two Gentlemen of Verona

An object is a container of properties, where the property has a name and value. A property name can be any string, including the empty string. A property value can be any javascript value except for undefined.

Object Literals:

Object literals provide a very convenient notation for creating new object values. An object literal is a pair of curly braces surrounding zero or more name/value pairs. An object literal can appear where an expression can appear:

var empty_object = 0;

var stooge = { “first-name”: “Jerome”, “last-name”: “Howard”};

A property’s value can be obtained from any expression, including another object literal. Objects can nest:

var flight = { airline: “Oceanic”, number: 815,

departure: { IATA: “SYD”, time: “2004–09–22 14:55”, city: “Sydney” }

arrival: { IATA: “LAX”, time: “2004–09–23 10:42”, city: “Los Angeles” };

Retrieval:

Values can be retrieved from an object by wrapping a string expression in a [] suffix. If the string expression is a string literal and if it is legal javascript name and not a reserved word, then the. notation can be used instead.

stooage[ “first-name”] // “Jerome”

flight.departure. IATA // SYD

stooage[“middle-name”]. // undefined

flight.status stooge[“FIRST-NAME”] // undefined

Update:

A value in an object can be updated by assignment. If the property name already exists in the object, the property value is replaced:

stooge[‘first-name’] = “Jerome’;

If the object does not already have that property name, the object is augmented:

stoogeſ middle-name’] = ‘Lester’;

stooge nickname = “Curly’;

flight.equipment = { model: ‘Boeing 777’ };

flight.status = ‘overdue’;

Reference:

Objects are passed around by reference. They are never copied:

var x = stooge;

x.nickname = “Curly’;

var nick = stooge nickname;

// nick is “Curly’ because x and stooge 11

// are references to the same object

var a = {}, b = {}, c = {};

// a, b, and c each refer to a

// different empty object

a = b = c = {};

// a, b, and call refer to // the same empty object

Prototype:

Every object is linked to a prototype object from which it can inherit properties. objects created from object literals are linked to Object.prototype, an object that comes standard with JavaScript.

When you make a new object, you can select the object that should be its prototype. The mechanism that JavaScript provides to do this is messy and complex, but it can be significantly simplified. We will add a create method to the Object function. The create method creates a new object that uses an old object as its prototype. Will cover more deeply in upcoming Javascript fundamentals: Functions blog

if ( typeof Object.create !== ‘function’ ) {

Object.create = function (o) {

var F = function () {};

F.prototype = 0; return new F();

return new F();

};

}

var another stooge = Object.create(stooge);

The prototype link has no effect on updating. When we make changes to an object, the object’s prototype is not touched:

another stooge[‘first-name’] = ‘Harry’;

another stooge[ ‘middle-name] = “Moses’;

another stooge nickname = ‘Moe’;

The prototype link is used only in retrieval. If we try to retrieve a property value from an object, and if the object lacks the property name, then JavaScript attempts to retrieve the property value from the prototype object. And if that object is lacking the property, then it goes to its prototype, and so on until the process finally bottoms out with Object.prototype. If the desired property exists nowhere in the prototype chain, then the result is the undefined value. This is called delegation.

The prototype relationship is a dynamic relationship. If we add a new property to a prototype, that property will immediately be visible in all of the objects that are based on that prototype:

stooge.profession ‘actor’;

another stooge.profession // actor

Will cover more detail for prototype chaining in upcoming blogs.

Hope that will help to gain a better understanding.

--

--

Jyoti gupta
Jyoti gupta

Written by Jyoti gupta

Senior Software Developer@EqualExperts | ex-Paytm | ex-Thoughtworks | Ex-Rivigo https://github.com/guptajyoti845 | https://www.linkedin.com/in/jyoti-g-18522a111

No responses yet