Elegant JavaScripts: March 2016

ES6 Part II : Const and Template literals

As I described in my previous post ES or else ECMAScript is the official name of JavaScript and ES6 that is ECMAScript 6 is the latest version of it.
This is the second of series of posts that explore new features of ES6 so in this post lets look at const keyword and template literals introduced in ES6.

const keyword

In previous versions of JavaScript there was no way to define a constant value. Developers just used only upper case letters to declare a constant variable like,var SEC_KEY="1234567";

But it could be changed at a latter part of the code.


var SEC_KEY="1234567";

SEC_KEY="abcdefg";

console.log(SEC_KEY);

ES6 part I : Let key word in ES6

Since this is the first post of a series of posts about ECMAScript 6, I'll explain what is ECMAScript is. ECMAScript is the “proper” name for the language commonly referred to as JavaScript. ECMAScript 6 is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.

It introduce many new and nice features to make easy programming for programmers.

Let key word

According to description from MDN let keyword allows us to declare variables that are limited in scope to the block, statement, or expression on which it is used.

Use routing in AngularJs

In a Single Page Application (SPA) routing is a important part. AngularJs also provide functions to make easy routing in our SPA. It helps us to,

Change the page without refreshing
Display different data on different pages

Lets see how to use AngularJs routing in our application to give a better user experience

Our simple app has a menu bar and when different tabs are clicked it should display different pages without refreshing the whole page. It should display list of employees only in home page.

Markup for Main page

<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>  
  <!-- CDN for bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- CDN for Angulat min and angular-route-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

Anatomy of call back functions in JavaScript

Call back function is a pattern that heavily used in JavaScript programming. Most of beginners in JavaScript programming have no clear idea about JavaScript programming. Specially Programmers from other programming paradigms except functional programming facing difficulties in adapting this idea.

JavaScript is a functional programming language. So functions are considered as first class objects. There for we can do may things with functions that can't be done in other programming languages.

Like,

Store functions in a variable.
Pass functions a arguments to another function.

What is a Call back function

A call back function is,

passed as an argument to another function.
It is invoked after some kind of event.

So basically Call back function is a function (func1) that pass to another function (func2) to be executed after finish the execution of second function (func2).