Some Key JS questions – part 1

Recently I have been going back to the roots of my learning journey and have started re-learning Javascript and its key problems.

So this blog is a compilation of a few key problems on JS and how we can resolve them

Problem 1:

Getting Array of names from an array of users.

Let us consider the following array:

const users = [
  {
    id: 1,
    name: "Jack",
    isActive: true,
    age: 21,
  },
  {
    id: 2,
    name: "Jill",
    isActive: false,
    age: 18,
  },
  {
    id: 3,
    name: "John",
    isActive: true,
    age: 30,
  },
];

Now our goal is to get an array from the above data with just names of the users.

The quickest way to do so would be by using a simple map function of JS.

const arrayOfNames= users.map(items=> items.name);

The above function gives us an array of names from the given data.

Problem 2:

Getting Array of names from an array of users where the user is active.

Let us again consider the previous array of users. Now if we break our problem, we can see that first, we need to filter whether a user is active and then, mutate the array into an array of names.

This can be done as follows:

const activeUsers = users.filter((users)=>users.isActive===true).map((activeUser)=>activeUser.name);

Here we used the filter function to first return an array which only contains the active users and then we used the array map function to get the required result.

Problem 3:

Sort users based on age in descending order (highest to lowest)

Let us again use the previous array as an example here. To sort the array we can either use a loop where we check if the array[i+1] > array[i] and then swap the values if this is true. This is kind of like bubble sort or any other sorting algorithm.

But JS provides us with an easier way to do the same.

const sortedUsersDesc = users.sort((a,b)=>b.age-a.age).map(users=>users.name);

Here we can see we simply used the sort function giving it two params which serve as the previous and next value. Using the operation b.age – a.age, we can return a sorted array in descending order for users with the highest age coming at the first index of the array.

Problem 4:

Create a counter function which has increment and getValue functionality (use closures)

A Lexical scope is the scope in which a variable is defined.

A Closure is a function that has access to the variables in its lexical scope even after the function has returned.

This means that we need to define a function wherein the getValue and Increment functions remain private members and can only be accessed by the function.

const counter = () => {
  let count = 0;

  return {
    increment: function (val = 1) {
      count += val;
    },
    getValue: function () {
      return count;
    },
  };
};

const privateCounter = counter();
privateCounter.increment(3);
console.log(privatecounter.getValue());

Now this can be broken down simply as below:
1) We create a counter function

2) The counter function needs to hold a count value where the increment operation needs to be performed.

3) Under the lexical scope of the counter function, we return two anonymous functions, increment and getValue.

4) These functions remain private and can only be accessed by counter.

5) Thus we have defined a closure.

6) We can further access these lexical private functions using another variable privateCounter which now stores counter.

Problem 5:

Write a function which implements a range from 1…50

Our first instinct to solve this could be using the for loop as follows:

const rangedFunc =(num1, num2)=>{
  const range =[];

  for (let i=num1; i<= num2; i++){
      range.push(i);
  }
  return range;
}

console.log(rangedFunc(1,50));

But there is an easier and more effective way to return a range using the JS array methods.

const range = (num1, num2)=>{
return [...Array(num2).keys()].map((ele)=>ele+num1);
}

console.log(range(1,50));

Explanation:
1) We take the starting and end points of the range in a function.

2) We then proceed to the first part of our mutation.

3) Array(num2) will initialise an empty array with the total length required according to the range specified.

4) .keys() function will create an iterator of this array.

5) Now we spread the array using … operator to initialise an array with values starting from 0 to length -1 of the array.

6) Finally we use a map to mutate the array to fit our range’s needs. This can be any mutation, here we simply replace the elements starting from 0, to what is our range’s starting point and so on.

So that is it for part 1! In part 2 we shall explore more such interesting applications of JS and how to implement a solution for them

Discover more in the next blog!!

I keep on coding something cool, visit ankush.tech to see what all I am doing!

If you wish to read about my work, here is a book that I published recently – “CSS Bullets, a comprehensive guide to all the CSS you need!“

Interested in React? Learn react from scratch with my book, “REACT Bullets“.

Thanks for sticking around!

Till next time, keep howling, hustling, and learning!