Skip to main content

Posts

ES6 101 - Map

ES6 101 - Map
ES6 Map is the topic of today’s post which also is the 11th in the ES6 101 Series. Map is going to be fairly easy, so before jumping into it, if you want to look at other features we have covered so far, here is a quick list for your reference.Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringFor…ofSetNow let’s see what Map has to offer. As opposed to Set (which by the way, I highly recommend reading), Map saves values as key-value pair. Let’s see for ourselves how this works!Example of ES6 Mapvar dummyMap = newMap(); dummyMap.set("1"); // Method is set as against add in ES6 Setconsole.log(dummyMap); // [["1",null]] dummyMap.set("1", "one"); console.log(dummyMap); // [["1","one"]] dummyMap.set("2", "two").set("3","three"); console.log(dummyMap); // [["1","one&…
Recent posts

ES6 101 - Set

ES6 101 - Set
This is going to be the 10th post in the ES6 101 series and the topic for today is Set. Set object is a collection of values and is iterable. One cool thing about the values in set is that these are unique. This means that a set can have a value only once. Moreover you can think of a set as an actualy set in Mathematics. We will see a few samples to understand this concept of set.Examples of ES6 SetCreating a new set and adding values to it.Let’s create a new set and add some values to it and then discuss it further.let dummySet = newSet(); // That's it! A new set object is created dummySet.add(1); console.log(dummySet); // [1] dummySet.add(1); console.log(dummySet); // [1] and not [1,1]. This is because, values in a set are unique. dummySet.add(2).add(3).add(4); console.log(dummySet); // [1,2,3,4] dummySet.add('The UnderTaker').add('John Cena'); console.log(dummySet); // [1,2,3,4,'The UnderTaker…

ES6 101 - For..of

ES6 101 - For..of This is the 9th post in the ES6 series and we have looked at a whole bunch of some amazing and highly productive ES6 features that you can start using right away! Here is a comprehensive list of all the features that we have covered so far. 😍Fat Arrow FunctionsLexical Declarations - LetLexical Declarations - ConstSpread OPeratorTemplate LiteralRest OperatorDefault parametersDestructuringNow let’s look at what for..if has to offer us. Essentially, for..of does exactly the opposite of what for..in does. Let’s see what the difference is.// Using for..inlet someVar = [1,2,3,4,5] for(let item in someVar) { console.log(item); // The index values would be consoled. } When you execute the above code snippet, you will observe that, you get all the index values 0 1 2 3 4 of the array in the console. If you had to get access to the values at these indexes in the array, you would have to add the following to the above snippet in the for..in loop.console.log(`${it…

ES6 101 - Destructuring

ES6 101 - Destructuring ES6 Destructuring assignments is the topic of this post and we will take a look at what destructuring means and we will look at multiole examples to understand the concept. As the name suggests, using the destructuring syntax, we would be breaking down values in an array or properties in an object into seperate variables.Arrays and objects allow you create, on-the-fly various packages of data.let a = [1,2,3]; ES6 destructuring uses similar syntax, however the LHS will now be a variable that would hold the package that you need to create. Sounds complex? πŸ˜“ Not really, just move ahead to the example that follows and you should get the hang of it.let a = [1,2,3]; let [x,y] = a; // We are now assigning array 'a' to a new arrayconsole.log(x); // 1console.log(y); // 2let [m,n,o] = a; console.log(m); // 1console.log(n); // 2console.log(o); // 3This helps us clearly see what destructuring does for an array! It basically unpacks the values in the array a…

ES6 101 - Default parameters

ES6 101 - Default Parameters
As we make progress in this ES6 series, let’s look at Default Parameters today. This is the 7th post in the ES6 series. As the name suggests, ES6 now allows you to initialize function parameters with some default values in case no value or undefined is passed to the function.When using the ES5 syntax, it is a common practice to check the values of the parameteres in the function body. We would generally do stuff like this.functionsum(a,b) { var total; if (typeof(b) === 'undefined') { b = 10; // Default value of b if it is unavailable } total = a + b; return total; } console.log('Sum Total is: ' + sum(1)); // 11Other ways of setting the default value of b would include the following. b = b || 10; // Default value of b is setorif(arguments.length === 1) { b = 10; // Default value of b is set } With ES6, you can now set a defaut value for parameters in the function head itself. Let’s modify the above e…

Diwali Wishes

Happy Diwali 2017
We are already on the brink of the new year and the festival of lights is already here!May this festival of lights, bring joy, peace and prosperity to you and your loved ones! Wishing you a very happy Diwali and a prosperous new year!For your holiday family portraits and baby shoots I would recommend a really talented and professional photographer in the SF Bay Area. Her portfolio would speak for itself!Happy holidays and have a safe Diwali!

ES6 Rest operator

ES6 Rest.md
Welcome to the 6th post in the ES6 101 series and the topic for today is the Rest operator. The rest operator now allows us to process infinite parameters in a function.😯 Yes. really! If you remember the spread operator ... we discussed previously in this series, the rest operator looks the same ... Let’s dig into how we can use the rest operator. It is really simple and easy to work with.Examples for ES6 Rest operatorProblem Statement: Calculate the sum of all numbers sent to the add function.

To achieve this in ES5, we would find the number of parameters and then run a for loop that many number of times and calculate the sum. In ES6, with the rest operator it is a cake walk.let sum = (a, ...b) => { console.log(a); // This is the first parameter.console.log(b); // This is an array of the remaining parameters.console.log("Total sum is: " + (a + b.reduce((num, total) => num + total))); } sum(1,2,3,4,5); // 15 sum(1,2,3); // 6 sum(7,8,…

ES6 Template Literals

ES6 101 - Template Literals
This is the fifth post in the ES6 101 series and we will be looking at template literals today. Template literals are also sometimes know as string interpolation. Before we proceed to dive into our topic today, if you want to look into any of the other topics we have covered so far, then here is a quick reference.ES6 Fat Arrow FunctionsES6 Lexical Declarations LetES6 Lexical Declarations ConstES6 Spread OperatorIf you are currently working with some HTML templating libraries like Handlebars or Mustache, you are aware of how you can bind data values in your HTML using syntax like {{data.value}}. String literals work very similar in that way. Let’s look at a simple example and then get into the details from there on.Examples of String LiteralsBasic expression placeholderlet name = "Shreerang"; console.log(`Hello World! I am ${name}.`); There are 2 syntactic things to note in the above example.`` are to be used insted of the traditional ''…

ES6 101 - Spread operator

ES6 101 - Spread Operator
Welcome to the fourth post in the ES6 101 series and the topic of discussion today is the Spread operator or the dot dot dot operator.... It is not very common to call it the “dot dot dot” operator, but I just kind of like the ring to it! Also when you say “dot dot dot” it actually helps me visualize unpacking multiple gifts from a gift box. Wondering why I am taking about gifts and gift boxes and “dot dot dot”. Well, the spread operator... is actually more like unwrapping gifts from a gift box. The spread syntax allows an iterable such as an array expression to be expanded in-place. Let’s actually dive into some examples straight away. It is much more simpler that way!Examples of the ES6 Spread Operator ...Example #1Problem statement: Let’s write a function to display the sum of 3 numbers passed to it in an array.

We would have done this as follows in the old ES5 way. 😏var arr = [1,2,3]; functionsum(a,b,c) { var output = a + b + c; consol…

ES6 101 - Lexical Declarations - Const

ES6 101 - Lexical Declarations - Const

This is the third post in the ES6 101 Series and we will be looking at the ES6 lexical declartions keyword const. This is more of a continuation of the post on let, so I would highly recommend you to read that before you move forward. In case you feel like looking at const that too works! Go ahead and keep reading.As we saw in the post yesterday, variables created with the let keyword have limited scope and they live within the block, statement or the expression that they have been declared in. You cannot redeclare the let variables but these variables are mutable, i.e. theirs values can be changed and updated.As the name suggests, const helps you create variables that have a constant value! These variables are not mutable, which means, the value of these variables cannot be changed or updated. Let’s look at a few examples to understand this better.Examples using ES6 constconst pi = 3.14; console.log(pi); pi = ++pi; // Uncaught TypeEr…