DEV Community: Muhammad Uzair

How to get the two maximum values from Array of Objects using reduce method javascript.

Muhammad Uzair — Sat, 25 Mar 2023 17:20:25 +0000

To get the two maximum values from an array of objects using the reduce() method in JavaScript, we can follow a similar approach to the one we used for the array of numbers. However, we need to modify the reducer function to account for the fact that we are working with objects instead of numbers.

Here's an example:
const arr = [ { name: 'John', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Bob', age: 28 }, { name: 'Mary', age: 35 },]; const twoMaxValues = arr.sort((a, b) => b.age - a.age) .reduce((acc, curr) => { if (acc.length < 2) { acc.push(curr); } else if (curr.age > acc[1].age) { acc[0] = acc[1]; acc[1] = curr; } else if (curr.age > acc[0].age) { acc[0] = curr; } return acc; }, []); console.log(twoMaxValues); // [{ name: 'Mary', age: 35 }, { name: 'Alice', age: 30 }]

We start by sorting the array in descending order based on the age property of the objects using the sort() method with a comparison function that subtracts b.age from a.age.

Next, we use the reduce() method to iterate over the sorted array. As before, we start with an empty array ([]) as the initial value for the accumulator (acc).

Inside the reducer function, we first check if the accumulator has less than two values. If so, we simply push the current object to the accumulator array.

If the accumulator already has two values, we compare the age property of the current object to the age properties of the objects in the accumulator. If the current object has a higher age than the second highest object in the accumulator (acc[1]), we replace acc[1] with the current object, and move the previous second highest object to the first position (acc[0] = acc[1]).

Finally, if the current object has a higher age than the first object in the accumulator (acc[0]), we replace it with the current object.

The reduce() method will return an array with the two objects with the highest age properties, which are the two objects with the highest ages in the original array of objects.

In the example above, the two objects with the highest ages are { name: 'Mary', age: 35 } and { name: 'Alice', age: 30 }, which are returned as the twoMaxValues array.

Thanks

How to get the two maximum values from reduce method javascript.

Muhammad Uzair — Sat, 25 Mar 2023 17:14:57 +0000

In JavaScript, the reduce() method is used to reduce an array to a single value. It is a powerful tool that can be used to solve various problems, including finding the two maximum values from an array.

const arr = [10, 20, 30, 40, 50];
const [max1, max2] = arr.reduce(([first, second], current) => { if (current > first) { second = first; first = current; } else if (current > second) { second = current; } return [first, second]; }, [-Infinity, -Infinity]);
console.log(max1); // Output: 50 console.log(max2); // Output: 40

Here, we're using destructuring assignment to extract the first two values returned by reduce into max1 and max2. We start by initializing the accumulator to [-Infinity, -Infinity], which will be used to track the two largest numbers. We then iterate over the array, comparing each value to the two largest values found so far. If the current value is greater than the largest value, we shift the largest value to the second largest value, and set the largest value to the current value. If the current value is greater than the second largest value but less than or equal to the largest value, we set the second largest value to the current value. Finally, we return the updated accumulator, which contains the two largest values found in the array.

Grading Students

Muhammad Uzair — Thu, 24 Dec 2020 08:44:05 +0000

while working with hacker-rank problem-solving challenge, I just stuck in question of finding the results according to given criteria.
Criteria:
1) Find the next number from given input that is divisible by 5.

    i-e => Input is  73 so the number will be 75

2) Find the difference between actual input and the discovered.

    i-e => 73 -75

3) If the difference between them is smaller than 3 then the
student will be awarded a discovered number as a grade else it
will remain the same as input

  i-e 
    1) Input 73 - 75 = 2 //difference is less than 3 So, Grade 
    will be 75 here
    2) Input  67 - 70  = 3 // difference is less than 3 So, 
 Grade will be 67 here

4) If input is 33 or less then simply return it no need for any
processing

Solution:

  function gradingStudents(grades) {
   let final = [];
     for (let b = 0; b < grades.length; b++) {
      let base = parseInt(grades[b]);
       let val = parseInt(grades[b]);
       if (base < 38) {
        final.push(base);
        } else {
        for (let a = 0; a < 5; a++) {
            if (val % 5 == 0) {
                if (val - base < 3) {
                    final.push(val);
                    break;
                } else {
                    final.push(base);
                    break;
                }
            } else {
                val++;
            }
        }
    }
}
return final
 }

Hope you find this helpful or if there is any optimize method of solving this kindly recommend in a comment section.
Thanks.

How to check if Number is Float in JS

Muhammad Uzair — Thu, 17 Sep 2020 11:50:56 +0000

Usually we check types in javascript by using typeOf method but javascript doesn't support float type so it return a Number when you check a type of float number.
Like: typeOf(4.56) = Number

How to check if number is float or not in JS:

   function isFloat(n){
      return Number(n) === n && n % 1 !== 0;
    }

Explanation:
If the mod of a number divided by 1 is not equal to zero then it must a float number.

Factorial with Recursive Function in JS

Muhammad Uzair — Thu, 17 Sep 2020 11:19:04 +0000

Write a function to find a factorial of a number .
example: Factorial of 5! = 5*4*3*2*1

I have done this by implementing two methods:

By For Loop:

     function factorial(val){
         var numbers = val;
           for(let i = val-1; i > 0; i--) {
               numbers = numbers * i;
              }
         return numbers;
         }

By Recursion Method:

    function factorial(x) 
         { 
         if (x === 0)
         {
         return 1;
           }
       return x * factorial(x-1);
           }
     console.log(factorial(6));

DOM Manipulation

Muhammad Uzair — Sun, 30 Aug 2020 19:31:18 +0000

In this task I was told to create a HTML Button and manipulate it with my javascript.
The button's initial text label is 0. After each click, the button must increment by 1. Recall that the button's text label is the JS object's innerHTML property.

html

       <html>
           <head>
              <link rel="stylesheet" href="css/button.css" 
              type="text/css">
              <meta charset="utf-8">
              <title>Button</title>
          </head>
         <body> 
           <button id='btn' >0</button>
           <script src="js/button.js" type="text/javascript"> 
           </script>
          </body>
    </html>

css

     #btn{
           width:96px;
           height:48px;
           font-size:24px;
          }

js

 document.addEventListener('DOMContentLoaded', () => {
  const button = document.getElementById('btn');

 button.addEventListener('click', (e) => {
      const count = Number(e.currentTarget.innerText) + 1;

      e.currentTarget.innerText = count;
     });
   });

Reversing a String

Muhammad Uzair — Sun, 30 Aug 2020 16:28:53 +0000

Reverse string using the split, reverse, and join methods.
If an exception is thrown, catch it and print the contents of the exception's on a new line.
Print on a new line. If no exception was thrown, then this should be the reversed string; if an exception was thrown, this should be the original string.

 function reverseString(s) {

   try {

    let reversString = s.split("").reverse()

    console.log(reversString.join(""))


    }

 catch (e) {

     console.log(e.message);

    console.log(s)

    }


  }

Explanation:

-The split method converts the string into array.
-The reverse methods reverse the entries of an array.
-The Join methods finally prints the array entries with joining
them according to the condition you pass in parenthesis.

Output:

     reverseString("1234")

     Output = 4321

Try,Catch

I have used this try catch because if the data type will be other than string so the split function will not be applicable it will give runtime error,But in my case if there will be any error it will sent to catch block rather than displaying runtime error it will display a message.

Hope you find this helpful.

Happy Coding!

Looping Task

Muhammad Uzair — Sun, 30 Aug 2020 12:34:44 +0000

I was doing Hacker Rank Javascript 10 Day Challenge in which i saw a problem and thought that i would share.

Q: Complete the vowelsAndConsonants function in the editor below. It has one parameter, a string, , consisting of lowercase English alphabetic letters (i.e., a through z). The function must do the following:

First, print each vowel in on a new line. The English vowels are a, e, i, o, and u, and each vowel must be printed in the same order as it appeared in .
Second, print each consonant (i.e., non-vowel) in on a new line in the same order as it appeared in .

I have done this by adding two loops in my function

 function vowelsAndConsonants(s) {
  let vowel = ['a','e','i','o','u']
  for(var i=0; i< s.length;i++){
      if(vowel.includes(s.charAt(i))){
        console.log(s.charAt(i))
    }
 }
  for(var i=0; i< s.length;i++){
    if(!vowel.includes(s.charAt(i))){
        console.log(s.charAt(i))
     }
 }
 }

Calling the function

  vowelsAndConsonants(javascript)

Output:

  a
  a
  i
  o
  o
  j
  v
  s
  c
  r
  p
  t
  l
  p
  s

Observe:
Each letter is printed on a new line.
Then the vowels are printed in the same order as they appeared in the input
Then the consonants are printed in the same order as they appeared in input

Hope you find this helpful and if there is any optimize method to do this kindly tell me in the comment section

Happy Coding!

How to find a count of specific character in a string and take out dynamic value out of a repeating {{}} character in JavaScript

Muhammad Uzair — Wed, 10 Jun 2020 20:10:18 +0000

I was working in JavaScript since last year,I have taken in a great experiences from various situations,As a developer we are facing new scenarios everyday and learning new things with every rising sun, Like yesterday i was supposed to solve a problem to find a count of specific character {{}} repeating in my string and to catch a value in it which will always be different depends on user input.

Problem 1: Finding the count {{}} this in my string

It will first finds that either two curly brackets opening at the same time then it will return an array contains all the possible matches .The g in it is the parameter of Regular Expression it will search globally.

Problem 2 : Taking the dynamic values out of {{}} from a string based on user input

In this case i have applied this function on my input box if its value changes, the function checks that if curly brackets occur then it will return an array.
If there will be one match found then it will return the value in array with an index[0] but if there may be more than one match found it was returning an array with first match at index 0 and then two empty strings on index 1 and index 2 and then second match on index 3,it repeats this behavior after every match , So that's why i applied a loop with i+=3 at every iteration it will take a step of 2.

May be it was an expensive method but it solved my problem,As I have not worked much with Regular Expressions so that's why may be it was scrambled and time taken process but it worked for me.

Hope you find this article useful. Please share your thoughts or if there is any method by which this can be done easily in the comment section.

Thanks

Some ES-6 Features

Muhammad Uzair — Sun, 12 Apr 2020 14:24:47 +0000

Rest Operator

The rest parameter syntax allows us to represent an indefinite number of arguments as an array

 function add(num1,...args){ in args it will return array containing numbers
    return args[0]+args[1]

 }
  console.log(add(1,3,5));   in args there is 3,5 so the sum will be 8

Spread Operator

It will unpack the values of a array,this method will not affect a original element but creates copy

 let arr = ["a","b","c","d"]
 let arr2 = ["e","f","g"]
 let newarr = [...arr , ...arr2];    combine both array into new one
 console.log(newarr); result===>  ["a","b","c","d","e","f","g"]
 newarr.push("h");   it will just push into the new array           
 console.log(newarr);   result===>  ["a","b","c","d","e","f","g","h"]

Template Literals

It is replacement to single/double quotes,it also gives facility to addd variables or do operations,start with backticks instead of quotes

 var para = ` My Name is         
 Uzair `
 console.log(para); It will include line break in result

Interpolate with backticks
Adding variables in between or performing operations

  var  myVariable = `test1`

${} is used to combine variable in it

  var variable2 = `Something ${ myVariable }`

you can also perform operation in it

 var variable3 = `sum is ${1+2+3} ` you can also perform operation in it
 console.log(variable2 + variable3)

for of loop
prints all the values of list
iterates all the elements

 let list = [1,2,7,4,5,6] 
  for(let value of list){
    console.log(value); 
  } result ====> 123456

for in loop
it will iterate the length / index not elements

let list = [1,2,7,4,5,6]
       for(i in list){
           console.log(i);
            } 0,1,2,3,4,5   all indexes of array

Arrow Functions

An arrow function expression is a syntactically compact alternative to a regular function expression,The fat arrows are amazing because they would make your this behave properly, i.e., this will have the same value as in the context of the function

 hello = () => {
     return "Hello World!";
  }

Sets

A Set is a collection of unique elements

const arr = [5, 1, 5, 7, 7, 5];
const unique = [...new Set(arr)]; // [ 5, 1, 7 ]

Maps

The map() method in JavaScript creates an array by calling a specific function on each element present in the parent array.

     var el = document.getElementById('root'); 
     var arr = [2, 5, 6, 3, 8, 9]; 

    var newArr = arr.map(function(val, index){ 
        return {key:index, value:val*val}; 
    })     
    console.log(newArr)

Hope you find this article useful. Please share your thoughts in the comment section.

Destructuring of Objects

Muhammad Uzair — Sat, 11 Apr 2020 17:57:56 +0000

Destructuring objects

Destructuring on objects lets you bind variables to different properties of an object. You specify the property being bound, followed by the variable you are binding its value to.

var data = {
       name : "Uzair",
       age : 17,
       gender : "male"
   }

destructuring object items name into name and so on..

   var {name,age,person} = data
   console.log(age)

it is also possible to retrive values to a object that is not declared

  var {name,age,gender} = {name:"Catty" , age:"21" , gender:"female"}
  console.log(age)

it is also possible to assing value to variable that are declared before
the name of new variable should be same as the keys of object otherwise it will be undifined

      var data = {
          name : "Uzair",
          age : 17,
          gender : "male"
      };
      var name,age,gender;

     ({name,age,gender} = data);
      console.log(age);

if we want to use a new variable name and assing it object key value

 var data = {
        name: "Uzair",
        age: 17,
        gender: "male",
     };
     //changing key names with new variables
      var { name: nickname, age: umer } = data;
      console.log(nickname); //it will render uzair

using default value , it will assing only in-case when key is not there / undefined

          var data = {
          name : "Uzair",
          age : 17,
          gender : "male"
      }

  var {name="usama" , friend ="wahab"} = data

  console.log(name); // name is same as the object value

  console.log(friend); //friend is with default value of wahab

we can also set default value when assinging with a new name
if the variable will match with the object key it will assing values from object otherwise it will

  var data = {
        name: "Uzair",
        age: 17,
        gender: "male",
      };

    var {
      name: nickname = "uzey",
      age: umer = "barahogya",
      friend: dost = "some text",
    } = data;
    console.log(name); //here name will be assigned the uzair because it 
    exits in object
    console.log(dost); //it will assing some text

computed property name
you can specify the name of a property

var data = {
     name: "Uzair",
     age: 17,
     gender: "male",
   };

  var prop = "name";    //here we are assinging object key name in prop
  var { [prop]: myname } = data;  
  the value of myname will be the value of data.name prop has key name in it 
  it will find value from abject**
  console.log(myname);  //we will get Uzair in result

rest method means you can assing more the one value to a variable

        var data = {
           name: "Uzair",
           age: 17,
           gender: "male",
           friends: ["faiq", "ibad", "wahib"],
                  };

    var { name, ...others } = data;
    console.log(name); //result will be uzair
    console.log(others); //result will be {  age: 17
                                             gender: "male"
                                            friends:["faiq", "ibad", "wahib"]
                                           }

Hope you find this article useful. Please share your thoughts in the comment section.

Destructuring of Array

Muhammad Uzair — Fri, 10 Apr 2020 17:15:31 +0000

Concept
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays.It is an elegant way to extract data from arrays.

    var array = ["My","Name","IS","Uzair"]
    console.log(array); //result ==>  ["My","Name","IS","Uzair"]

name1 will be assigned by My & name2 will be with Name

    var [name1,name2] = ["My","Name","IS","Uzair"]   
    console.log(name1);//result ==> My
    console.log(name2);//result ==> Name

( ,)comma is used skip one element every time

    //name3 will be assigned by Is $ name4 will be with Uzair
    var [,,name3,name4] = ["My","Name","IS","Uzair"]
    console.log(name3);//result ==> IS
    console.log(name4);//result ==> Uzair

( ... ) spread operator(three dots) unpack the string and this will be assinged like a array
here name5 will be My and newArray will be the new array containing remaining elements

    var [name5,...newArray] = ["My","Name","IS","Uzair"]
    console.log(newArray);//result==> ["Name","IS","Uzair"]
    console.log(name5);// result==> My

Hope you find this article useful. Please share your thoughts in the comment section.