Posts

Showing posts from January, 2019

More on ES6 part 4

Image
COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS More on ES6 216 4/4           Built-in Methods ES6 also introduced new built-in methods to make several tasks easier. Here we will cover the most common ones. Array Element Finding The legacy way to find the first element of an  array  by its value and a rule was the following: [4, 5, 1, 8, 2, 0].filter(function (x) { return x > 3; })[0]; Try It Yourself The new syntax is cleaner and more robust: [4, 5, 1, 8, 2, 0]. find (x => x > 3); Try It Yourself You can also get the index of the item above by using the  findIndex()   method : [4, 5, 1, 8, 2, 0]. findIndex (x => x > 3); Try It Yourself Repeating Strings Before ES6 the following syntax was the correct way to repeat a  string  multiple times: console.log(Array(3 + 1).join("foo")); // foofoofoo Try It Yourself With the new syntax, it becomes: console.log("foo". ...

More on ES6 part 3

Image
RSES CODE PLAYGROUND DISCUSS TOP LEARNERS More on ES6 216 3/4           Modules It is a good practice to divide your related code into modules. Before ES6 there were some libraries which made this possible (e.g., RequireJS, CommonJS). ES6 is now supporting this feature natively. Considerations when using modules: The first consideration is  maintainability . A module is independent of other modules, making improvements and expansion possible without any dependency on code in other modules. The second consideration is  namespacing . In an earlier lesson, we talked about variables and scope. As you know, vars are globally declared, so it's common to have namespace pollution where unrelated variables are accessible all over our code. Modules solve this problem by creating a private space for variables. Another important consideration is  reusability . When we write code that can be used in other projects...

More on ES6 part 2

Iterators & Generators Symbol.iterator  is the default iterator for an  object . The for...of loops are based on this type of iterator. In the example below, we will see how we should implement it and how  generator functions  are used. Example: let myIterableObj = { [ Symbol.iterator ] : function* () { yield 1; yield 2; yield 3; ... console.log([ ...myIterableObj ]); Try It Yourself First, we create an  object , and use the  Symbol.iterator  and  generator function  to fill it with some values. In the second line of the code, we use a  *  with the  function  keyword. It's called a  generator function (or gen function) . For example, here is a simple case of how  gen functions  can be useful: function* idMaker() { let index = 0; while (index < 5) yield index++; } var gen = idMaker(); console.log( gen.next().value ); Try It Yourself We can exit and re-enter generator function...

More on ES6 part 1

ES6 Promises A  Promise  is a better way for asynchronous programming when compared to the common way of using a  setTimeout () type of  method . Consider this  example: setTimeout(function() { console.log("Work 1"); setTimeout(function() { console.log("Work 2"); }, 1000); }, 1000); console.log("End"); Try It Yourself It prints "End", "Work 1" and "Work 2" in that order (the work is done asynchronously). But if there are more events like this, the code becomes very complex. ES6 comes to the rescue in such situations. A  promise  can be created as follows: new Promise (function(resolve, reject) { // Work if (success) resolve(result); else reject(Error("failure")); }); Here,  resolve  is the  method  for success and  reject  is the  method  for failure. If a  method  returns a promise, its calls should use the  then  method  which takes two method...

ES6 Map & Set part 2

ES6 Set A  Set   object  can be used to hold  unique  values (no repetitions are allowed). A value in a set can be anything (objects and primitive values).  The syntax  new Set([iterable])  creates a Set  object  where  iterable  is an  array  or any other iterable  object  of values. The  size  property returns the number of distinct values in a set. For example: let set = new Set ([1, 2, 4, 2, 59, 9, 4, 9, 1]); console.log(set.size); // 5 Try It Yourself Methods add(value)  Adds a new element with the given value to the Set. delete(value)  Deletes a specified value from the set. has(value)  Returns true if a specified value exists in the set and false otherwise. clear()  Clears the set. values()  Returns an Iterator of values in the set. For example: let set = new Set(); set. add (5). add (9). add (59). add (9); console.log(set. has (9)); for (let v of set. values...

ES6 Map & Set part 1

Image
COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS ES6 Map & Set 19 1/2       ES6 Map A  Map   object  can be used to hold  key/value pairs. A key or value in a map can be anything (objects and primitive values).  The syntax  new Map([iterable])  creates a Map  object  where  iterable  is an  array  or any other iterable  object  whose elements are arrays (with a key/value pair each). An  Object  is similar to  Map  but there are important differences that make using a Map preferable in certain cases: 1) The keys can by any type including functions, objects, and any primitive. 2) You can get the size of a Map. 3) You can directly iterate over Map. 4) Performance of the Map is better in scenarios involving frequent addition and removal of key/value pairs. The  size  property returns the number of key/value pairs in a map. For...