ES 6 Javascript

The idea here is to discuss some of the ES6 Java script titbits and just a simple comparison of the conventional way of doing things and much better way of doing things using ES 6 way:)

I found this easier to check code quicker – https://stephengrider.github.io/JSPlaygrounds/

For Loop

var colors = ['red','blue','green'];
colors;

//the conventional way of writing for loop.
for (var i = 0; i<colors.length;i++){
console.log(colors[i]);
}

// where as the EC6 way of doing the same 
colors.forEach(function(color){
	console.log(color);
});

// Another Example
var numbers = [1,2,3,4,5];
var sum =0;

function adder(number){
    sum+=number;
}
numbers.forEach(adder);
console.log("Sum is "  + sum);

Map

//A Simple example to double numbers in an array.
var numbers = [1,2,3,4,5];
var doubledNumbers =[]
for (var i=0;i<numbers.length;i++) {
    doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers);

// Much better for doing the same thing
let doubled = numbers.map(function (number) {
    return number * 2;
});
console.log(doubled);

//////////////////Another One

var cars = [
    {model:'Buick',price:'cheap'},
    {model:'Camaro',price:'expensive'}
];
var prices = cars.map(function(car){
    return car.price;
});
console.log(prices);

Filter

//Calssical example of returning a particular item from array
var products = [
    {name:'cucumber', type:'vegetable'},
    {name:'banana', type:'fruit'},
    {name:'carrot', type:'vegetable'},
    {name:'mango', type:'fruit'},
];
var filteredProducts = [];
for(var i = 0; i < products.length;i++){
    if(products[i].type==='fruit'){
        filteredProducts.push(products[i]);
    }
}
console.log(filteredProducts);

// Much better way of doing it.
let filterpdts = products.filter(function(product){
 return product.type ==='fruit';
});
console.log(filterpdts);

Multiple filtering
//Calssical example of returning a particular item from array
var products = [
    {name: 'cucumber', type: 'vegetable', quantity: 3, price: 10},
    {name: 'banana', type: 'fruit', quantity: 11, price: 25},
    {name: 'carrot', type: 'vegetable', quantity: 50, price: 5},
    {name: 'mango', type: 'fruit', quantity: 100, price: 20},
];

let filterpdts = products.filter(function (product) {
    return (product.type === 'fruit'
        && product.quantity > 10
        && product.price < 100);
});
console.log(filterpdts);

Filter – another interesting example for filtering comments based on posts

var posts = { id:4, title:'Post 4'};
var comments = [
    {postId:4, contest:'good job'},
    {postId:3, contest:'good enough'},
    {postId:4, contest:'exciting'},
];
function commentsForPost(post,comments){
    return comments.filter(function(comment){
        return comment.postId==posts.id;
    })
}
console.log(commentsForPost(posts,comments));

Find

var users = [
    {name:'John'},
    {name:'Wim'},
    {name:'Ed'}
];
// Classical example to find a particular element from array
var user
for(var i=0;i<users.length;i++){
    if(users[i].name==='Wim'){
        user = users[i];
    }
}
console.log(user);

//Much Better way of doing the same thing
var userFind = users.find(function(user){
    return user.name==='Ed';
});

console.log(userFind);

//Another Interesting 
var posts = [
    {id:1,title:'Post 1'},
    {id:2,title:'Post 2'}
];

var comments = { postId:1, content: 'Awesome'};

function postForComment(posts,comments){
    return posts.find(function(post){
        return post.id===comments.postId;
    })
}
console.log(postForComment(posts,comments));

Every & Some

// to filter computers to run a program.
var computers = [
    {name:'Mac', ram:24},
    {name:'Win', ram:4},
    {name:'Toshiba', ram:32},
];
var allcomputersCanRunPgm = true;
var onlySomeComputersCanRunPgm = false;
for(var i = 0; i <computers.length;i++){
    var computer = computers[i];
    if(computers.ram<16){
        allcomputersCanRunPgm = false;
    }
    else{
        onlySomeComputersCanRunPgm = true;
    }
}
console.log(allcomputersCanRunPgm);
console.log(onlySomeComputersCanRunPgm);

//Much simpler way
let every = computers.every(function(computer){
    return computer.ram>16;
});
console.log(every);

let some = computers.some(function(computer){
    return computer.ram>16;
});
console.log(some);

Reduce

//Classical example to reduce
var numbers = [10,20,30];
var sum = 0;
for (var i=0;i<numbers.length;i++){
    sum+=numbers[i];
}
console.log(sum);

//Much better way to do the same thing
let reduce = numbers.reduce(function(sum, number){
    return sum+number;
},0); // ) 0 is the initial value
console.log(reduce);

// Another example to calculate the distance traveled

var trips = [{ distance: 34 }, { distance: 12 } , { distance: 1 }];

var totalDistance = trips.reduce(function(sum,trip){
    return sum+trip.distance;
},0);

//// Another example

var primaryColors = [
    {color:"red"},
    {color:"blue"},
    {color:"while"}
];

let reduce = primaryColors.reduce(function(previous, primaryColor){
    previous.push(primaryColor.color);
    return previous;
},[]);

console.log(reduce);

//Much interesting one
function balancedParens(string) {
    return string.split("")
        .reduce(function (previous, char) {
            if(previous<0) {
                return previous;
            }
            if (char === '(') {
                return ++previous;
            }
            if (char === ')') {
                return --previous;
            }
            return previous;
        }, 0);
}

let parens = balancedParens(")((( ()()() ))");

console.log(parens);

For

const colors = ['red','green','blue'];

for(let color of colors){
    console.log(color);
}

const numbers = [1,2,3,4];

//Another one
let total = 0;
for(let number of numbers){
    total+=number;
}
console.log(total);