Javascript: escape() vs. encodeURI() vs. encodeURIComponent()

Are you great JavaScript programmer? Yes? Do you know the difference in mentioned methods and when to use which? No? Oh I see…you take a peek at w3schools.com when you need it! Ok, me too!

I’m searching for this too many times! So I guess If I write about it it’ll stick for a few days longer in my head…will see about that.

So let’s go..when it’s appropriate times to use which?

The escape() method does not encode the + character which is interpreted as a space on the server-side as well as generated by forms with spaces in their fields. Due to this shortcoming and the fact that this function fails to handle non-ASCII characters correctly, you should avoid use of escape() whenever possible. The best alternative is usually encodeURIComponent().

This function encodes special characters, except: * @ - _ + . /

Use of the encodeURI() method is a bit more specialized than escape() in that it encodes for URIs as opposed to the querystring (which is only part of a URL). Use this method when you need to encode a string to be used for any resource that uses URIs and needs certain characters to remain un-encoded. Note that this method does not encode the ' character, as it is a valid character within URIs.

This function encodes special characters, except: , / ? : @ & = + $ #

Lastly, the encodeURIComponent() method should be used in most cases when encoding a single component of a URI. This method will encode certain chars that would normally be recognized as special chars for URIs so that many components may be included. Note that this method does not encode the ' character, as it is a valid character within URIs.

This function encodes special characters. In addition, it ALSO encodes the following characters: , / ? : @ & = + $ #

That’s it, now you know and I remember!

Backbone.js: Collection doesn’t get pupulated trough its fetch() method from Cassandra

Sample fictional app domain:

Suppose I’m doing this great Tasks app for managing tasks, right..

The problem:

Backbone.js Collection doesn’t get correctly populated trough its fetch() method from Cassandra

So I basically got Tasks from Cassandra, got them (trough REST API) in Backbone and then…well nothing. Somewhere in “black magic” Backbone is doing with its collection-to-models calls, Tasks just disappeared. Whaaat?!

So to spice the soup a bit more, collection had 2 more symptoms:

  1. there was actually one model there (the last one from fetched data) and
  2. if I’d try to manually (from browser console) call create(new Task()) on Tasks collection the Task model would actually appear in Tasks collection

Observation:

Well I noticed this strange hex field in my JSON(ed) data I got from server right. And I thought “well, I’ll solve that later, it’s not important now. Just do this.id = id.hex instead of this.id = id when getting value and that’s it” – DON’T EVER PASS BY SOMETHING THAT’S NOT ABSOLUTELY CLEAR TO YOU WHY IT’S THERE!

This piece of code was problematic:

someTaskArrayBeforeJsonized = {
    'id': this.id        // C* datatype is UUID - problem
    'title': this.title  // C* datatype is VARCHAR - works OK
}

The solution:

The solution was simple, just add toString() to uuid fields you get from Cassandra. So the code would look like this;

someTaskArrayBeforeJsonized = {
    'id': this.id.toString()    // C* datatype is UUID . work OK
    'title': this.title         // C* datatype is VARSHAR - works OK
}

That toString() up in the example saves you trouble of getting hex field in someTaskArrayBeforeJsonized upon JSONfiying.

It’s also worth noting I use Helenus driver for interfacing Node.js and Cassandra.

I’m not shure exactly who in the stack was the trouble maker..

  1. was the V8 JSON.stringify “not understanding” the uuid datatype he was gets from Helenus/Cassandra
  2. or maybe Helenus did some “black magic” on its end…

…who knows. I’m happy (for now) that it works. Maybe(big maybe) I’ll investigate this in the future or something.

Hope it helps someone. If you have some better ide why this is happening, comment plz, tnx.

If you are really into JSON then you should read this(it’s short) from json.org.

UPDATE 01: It’s obvious! Javascript doesn’t understand 2829c930-2e98-11e2-8b62-2519782d29d8 notation!! If you take better look at the format, it’s not of any JS known primitives, right?! So you have to convert it to (at least) String to make something useful with it… like == comparison etc. Mystery solved, enjoy.

UPDATE 02: If you’r working with UUIDs or other hex values in Javascript it’s probably the best way to just store string representation of the field along side the original value. So for id store id_str along so you don’t have to parse it at runtime, right. It works for Twitter – take a peek at their home_timeline json api and search for id_str.