1

In the below code, I am passing an array of objects in the map function. The Value of category gets assigned to categoryName and is returned as categoryName. My problem is understanding the assignment operation. Doesn't the assignment to object properties happen this way key:value ? Instead, I see that the value of category is assigned to this new Variable in this fashion value:key

const companies= [
  {name: "Company One", category: "Finance"},
  {name: "Company Two", category: "Retail"}
];
const companyu = companies.map(
({ name, category: categoryName }) => ({ name, categoryName }))
bits-bytes
  • 77
  • 1
  • 9
  • 1
    You're just creating an alias for `category`, while destructuring. – maazadeeb Feb 11 '19 at 12:06
  • 1
    `{key: value}` act differently when using inside destructuring, `key:` is placeholder and variable name is value. I was watching @getify video the other day and he said that this may be confusing because it's like the opposite of object creation. – jcubic Feb 11 '19 at 12:06

3 Answers3

1

When you just give one value in object {value} the Key property will be same as name of the variable ( variable name works as placeholder for key)

let a = 'Value'
console.log({a})

If you want to define different name you can do it by defining both Key and Value.

let a = 'value'
console.log({key: a})

My question was more for this portion category: categoryName. I see that categoryName is assigned the value of category. How does this happen?

let var1 = {a:1}
let {a} = var1

is same as let var1 = {a:1} let a = var1.a

And this one is

let var1 = {a:1}
let {a:b} = var1

is same as 

let var1 = {a:1}
let b = var1.a

enter image description here

Code Maniac
  • 37,143
  • 5
  • 39
  • 60
  • My question was more for this portion `category: categoryName`. I see that categoryName is assigned the value of category. How does this happen? – bits-bytes Feb 11 '19 at 12:25
  • 1
    @PunyaslokaParida i have added a example to make you understand more what i meant by my comment. you can see the update – Code Maniac Feb 11 '19 at 18:00
1

{ name, category: categoryName }, despite looking exactly like an object literal, is not one. When written where an expression is expected, like let x = { name, category: categoryName };, that syntax creates an object, but when written where an argument name is expected, like function foo({ name, category: categoryName }) {} and like your example, it destructures an object.

Destructuring is a whole topic that you can read about, but the gist is, instead of a single name you write a pattern with some names in it, and that pattern is applied to the given value to set all the pattern's names. So, this

const {a, b} = obj;

is equivalent to this

const a = obj.a;
const b = obj.b;

Further, if you want to use a different variable name than the prop's name, you can do it like so

const {a, b: c} = obj;

which is equivalent to

const a = obj.a;
const c = obj.b;

which is what your { name, category: categoryName } is doing here.

twhb
  • 4,294
  • 2
  • 20
  • 23
0

This is a feature available since the ES6 (or ES2015) called Shorthand notation.

If you want to define an object who's keys have the same name as the variables passed-in as properties, you can use the shorthand and simply pass the key name

In ES5 (older syntax) we need to use key:value as you said. An example:

var name = 'John';
var surname = 'Matthew';
var age = 45;

var myObject = {
  name : name,
  surname : surname,
  age : age
};

console.log(myObject);

In ES6+ (or ES2015+) we dont need to use key:value if we want to keep the attributes' name as the variable passed-in. Like this:

let name = 'John';
let surname = 'Matthew';
let age = 45;

let myObject = {
  name,
  surname,
  age
};

console.log(myObject);
Ricardo Montuan
  • 78
  • 9