CODEWITHSUNDEEP
javascriptfunctionobject
Don Fuchs
Don Fuchs

Reputation: 47

JavaScript: correct way to set object parameters with name and default value

What I'm trying to do is to pass an object to a function, where certain default values may be set, and the whole object shall have a name to pass it to another function.

The following code, without naming the parameter, works just fine.

function test({
  item1,
  item2 = 0
}) {
  console.log(item1 + " " + item2);
}

test({
  item1: "foo"
});

function print(obj) {
  console.log(obj.item1 + " " + obj.item2);
}

But if I now start setting obj = {...} to pass to print() I get a syntax error:

function test(obj = {
  item1,
  item2 = 0
}) {
  print(obj);
}

test({
  item1: "foo"
});

function print(obj) {
  console.log(obj.item1 + " " + obj.item2);
}

If I write item2: 0, there will be no error, but then in print item2 is undefinded.

From the answers below, this seems to be the way that works best for me so far:

function test(obj) {
  obj = Object.assign({
    item1: undefined,
    item2: 0
  }, obj);
  print(obj);
}

test({
  item1: "foo"
});

function print(obj) {
  console.log(obj.item1 + " " + obj.item2);
}

Upvotes: 3

Views: 119

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 370589

Destructuring extracts properties from an object passed to the function and puts those properties into standalone variables - that's all. What you're trying to do is mutate one of the parameters, not extract properties from the parameter into standalone variables.

You can't mutate parameters inside a parameter list - for the sort of logic you're looking for, you'll have to do it inside the function body of test:

function test(obj) {
  if (!obj.hasOwnProperty('item2')) {
    obj.item2 = 0;
  }
  print(obj);
}

test({
  item1: "foo"
});

function print(obj) {
  console.log(obj.item1 + " " + obj.item2);
}

If you have lots of properties you want to assign default values to, you can use Object.assign:

function test(obj) {
  const filledObj = Object.assign({
    item2: 0,
    item3: 'item3'
  }, obj);
  print(filledObj);
}

test({
  item1: "foo"
});

function print(obj) {
  console.log(obj);
}

If you only want an object with certain properties to pass to print, then extract those properties in the parameter list like you're doing originally, then pass a reconstructed object of only those properties to print:

function test({
  item1,
  item2 = 0
}) {
  const obj = { item1, item2 };
  print(obj);
}

test({
  item1: "foo"
});

function print(obj) {
  console.log(obj.item1 + " " + obj.item2);
}

Upvotes: 2

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4557

= is invalid for assigning values in javascript, you are looking for {key: value}.

Change the = to : to fix the error:

// You want to destructure you object, drop the `obj =`
function test({item1,item2 = 0}) {
  // If you were to modify this data, 
  // use `Object.assign({}, {item1,item2})` to prevent mutating your data
  print({item1,item2});
  
}

// save some space by destructuring the items you want
function print({item1, item2}) {
  console.log(`${item1} ${item2}`);
}

// Initial expected result
test({item1: "foo"});

Object Destructuring vs Default Values

I am assuming that you expect the value of item2 to equal 0 correct? It does not equal 0 because you are passing in a new object that overrides the object in your function parameters.

Just like how if you were to set:

function(a = 1){}

and pass in a value, a will no longer equal 1 because it has been replaced with a new value.

The reason you get your expected behavior in your first code snippet (without having obj = {...}) is because you are destructuring an object. This is not an assignment, rather, you are extracting pieces that you want from the object.

When you have a function with the arguments like:

function({arg1, arg2}){}

JavaScript will pull out these keys from an object you pass in.

Assigning default values

If, on the other hand, if you want to pass in an object without destructuring you may do it like so:

function(obj = {a: 'default'}){}

But, if you pass in an object in the function directly above, the default value for the object and all of its keys (a or any others) will be replaced with whatever object you pass in. Here is a link on how default parameters work in javascript.

I highly recommend you take a gander at destructuring, it is incredibly useful when dealing with objects or arrays in javascript.

Hope this helps,

Upvotes: 0

Related Questions