Chaining a function in JavaScript?

Question

I want to make a function that add an item to my localStorage object. E.g.:

alert(localStorage.getItem('names').addItem('Bill').getItem('names'));

The first method is getItem which gets the item for localStorage objects... but addItem would be a custom function. This chain of functions would finally alert Bill.

So, how would I make this function chain to localStorage?

getItem should be at the end of the chain, but aside from that it can be done — gblazex, Jul 04 '10 at 23:42
Shouldn't it just be `alert(localStorage.getItem('names').addItem('Bill'))`. — Lèse majesté, Jul 05 '10 at 00:32
Yes, thatd work also if it returned all the names including Bill... — Oscar Godson, Jul 05 '10 at 23:32

score 5 · Answer 1 · answered Jul 04 '10 at 22:28

5

This is impossible.

If getItem('names') returns Bill, you can't call addItem on it.
It would be possible to add addItem and getItem methods to every item in the storage, but it would be a horrible idea.

answered Jul 04 '10 at 22:28

SLaks

868,454
176
1,908
1,964

**it is possible** (without augmenting localStorage). see my answer. Not a very useful case, but a good demonstration of the **decorator pattern**. – gblazex Jul 04 '10 at 23:41
1

@galambalazs: It's not possible using his exact calls. – SLaks Jul 04 '10 at 23:48
getItem() breaks the chain, that's obvious, but you don't need to add methods to every element in the storage. – gblazex Jul 05 '10 at 10:11
No, there isn't, but what you were trying to do was very jQuery-like in a bad way :D – Jani Hartikainen Jul 05 '10 at 22:59
How would suggest making an addItem function? if not adding an item is a lot of extra markup. I'd prefer doing it in a DRY way... – Oscar Godson Jul 05 '10 at 23:33

gblazex · Accepted Answer · 2010-07-10T00:23:40.717

This is possible if you create a wrapper/decorator object that makes chaining possible. This is how jQuery works for example. But it is useless in this case.

I made a possible implementation, though.

But getItem will break the chain (so it should always be used at the end).

storage().setItem('names', 'Bill').getItem('names'); // or
storage().setItem('names').addItem('Bill').getItem('names'); // or
storage().key('names').value('Bill').set().get('names');

Implementation

(function( window, undefined ) {

var storage = function( key, value ) {
  return new storage.init( key, value );
};

storage.init = function( key, value ) {
  this._key   = key;
  this._value = value;
};

storage.init.prototype = {

  key: function( key ) {
    this._key = key;
    return this;
  },

  value: function( value ) {
    this._value = value;
    return this;
  },

  get: function( key ) {
    key = isset(key) || this._key;
    return localStorage.getItem( key );
  },

  set: function( key, value ) {
    this._key   = key   = isset(key)   || this._key;
    this._value = value = isset(value) || this._value;
    if ( key && value ) {
      localStorage.setItem( key, value );
    }
    return this;
  },

  addItem: function( value ) {
    this._value = isset(value) || this._value;
    if ( this._key && value !== undefined ) {
      localStorage.setItem( this._key, value );
    }
    return this;
  },

  // aliases...
  getItem: function( key ) {
    return this.get( key );
  },
  setItem: function( key, value  ) {
    return this.set( key, value );
  }
};

function isset( value ) {
  return value !== undefined ? value : false;
}

window.storage = storage;

})( window );

Thank you very much, i must be screwing something up tho. I copy & paste your code and then added alert(storage.setItem('names').addItem('Bill').getItem('names')); right below it and im getting a storage.setItem is not a function? — Oscar Godson, Jul 05 '10 at 23:31
@Oscar – You forgot the parentheses: `alert(storage().setItem('names').addItem('Bill').getItem('names'))` — Marcel Korpel, Jul 05 '10 at 23:43
@Oscar Marcel is right, it now creates instances for storage chains, so you need to write `storage()`. I can modify it to be only one object, but it may become less robust. — gblazex, Jul 06 '10 at 00:07
Awh, i see, yeah so: alert(storage().setItem('names').addItem('Bill').addItem('Tom').getItem('names')); alerts Tom and so does localStorage.getItem('names'). Almost perfect, but how can i return Bill, Tom, etc in that same alert? Basically, return them in an array? Sorry if this stuff is way over my head. Im trying to learn though... I like this style more than just plain functions... — Oscar Godson, Jul 06 '10 at 03:08

score 0 · Answer 3 · answered Jul 04 '10 at 22:54

The simplest thing would be to not do this at all :)

If that doesn't work, then there are solutions like modifying the native getItem function but that's a really bad idea. The best way would be to write a wrapper around localStorage, much like what jQuery does to DOM nodes, and use that wrapper to get and put items in local storage. The wrapper could have an interface like:

ApplicationStorage
    getItem()
    setItem()
    key()
    removeItem()

Then define acceptable type wrappers like Array within ApplicationStorage that have methods like addItem

ApplicationStorage.Array
    addItem()

When applicationStorage.getItem("names") is called, return an object of ApplicationStorage.Array that contains the method addItem which will make chaining possible.

score 0 · Answer 4 · edited Mar 05 '13 at 04:12

getItem('names').addItem('Bill').getItem('names')

I am confused, how do you get an item that has not been added???

getItem returns an object contains addItem method, and addItem method returns an object contains getItem method

Anyway, have a look the following tutorial. It does not completely solve your problem, but will give you an idea.

http://guanfenglin.spaces.live.com/blog/cns!4E0822BF6C959B7F!668.entry

Chaining a function in JavaScript?

4 Answers4

Linked

Related