DEV Community: Charles Best

Removing Duplicate Objects from an Array of Objects

Charles Best — Wed, 06 Jan 2021 23:44:32 +0000

Arrays and Objects are two basic data structure we find ourselves using in our everyday JavaScript coding task. Though they are quite simple to use, as the number of data we use them to store grow very large, we find a need to optimize the time and resources taken to perform operations on them.

In this article, I will focus on two fast approach to remove duplicate objects from an array of objects.

Recently, while working on a project, I came across a task that requires to remove duplicates from an array of objects.

For example, say you have this array of objects and you are tasked to find and remove any duplicates in the array

const data = [
  {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
  {
    id: 3,
    title: "Fast Delivery",
    description: "Your order is processed and delivered"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
 {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  }
]

This task may look trivial at first but as you dive in to code and having optimization in mind, you will find it not as trivial as you thought. Below are two methods different methods to solve this task

Method 1 : Using Set


    let data = [
  {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
  {
    id: 3,
    title: "Fast Delivery",
    description: "Your order is processed and delivered"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
 {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  }
]


    
//1st convert all object in the array to string to make it easy to compare them
let result = data.map(item=>JSON.stringify(item));

//pass the array into a Set to remove duplicates
result= new Set(result);

// convert the Set back to array of strings
result = Array.from(result);

// finally convert the array of strings to an array of object
result = result.map(item=>JSON.parse(item));

console.log(result);

It is important to stringify the objects first before passing them to the Set object else the Set will compare them by reference instead of by value i.e Since the object are store in different memory location, the Set will see them as different object even though they have the same exact values.

Method 2 : Using Objects


    let data = [
  {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
  {
    id: 3,
    title: "Fast Delivery",
    description: "Your order is processed and delivered"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  },
 {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  }
]


    
//1st create an empty object
let result = {};

//loop through the data array and use one of the keys of objects in the array to create properties in the result object 
data.forEach(item=>result[item.id] = item)

// extract back the array from the object
result= Object.values(result);

console.log(result)

Both methods works well so far that the duplicate objects are exactly the same. Method 2 apart from being shorter executes faster.

Note

In some rare cases, if the definition of duplicate is altered for example given the
below data and

const data = [
  {
    id: 1,
    title: "Pick meals",
    description: "Choose your meal"
  },
  {
    id: 2,
    title: "Hey",
    description: "Enter a delivery location"
  },
  {
    id: 3,
    title: "Fast Delivery",
    description: "Your order is processed and delivered"
  },
  {
    id: 2,
    title: "Checkout",
    description: "Enter a delivery location"
  }
]

Method 2 will not be the best if duplicate means itemA is exactly the same as ItemB and some object has the same id but have some other properties different, in this case Method 1 is best to use. Similarly if duplicate means itemA has exactly the same 'id' as ItemB regardless of other properties then Method 2 is the best for to use.

I hope you find this article useful, if you like the content, feel free to stay in touch, follow me on twitter@_DVERYBEST.

TDD & Automated Testing in JavaScript using Jest

Charles Best — Wed, 04 Nov 2020 23:06:42 +0000

TDD (Test Driven Development), automated testing, unit test, integration test, are some of the popular keywords you find in recent software development job descriptions/requirements, most especially JavaScript (react, react-native, nodejs) related jobs.

In this article, I will explain how to get started on writing automated test in JavaScript using Jest.

JEST

As stated in their official landing page

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Jest is one of the most popular JavaScript testing framework and can be used to write automated test for almost everything JavaScript. It is easy to understand and get started with.

Before we dive into writing codes, I will explain some important concepts

Automated Testing

Automated testing or test automation is a method in software testing that makes use of special software tools to control the execution of tests and then compares actual test results with predicted or expected results.

Simply put it is a way of testing our code(software) in other to compare the actual test results with predicted or expected results without manually going through the code.

This help ensure our code is bug-free at all point as tests will fail if bug is introduce to the code at any point.

Automated testing can be broken into two main types namely: unit tests and integration tests.

Unit tests simulate all possible outputs of a single function or component, given various inputs. They mock all external function calls in order to achieve a pure test of only that one function's logic.
Integration tests check to make sure that various functions or components are working together properly.

Now having understand these concepts, let dive in writing test codes.

Set-Up

You need to already have nodeJs installed/setup to follow along.

Create a new folder "test_master_class"
On your terminal cd into "test_master_class" and run the command npm init to scaffold package.json. Enter "jest" when asked for "test command" during scaffolding.
Run npm install --save-dev jest to install jest as a dev dependency.
Finally open your folder in your favorite editor.

Now to write our first test code, which will be a very simple demo, inside your working folder, create a folder named "test" and inside the folder create a file named "index.test.js" and add the following code

to run the test, on your terminal type npm testand press enter; and you would get the follow output

User@CharlesBest MINGW32 ~/Documents/MyJavaScript/test_master_class
$ npm test
> test_master_class@1.0.0 test C:\Users\User\Documents\MyJavaScript\test_master_class
> jest

PASS test/index.test.js
  test to see if test enviroment is properly set up
    √ test hello word (4 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.842 s
Ran all test suites.

From the code above in "index.test.js", describe is a global function from jest. It takes two main arguments, first a string that describes the tests to be contained in the describe block and the second argument is an an anonymous function containing the actual tests to be done. One of the main functions of the describe function is to group related test together. Similarly, test is also a global function from jest, it contains the actual test to be done. Also expect is a global function from jest, it takes the actual test result and compare it to an expected output contained in matchers like toBe.

A comprehensive list of other matchers like toBe, toEqual, toBeTruthy, etc. and their functions can be found on the documentation.

Now that we are clear with the basics of testing using jest, lets write unit and integration test for real scenarios.

Getting Real

Scenario: Let's build a simple calculator system, this system should be able to increment and decrement a counter with a given number, get the current value of the counter after each operation and the time taken to perform each operation, we should be able to reset the value of the count.

Solution: if we are to follow TDD principles, we are expect to write test first before the actual code.

In our test folder create a file named "calculator_service.test.js" and add the following code and run the test on the terminal using npm test

we get the output below

PASS test/index.test.js (6.212 s)
FAIL test/calculator_service.test.js
  ● Test suite failed to run
    Cannot find module '../service/calculator' from 'test/calculator_service.test.js'
    > 1 | const {add,subtract,getTime} = require('../service/calculator');
        |                                ^
      2 |
      3 | describe('test to see if functions are defined', () => {
      4 |

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (test/calculator_service.test.js:1:32)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        40.271 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

an error occurs making the test in "calculator_service.test.js" not to run and this is normal as "../service/calculator" we required does not exist yet.

In the root folder, create a folder "service", inside the folder add a new file "calculator.js" and run the test again, this time we get the below output

PASS test/index.test.js
FAIL test/calculator_service.test.js
  ● test to see if functions are defined › test add function
    expect(received).not.toBeUndefined()
    Received: undefined
      4 |
      5 |     test("test add function", () => {
    > 6 |         expect(add).not.toBeUndefined()
        |                         ^
      7 |     })
      8 |
      9 |     test("test add function", () => {
      at Object.<anonymous> (test/calculator_service.test.js:6:25)
  ● test to see if functions are defined › test add function
    expect(received).not.toBeUndefined()
    Received: undefined
       8 |
       9 |     test("test add function", () => {
    > 10 |         expect(subtract).not.toBeUndefined()
         |                              ^
      11 |     })
      12 |
      13 |     test("test add function", () => {
      at Object.<anonymous> (test/calculator_service.test.js:10:30)
  ● test to see if functions are defined › test add function
    expect(received).not.toBeUndefined()
    Received: undefined
      12 |
      13 |     test("test add function", () => {
    > 14 |         expect(getTime).not.toBeUndefined()
         |                             ^
      15 |     })
      16 | });
      at Object.<anonymous> (test/calculator_service.test.js:14:29)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       3 failed, 1 passed, 4 total
Snapshots:   0 total
Time:        10.71 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

This time our test ran successfully, but the test cases failed. From the output you can see what was expected and what was received.
Next, we create the expected functions by adding the following code to "../service/calculator.js" and run the test again.

this time, all the test passes as shown in the output below

$ npm test
> test_master_class@1.0.0 test C:\Users\User\Documents\MyJavaScript\test_master_class
> jest
PASS test/index.test.js (5.568 s)
PASS test/calculator_service.test.js (9.661 s)

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        16.167 s
Ran all test suites.

We can add further test cases to "calculator_service.test" as much as required. Example test to check if the functions returns a correct output when given an input.

$ npm test
> test_master_class@1.0.0 test C:\Users\User\Documents\MyJavaScript\test_master_class
> jest
PASS test/index.test.js
PASS test/calculator_service.test.js

Test Suites: 2 passed, 2 total
Tests:       7 passed, 7 total
Snapshots:   0 total
Time:        9.401 s
Ran all test suites.

So far all test done so far are unit tests. Now lets write integration tests to test the functions coupled together.

In our test folder, create a new file "calculator_controller.test.js" and add the following code

Next in the root folder, create a folder "controller", inside the folder add a new file "calculator.js" and add the following code then run the test again

if everything goes well, you should have the below output

$ npm test
> test_master_class@1.0.0 test C:\Users\User\Documents\MyJavaScript\test_master_class
> jest

PASS test/index.test.js
PASS test/calculator_service.test.js
PASS test/calculator_controller.test.js

Test Suites: 3 passed, 3 total
Tests:       12 passed, 12 total
Snapshots:   0 total
Time:        6.974 s
Ran all test suites.

Conclusion

In "calculator_controller.test.js", you many notice that I introduced two new functions beforeAll and afterAll, they are jest functions used to perform some operations before and after your test runs respectively.

TDD is all about writing "automated test" first, before writing codes that will pass the test; this helps ensure codes are broken into testable units which in turn reduce code duplication and bugs.

To pull the whole code, goto the github link
I hope you find this article useful, if you like the content, feel free to stay in touch, follow me on twitter.

Basic JavaScript Interview Questions

Charles Best — Mon, 19 Oct 2020 01:17:31 +0000

Hi everyone! So I had couple of interviews this year for JavaScript software development roles, and I felt its worth writing an article on some of the interview questions I was asked.
In this article I will write some of the questions I was asked and the answers to them.

Explain data structure

Data structure is a data organization, management, and storage format that enables efficient access and modification. A data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.

Simply put, data structure is a defined format/way of storing and managing a collection of data.

List examples of data structures, explain and implement one

some common data structures includes:

array
linked list
double linked list
stack
queue
hash map
etc

I will explain and implement a stack.

A stack is a linear data structure that stores data in a LIFO(Last in First Out) manner, i.e. the item added/inserted last is the first item to be accessed. Data in a stack can only be accessed from one end(top of the stack).
A Stack data structure supports only two type of operation namely PUSH(insert/add item) and POP(delete/remove item) operation.

Implementation

class Stack {
    constructor() {
        this.top = -1;
        this.store = [];
    }

    pop = () =>{
        if(this.top<0){
            return null;
        }
        let poppedItem = this.store[this.top];
        this.store.length = --this.top+1;
        return poppedItem;
    }

    push = (item)=>{
        this.store[++this.top] = item;
        return;
    }

    getTop = ()=>{
        return this.store[this.top];
    }
}

let myStack = new Stack();

myStack.push("10");
myStack.push("34");
myStack.push("17");
console.log(myStack.getTop());//output 17
console.log(myStack.pop());
console.log(myStack.getTop());//output 34

Explain Closure with code example

A closure is a function having access to the parent scope, even after the parent function has closed.
implementation

var add = (function(){
    let accumulator = 0;
    return function(value){
        return accumulator+=value;
    }
})();

console.log(add(3)); //output 3
console.log(add(5)); //output 8
console.log(add(7)); //output 15

Closure makes it possible for functions to have private variable. E.g in the code above, the function returned by the anonymous function is still able to access the accumulator variable even though the anonymous function is done executing.

Explain Asynchronicity in JavaScript with code example

JavaScript is single threaded, meaning codes are executed sequentially/synchronously(line by line one after the other). Asynchronous JavaScript enables code execution without blocking the main thread, i.e code execute without blocking/stopping other code from executing immediately while its still running/executing.

code example

console.log("start");
new Promise((resolve,reject)=>{
    resolve({data:'hello world'});
}).then(res=>{
    console.log(res);
})
console.log("end");
//outputs
//start
//end
//{ data: 'hello world' }

In the code above, console.log("end") executes before the promise even though the promise started executing first. This is because the promise is asynchronous and did not block the main thread allowing console.log("end") to execute while it is executing.

Explain Higher Order Functions.

Higher order functions are functions that take other functions as arguments and/or a function that returns a function.
code example

function logger(){
console.log("Hello world!");
}
setTimeOut(logger,2000);

In the above setTimeOut is a higher other function that takes the function logger as an argument.

Conclusion

I hope you find this article useful and it helps you prepare for interview.
If you like the content, feel free to stay in touch, follow me on twitter