Wow! I am so excited for ECMAscript 6 I can barely contain myself. Only one month until it is officially released. I just finished watching Aaron Frost’s overview of ECMAscript 6 over at Pluralsight. If you haven’t tuned in yet, check it out here. Over the next three blog posts, I am going to quickly summarize some of the most exciting features of ES6.

Recursion Optimization: Improving Space Complexity

Recursion has always been an elegant and clever way to solve problems. In javascript, however, it can be quite dangerous. Anyone with experience using recursion in javascript is familiar with the call stack exceeded error. This occurs because each stack is stored regardless of whether it is needed or not. In ES6, as long as the stack in question is no longer being referenced, it will be dropped, allowing for a huge improvement in space complexity

Proper Tail Calls (PTC)

The use of a Proper Tail Call is how ES6 will determine whether it can drop a previous stack or not. A PTC occurs when there are no calculations or information that needs to be retained by the function, and all of the information being recursed or passed along is in the tail call, meaning the statement being returned.

function foo(n){ 
return 'hello' //this is a tail position but not a tail call

return bar() //this is a tail call, since it is not using anything
//else in the function, the stack can be deleted
}
function foo(n){ 
return 1 + bar()
//close, but not a PTC because it must get the
//value of calling bar and then add one and then return
return foo(n) - foo(n)
// not a PTC because the stack must be maintained to fulfill the
// statement
}

LET and CONST

ES6 is going to introduce two new variable declarations that are going to completely redefine the way we structure our programs.

console.log(a) // Error if(something){ 
let a = 4
console.log(a) // 4
}
console.log(a) // Error
  • You can now freely reuse i in for loops without worry

Caveats

  • You cannot declare the same variable twice:
var a = 3 
var a = 4
console.log(a) //4
let a = 3
let a = 4 //error
var a = 3
let a = 4 //error

REST/SPLAT/Arguments statement

One of the cool things about javascript is that it is very un-opinionated about how we organize our parameters when instantiating and executing a function. I could have 2 parameters in the declaration, yet pass in 4 parameters in the execution, or visa versa. Javascript handles this by giving us an array-like arguments object for each function. The arguments object contains all of the arguments passed in, including those I provided parameter names for. I can call length on it and I can iterate through it, but it doesn’t have any other properties that arrays have in their prototype chain (such as splice, split, etc). This is solved by converting the arguments object into an array in a somewhat hacky way

 
var args = Array.prototype.slice.call(arguments)
// now I could call any array method on args.
var baz = function(a, b, ...rest){ 
console.log(a)
console.log(b)
console.log(rest)
}
baz(5, 6, 10, 11, 12)
//5
//6
//[10,11,12]

Caveats

  • Rest arguments must be the very last parameter
  • the actual name of the rest argument can be named anything, as long as it is preceded with 3 periods

Spread Operators

Spread operators are awesome and simple. It provides us a way to immediately access or assign elements in an array without having to iterate. This can be most easily explained with examples

var nums = [1,2,3] 
console.log(nums) //[1,2,3]
console.log(...nums) // 1,2,3
function getNums(){ 
return [1,2,3]
}
var b = [0, ...getNums()]; console.log(b) // [0,1,2,3]
function returnTwo(a, b) { 
return [b,a]
}
var a =[1,2,3,4,5] var b = returnTwo(a[0], a[1]) //[2,1] – old way var b = returnTwo(...a); // [2,1] – new way

Destructuring

Destructuring represents a concept of automatic assignment of values of objects and arrays into variables

var {city, state, zip} = {city: "San Francisco", state:"CA", zip: 94133} console.log(city) // San Francisco 
console.log(state) // CA
console.log(zip) // 94133
var {city: c, state: s, zip: z} = {city: "San Francisco",state:"CA", zip: 94133} console.log(c) // San Francisco 
console.log(s) // CA
console.log(z) // 94133
console.log(city) //undefined
var {?city, state, ?zip} = {state: 'CA'}
var ?{city, state, zip} = {nothing: "here"}

Arrow Functions

Lastly for this section, we have arrow functions. Probably one of the coolest features I’ve learned about so far. Arrow functions create implicit returns and this binding in javascript. It will look like this:

var fn1 = function(){
return 2
} // old way

var fn2 = () => 2 // new way
var nums =[1,2,3]; 
var res = nums.map(function(n){return n*n})
console.log(res) // [1, 4, 9]
var nums = [1,2,3] 
var res = nums.map(n => n*n);
console.log(res); //[1,4,9]
Car.prototype.drive = function(){ 
this.move()
setTimeout(this.turnLeft, function(){
console.log(this) //will log Window
})
}
Car.prototype.drive = function(){ 
this.move()
setTimeout(this.turnLeft, () => console.log(this)) //will log Car }

Software Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store