TreeviewCopyright © aleen42 all right reserved, powered by aleen42

Destructuring Back

1. Use object destructuring

  • To use object destructuring when accessing and using multiple properties of an object.

the reason is that destructuring can save from creating temporary references for those properties.

/**
 * bad
 */
function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;

    return `${firstName} ${lastName}`;
}

/**
 * good
 */
function getFullName(user) {
    /**
     * you can change variables' name as follow:
     *  const {firstName: fName, lastName: lName} = user;
     * then you can return as follow:
     *  return fName + ' ' + lName; 
     */
    const {firstName, lastName} = user;

    return `${firstName} ${lastName}`;
}

/**
 * best
 */
function getFullName({firstName, lastName}) {
    return `${firstName} ${lastName}`;
}
  • To use object destructuring for multiple return values, not array destructuring.
/**
 * bad
 */
function processInput(input) {
    /**
     * then a miracle occurs
     */
    return [left, right, top, bottom];
}

/**
 * the caller needs to think about the order of return data
 */
const [left, __, top] = processInput(input);

/**
 * good
 */
function processInput(input) {
    /**
     * then a miracle occurs
     */
    return { left, right, top, bottom };
}

/**
 * the caller selects only the data they need
 */
const { left, top } = processInput(input);

2. Use array destructuring

  • To use array destructuring like object destructuring.
const arr = [1, 2, 3, 4];

/**
 * bad
 */
const first = arr[0];
const second = arr[1];

/**
 * good
 */
const [first, second] = arr;