Modern JavaScript Concepts

Template Literals

To wrap a string literal before ES6, you used single (‘) or double (“) quotes. Furthermore, the strings’ functionality is severely restricted.

ES6 template literals give a syntax for working with strings that is safer and cleaner, allowing you to address more complicated problems.

In ES6, you make a template literal by surrounding your content in backticks (‘), as shown below.

without template literals.

let name = "Kasun";
let age = 25;
let desc = "My name is "+name+" and my age is "+age;
console.log(desc);
printNames();

with template literals.

let fName = "Chamara";
let lName = "Fernando"; 
let fullName = `My first name is ${fName} and my last name is ${lName}`;
console.log(fullName);

Rest Parameters

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.

function myMarks(...marks){    
     console.log(marks);
} 
myMarks(60,50,88,77,81);
//output
[60,50,88,77,81]

Spread Operator

Allows us to spread elements. Used with arrays, strings, and objects to split the content

It allows us to quickly copy all or part of an existing array or object into another array or object.

let a = [1,2,3,4,5];
let b = [6,7,8,9];
 
// Make one array using 2 arrays
let c = [...a, ...b]; 

console.log(c); 
console.log(...c);
//output
[1,2,3,4,5,6,7,8,9]
1 2 3 4 5 6 7 8 9

Split array content

let fullName = ["Kasun", "Darshana", "Perera"]; console.log(fullName);
console.log(...fullName); // Split array content
//output 
["Kasun", "Darshana", "Perera"]
kasun Darshana Perera

Split a String

let subject = "Science"; 
console.log(subject);
console.log(...subject); // Seperate a string
//output
Science
S c i e n c e

Split an object

let subject = {
maths : 80,
science: 66 }

let personal = {
name : 'Dasun',
age : 24,
...subject // Spread an object }

console.log(subject);
console.log(personal);
//output
{ maths: 80, science: 66 }
{ name: 'Dasun', age: 24, maths: 80, science: 66 }

Arrow Functions(ES6)

Expression that provides a shorthand for declaring anonymous functions. An anonymous function is a function without a name. An anonymous function is often not accessible after its initial creation.

first we remind the function declarations and function Expressions

// -----Function Declaration-----

function myAge(age){
console.log(`My age is ${age}`);
}
myAge(23);
// -----Function Expression-----
const myName = function(name){
console.log(`My name is ${name}`);
}
myName("Dasun");

Example of a Arrow function

const subject = () => {
        return "Maths"
}
subject();

It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:

Destructuring

Object Destructuring

Extract properties from objects and bind them to variables.

const std = {
name : "Chamara Silva",
degree : "BSc Comp Sc.",
age : 25,
subjects : ["Java", "OS", "Comp Design", "Networking"],
gpa : {
first : 3.8,
second : 3.6,
third : 3.4
}
}

const {name,age} = std;
console.log(`My name is ${name}.My age is {age}`);

std object is restructured into name and age. It is easy to access any key by desctructing.

we can do the same example as below

const {degree:d, age:a} = std;
const {name:n,age:a} = std;
console.log(`My name is ${n}.My age is {a}`);

Array Destructuring

Extracting multiple properties from an array by taking the structure.

Array restructuring is similar to the object destructuring.

const names = ["Sanduni", "Chamara", "Sajith"];
const [n1, n2, n3] = names;
console.log(n1);
console.log(n2);
console.log(n3);

//output
Sanduni
Chamara
Sajith