Rename Fields When Destructuring

Sometimes an object contains some set of properties, but you want to destructure it changing the names.

For example some function name does not suit your naming convention, or you already have a variable with that name.

You can rename one of the fields using this syntax:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise'
}

const { firstName: name, lastName } = person

name //Tom
lastName //Cruise

Destructure to an Already Defined Variable

Sometimes you need to assign the result of a function call to a variable already defined. The function returns an object:

function test() {
  return {
    one: 1,
    two: 2
  }
}

You might think you can just use object destructuring:

const { one, two } = test()

But if you have two already defined in your code (because of scoping issues), you can’t redeclare it:

let two

//...

const { one, two } = test() //ERROR

Solution 1: Use a Temporary Variable

const result = test()

two = result.two
const { one } = result

Solution 2: Use Parentheses

Declare one as let and use this syntax with parentheses (adding ; before them to prevent JS from having issues if you don’t use semicolons):

let one, two

;({ one, two } = test())

Any line starting with ( must start with a semicolon if you don’t use semicolons in your code.

Lessons in this unit:

0:	Introduction
1:	Generate Random Numbers in a Range
2:	Get Index in for...of Loop
3:	Unlimited Function Parameters
4:	Return Result from Async Function
5:	Encode and Decode URLs
6:	▶︎ Destructuring Tips
7:	Number Formatting
8:	Regex Recipes
9:	Dynamic function name in JS