How to dynamically change a function's name

Question

I have a function which acts as a sort of focal point before calling my api.

I want to reduce the bloat a little by simplifying my if statements.

Currently I have a list of statements. 2 of which are shown below

    if (this.props.source === 1) {
      api.updateData01(id, data).then(res => {
        this.hideModal()
        this.props.updateData01()
        console.log('DATA UPDATED')
      })
    }
    if (this.props.source === 2) {
      api.updateData02(id, data).then(res => {
        this.hideModal()
        this.props.updateData02()
        console.log('DATA UPDATED')
      })
    }

I'd like to simplify it by bringing my if statements up and instead dynamically rename the functions.

Something along the lines of

    if(this.props.source === 1){
      //rename updateData to updateData01
    }
    if(this.props.source === 2){
      //rename updateData to updateData02
    }

    api.updateData01(id, data).then(res => {
      this.hideModal()
      this.props.updateData01()
      console.log('DATA UPDATED')
    })

I've never had to rename a function before so am unsure how to begin.

I've attempted something like this but it obviously wasn't going to work.

   if(this.props.source === 1){
      const dataSource = 01
    }
   api.updateData + datasource + (.....

if just two `this.props.source === 1 ? this.props.updateData01() : this.props.updateData02()` — epascarello, Oct 15 '19 at 13:41

Dupocas · Accepted Answer · 2019-10-15T13:47:22.820

11

Instead of renaming your functions you could use dynamic property names to access the correct function based on a hash (api)

const api = {
    updateData01 : () =>{},
    updateData02 : () =>{},
    /*...*/
    updateData0N : () =>{}
}

api[`updateData0${this.props.source}`]().then(/*...*/)

edited Oct 15 '19 at 13:47

answered Oct 15 '19 at 13:40

Dupocas

20,285
6
38
56

score 2 · Answer 2 · answered Oct 15 '19 at 13:52

@Dupocas approach is probably the one I'd go with. That said, it's also possible to accomplish this with an array:

// your updateData prop would look something like this:
// this.props.arrFn = [() => console.log('1'), () => console.log('2')]

const fireByDataSource = (source) => this.props.arrFn[source - 1](id, data)

componentDidMount() {
    if(this.props.source) return fireByDataSource(this.props.source)

    api.updateData01(id, data).then(res => {
      this.hideModal()
      fireByDataSource(1)
      console.log('DATA UPDATED')
    })
}

How to dynamically change a function's name

2 Answers2