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"});

One Response

  1. Axel Rauschmayer
    Axel Rauschmayer July 24, 2013 at 4:33 am | | Reply

    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: