Passing an Object as an Argument into a Function With Javascript

So, I didn’t find this out until a few weeks ago, but you can pass an object as a function argument, if you create the function correctly. First, I will show you a traditional function creation and call.

function doSomething(firstName, middleI, lastName){
	console.log('First Name: ' + firstName);
	console.log('Middle Initial: ' + middleI);
	console.log('Last Name: ' + lastName);
}
 
doSomething("John","Q.","Public");

As you can see, we created the function with three arguments, and then each of those arguments can be called within the function. In this case, we can only use arguments that we created in the function definition. For example, I would not be able to add a suffix like so:

doSomething("John","Q.","Public", "II");

Without adding it to the functions arguments list like this:

function doSomething(firstName, middleI, lastName, suffix){
	console.log('First Name: ' + firstName);
	console.log('Middle Initial: ' + middleI);
	console.log('Last Name: ' + lastName);
        console.log('Suffix: ' + suffix);
}

Now, let me show you how to pass in an object as an argument:

function doSomething(obj){
	console.log('First Name: ' + obj.firstName);
	console.log('Middle Initial: ' + obj.middleI);
	console.log('Last Name: ' + obj.lastName);
}
doSomething({firstName: "John", middleI: "Q.", lastName: "Public"});

As you can see, I have only declared one argument in the function definition. This defines my object, and I can pull the object properties out by using dot notation against the object. As seen above, I passed in my object as the argument in the function call. I think proceeded to pull out the properties that were passed over to my function in the object (obj.firstName).

The great thing about this, is that if I want to add another argument, I don’t have to add it to the argument list. All I have to do is access the property somewhere in the function to retrieve the extra data. Going back to the suffix argument from above, I can do:

function doSomething(obj){
	console.log('First Name: ' + obj.firstName);
	console.log('Middle Initial: ' + obj.middleI);
	console.log('Last Name: ' + obj.lastName);
        console.log('Suffix: ' + obj.suffix);
}

And then just pass in the new property into the function call

doSomething({firstName: "John", middleI: "Q.", lastName: "Public", suffix: "II"});

tomandhisjones

I have been studying or in the IT field now for over 12+ years and it has always been my passion. I currently own WebDev-fu, which provides web development, digital marketing, analytics, and graphic design to local businesses. I am also a Lead Front-End Web Developer for Haystak Digital Marketing. In my spare time, I study Astrophysics and Quantum physics, Astronomy, and Hebrew. I have three amazing kids and a wife I am in awe of. They are truly my inspiration.

You may also like...

1 Response

  1. You may like ECMAScript 6’s improved support for this pattern [1]:

    function doSomething({ firstName, middleI, lastName }){
    console.log(‘First Name: ‘ + firstName);
    console.log(‘Middle Initial: ‘ + middleI);
    console.log(‘Last Name: ‘ + lastName);
    }

    Additionally, you could also specify default values for firstName etc.

    [1] http://www.2ality.com/2011/11/keyword-parameters.html

Leave a Reply

%d bloggers like this: