Concatenate Arrays In JavaScript - ES5 Vs ES6

Wednesday 8 June 2016 | Posted by
ES5 provides concat() Array method to concatenate arrays. ES6 spread operator converts contents of operand elements into Array.

Using ES5

Here we are using concat method
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

var newArr = arr1.concat(arr2, arr3);
console.log(newArr);
// [ 'a', 'b', 'c', 'd', 'e' ]

Using ES6

Here we are using spread operator. It converts contents of operand elements into Array
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

console.log([...arr1, ...arr2, ...arr3]);
// [ 'a', 'b', 'c', 'd', 'e' ]
Click here to see DEMO
Read More
Labels:, | 0 comments

How To Pass Array As Parameters In JavaScript - ES5 Vs ES6

| Posted by
Some functions allow multiple parameters, but we can't pass them directly. ES5 has apply() method to that. ES6 provides spread operator. Lets see them here

apply() method syntax

fun.apply(thisArg, [argsArray])
thisArg - context of the function. if code in non strict mode, null and undefined will be replaced by  global object. 
argsArray - its an array

Using ES5 apply method

Observe below code. Here we are finding maximum number in array of numbers. We don't need any context here to apply, so we can pass null or undefined
Math.max.apply(null, [1, -5, 10, 8])
Click here to see DEMO
Observe below code. This is for pushing one array elements to another array
var arr1 = ['a', 'b'];
var arr2 = ['c', 'd'];

arr1.push.apply(arr1, arr2);
// arr1 is now ['a', 'b', 'c', 'd']
Click here to see DEMO

Using ES6

Use spread operator to pass array as parameter values
var maxVal = Math.max(...[-1, 5, 11, 3]);
console.log(maxVal);
Click here to see DEMO
Below code is for adding array elements into another array
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

arr1.push(...arr2);
console.log(arr1);
Click here to see DEMO
Read More
Labels:, | 0 comments

How To Handle Arbitrary Number Of Arguments Using JavaScript - ES5 Vs ES6

Monday 6 June 2016 | Posted by
If you pass one or more parameters, how will handle them ?. In ES5 arguments virtual array will be there, You need to process that array

Using ES5

Observe below code. Here we are processing arguments array.  
function logAllArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
logAllArguments('arg 1', 'arg 2', 'arg 3');
Click here to see DEMO
Below code is for handling rest of the parameters. In below code first parameter is mandatory, rest of the parameters extracted from arguments array
function logAllArguments() {
    var pattern = arguments[0];
    var args = [].slice.call(arguments, 1);
    for (var i=0; i < args.length; i++) {
        console.log(args[i]);
    }
}
logAllArguments('arg 1', 'arg 2', 'arg 3');

Using ES6

Observe below code. Here we are handling arguments with spread operator
function logAllArguments(...args) {
    for (const arg of args) {
        console.log(arg);
    }
}
logAllArguments('arg 1', 'arg 2', 'arg 3');
Click here to see DEMO
To handle rest of the parameters we can use rest of the parameters
function logAllArguments(arg1, ...args) {
    console.log(arg1);
    for (const arg of args) {
        console.log(arg);
    }
}
logAllArguments('arg 1', 'arg 2', 'arg 3');
Click here to see DEMO
Read More
Labels:, | 0 comments

How To Assign Default Values To Function Parameters in JavaScript - ES6 Vs ES5

| Posted by
In JavaScript, you can call function with or without parameters, Its not mandatory to give parameters as like Java. If you don't pass parameter values, those values will be undefined.

Using ES5

Observe below code. If parameters not defined, then default value will be assigned. But here the false values also trigger assignment
function foo(x, y) {
   x = x || 1;
   y = y || 4;
   alert(x+'  '+y);
}
foo();

Using ES6

Observe below code. The default value will be assigned if and only if the parameter value is undefined
function foo(x = 1, y = 4) {
   alert(x+'  '+y);
}
foo();
Click here to see DEMO

Using ES5 - Make Object As Option

Observe below code. We have to pass object as parameter
function selectEntries(options) {
    options = options || {}; 
    var start = options.start || 0;
    var end = options.end || -1;
    var step = options.step || 1;
    console.log(start+'  '+end+'  '+step);
}
selectEntries();

Using ES6 - Make Object As Option

You can assign default parameters for object
function selectEntries({ start=0, end=-1, step=1 } = {}) {
    console.log(start+'  '+end+'  '+step);
    alert(start+'  '+end+'  '+step);
}
selectEntries();
Click here to see DEMO
Read More
| 0 comments

How To Declare Multiline Strings Using JavaScript - ES6 Vs ES5

Sunday 5 June 2016 | Posted by
We don't need to add semicolon at end of the statement in javascript, it will add automatically. It will consider every line as statement. So you have to use string concatenation for declaring multiline strings. ES6 has given a feature to avoid string concatenation for multiline strings

Using ES5

Here we are using string cancatenation
var tmp = 'line 1 ' +
'line 2 ' +
'line 3 ' +
'line 4 ';

console.log(tmp);

Using ES6

Here we are back quotes from ES6
var tmp = `line 1 
line 2
line 3
line 4 `;

console.log(tmp); 
alert(tmp);
Click here to see DEMO
Read More
Labels:, | 0 comments

Iterate Over Arrays Using JavaScript - ES5 Vs ES6

| Posted by
There are several ways for iterating over arrays. The traditional way is using for and while loop, we can use forEach loop and ES6 has introduced for-of loop also.

Using ES5 

Observe below code, we are following traditional approach here 
var arr = ['a', 'b', 'c'];
for (var i=0; i<arr.length; i++) {
  var elem = arr[i];
  console.log(elem);
}
Variable i is available in global scope. Use let keyword instead of var to avoid polluting global scope
ES5 provides forEach loop also. Observe below code. It will pass value to different function
var arr = ['a', 'b', 'c'];
arr.forEach(function (elem) {
    console.log(elem);
});
ES5 provides for-in loop also. You can work with indexes
var arr = ['a', 'b', 'c'];
for (var i in arr) {
   console.log(i+'  '+arr[i]);
}
Click here to see DEMO

Using ES6

Observe below for-of loop. Constant elem holds element in array. 
const arr = ['a', 'b', 'c'];
for (const elem of arr) {
   console.log(elem);
}
Click here to see DEMO
If you want to work with indexes too, then use new Array method entries() 
const arr = ['a', 'b', 'c'];
for (const [index, elem] of arr.entries()) {
    console.log(index+'. '+elem);
}
Click here to see DEMO
Read More
Labels:, | 0 comments

String Interpolation Using JavaScript - ES6 Vs ES5

| Posted by
How we concatenate strings in javascript ? by using plus ( + ) symbol. If you want to place variable value in string, then you have to concatenate strings using plus symbols. ES6 has given a better way to do this by using template literals.

Using ES5

var name = "srinivas"
var str = "hi "+name+" this is sample string"
console.log(str);

Using ES6

Here name was added to string using ${...}
var name = "srinivas"
var str = `hi ${name} this is sample string`;
console.log(str);
Click here to see DEMO
Read More
Labels:, | 0 comments
Subscribe to: Posts (Atom)

Blogroll

Catagories

Popular Posts