What does that "field1:field2" mean?

Question

The following excerpt is taken from the downshift demo here :

<Downshift inputValue={inputValue} onChange={this.handleChange} selectedItem={selectedItem}>
        {({
          getInputProps,
          getItemProps,
          isOpen,
          inputValue: inputValue2,
          selectedItem: selectedItem2,
          highlightedIndex,
        }) => (

Can someone explain what does "inputValue: inputValue2" mean?

score 2 · Answer 1 · answered Apr 04 '18 at 05:59

2

When used in enclosing {}, the : delimits an object member reference, where the value 'inputValue' on the left of the colon is the member reference and the value to the right 'inputValue2' is the variable or value to assign to that member.

For example:

    var test = "hello"
       ,obj = {a:1,b:2,c:test};

In the above test is assigned the value "hello", in the object definition it has 3 members, a, b and c, a is assigned 1, b is assigned 2 and c is assigned the variable test.

    alert(obj['c']);

Will result in "hello" being displayed.

answered Apr 04 '18 at 05:59

SPlatten

4,487
7
32
87

I get it ! Thanks ! Trouble is InputValue2 is nowhere to be defined in the example. How can that be ? – Vincent Apr 04 '18 at 06:03
@Vincent, you can either use console.log or alert to display inputValue2 and verify if it is defined, or display the content of the member inputvalue it will show you what it is assigned. – SPlatten Apr 04 '18 at 06:05
@Vincent Because this answer is only about "regular objects". But you're asking about [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) – Andreas Apr 04 '18 at 06:21

score 1 · Accepted Answer · answered Apr 04 '18 at 06:04

It's part of destructing (scroll to "Assigning to new variable names") https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

In example you provided, we don't want to shadow the variable selectedItem, so they've assigned it to selectedItem2. That way, you're able to use selectedItem that you've defined from your state, as well as the one provided to that function.

A hopefully simpler example below:

function takeArguments({
  firstArg,
  thirdArg,
  fourthArg: differentVariableName
}){
  console.log(firstArg, thirdArg, differentVariableName)
}


takeArguments({
  firstArg: 1,
  thirdArg: 2,
  fourthArg: 3
});

score 0 · Answer 3 · answered Apr 04 '18 at 06:00

0

Here inputValue: inputValue2 means inputValue is JSON key and inputValue2 is a variable that you want to assign to this JSON key.

 {
      getInputProps,
      getItemProps,
      isOpen,
      inputValue: inputValue2,
      selectedItem: selectedItem2,
      highlightedIndex,
    }

this JSON can be written as

{
          getInputProps:getInputProps,
          getItemProps:getItemProps,
          isOpen:isOpen,
          inputValue: inputValue2,
          selectedItem: selectedItem2,
          highlightedIndex:highlightedIndex,
        }

if key and assigned variable have same name then you can ignore to write variable name at right side.

answered Apr 04 '18 at 06:00

Chandrakant Thakkar

797
6
21

That's not [JSON](http://json.org) – Andreas Apr 04 '18 at 06:01
I think it is JOSN object.Here he/she is passing as argument. – Chandrakant Thakkar Apr 04 '18 at 06:03
It's key value combination but if value is variable and same name as key then you can ignore to write that variable name – Chandrakant Thakkar Apr 04 '18 at 06:04
[There's no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) – Andreas Apr 04 '18 at 06:05
Please try this var a=10; var d={a,b:20}; console.log(d); – Chandrakant Thakkar Apr 04 '18 at 06:22

score 0 · Answer 4 · answered Apr 04 '18 at 06:08

so the code

{
          getInputProps,
          getItemProps,
          isOpen,
          inputValue: inputValue2,
          selectedItem: selectedItem2,
          highlightedIndex,
}

is a short hand syntax for object mapping.

Before es6 if you had to copy data from one object to another you would have to do something like this

var obj2;
obj2.firstProperty = firstProperty;
obj2.secondProperty = secondProperty;

(Asssuming firstProperty and secondProperty exist in scope already ) Now in es6 you can use shortHand syntax

obj2 = { firstProperty, secondProperty }

Now this works when the property name is same for both variable and in the object. But wha if you have to change the property name of "secondProperty" in your object to just "second".Then, you would have to explicitly map that property in your object.

obj2 = { firstProperty, second = secondProperty }

So in your case there is a property "inputValue2" in scope but you want to rename that property in your object as "inputValue" that is why the syntax of explicit property mapping.

What does that "field1:field2" mean?

4 Answers4