A Practical Use Case for JavaScript’s Object.assign()

Assigning a Database recordset Object to a JavaScript Class Object

gravity well
Nov 6 · 5 min read
Photo by Louis Hansel on Unsplash

Use Case

There is a lot to Object.assign(). However, at its basic level, it assigns one Object’s property’s to another Object.

The syntax is,

Object.assign(target, ...sources)

I will be introducing you to Object.assign() and how it can be used to help populate a JavaScript Class with data. In particular, the data returned from a Database query.

In a prior article, I discussed Querying a SQL Server Database with node.js. I will use components of that article, to demonstrate how Object.assign() may be used.

Object.assign basics

As shown above, the syntax is,

Object.assign(target, ...sources)
  • target — this is the Object to which you want the assignment. In our case an instance of a Class Object.

As stated on the MDN about Object.assign,

Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources’ properties will similarly overwrite earlier ones.

The Object.assign() method only copies enumerable and own properties from a source object to a target object. It uses [[Get]] on the source and [[Set]] on the target, so it will invoke getters and setters. Therefore it assigns properties versus just copying or defining new properties.

The last paragraph has a very important part for us.

it will invoke getters and setters

As I will re-state later, it will be very important that our Class have the properties required to store the data as well as the set() methods to do so.

Although you can examine the examples of Object.assign() on MDN, I’d like to show the first example, most basic one, as it actually applies to what we want to achieve.

Example on MDN

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

I their example, they assigned one Object, source, to the target Object. The end result is they have the same data.

Why is this simple example useful for us? I’ll be going in to more detail in the next section of this article, but at a basic level, our Database data will look like this.

{EmpId: “000001”, FirstName : ”Bob” , LastName : ”Jones” ,Title : “Lawyer”}

Perfect structure for assignment to a well defined Class Object.

In other words, if we have a JavaScript Class capable of storing EmpId, FirstName, LastName and Title, we can take the data returned from the database Object and put it in our own data structure.

The structure of a record(set) returned from a Database

Let’s visit what the data returned from a Database Query looks like in node.js.

This image contains a code snippet and console output. Click here for the complete code to Query a SQL Server Database.

console.log(data)

Note line 60, the sqlRequest.query(), which is where we are requesting data from the database.

Now, focus on the console output. When using console.log(data), we see the data returned from the Database in an Array of well formed Objects, one for each of the four records.

Sadly, in the console is where this data lives until we do something with it.

If we look at the first record, data.recordset[0], we see,

{EmpId: “000001”, FirstName: “Fred”, LastName: “Jones”, Title: “Lawyer”}

The JavaScript Class

So now we just need a well defined JavaScript Class to place out recordset(s) data in.

Remember that a Class is just a blueprint, it’s the instance of the Class that creates an Object in to which we can actually place data.

The JavaScript Class should be well defined with properties and the set() methods necessary to store the data returned from the Database in to those Class properties. The type of Class structure found here.

Recall from a prior statement, Object.assign() will use the set() methods of the target to put the data in the target Object’s properties.

Our Class, at a minimum, should look as follows (I did include a Class method, showEmployeeInfo(), so we could verify the data was actually stored in the Class Object after we use Object.assign()._

Notice the setters. Object.assign will use these.

Our Employee Class has the properties necessary to store the EmpId, FirstName, LastName and Title as well as the set() methods needed by Object.assign() to put the data in to the properties.

Using Object.assign

For our demonstration, to keep focus on just Object.assign(), we will limit our code to just storing one record(set). Certainly a loop could be used to create more than one Class Object (Employee) and possibly an Array to store all of our Employees.

Notice the last two lines

Notice lines 92–95 as well as the console output.

  • We created an empty Employee Object, emp, line 92.

Viola!

Conclusion

Pretty cool. We now have a method of assigning well formed (Database or non Database) Objects to Class Objects. With the data in our own data structure, we can manipulate it as desired as well as utilize whatever Class methods we decide to include.

Thank you for reading and happy coding!

JavaScript in Plain English

Learn the web's most important programming language.

gravity well

Written by

Long time Software Developer, Trainer, Consultant. Keeping up to date. I’ve noticed in over 28 years of programming, one’s current skills have a shelf life.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade