Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javaScript function - why my default argument fails?

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.

like image 558
Webwoman Avatar asked Jun 02 '19 18:06

Webwoman


2 Answers

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"))
like image 66
Code Maniac Avatar answered Sep 18 '22 16:09

Code Maniac


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"))
like image 31
Learner Avatar answered Sep 22 '22 16:09

Learner