javaScript function - why my default argument fails?

Question

My Javascript function leads my console to return me :

TypeError: style is null

Here the snippet:

let style = {
  one: 1,
  two: 2,
  three: 3
}

function styling(style = style, ...ruleSetStock) {

  return ruleSetStock.map(ruleSet => {
    console.log(ruleSet)
    return style[ruleSet]
  })
}

console.log(styling(null, "one", "two", "three"))

I can't understand why. It seems to me everything is great,

Any hint would be great, thanks.

Virgate

"Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed" – Delamare

The problem is you are passing null so it will throw an error of null in return line, if its null you want to take the default style object isn't – Exoskeleton

Answer 1

Default parameters is assigned only if no value or undefined is passed

let defaultStyle = {  one: 1, two: 2, three: 3 }

function styling(style = defaultStyle, ...ruleSetStock) {
  return ruleSetStock.map(ruleSet => {
    return style[ruleSet]
  })
}

console.log(styling(undefined, "one", "two", "three"))

What if i want to use default value on all sorts of falsy values such as false, '', null ?

You can't use default parameter for that but you can use ||

let style1 = {  one: 1, two: 2, three: 3 }

function styling(style, ...ruleSetStock) {
  style = style || style1
  return ruleSetStock.map(ruleSet => {
    return style[ruleSet]
  })
}

console.log(styling(undefined, "one", "two", "three"))
console.log(styling(null, "one", "two", "three"))
console.log(styling('', "one", "two", "three"))
console.log(styling(0, "one", "two", "three"))

Toni

Answer 2

Two things you need to update

1. Passing default parameter either no value or undefined
2. changing the style default variable into another name

please see the updated code

let defaultStyle = {
  one: 1,
  two: 2,
  three: 3
}

function styling(style = defaultStyle, ...ruleSetStock) {

  return ruleSetStock.map(ruleSet => {
    console.log(ruleSet)
    return style[ruleSet]
  })
}

console.log(styling(undefined, "one", "two", "three"))

you can write the above snippet in much more cleaner way using es6

see the below snippet

const defaultStyle = {
  one: 1,
  two: 2,
  three: 3
}


const styling = (style = defaultStyle, ...ruleSetStock) => ruleSetStock.map(ruleSet => {
   return style[ruleSet]
})

console.log(styling(undefined, "one", "two", "three"))

Exoskeleton

What do you mean by "cleaner way using es6"? The OP apparently already was using ES6 with the default initialiser syntax. You might want to point out the specific language feature that you think makes the code cleaner. – Jefferyjeffie

removal of return keywords – Exoskeleton

Answer 3

Rename your style variable into styles and then instead of having null as your first argument when you invoke styling, use undefined:

const styles = {
  one: 1,
  two: 2,
  three: 3
}

function styling(style = styles, ...ruleSetStock) {

  return ruleSetStock.map(ruleSet => {
    console.log(ruleSet)
    return style[ruleSet]
  })
}

console.log(styling(undefined, "one", "two", "three"))
// one
// two
// three
// [1, 2, 3]

Insinuate