foomo-docs/assets/js/7071e909.a39f0aa5.js

"use strict";(self.webpackChunkfoomo=self.webpackChunkfoomo||[]).push([[5500],{3905:(e,n,t)=>{t.d(n,{Zo:()=>c,kt:()=>y});var r=t(7294);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?a(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var p=r.createContext({}),l=function(e){var n=r.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},c=function(e){var n=l(e.components);return r.createElement(p.Provider,{value:n},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},f=r.forwardRef((function(e,n){var t=e.components,o=e.mdxType,a=e.originalType,p=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),d=l(t),f=o,y=d["".concat(p,".").concat(f)]||d[f]||u[f]||a;return t?r.createElement(y,i(i({ref:n},c),{},{components:t})):r.createElement(y,i({ref:n},c))}));function y(e,n){var t=arguments,o=n&&n.mdxType;if("string"==typeof e||o){var a=t.length,i=new Array(a);i[0]=f;var s={};for(var p in n)hasOwnProperty.call(n,p)&&(s[p]=n[p]);s.originalType=e,s[d]="string"==typeof e?e:o,i[1]=s;for(var l=2;l<a;l++)i[l]=t[l];return r.createElement.apply(null,i)}return r.createElement.apply(null,t)}f.displayName="MDXCreateElement"},232:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>i,default:()=>u,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var r=t(7462),o=(t(7294),t(3905));const a={},i="Spreading",s={unversionedId:"frontend/typescript/spreading",id:"frontend/typescript/spreading",title:"Spreading",description:"JavaScript spread syntax (...) is a surprisingly powerful construct. It has two main use cases in our applications:",source:"@site/docs/frontend/typescript/spreading.md",sourceDirName:"frontend/typescript",slug:"/frontend/typescript/spreading",permalink:"/docs/frontend/typescript/spreading",draft:!1,editUrl:"https://github.com/foomo/foomo-docs/tree/main/foomo/docs/frontend/typescript/spreading.md",tags:[],version:"current",frontMatter:{},sidebar:"frontendSidebar",previous:{title:"Objects",permalink:"/docs/frontend/typescript/objects"},next:{title:"Debugging in JavaScript",permalink:"/docs/frontend/debugging_js"}},p={},l=[{value:"Shallow copying",id:"shallow-copying",level:2},{value:"Populating jsx attributes",id:"populating-jsx-attributes",level:2}],c={toc:l},d="wrapper";function u(e){let{components:n,...t}=e;return(0,o.kt)(d,(0,r.Z)({},c,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"spreading"},"Spreading"),(0,o.kt)("p",null,"JavaScript spread syntax ",(0,o.kt)("inlineCode",{parentName:"p"},"(...)")," is a surprisingly powerful construct. It has two main use cases in our applications:"),(0,o.kt)("h2",{id:"shallow-copying"},"Shallow copying"),(0,o.kt)("p",null,"Spreading creates new instances of objects or array, but we need to be very careful because it only does a shallow copy.\nIf you have a deeply nested object or array, nested entities will still hold a reference to an original value and hence dangerous bugs can occur."),(0,o.kt)("p",null,"Copying is needed when doing state changes (either local or state management e.g. Redux). If deep cloning is required, ",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/structuredClone"},(0,o.kt)("inlineCode",{parentName:"a"},"structuredClone"))," can be used. "),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},'function () {\n  // let\xb4s start with a relatively simple object\n  const foo = {\n    a: 1,\n    b: 2,\n    nested: {\n      child: "is not a copy",\n    },\n  };\n  // this will create a shallow copy of foo and add a field "c"\n  const bar = { ...foo, c: 3 };\n  // please note, that the nested property "nested" is not deeply copied,\n  // thus changes to this object will also affect foo.nested\n  bar.nested.child += " <- I told you so";\n\n  // .foo has been copied though and changes to it affect the original only\n  foo.a += 1;\n  return (\n    <>\n      <ul>\n        <li>\n          <code>foo.a</code> was incremented by 1 and is now <code>2</code>\n        </li>\n        <li>\n          accessing <code>bar.nested.child</code> also changed{" "}\n          <code>foo.nested.child</code>\n        </li>\n      </ul>\n      <pre>foo: {JSON.stringify(foo)}</pre>\n      <ul>\n        <li>\n          <code>bar.a</code> has kept its original value <code>1</code>\n        </li>\n        <li>\n          a new property <code>c</code> was added\n        </li>\n      </ul>\n      <pre>bar: {JSON.stringify(bar)}</pre>\n    </>\n  );\n}\n')),(0,o.kt)("h2",{id:"populating-jsx-attributes"},"Populating jsx attributes"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},"function App() {\n    // a simple Component, that will render all fields in props\n    const Foo = (props) => (\n        <ul>\n            {\n                Object\n                    .keys(props)\n                    .map(key => (\n                        <li>\n                            <code>{key}</code>:{props[key]}\n                        </li>\n                    )\n                )\n            }\n        </ul>\n    );\n    const data = {\n        a: 1,\n        b: 2,\n        c: 3\n    }\n\n    const { c, ...omittedObject } = data;\n    return (\n        <>\n            {/*\n              Each of the `data` fields are spreaded as props\n            */}\n            <p>Spread all props</p>\n            <Foo {...data}/>\n\n            <p>Add additional prop</p>\n            {/*\n              After we spread, we also add `d` prop.\n            */}\n            <Foo {...data} d={4}/>\n\n            <p>Order of props is important</p>\n            {/*\n              We will replace `a` with 10\n            */}\n            <Foo {...data} a={10} />\n            {/*\n              But this won't replace original `a` with 10\n            */}\n            <Foo a={10} {...data} />\n\n            <p>Omit certain properties</p>\n            {/*\n              If you wish to omit certain fields, you need to write fields \n              that you wish to omit and with `...{newVariableName}` you will create a new\n              object with that name. In our part it's `omittedObject` name.\n            */}\n            <Foo {...omittedObject} />\n        </>\n    );\n}\n")))}u.isMDXComponent=!0}}]);