ES6 Essentials

Introduction

JavaScript (not to be confused with Java) is a dynamic, weakly-typed, case-sensitive language used for client-side as well as server-side scripting. This tutorial covers the most basic and frequently used features of the JavaScript/ES6 that we come across while developing the ReactNative App. Readers are required to have a solid grasp of these essential concepts to understand the content of this website.

The tutorial is for developers who are unfamiliar with the ES6/Node.js programming language. Here, we will briefly discuss the following ES6 concepts-

  1. Let and Const keyword
  2. Template Literals
  3. Arrow Functions
  4. Currying
  5. Modules, Import, and Export

let and const keywords

Until ES5, var was the only way to declare a variable, and it only mattered if you write it within a function body. However, ES6 introduces two new ways to define variables.

Const

We declare a constant by using the const keyword. By using the const keyword, we create a block-scope variable whose value we cannot reassign. Let us view an example-

const DATA = "Javascirpt"
console.log(DATA) // output Javacript
DATA = "ES6"
console.log(DATA) // output Uncaught TypeError: Assignment to constant variable.

Let

let is what we should use for everything unless we are required to use a const. Let also creates a block scope like const. We can reassign its value though. We can look at an example of let in the below code.

let ATDA = "Javascript"
ATDA = "ES6"
conosle.log(ATDA) // output ES6

Template Literals

It is a feature with which we can create dynamic strings. We use backtick ( ` ) characters to create a Template Literal, add ( \n ) escape sequence to provide support for multiline-strings, and ( ${} ) to put values in the strings. Let us look at an example of template literal.

let language = "JavaScript"
const greet = `I love ${language}`
console.log(greet) // output I love JavaScript

Arrow Functions

Arrow functions are shorthand syntax for function expressions and best suited for smaller function bodies. It makes code easier to read. Few things to keep in mind-

  • Parenthesis () are a must if we are passing more than one argument.
  • We cannot use arrow functions as constructors. Let us look at the code for an arrow function-
const n = 2
const square = num=> num*num
console.log(square(n)) // output 4
// Arrow Function with Arrays
const arr = [2,4,6,8];
let squares = arr.map(x => x*x) // [4, 16, 36, 64]
let total = arr.reduce((x,y)=> x+y, 0); // 20, more than one input

The map (), reduce () and filter () are array functions. It transforms the array according to the applied function and returns the updated array.

Currying

In Javascript, Every function is a first-class citizen. It means that we can pass it as an argument into another as functions are objects in a fundamental sense. These functions, In programming, are referred to as Higher-Order Functions. For instance,

const sum = function(a,b){ return a+b }
const _HOF = function(func, a, b) { return func(a, b) }
console.log(_HOF(sum, 2, 3)) // Output 5
// using Arrow Function
const sum = (x) => (y) => x + y;
console.log(sum(3)(2)) // output 5

Modules, Import and Export

A lot of times, we are required to share code from one file to the other. We do it with the help of export and import. In React terms, one can use one component inside the other, which resides in a different module or file with the help of export and import.

Named Exports

With named exports, one can have multiple named exports per file.

// 1. Named Exports
// multiple named exports example
// In file.js file
import { A, B } from './Components'
// In Components.js file.
export const A = () => { }
export const B = () => { }
Default Export

One can have only one default export per file. In Default Export, we can use any name to import the component.

// 2. Default Exports
// import in file.js
import A from './Components'
// In Components.js
const A = () => { // code }
export default A;
Edit this page