Skip to content

makeDestructurable

Make isomorphic destructurable for object and array at the same time, mostly use in some utility function:

js
function func() {
  let val

  const set = newVal => val = newValue
  const get = () => val

  return makeDestructurable(
    { set, get },
    [set, get]
  )
}

To use it:

js
const { set, get } = func()

Also worked with:

js
const [set, get] = func()

Refer to vueuse.

Demo

vue
<script setup lang="ts">
import { makeDestructurable } from '.'

const raw = { name: 'John', age: 18 }
const val = makeDestructurable(raw, [raw.name, raw.age])

const { name, age } = val
const [nameArr, ageArr] = val
</script>

<template>
  <div>
    <p>{{ name }} / {{ age }}</p>
    <p>{{ nameArr }} / {{ ageArr }}</p>
  </div>
</template>

John / 18

John / 18

Type Declarations

Details
ts
/**
 * @__NO_SIDE_EFFECTS__
 *
 * @see {@link https://s3xysteak.github.io/fnclip/functions/other/makeDestructurable/}
 */
export declare function makeDestructurable<T extends Record<string, unknown>, A extends readonly any[]>(obj: T, arr: A): T & A;

Source

SourceDemo