A brief Introduction to Next Generation Javascript
There’s no doubt that JavaScript has become one of the most popular programming languages. Below, I will be describing some features with syntax and examples, which are quite often used when developing web apps using a Framework such as React.
1 — Keywords Let and Const
Just like var, both of these are used to store named values, the difference being let declares a variable which can be reinitialized but not a constant.
const number = 42;
try {
number = 99;
} catch(err) {
console.log(err);
// expected output: TypeError: invalid assignment to const `number’
// Note — error messages will vary depending on browser
}
console.log(number);
// expected output: 42
let x = 1;
if (x === 1) {
let x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 1
2 — Arrow functions
It is a syntactically compact alternative to a regular function.
const printName = (name) => {console.log(name)};
printName(‘siddharth’);
The above can be written in a more compact way as
const printName = name => console.log(name);
Another example
let arr = [1,2,3,4,5];
console.log(arr.map(num=>num*2));
Can you guess the output of the above code snippet?
3 — Imports and Exports
Export statement is used to export functions, objectives or primitives which can be used in other files using import statement.
Export could be the default export,
eg. const name = ‘sid’;
export default name;
To import in another file, syntax is
import person from ‘./filename’
or import p from ‘./filename’, when importing default export, you can use your own name.
Another type is named export, there can be multiple named export statements.
const name = ‘sid’;
const person = {name : “sid‘, age : 24};
export name, person;
Importing named exports, use {}
import {name} from ‘./filename.js’
or use alias import {name as n} from ‘./filename.js’;
import all exports — import * as bundled from ‘./filename.js’
4 — Classes
Classes are a feature which basically replace constructor functions and prototypes
eg
class Human{
gender = ‘female’;
printGender = () => console.log(this.gender);
}
class Person extends Human{
// example of inheritance
name = ‘Sid’;
printName = () => {console.log(name)};
}
let p = new Person();
p.printGender();
p.printName();
5-Rest and Spread Operator
The spread and rest operators actually use the same syntax: …, the three dots.
Spread operator, splits array elements or object properties.
var arr1 = [1,2,3,4,5];
var arr2 = […arr1, 7,8,9]
arr2 is now [1,2,3,4,5,7,8,9]
without spread operator
arr2 = [arr1, 7,8,9]
arr2 is [[1,2,3,4,5],7,8,9]
… as rest operator
function printValues(…args){
console.log(args);
//…args converts args into an array containg all the function arguments.
}
6 — References and Primitives.
let a = 10;
let b = a;
console.log(b); //prints 10
b = 20;
console.log(b); //prints 20
console.log(a); //prints 10
let arr1 = [1,2,3,4,5]
let arr2 = arr1; // in case of arrays and objects, simple assignments create references that point to the same memory location, rather than an actual copy;
arr2[0]=100;
console.log(arr2); //[100,2,3,4,5]
console.log(arr1); //[100,2,3,4,5], arr1 is also changed.
in order to create copy, use spread operator.
arr2 = […arr1]
7 — Array functions
map — applies a function to every element.
arr.map(x=>x*2)//doubles every element
arr.find(x=>x>12)// finds element as per testing condition
arr.findIndex(x=>x>12)
arr.indexOf(12)
arr.filter(x=>x>10);
arr1.concat(arr2);
arr1.slice(2,9);
arr.splice(2,0,’sid’); // add sid at index 2
arr.splice(2,1,’sid’); // replace element at index 2 with ‘sid’.
I hope the above examples would be of some practical value to all.
You can read about these in detail on Mozilla Developer Network which is an easy to understand but comprehensive resource for web development.
