Destrukturyzacja tablicy i obiektu z aliasem w jednej linii

Siema,

mam takie pytanie w kwestii pedantyczności kodu.

Mam zwrotkę JSON i niestety główna informacja jest zwracana jako tablica z jednym elementem (pierwsza linia). Owy pierwszy (zerowy) element tablicy jest obiektem, a więc w drugiej linii wyciągam z tego obiektu obiekt attributes i nadaję mu alias product. Gdyby nie to, że jest tam tablica byłoby to zapisane w jedną linią i stąd pytanie, czy dałoby radę zapisać to ze wszystkimi destrukturyzacjami i aliasem w jednej linii.

Czy poniższy zapis da się skrócić do jednej linii?

  const [productInfo] = props.productData.data;
  const { attributes: product } = productInfo;

A nie można:

const { attributes: product } =  props.productData.data[0]

?

Update @LukeJL zaorał XD

JavaScript pozwala nawet połączyć obie destrukturyzacje razem, ale taka kombinacja raczej jest rzadko stosowana

const [{ attributes: product }] =  props.productData.data

Xarviel napisał(a):

JavaScript pozwala nawet połączyć obie destrukturyzacje razem, ale taka kombinacja raczej jest rzadko stosowana

Kopiuj

const [{ attributes: product }] =  props.productData.data

Ło kurcze, faktycznie się da!

Powinni to jakoś nazwać, takie wyciąganie rzeczy ze struktury.

logimw napisał(a):

Czy poniższy zapis da się skrócić do jednej linii?

Kopiuj

  const [productInfo] = props.productData.data;
  const { attributes: product } = productInfo;

Tak. Po prostu przestajesz kombinować jak koń pod górkę i piszesz to normalnie i jest w jednej linijce:

const product = props.productData.data[0].attributes;

Owy pierwszy (zerowy) element tablicy jest obiektem, a więc w drugiej linii wyciągam z tego obiektu obiekt attributes i nadaję mu alias product.

No to przecież dokładnie to robi linijka wyżej. Destrukturyzacja ci nie potrzebna do tego.

Xarviel napisał(a):

const [{ attributes: product }] =  props.productData.data

Ciekawe, nie znałem takiej kombinacji (albo: nie wpadłem). Ale i tak jest to dłuższy kod niż bez destrukturyzacji. I odrobinę mniej czytelny. Co prawda tutaj nie ma tragedii, ale widziałem już kody, gdzie ludzie już szaleli z tą destrukturyzacją, gdzie kod stawał się totalnie nieczytelny, a korzyści zero.

Z destrukturyzacją często można coś skrótowo zapisać:

const { a, b } = o;
const [foo, setFoo] = useState(123);

zamiast:

const a = o.a;
const b = o.b;
const state = useState(123);
const foo = state[0];
const setFoo = state[1];

ale to nie znaczy, że trzeba ją wszędzie wrzucać.

Xarviel napisał(a):

Kopiuj

const [{ attributes: product }] =  props.productData.data

jak się bawić to się bawić:

const {productData: {data: [{ attributes: product }]}} = props

obscurity napisał(a):

jak się bawić to się bawić:

Kopiuj

const {productData: {data: [{ attributes: product }]}} = props

Zabawa dopiero się rozkręca jak dodamy domyślne wartości na wypadek gdyby czegoś brakowało :D :D :P

const {
  productData: {
    data: [
      { 
        attributes: product = "hello" 
      } = {}
    ] = []
  } = {}
} = {}

console.log(product) // hello

Xarviel napisał(a):

Zabawa dopiero się rozkręca jak dodamy domyślne wartości na wypadek gdyby czegoś brakowało :D :D :P

Jakby czegoś brakowało, to można:

const defaultProduct = {foo: 123, bar: 456};
const product = props?.productData?.data?.[0]?.attributes ?? defaultProduct;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator