mirror of
https://github.com/foomo/foomo-docs.git
synced 2025-10-16 12:35:40 +00:00
19 lines
13 KiB
HTML
19 lines
13 KiB
HTML
<!doctype html>
|
||
<html class="docs-version-current" lang="en" dir="ltr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-beta.14">
|
||
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="foomo project docs RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="foomo project docs Atom Feed">
|
||
<link rel="search" type="application/opensearchdescription+xml" title="foomo project docs" href="/opensearch.xml"><title data-react-helmet="true">Pitfalls | foomo project docs</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://www.foomo.org/docs/frontend/pitfalls"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Pitfalls | foomo project docs"><meta data-react-helmet="true" name="description" content="This section is very important to avoid dangerous bugs in your code. Of course each of our languages or libraries in our stack has many advantages, but they came with dangerous pitfalls."><meta data-react-helmet="true" property="og:description" content="This section is very important to avoid dangerous bugs in your code. Of course each of our languages or libraries in our stack has many advantages, but they came with dangerous pitfalls."><link data-react-helmet="true" rel="icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://www.foomo.org/docs/frontend/pitfalls"><link data-react-helmet="true" rel="alternate" href="https://www.foomo.org/docs/frontend/pitfalls" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://www.foomo.org/docs/frontend/pitfalls" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://SUATUVZDDM-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.47738ace.css">
|
||
<link rel="preload" href="/assets/js/runtime~main.3b4333f9.js" as="script">
|
||
<link rel="preload" href="/assets/js/main.681e1e0c.js" as="script">
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<div><a href="#" class="skipToContent_OuoZ">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title">foomo</b></a><a class="navbar__item navbar__link" href="/docs/general/intro">General</a><a class="navbar__item navbar__link navbar__link--active" href="/docs/frontend/intro">Frontend</a><a class="navbar__item navbar__link" href="/docs/backend/intro">Backend</a><a class="navbar__item navbar__link" href="/docs/devops/intro">DevOps</a><a class="navbar__item navbar__link" href="/docs/project-management/intro">PM</a><a class="navbar__item navbar__link" href="/docs/projects/intro">Projects</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/blog">Blog</a><div class="searchBox_Utm0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_lDyR"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_i9tI" type="button"></button><aside class="docSidebarContainer_0YBq"><div class="sidebar_a3j0"><nav class="menu thin-scrollbar menu_cyFh"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/intro">Intro</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/css">CSS</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/rtfm">RTFM</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/setup">Setup</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/stack">Stack</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/performance">Performance</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_TwRn" href="/docs/frontend/typescript/objects">TypeScript</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/frontend/typescript/objects">Objects</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/frontend/typescript/spreading">Spreading</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/debugging_js">Debugging in JavaScript</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/docs/frontend/pitfalls">Pittfals</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/frontend/vscode">vscode</a></li></ul></nav></div></aside><main class="docMainContainer_r8cw"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_zHA2"><div class="docItemContainer_oiyr"><article><div class="tocCollapsible_aw-L theme-doc-toc-mobile tocMobile_Tx6Y"><button type="button" class="clean-btn tocCollapsibleButton_zr6a">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Pitfalls</h1></header><p>This section is very important to avoid dangerous bugs in your code. Of course each of our languages or libraries in our stack has many advantages, but they came with dangerous pitfalls.</p><h2 class="anchor anchorWithStickyNavbar_y2LR" id="javascript">JavaScript<a class="hash-link" href="#javascript" title="Direct link to heading"></a></h2><p>This section is probably too small to write all the dangerous things in JavaScript, but we hope developers won't do some crazy things like concatenating numbers and strings and such sort of forbidden things will be catched by TS.</p><p>But nevertheless, very often we run into issues that are hard to debug.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="mutation">Mutation<a class="hash-link" href="#mutation" title="Direct link to heading"></a></h3><p>Mutation in JS is a very common problem and thus leads to dangerous bugs.</p><p>A very common mutation occurs in spreading. So if you spread an object and it's deeply nested, you need to know that this will only create a shallow copy. So that means that deeply nested fields will still be referenced by the original object. If you need to do a immutable instance we advice in using either <a href="https://github.com/lukeed/klona" target="_blank" rel="noopener noreferrer">klona</a> or <a href="https://github.com/immerjs/immer" target="_blank" rel="noopener noreferrer">immer</a>.</p><p>When doing sorting on the array like <code>[1,2,3].sort(...)</code>, this <strong>does mutate</strong> the original array. Devs are used to create new array with <code>.map</code> or <code>.filter</code>, but this here is not the case. So be careful with that. Also do not forget that objects in the array will have a reference to objects in the original array and thus they also needs to be cloned.</p><p>Have in mind that doing immutability costs and sometimes it's better to mutate, but also know that in React if you don't create a new reference, setting state won't react. So always have in mind pros and cons of doing mutation.</p><h3 class="anchor anchorWithStickyNavbar_y2LR" id="typeof">typeof<a class="hash-link" href="#typeof" title="Direct link to heading"></a></h3><p><code>typeof</code> is used for checking type of some variables. So when checking if a variable is an array of an object, we try to use <code>typeof</code>. But we should be very careful since typeof works nicely on simple primitive types like <code>number</code>, <code>string</code>, <code>boolean</code>.</p><p>When you try to check whether a variable is an object or an array, you try to use <code>typeof</code>. But both are <code>object</code>. So in this case we should use <code>Array.isArray(variable)</code>. But be careful, because also <code>null</code> is an object! If you want to deep dive into this, <a href="https://dmitripavlutin.com/javascript-null/" target="_blank" rel="noopener noreferrer">read here</a>.</p><p>Numbers are also fun when it comes to <code>NaN</code>. If you check <code>isNaN</code> with typeof, it's actually a number! So for this use-case you need to use <code>Number.isNaN(myNum)</code>.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/foomo/foomo-docs/tree/main/foomo/docs/frontend/pitfalls.md" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_mS5F" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mt2f"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/frontend/debugging_js"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Debugging in JavaScript</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/frontend/vscode"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">vscode</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_vrFS thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#javascript" class="table-of-contents__link toc-highlight">JavaScript</a><ul><li><a href="#mutation" class="table-of-contents__link toc-highlight">Mutation</a></li><li><a href="#typeof" class="table-of-contents__link toc-highlight">typeof</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">legal</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/etc/imprint">Imprint</a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">© 2022 bestbytes</div></div></div></footer></div>
|
||
<script src="/assets/js/runtime~main.3b4333f9.js"></script>
|
||
<script src="/assets/js/main.681e1e0c.js"></script>
|
||
</body>
|
||
</html> |