Destructuring is useful but what if you have conflicts with the variable names provided by the object being imported?

Consider the following example where we destructure arguments of a function.

1
2
3
4
5
6
7
8

const getSum = nums => {
  let { x, y } = { ...nums };
  return x + y;
};

console.log(getSum({ x: 1, y: 9 }));

//10

We can get into a pickle if the function already has a variable x. Well, not exactly in the above example but in a real world program that tends to have a hundred lines of code, and interact with a thousand other components.

One of the ways of avoiding the conflict is by using named arguments while destructuring the input - provide an alias during the destructuring.

1
2
3
4
5
6
7
8

const getSum = nums => {
  let { x: xIn, y: yIn } = { ...nums };
  return xIn + yIn;
};

console.log(getSum({ x: 1, y: 9 }));

//10

During destructuring we specify the name of the function-specific variable that stores the value provided in input. The function will use this new variable while the original variable continues to be available within the object.