I'm working on a react native project, I found a solution on internet to my problem but I don't understand one line from a function

ponentDidUpdate(propsOld) { // line 1
    const { fill } = this.props;  // line 2
    const { fill:fillOld } = propsOld; // line 3

    if (fill !== fillOld) { // line 4
      Animated.timing(this.anim, { toValue:fill, duration:2000 // line 5 }).start();
    }
}

The line that I don't understand is the line 3:

const { fill:fillOld } = propsOld;

I understand the use of curly braces when there is a single variable or multiple variables seperated by ma ',',

Would anyone please explain to me the meaning when they are separated by colon ':' ?

I'm working on a react native project, I found a solution on internet to my problem but I don't understand one line from a function

ponentDidUpdate(propsOld) { // line 1
    const { fill } = this.props;  // line 2
    const { fill:fillOld } = propsOld; // line 3

    if (fill !== fillOld) { // line 4
      Animated.timing(this.anim, { toValue:fill, duration:2000 // line 5 }).start();
    }
}

The line that I don't understand is the line 3:

const { fill:fillOld } = propsOld;

I understand the use of curly braces when there is a single variable or multiple variables seperated by ma ',',

Would anyone please explain to me the meaning when they are separated by colon ':' ?

• javascript
• react-native

• Possible duplicate of What does ':' (colon) do in JavaScript? – Andrew Fan Commented Jan 22, 2019 at 15:21
• Possible duplicate of Use of Colon in object assignment destructuring Javascript – user47589 Commented Jan 22, 2019 at 15:23

2 Answers 2

basically that is renaming a variable when destructuring the object.

if you have an object like this:

const obj = {
    prop1: 'prop1',
    prop2: 'prop2',
    prop3: 'prop3',
}

and you want to get your variable prop2, you can do it like this:

const { prop2 } = obj;

but what if you already defined something with the same name? a block like this where you have prop4 defined and you want to get that variable when destructuring?

const prop4 = 'something';
const obj = {
    prop1: 'prop1',
    prop2: 'prop2',
    prop3: 'prop3',
    prop4: 'else'
}

you can not do: const { prop4 } = obj; because prop4 already exist and also it is a const

so basically you can rename it like this:

const { prop4: prop4duplicated } = obj;

so basically, on your code:

const { fill } = this.props;
const { fill:fillOld } = propsOld;

it is generating 2 variables, fill and fillOld, that is because fill already exists, then it is being renamed to fillOld

Using a colon instead of a ma is that it created an alias for fill. So fill can now be referenced as fillOld. So if I wanted bill to be known as fred I would do { bill:fred }