javascript

Immediately-Invoked Function Expression (IIFE)

dondonliuLeave a comment

Scope in Javascript is function-bound, meaning variables defined in a function are visible inside the same function, and each time a function is invoked it creates a new execution context. This is different from C which confines life span of variables inside a block. For following code:

var a = 1;

function f1() {
  var b = 2;
  console.log('inside f1 a:'+a);
}

function f2() {
  var c = 3;
  return function(d) {
    return d+c;
  }
}

{
var e = 5;
}

f1();

console.log(a);
console.log(b); //error
console.log(e);
console.log(f2()(4)); //closure

Only hidden variable to the global context is b. Since every C function is defined using block Javascript is more loose in the sense that blocks without function declaration doesn’t really do much.

Now move on to Immediately-Invoked Function Expression: the motive behind this is you want to execute a piece of code without contaminating the global context while being able to use many of the global variables. You do it by creating an anonymous function and immediately invoking it:

(function () {
 ...
})();

This is a very common pattern for Javascript and is seen everywhere, especially for locking in the value of
execution context. More reading can be found at http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Obtaining user’s zipcode with in browser

dondonliuLeave a comment

HTML5 offers the capability of obtaining browser’s physical location via it’s geolocation API:

https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation

The result consists of latitude and longitude. This is good, especially when you are making a Maps app. But sometimes the use case/database behind is organized by address/town/zipcode rather than geolocations, and we would like to convert the geo result to zipcode for example. We can achieve this by calling Google Maps API:

https://developers.google.com/maps/documentation/javascript/reference#Geocoder

What returns from this API call has an array of possibilities and usually the first one is good enough. Some sample code below:

function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(pos){
            var g = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);;
            g.geocode ({'location':latlng}, function(results, status) {
              if(status === google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                  for(var i=0; i<results[0].address_components.length; i++){
                      var types = results[0].address_components[i].types;
                      if(types[0]==='postal_code') {
                        var postalCode = results[0].address_components[i].long_name;
                        console.log(postalCode);
                      }
                  }
               }
              }
            });
          });
        } else {
          console.log("Geolocation is not supported by this browser.");
        }
      }