Stuff they don’t tell JavaScript noobs: Making your arguments optional

November 16th, 2011

One thing that took me a while to grasp fully when it came to programming was passing arguments to functions. I don’t know why but it was one of those things that I just got one day. But something that took me a while to learn is how to set up arguments to be optional. And once again, as with most of the things in my noobs series, it’s pretty simple when you know what you’re doing.

So first off, what do I mean by passing an argument to a function? It’s when you pass one or more objects to a function, something like this:

1
2
3
4
5
6
function add(a, b) {
  return a + b;
}

var answer = add(1, 2);
console.log(answer); // logs 3

I’ve created a function called add that accepts two arguments, a and b. It then adds the two arguments and returns it. So I’ve passed two arguments to the function. Pretty simple stuff but if I only passed one number to it, it would break. We can set up our function to still work, even if only one number is passed.

1
2
3
4
5
6
7
8
function add(a, b) {
  this.a = a;
  this.b = b || 100;
  return this.a + this.b;
}

var answer = add(4);
console.log(answer);

Looks pretty simple to the first one but instead of just adding the two arguments, I’m assigning their values to this.a and this.b in the function. I’m doing this so that I can set up the b argument to be optional, essentially what I’m saying is that this.b = b or if there’s no b, then it equals 100. Now I can pass two numbers or just one and it will add that to 100.

While this shows what I’m talking about, it’s not really a practical example. Here’s one that’s a bit more realistic:

1
2
3
4
5
6
7
8
9
10
function myGreeting(name, greeting) {
  this.name = name;
  this.greeting = greeting || 'Hello, my name is ';
  return this.greeting + this.name;
}

var sayHello = myGreeting('Mike');
var sayHey = myGreeting('Bill', 'They call me ')
console.log(sayHello); // logs ‘Hello, my name is Mike’
console.log(sayHey); // logs ‘They call me Bill’

In this example, I’ve created a function called myGreeting that accepts the arguments name and greeting. It’s exactly the same as the previous example expect that it returns a string instead of a number.

Once you understand this, I think it will make your programs leaner and more efficient because you can create one function that performs the work of two.

3 Responses to Stuff they don’t tell JavaScript noobs: Making your arguments optional

  1. Ross Hadden says:

    I have always done something like

    function(a,b){
    a = a || 0;
    b = b || 0;
    return a + b;
    }

    The difference is that you create the new properties this.a and this.b. Do you think there is a benefit to doing it either way?

  2. Mike says:

    In a simple example like this, there probably isn’t much of a difference. But in a more complicated function, using this would give you more access to individual elements.

    As with a lot of things JavaScript, there’s multiple ways to do everything and it can really come down to your own preferences.

  3. That great, I am an ActionScript Developer and learning JS, i was missing default argument, But this give me an HOPE
    Thank You
    :-)

Leave a Reply

Your email address will not be published. Required fields are marked *