Using ES6 Import/Export in Node.js & Babel.js

Using ES6 Import/Export in Node.js & Babel.js

This Node.js tutorial explains how to use ES6 Import/Export in Node.js & Babel.js. In this post we portray the `import` and `export` highlight in ES6 and how we are utilizing it as a part of Node.js v6 with `Babel.js`. ES6 acquainted another route with arranging modules. It's not the same as CommonJS and AMD we are as of now utilizing, which through the new catch phrases import and export

ES6 acquainted another route with arrange modules. It's not the same as CommonJS and AMD we are as of now utilizing, which through the new catchphrases import and export. It still NOT being bolstered by the most recent form of Node.js. Be that as it may, luckily we can influence Babel.js to play it at this moment.

When we are revamping the following form of Instant Message module of our creation - Worktile Pro, we utilized this element under Node.js v6 and Babel.js. So in this post I might want to present what it is and how I was utilizing.

Development Environment with Babel.js

Bebel.js is an open source JavaScript compiler which permits us to utilize most recent components, particularly something still in draft running in lower level runtime. For our situation, we require Babel.js to interpret and assemble our backend source code composed with ES6 and ES7 elements, to the code in ES6 that good with Node.js v6.

The following is a piece of the package.json document we are utilizing.

{
      "name": "Worktile Pro IM",
      "version": "1.0.0",
      "main": "app.js",
      "scripts": {
        "run": "babel-node app.js",
        "build": "babel . -d .dist --ignore=\"node_modules\""
      },
      "devDependencies": {
        "babel-cli": "*",
        "babel-core": "*",
        "babel-preset-es2015-node5": "*",
        "babel-preset-stage-3": "*",
        "babel-register": "*"
      }
    }

Additionally we require .babelrc record to characterize the practices of Babel.js as underneath.

    {
      "presets": ["es2015-node5", "stage-3"],
      "plugins": []
    }

You can duplicate this document and utilize npm install to set up your workplace. In the event that you need to run your code with Babel.js without assembling, you can straightforward use npm run-script run, then babel-cli will incorporate your source code and execute in memory. This is great when advancement yet not underway, since it will utilize a considerable measure memory and drawback the execution of your application. When you regard your code, you can run npm run-script build to give Babel.js a chance to assemble the source code to a yield organizer (For my situation it's ./.dist/) when you can node ./.dist/app.js.

For more data about Babel.js, babel-node and Babel-cli please allude to Babel's document.

Customary CommomJS

How about we make an exceptionally basic application with customary Node.js modules in CommonJS style. The following is calc.js record which will be utilized later.

'use strict';

    exports.name = 'calc';
    exports.add = (x, y) => {
        return x + y;
    };
    exports.subtract = (x, y) => {
        return x - y;
    };
    exports.multiple = (x, y) => {
        return x * y;
    };
    exports.divide = (x, y) => {
        return x / y;
    };

The following is the way we can utilize it.

  'use strict';

    const calc = require('./calc');

    const x = 3;
    const y = 5;

    console.log(`${calc.name}`);

    const result_add = calc.add(x, y);
    console.log(`${x} + ${y} = ${result_add}`);

    const result_subtract = calc.subtract(x, y);
    console.log(`${x} - ${y} = ${result_subtract}`);

    const result_multiple = calc.multiple(x, y);
    console.log(`${x} * ${y} = ${result_multiple}`);

    const result_divide = calc.divide(x, y);
    console.log(`${x} / ${y} = ${result_divide}`);

Since it's in ES5 language structure we can essentially execute by node app.js.

Send out Variables and Import

ES6 export works fundamentally the same as with the way we are utilizing already. Fundamentally we can utilize export watchword to any variables characterized in the module source code. For instance, we can send out name by utilizing export const name = 'calc';. So this module can be overhaul as underneath.

 'use strict';

    export const name = 'calc';

    export const add = (x, y) => {
        return x + y;
    };

    export const subtract = (x, y) => {
        return x - y;
    };

    export const multiple = (x, y) => {
        return x * y;
    };

    export const divide = (x, y) => {
        return x / y;
    };

At the point when utilizing this module we require import watchword. Comparable as require we have to determine the way of this module and dole out as a variable. At that point we can utilize capacities characterized in calc.js not surprisingly.

'use strict';

    import * as calc from './calc';

    const x = 3;
    const y = 5;

    console.log(`${calc.name}`);

    const result_add = calc.add(x, y);
    console.log(`${x} + ${y} = ${result_add}`);

    const result_subtract = calc.subtract(x, y);
    console.log(`${x} - ${y} = ${result_subtract}`);

    const result_multiple = calc.multiple(x, y);
    console.log(`${x} * ${y} = ${result_multiple}`);

    const result_divide = calc.divide(x, y);
    console.log(`${x} / ${y} = ${result_divide}`);

Since we are utilizing export and import watchwords which is NOT bolstered in Node.js v6, we will got mistake if simply run it by node app.js.

We require use Babel.js to arrange it to the code Node.js backings and run it by utilizing npm run-script run, and you can see it works.

In the code beneath, we utilize import * as calc, which implies it will import all variables this module sends out, as properties of calc. On the other hand we can simply import a few variables we need and utilize then as independent variables as beneath.

'use strict';

    import {name, add, subtract} from './calc';

    const x = 3;
    const y = 5;

    console.log(`${name}`);

    const result_add = add(x, y);
    console.log(`${x} + ${y} = ${result_add}`);

    const result_subtract = subtract(x, y);
    console.log(`${x} - ${y} = ${result_subtract}`);

Default Export

Once in a while we have to send out only one variable. For this situation we utilize export default. For instance, in the code beneath I wrapped all variables into one protest and sent out as default.

    'use strict';

    export default {
        name: 'calc',
        add: (x, y) => {
            return x + y;
        },
        subtract: (x, y) => {
            return x - y;
        },
        multiple: (x, y) => {
            return x * y;
        },
        divide: (x, y) => {
            return x / y;
        }
    };

Presently we can import it into a variable.

    'use strict';

    import calc from './calc';

    const x = 3;
    const y = 5;

    console.log(`${calc.name}`);

    const result_add = calc.add(x, y);
    console.log(`${x} + ${y} = ${result_add}`);

    const result_subtract = calc.subtract(x, y);
    console.log(`${x} - ${y} = ${result_subtract}`);

    const result_multiple = calc.multiple(x, y);
    console.log(`${x} * ${y} = ${result_multiple}`);

    const result_divide = calc.divide(x, y);
    console.log(`${x} / ${y} = ${result_divide}`);

Default fare is exceptionally valuable when sending out a class. For instance, the code beneath we characterized our calc.js as a class and fare. >Note when trading a class, do NOT attach semi-comma toward the end of the code.


    'use strict';

    export default class Calc {
        constructor (x, y) {
            this.x = x;
            this.y = y;
        }

        add () {
            return this.x + this.y;
        }

        subtract () {
            return this.x - this.y;
        }

        multiple () {
            return this.x * this.y;
        }

        divide () {
            return this.x / this.y;
        }
    }

The following is the code we are utilizing this class.

'use strict';

    import Calc from './calc';

    const x = 3;
    const y = 5;
    const calc = new Calc(x, y);

    const result_add = calc.add();
    console.log(`${x} + ${y} = ${result_add}`);

    const result_subtract = calc.subtract();
    console.log(`${x} - ${y} = ${result_subtract}`);

    const result_mutiple = calc.mutiple();
    console.log(`${x} * ${y} = ${result_mutiple}`);

    const result_divide = calc.divide();
    console.log(`${x} / ${y} = ${result_divide}`);

Summary

In this post I portrayed the import and export highlight in ES6 and how we are utilizing it as a part of Node.js v6 with Babel.js. Fundamentally it doesn't furnish significant improvement contrasting and the first CommonJS module framework. In any case, with the update of Node.js and web programs, this component ought to be utilized broadly and supplant current CommonJS and AMD I think.

JavaScript ES6 Classes

JavaScript ES6 Classes

An exciting new construct that was introduced in the ES6 specification is the ES6 classes. If you're a Javascript developer, you will be aware that Javascript follows prototypal inheritance and sometimes it can get a little messy. However, with ES6 classes the syntax is simpler and much more intuitive.

An exciting new construct that was introduced in the ES6 specification is the ES6 classes. If you're a Javascript developer, you will be aware that Javascript follows prototypal inheritance and sometimes it can get a little messy. However, with ES6 classes the syntax is simpler and much more intuitive.

Classes are a fundamental part of object oriented programming (OOP). They define “blueprints” for real-world object modeling and organize code into logical, reusable parts. Classes share many similarities with regular objects. They have their own constructor functions, properties, and methods. In this tutorial, we’ll demonstrate how to create and work with ES6 classes.

Creating a class

You can create a class using the class keyword:

class Person{

  constructor(name, age) {

    this.name = name

    this.age = age

  }

}



let person = new Person("Sam", 30)



person.name

//returns 'Sam'



person.age

//returns 30

Notice how we define our Person class with a constructor() function taking two arguments name and age. Using the this keyword, we set the name and age properties based on the provided arguments. Remember that the constructor function is called whenever we create a new instance of the Person class.

Similar to objects, we can read class properties using dot notation so that person.name returns Sam.

Defining properties and methods

You can define properties and methods for a class the same way you do for regular objects:

class Person{

  constructor(name, age) {

    this.name = name

    this.age = age

  }



  sayName() {

    console.log("My name is " + this.name)

  }

}



let person = new Person('Tim', 40)



person.sayName()

//logs 'My name is Tim'



person.location = 'London'



person.location

//returns 'London'

Notice how we define a sayName() function within our Person class definition. Once we create a new instance of Person, we can call the method via person.sayName().

You can also add properties and methods on the fly. You’ll notice that while the location property isn’t defined in our constructor function, we can still dynamically add it later on for the person instance. Remember that if we created a new instance of Person, it would not have a location property because that property is not defined in the class definition. Only properties and methods that we explicitly define will be shared by all instances of the class.

Static functions

You can use the static keyword to make class methods static. A static method acts on the class itself, not on instances of the class:

class Person{

  constructor(name, age) {

    this.name = name

    this.age = age

  }



  static describe(){

    console.log("This is a person.")

  }



  sayName() {

    console.log("My name is " + this.name)

  }

}



Person.describe()

//logs 'This is a person.'

Notice how static methods operate on the class itself and not an instance of the class. We didn’t have to create a new Person to call the static method.

Static methods are useful for common or shared class functionality. In this case, the describe() method is used to describe what the Person class is. It will apply to every instance of Person. This is why we make it a static method.

Class Inheritance

Inheritance allows you to create new classes based off existing ones. These new classes “inherit” the methods and properties of their parent. They can also override or extend the parent:

class Person{

  constructor(name, age) {

    this.name = name

    this.age = age

  }


  static describe(){

    console.log("This is a person.")

  }


  sayName() {

    console.log("My name is " + this.name)

  }

}



class Programmer extends Person {

  sayName(){

    console.log("My name is " + this.name + " and I am a programmer!")

  }

}



let averageJoe = new Person('Todd', 40)

let programmer = new Programmer('Sam', 33)



averageJoe.sayName()


//logs 'My name is Todd'


programmer.sayName()


//logs 'My name is Sam and I am a programmer!'

Using the extends keyword, we can create a new class sharing the same characteristics as Person. Notice how we override the sayName() method with a new definition for the Programmer class. Apart from overriding this method, everything else remains the same for both Person and Programmer.

Using super

The super keyword allows a child class to invoke parent class properties and methods.

class Person{

  constructor(name, age) {

    this.name = name

    this.age = age

  }



  static describe(){

    console.log("This is a person.")

  }



  sayName() {

    console.log("My name is " + this.name)

  }

}





class Programmer extends Person {

  sayName(){

    super.sayName()

    console.log("My name is " + this.name + " and I am a programmer!")

  }

}



let averageJoe = new Person('Todd', 40)

let programmer = new Programmer('Sam', 33)



programmer.sayName()



//logs 'My name is Sam'

//logs 'My name is Sam and I am a programmer!'

Notice how we call super.sayName() in the Programmer implementation of sayName(). While this invokes the parent implementation of super.sayName(), the name property still references the Programmer class.

Conclusion

Classes facilitate object oriented programming in JavaScript. While regular objects provide similar functionality, classes provide the extra advantage of inheritance and static methods.

Javascript ES6: Map-Reduce-Filter-Find

Javascript ES6: Map-Reduce-Filter-Find

If you are a fan of javascript and use it daily then you will love this. Way you write your JavaScript by using .map(), .reduce() and .filter() ... concise with arrow functions

If you are a fan of javascript and use it daily then you will love this

Javascript is a language that give freedom of writing code in any style, from imperative to declarative styles. Most programmer use imperative because either they are coming from OOPs background, may be they love it or they are not familiar with other style. Before we dive into the declarative style which is FP, let’s understand the differences in two by looking at an example(If you already know the difference then you may skip few paragraphs).

Imperative

// to calculate the sum of array elements
const sum = (arr) => {
  let result = 0; 
  for (let i = 0; i < arr.length; i++) {
    result += arr[i];
  }  
  return result;
};

Imperative style is cool but imagine what if there is a complex mathematics logic here then size of code and the readability will suck. It increases the cognitive load when reading, and over time makes it easier to faulter in reasoning and logic. Also, the main complexity of this code snippet derives from the fact that instead of telling the computer what we want it to do, we are instructing it on how to do it.

Declarative

// calculate the sum of array elements
const sum = (arr) => arr.reduce((total, item) => total += item, 0);

Now, this looks pretty clean, shorter, expressive, concise code, less error prone, easier to maintain and easier to debug. We are telling computer what we want it to do rather how to do it.

Declarative approach are easily optimisable at complier end and also have less side effects.

Note: if you are concerned about the performance of above two and other javascript function (map, reduce, filter, find) then you should for small data set and can view here for large data set(100–1000000)

Without more delay, let’s start the real action with most used Javascript function for functional programming.

Map

// definition 
collection.map((currentValue, index) => {
    // Return element for newArray
});
// example
const arr = [1,2,3,4,5];
const newArray = arr.map(i => i*10);
// return a new array with all value as multiple of 10;

Map works on an array and return an array that’s it. Above code snippet works on an collection i.e an array and takes a callback with current iteration value, index as arguments and return a new array.

Note: Maps are well suited for change/transforming whole array rather than breaking the flow for some conditions, Map suck’s performance wise, check out "underlined" here but are easy to be used for small data sets.

Reduce

// definition 
collection.reduce((accumulator, item, index) => {
    // logic to perform to get accumulator as a return value
}, initialValue for accumulator);
// example
const arr = [1,2,3,4,5];
const total = arr.reduce((acc, item) => acc+= item, 0);
// return a total as 15

Reduce works on an array but can return anything you want it to return. As the name speaks for itself it can be reduce to anything and can behave like map, find, filter or any other javascript function. The above code snippet works on an array and reduce to compute the total value of item of array.

Explanation of example above : On reduce first run, acc is assigned a 0 value and then acc+= item i.e acc = acc+item which will compute to0+1 i.e 1. This 1 will be acc value for next iteration and this continues until we are done with all array items.

Find

// definition 
collection.find((item) => {
    // return first element that satisfy the condition
});
// example
const arr = [1,2,8,4,5];
const value = arr.find(i => i%4 == 0);
// return the first value i.e 8 

Find works on an array and return the first element that satisfy the condition in function.

Note: Easy, simple but not efficient on large data set, why ? look here

Filter

// definition 
collection.filter((currentValue, index) => {
    // logic to filter array on
});
// example
const arr = [1,2,3,4,5];
const newArray = arr.filter(i => i%2 == 0);
// return a new array with value [2, 4]

Filter works on array return an array for filtered items.


Lets use them for some real world scenarios + some ES6. (lets try some ARMD on below object keys)

Wondering what is ARMD its Add, Read, Modify, Delete, its cool to coin your own jargon

const users = [
  {
    id: 1,
    name: "Jonathon Haley",
    username: "Monte.Weber2",
    email: "[email protected]",
    phone: "1-563-675-1857 x11708",
    website: "carmela.net",
    password: "hashed_password"
  },
  {
    id: 2,
    name: "Dean John",
    username: "dd.1",
    email: "[email protected]",
    phone: "1-123-543-1857 123212",
    website: "dd.net",
    password: "Dean_hashed_password"
  }

We will use users as array for further examples

1. ARMD — Adding a new element to users

const newUser = {
    id: 4,
    name: "Denomer Crazy",
    username: "crazy.1",
    email: "[email protected]",
    phone: "",
    website: "crazy.app",
    password: "crazed_checker"
};
const newData = [...users, newUser]; // add element at last
or 
const newData = [newUser, ...users]; // add element at first
or 
const newData = users.concat(newUser) // the old way

The use of es6 spread operator make super easy to add elements to array. We can use spread operator to concat two different array, modify shape of objects or add dynamic key value pairs etc.

const hobbies = ['chess', 'pool'];
const newUsers = users.map(u => ({...u, hobbies}))
// this will add hobbies to users array and return newUsers array

2. ARMD — Get email address, phone number and website of users into new array

const contactInfo = users.map(({email, website, phone}) => ({email, website, phone}));

The use es6 of destructuring of object keys and map to get the contact info array for user.

3. ARMD — Find and replace value for key of objects

const newUsers = users.map(u => u.id == 2? ({...u, name: 'te'}): u);
// this will return newUsers with all user having name 'te'

4. ARMD —Delete some key’s from object

Note: We will actually not delete the key but return a new object, if you want to delete the key use delete operator, here we are considering object immutability.

To delete keys there are lot of ways but we will look at the most easy, single lined. Lets try to delete website from users.

const newUsers = users.map({id, email, name, username, phone, password} => ({id, email, username, email, phone, password}));
// will return an array with all keys other than website

Above code seems to be practically difficult to code for big objects.

const newUsers = users.map(u => Object.keys(u).reduce((newObj, key) => key != 'website' ? { ...newObj, [key]: u[key]} : newObj, {}));

We map through the users and then on each user we do a reduce and form a new object (newObj) and then check for website key, if its a website we return the previously formed newObj, if not then we do a spread operator and add require key to obj and finally return newObj.

If anything is not clear or you want to point out something, please comment down below.

Thank you

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20