m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-07 03:16:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dev-notes/languages/javascript/javascript.html

6907 lines
No EOL
269 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Marcello Lamonaca">
<link rel="canonical" href="http://m-lamonaca.github.io/dev-notes/languages/javascript/javascript.html">
<link rel="prev" href="../rust/unit-tests.html">
<link rel="next" href="dom.html">
<link rel="icon" href="../../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.34">
<title>Javascript - Dev Notes</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.35f28582.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<script src="https://unpkg.com/iframe-worker/shim"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="Javascript - Dev Notes" >
<meta property="og:description" content="None" >
<meta property="og:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/javascript/javascript.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="http://m-lamonaca.github.io/dev-notes/languages/javascript/javascript.html" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Javascript - Dev Notes" >
<meta name="twitter:description" content="None" >
<meta name="twitter:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/languages/javascript/javascript.png" >
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#javascript" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../index.html" title="Dev Notes" class="md-header__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Dev Notes
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Javascript
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../index.html" class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../containers/docker.html" class="md-tabs__link">
Containers
</a>
</li>
<li class="md-tabs__item">
<a href="../../databases/redis.html" class="md-tabs__link">
Databases
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../html/html.html" class="md-tabs__link">
Languages
</a>
</li>
<li class="md-tabs__item">
<a href="../../misc/git.html" class="md-tabs__link">
Misc
</a>
</li>
<li class="md-tabs__item">
<a href="../../linux/filesystem/file-links.html" class="md-tabs__link">
Linux
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../index.html" title="Dev Notes" class="md-nav__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
Dev Notes
</label>
<div class="md-nav__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../index.html" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Containers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Containers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../containers/docker.html" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../containers/kubernetes.html" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Databases
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Databases
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../databases/redis.html" class="md-nav__link">
<span class="md-ellipsis">
Redis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../databases/sql.html" class="md-nav__link">
<span class="md-ellipsis">
SQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../databases/mongo-db.html" class="md-nav__link">
<span class="md-ellipsis">
MongoDB
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
Languages
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Languages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../html/html.html" class="md-nav__link">
<span class="md-ellipsis">
HTML
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../markdown.html" class="md-nav__link">
<span class="md-ellipsis">
Markdown
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../css/css.html" class="md-nav__link">
<span class="md-ellipsis">
CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../c/c.html" class="md-nav__link">
<span class="md-ellipsis">
C
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../kotlin/kotlin.html" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../swift/swift.html" class="md-nav__link">
<span class="md-ellipsis">
Swift
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" >
<label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="">
<span class="md-ellipsis">
Assembly
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_7">
<span class="md-nav__icon md-icon"></span>
Assembly
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../assembly/intel.html" class="md-nav__link">
<span class="md-ellipsis">
Intel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../assembly/riscv.html" class="md-nav__link">
<span class="md-ellipsis">
RISC-V
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" >
<label class="md-nav__link" for="__nav_4_8" id="__nav_4_8_label" tabindex="">
<span class="md-ellipsis">
Python
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8">
<span class="md-nav__icon md-icon"></span>
Python
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/python.html" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_2" >
<label class="md-nav__link" for="__nav_4_8_2" id="__nav_4_8_2_label" tabindex="0">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_2">
<span class="md-nav__icon md-icon"></span>
Modules
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/modules/argparse.html" class="md-nav__link">
<span class="md-ellipsis">
argparse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/collections.html" class="md-nav__link">
<span class="md-ellipsis">
collection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/csv.html" class="md-nav__link">
<span class="md-ellipsis">
csv
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/ftplib.html" class="md-nav__link">
<span class="md-ellipsis">
ftplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/itertools.html" class="md-nav__link">
<span class="md-ellipsis">
itertools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/json.html" class="md-nav__link">
<span class="md-ellipsis">
json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/logging.html" class="md-nav__link">
<span class="md-ellipsis">
logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/shutil.html" class="md-nav__link">
<span class="md-ellipsis">
shutil
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/smtplib.html" class="md-nav__link">
<span class="md-ellipsis">
smtplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/socket.html" class="md-nav__link">
<span class="md-ellipsis">
socket
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/sqlite.html" class="md-nav__link">
<span class="md-ellipsis">
sqlite
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/time-datetime.html" class="md-nav__link">
<span class="md-ellipsis">
time & datetime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/modules/unittest.html" class="md-nav__link">
<span class="md-ellipsis">
unittest
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_3" >
<label class="md-nav__link" for="__nav_4_8_3" id="__nav_4_8_3_label" tabindex="0">
<span class="md-ellipsis">
Libraries
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_3">
<span class="md-nav__icon md-icon"></span>
Libraries
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../python/libs/tkinter.html" class="md-nav__link">
<span class="md-ellipsis">
TKinter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/numpy.html" class="md-nav__link">
<span class="md-ellipsis">
Numpy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/pandas.html" class="md-nav__link">
<span class="md-ellipsis">
Pandas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/seaborn.html" class="md-nav__link">
<span class="md-ellipsis">
Seaborn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/requests.html" class="md-nav__link">
<span class="md-ellipsis">
Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../python/libs/beautiful-soup.html" class="md-nav__link">
<span class="md-ellipsis">
Beatiful Soup
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" >
<label class="md-nav__link" for="__nav_4_9" id="__nav_4_9_label" tabindex="">
<span class="md-ellipsis">
.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9">
<span class="md-nav__icon md-icon"></span>
.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_1" >
<label class="md-nav__link" for="__nav_4_9_1" id="__nav_4_9_1_label" tabindex="0">
<span class="md-ellipsis">
C#
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_1">
<span class="md-nav__icon md-icon"></span>
C#
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/csharp/csharp.html" class="md-nav__link">
<span class="md-ellipsis">
C#
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/linq.html" class="md-nav__link">
<span class="md-ellipsis">
Linq
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/collections.html" class="md-nav__link">
<span class="md-ellipsis">
Collections
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/reactive-extensions.html" class="md-nav__link">
<span class="md-ellipsis">
Reactive Extensions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/async-programming.html" class="md-nav__link">
<span class="md-ellipsis">
Async Programming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/csharp/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_2" >
<label class="md-nav__link" for="__nav_4_9_2" id="__nav_4_9_2_label" tabindex="0">
<span class="md-ellipsis">
ASP.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_2">
<span class="md-nav__icon md-icon"></span>
ASP.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/asp.net/minimal-api.html" class="md-nav__link">
<span class="md-ellipsis">
Minimal API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/filters.html" class="md-nav__link">
<span class="md-ellipsis">
FIlters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/middleware.html" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/razor-syntax.html" class="md-nav__link">
<span class="md-ellipsis">
Razor Syntax
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/blazor.html" class="md-nav__link">
<span class="md-ellipsis">
Blazor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/signalr.html" class="md-nav__link">
<span class="md-ellipsis">
SignalR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/asp.net/web-forms.html" class="md-nav__link">
<span class="md-ellipsis">
Web Forms
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_3" >
<label class="md-nav__link" for="__nav_4_9_3" id="__nav_4_9_3_label" tabindex="0">
<span class="md-ellipsis">
Database
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_3">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../dotnet/database/ado.net.html" class="md-nav__link">
<span class="md-ellipsis">
ADO.NET
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../dotnet/database/entity-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Entity Framework
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10" >
<label class="md-nav__link" for="__nav_4_10" id="__nav_4_10_label" tabindex="">
<span class="md-ellipsis">
Java
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10">
<span class="md-nav__icon md-icon"></span>
Java
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/java.html" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/java-collection-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Java Collection Framework
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/dao.html" class="md-nav__link">
<span class="md-ellipsis">
DAO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4" >
<label class="md-nav__link" for="__nav_4_10_4" id="__nav_4_10_4_label" tabindex="0">
<span class="md-ellipsis">
Web
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4">
<span class="md-nav__icon md-icon"></span>
Web
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/web/servlet.html" class="md-nav__link">
<span class="md-ellipsis">
Serverlet
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4_2" >
<label class="md-nav__link" for="__nav_4_10_4_2" id="__nav_4_10_4_2_label" tabindex="0">
<span class="md-ellipsis">
Spring
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_10_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4_2">
<span class="md-nav__icon md-icon"></span>
Spring
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../java/spring/pom.xml.html" class="md-nav__link">
<span class="md-ellipsis">
POM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../java/spring/spring-project.html" class="md-nav__link">
<span class="md-ellipsis">
Project Structure
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" >
<label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="">
<span class="md-ellipsis">
PHP
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11">
<span class="md-nav__icon md-icon"></span>
PHP
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../php/php.html" class="md-nav__link">
<span class="md-ellipsis">
PHP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/database.html" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/web.html" class="md-nav__link">
<span class="md-ellipsis">
Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/dependency-injection.html" class="md-nav__link">
<span class="md-ellipsis">
Dependency Injection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/composer.html" class="md-nav__link">
<span class="md-ellipsis">
Composer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/psr-7.html" class="md-nav__link">
<span class="md-ellipsis">
PSR 7
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/plates-templating.html" class="md-nav__link">
<span class="md-ellipsis">
Plates
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11_9" >
<label class="md-nav__link" for="__nav_4_11_9" id="__nav_4_11_9_label" tabindex="0">
<span class="md-ellipsis">
Simple MVC
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_11_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11_9">
<span class="md-nav__icon md-icon"></span>
Simple MVC
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../php/simple-mvc/simple-mvc.html" class="md-nav__link">
<span class="md-ellipsis">
Simple MVC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../php/simple-mvc/rest-api.html" class="md-nav__link">
<span class="md-ellipsis">
REST API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_12" >
<label class="md-nav__link" for="__nav_4_12" id="__nav_4_12_label" tabindex="">
<span class="md-ellipsis">
Rust
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_12">
<span class="md-nav__icon md-icon"></span>
Rust
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../rust/rust.html" class="md-nav__link">
<span class="md-ellipsis">
Rust
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/macros.html" class="md-nav__link">
<span class="md-ellipsis">
Macros
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/cargo.html" class="md-nav__link">
<span class="md-ellipsis">
Cargo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/concurrency.html" class="md-nav__link">
<span class="md-ellipsis">
Concurrency
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../rust/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13" checked>
<label class="md-nav__link" for="__nav_4_13" id="__nav_4_13_label" tabindex="">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_13_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_4_13">
<span class="md-nav__icon md-icon"></span>
Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="javascript.html" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Javascript
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#basics" class="md-nav__link">
<span class="md-ellipsis">
Basics
</span>
</a>
<nav class="md-nav" aria-label="Basics">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#notable-javascript-engines" class="md-nav__link">
<span class="md-ellipsis">
Notable javascript engines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#comments" class="md-nav__link">
<span class="md-ellipsis">
Comments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#file-header" class="md-nav__link">
<span class="md-ellipsis">
File Header
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#modern-mode" class="md-nav__link">
<span class="md-ellipsis">
Modern Mode
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#pop-up-message" class="md-nav__link">
<span class="md-ellipsis">
Pop-Up message
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#print-message-to-console" class="md-nav__link">
<span class="md-ellipsis">
Print message to console
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#variables" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
<nav class="md-nav" aria-label="Variables">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#declaration-initialization" class="md-nav__link">
<span class="md-ellipsis">
Declaration &amp; Initialization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#scope" class="md-nav__link">
<span class="md-ellipsis">
Scope
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#constants" class="md-nav__link">
<span class="md-ellipsis">
Constants
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#data-types" class="md-nav__link">
<span class="md-ellipsis">
Data Types
</span>
</a>
<nav class="md-nav" aria-label="Data Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#numeric-data-types" class="md-nav__link">
<span class="md-ellipsis">
Numeric data types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#string-data-type" class="md-nav__link">
<span class="md-ellipsis">
String data type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#slice-vs-substring-vs-substr" class="md-nav__link">
<span class="md-ellipsis">
Slice vs Substring vs Substr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#boolean-data-type" class="md-nav__link">
<span class="md-ellipsis">
Boolean data type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#null-data-type" class="md-nav__link">
<span class="md-ellipsis">
Null data type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#undefined" class="md-nav__link">
<span class="md-ellipsis">
Undefined
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#typeof" class="md-nav__link">
<span class="md-ellipsis">
Typeof()
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#type-casting" class="md-nav__link">
<span class="md-ellipsis">
Type Casting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#type-checking" class="md-nav__link">
<span class="md-ellipsis">
Type Checking
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dangerous-stupid-implicit-type-casting" class="md-nav__link">
<span class="md-ellipsis">
Dangerous &amp; Stupid Implicit Type Casting
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#operators" class="md-nav__link">
<span class="md-ellipsis">
Operators
</span>
</a>
<nav class="md-nav" aria-label="Operators">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#mathematical-operators" class="md-nav__link">
<span class="md-ellipsis">
Mathematical Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#unary-increment-operators" class="md-nav__link">
<span class="md-ellipsis">
Unary Increment Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#logical-operators" class="md-nav__link">
<span class="md-ellipsis">
Logical Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#comparison-operators" class="md-nav__link">
<span class="md-ellipsis">
Comparison Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#bitwise-logical-operators" class="md-nav__link">
<span class="md-ellipsis">
Bitwise Logical Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#compound-operators" class="md-nav__link">
<span class="md-ellipsis">
Compound Operators
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#decision-statements" class="md-nav__link">
<span class="md-ellipsis">
Decision Statements
</span>
</a>
<nav class="md-nav" aria-label="Decision Statements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#if-else" class="md-nav__link">
<span class="md-ellipsis">
IF-ELSE
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#if-else-multi-branch" class="md-nav__link">
<span class="md-ellipsis">
IF-ELSE Multi-Branch
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ternary-operator" class="md-nav__link">
<span class="md-ellipsis">
Ternary Operator
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#switch-statement" class="md-nav__link">
<span class="md-ellipsis">
Switch Statement
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#loops" class="md-nav__link">
<span class="md-ellipsis">
Loops
</span>
</a>
<nav class="md-nav" aria-label="Loops">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#while-loop" class="md-nav__link">
<span class="md-ellipsis">
While Loop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#do-while-loop" class="md-nav__link">
<span class="md-ellipsis">
Do-While Loop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#for-loop" class="md-nav__link">
<span class="md-ellipsis">
For Loop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#break-continue-statements" class="md-nav__link">
<span class="md-ellipsis">
Break &amp; Continue statements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#arrays" class="md-nav__link">
<span class="md-ellipsis">
Arrays
</span>
</a>
<nav class="md-nav" aria-label="Arrays">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#filter-map-reduce" class="md-nav__link">
<span class="md-ellipsis">
filter() &amp; map(), reduce()
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#spread-operator" class="md-nav__link">
<span class="md-ellipsis">
Spread Operator (...)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dictionaries" class="md-nav__link">
<span class="md-ellipsis">
Dictionaries
</span>
</a>
<nav class="md-nav" aria-label="Dictionaries">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#iterating-key-value-pairs" class="md-nav__link">
<span class="md-ellipsis">
Iterating Key-Value pairs
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#functions" class="md-nav__link">
<span class="md-ellipsis">
Functions
</span>
</a>
<nav class="md-nav" aria-label="Functions">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#jsdoc-documentation-standard" class="md-nav__link">
<span class="md-ellipsis">
JSDOC documentation standard
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#function-declaration" class="md-nav__link">
<span class="md-ellipsis">
Function Declaration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#default-parameters-old-versions" class="md-nav__link">
<span class="md-ellipsis">
Default Parameters (old versions)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#function-expressions" class="md-nav__link">
<span class="md-ellipsis">
Function Expressions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#arrow-functions" class="md-nav__link">
<span class="md-ellipsis">
Arrow Functions
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#object-oriented-programming" class="md-nav__link">
<span class="md-ellipsis">
Object Oriented Programming
</span>
</a>
<nav class="md-nav" aria-label="Object Oriented Programming">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructors-and-object-instances" class="md-nav__link">
<span class="md-ellipsis">
Constructors and object instances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#prototypes" class="md-nav__link">
<span class="md-ellipsis">
Prototypes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#extending-with-prototypes" class="md-nav__link">
<span class="md-ellipsis">
Extending with prototypes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#classes-es6" class="md-nav__link">
<span class="md-ellipsis">
Classes (ES6+)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#extending-with-classes" class="md-nav__link">
<span class="md-ellipsis">
Extending with Classes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#deconstruction" class="md-nav__link">
<span class="md-ellipsis">
Deconstruction
</span>
</a>
<nav class="md-nav" aria-label="Deconstruction">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#object-deconstruction" class="md-nav__link">
<span class="md-ellipsis">
Object deconstruction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#array-deconstruction" class="md-nav__link">
<span class="md-ellipsis">
Array Deconstruction
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#serialization" class="md-nav__link">
<span class="md-ellipsis">
Serialization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#timing" class="md-nav__link">
<span class="md-ellipsis">
Timing
</span>
</a>
<nav class="md-nav" aria-label="Timing">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#timers" class="md-nav__link">
<span class="md-ellipsis">
Timers
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#let-vs-var-with-settimeout" class="md-nav__link">
<span class="md-ellipsis">
let vs var with setTimeout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#preserving-the-context" class="md-nav__link">
<span class="md-ellipsis">
Preserving the context
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#intervals" class="md-nav__link">
<span class="md-ellipsis">
Intervals
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#datetime" class="md-nav__link">
<span class="md-ellipsis">
DateTime
</span>
</a>
<nav class="md-nav" aria-label="DateTime">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#comparing-dates" class="md-nav__link">
<span class="md-ellipsis">
Comparing Dates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#exports" class="md-nav__link">
<span class="md-ellipsis">
Exports
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="dom.html" class="md-nav__link">
<span class="md-ellipsis">
DOM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="events-animation.html" class="md-nav__link">
<span class="md-ellipsis">
Events & Animation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="ajax.html" class="md-nav__link">
<span class="md-ellipsis">
AJAX
</span>
</a>
</li>
<li class="md-nav__item">
<a href="jquery.html" class="md-nav__link">
<span class="md-ellipsis">
jQuery
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13_6" >
<label class="md-nav__link" for="__nav_4_13_6" id="__nav_4_13_6_label" tabindex="0">
<span class="md-ellipsis">
React
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_13_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13_6">
<span class="md-nav__icon md-icon"></span>
React
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="react/react.html" class="md-nav__link">
<span class="md-ellipsis">
React
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/react-router.html" class="md-nav__link">
<span class="md-ellipsis">
React Router
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/react-tests.html" class="md-nav__link">
<span class="md-ellipsis">
React Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/redux.html" class="md-nav__link">
<span class="md-ellipsis">
Redux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="react/redux-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Redux Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="svelte/svelte.html" class="md-nav__link">
<span class="md-ellipsis">
Svelte
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_14" >
<label class="md-nav__link" for="__nav_4_14" id="__nav_4_14_label" tabindex="">
<span class="md-ellipsis">
PowerShell
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_14">
<span class="md-nav__icon md-icon"></span>
PowerShell
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../powershell/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../powershell/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_15" >
<label class="md-nav__link" for="__nav_4_15" id="__nav_4_15_label" tabindex="">
<span class="md-ellipsis">
Bash
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_15_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_15">
<span class="md-nav__icon md-icon"></span>
Bash
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../bash/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../bash/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Misc
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Misc
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../misc/git.html" class="md-nav__link">
<span class="md-ellipsis">
Git
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/graph-ql.html" class="md-nav__link">
<span class="md-ellipsis">
GraphQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/regular-expressions.html" class="md-nav__link">
<span class="md-ellipsis">
RegEx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/ssh.html" class="md-nav__link">
<span class="md-ellipsis">
SSH
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../misc/web-components.html" class="md-nav__link">
<span class="md-ellipsis">
WebComponents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Linux
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Linux
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
<label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
<span class="md-ellipsis">
Filesystem
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
Filesystem
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../linux/filesystem/file-links.html" class="md-nav__link">
<span class="md-ellipsis">
File Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/filesystem/procfs.html" class="md-nav__link">
<span class="md-ellipsis">
/proc
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/filesystem/sysfs.html" class="md-nav__link">
<span class="md-ellipsis">
/sys
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
<label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
<span class="md-ellipsis">
System Init
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_2">
<span class="md-nav__icon md-icon"></span>
System Init
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../linux/init/systemd.html" class="md-nav__link">
<span class="md-ellipsis">
Systemd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../linux/init/open-rc.html" class="md-nav__link">
<span class="md-ellipsis">
OpenRC
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#basics" class="md-nav__link">
<span class="md-ellipsis">
Basics
</span>
</a>
<nav class="md-nav" aria-label="Basics">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#notable-javascript-engines" class="md-nav__link">
<span class="md-ellipsis">
Notable javascript engines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#comments" class="md-nav__link">
<span class="md-ellipsis">
Comments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#file-header" class="md-nav__link">
<span class="md-ellipsis">
File Header
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#modern-mode" class="md-nav__link">
<span class="md-ellipsis">
Modern Mode
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#pop-up-message" class="md-nav__link">
<span class="md-ellipsis">
Pop-Up message
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#print-message-to-console" class="md-nav__link">
<span class="md-ellipsis">
Print message to console
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#variables" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
<nav class="md-nav" aria-label="Variables">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#declaration-initialization" class="md-nav__link">
<span class="md-ellipsis">
Declaration &amp; Initialization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#scope" class="md-nav__link">
<span class="md-ellipsis">
Scope
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#constants" class="md-nav__link">
<span class="md-ellipsis">
Constants
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#data-types" class="md-nav__link">
<span class="md-ellipsis">
Data Types
</span>
</a>
<nav class="md-nav" aria-label="Data Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#numeric-data-types" class="md-nav__link">
<span class="md-ellipsis">
Numeric data types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#string-data-type" class="md-nav__link">
<span class="md-ellipsis">
String data type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#slice-vs-substring-vs-substr" class="md-nav__link">
<span class="md-ellipsis">
Slice vs Substring vs Substr
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#boolean-data-type" class="md-nav__link">
<span class="md-ellipsis">
Boolean data type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#null-data-type" class="md-nav__link">
<span class="md-ellipsis">
Null data type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#undefined" class="md-nav__link">
<span class="md-ellipsis">
Undefined
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#typeof" class="md-nav__link">
<span class="md-ellipsis">
Typeof()
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#type-casting" class="md-nav__link">
<span class="md-ellipsis">
Type Casting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#type-checking" class="md-nav__link">
<span class="md-ellipsis">
Type Checking
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dangerous-stupid-implicit-type-casting" class="md-nav__link">
<span class="md-ellipsis">
Dangerous &amp; Stupid Implicit Type Casting
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#operators" class="md-nav__link">
<span class="md-ellipsis">
Operators
</span>
</a>
<nav class="md-nav" aria-label="Operators">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#mathematical-operators" class="md-nav__link">
<span class="md-ellipsis">
Mathematical Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#unary-increment-operators" class="md-nav__link">
<span class="md-ellipsis">
Unary Increment Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#logical-operators" class="md-nav__link">
<span class="md-ellipsis">
Logical Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#comparison-operators" class="md-nav__link">
<span class="md-ellipsis">
Comparison Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#bitwise-logical-operators" class="md-nav__link">
<span class="md-ellipsis">
Bitwise Logical Operators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#compound-operators" class="md-nav__link">
<span class="md-ellipsis">
Compound Operators
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#decision-statements" class="md-nav__link">
<span class="md-ellipsis">
Decision Statements
</span>
</a>
<nav class="md-nav" aria-label="Decision Statements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#if-else" class="md-nav__link">
<span class="md-ellipsis">
IF-ELSE
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#if-else-multi-branch" class="md-nav__link">
<span class="md-ellipsis">
IF-ELSE Multi-Branch
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ternary-operator" class="md-nav__link">
<span class="md-ellipsis">
Ternary Operator
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#switch-statement" class="md-nav__link">
<span class="md-ellipsis">
Switch Statement
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#loops" class="md-nav__link">
<span class="md-ellipsis">
Loops
</span>
</a>
<nav class="md-nav" aria-label="Loops">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#while-loop" class="md-nav__link">
<span class="md-ellipsis">
While Loop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#do-while-loop" class="md-nav__link">
<span class="md-ellipsis">
Do-While Loop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#for-loop" class="md-nav__link">
<span class="md-ellipsis">
For Loop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#break-continue-statements" class="md-nav__link">
<span class="md-ellipsis">
Break &amp; Continue statements
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#arrays" class="md-nav__link">
<span class="md-ellipsis">
Arrays
</span>
</a>
<nav class="md-nav" aria-label="Arrays">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#filter-map-reduce" class="md-nav__link">
<span class="md-ellipsis">
filter() &amp; map(), reduce()
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#spread-operator" class="md-nav__link">
<span class="md-ellipsis">
Spread Operator (...)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#dictionaries" class="md-nav__link">
<span class="md-ellipsis">
Dictionaries
</span>
</a>
<nav class="md-nav" aria-label="Dictionaries">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#iterating-key-value-pairs" class="md-nav__link">
<span class="md-ellipsis">
Iterating Key-Value pairs
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#functions" class="md-nav__link">
<span class="md-ellipsis">
Functions
</span>
</a>
<nav class="md-nav" aria-label="Functions">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#jsdoc-documentation-standard" class="md-nav__link">
<span class="md-ellipsis">
JSDOC documentation standard
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#function-declaration" class="md-nav__link">
<span class="md-ellipsis">
Function Declaration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#default-parameters-old-versions" class="md-nav__link">
<span class="md-ellipsis">
Default Parameters (old versions)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#function-expressions" class="md-nav__link">
<span class="md-ellipsis">
Function Expressions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#arrow-functions" class="md-nav__link">
<span class="md-ellipsis">
Arrow Functions
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#object-oriented-programming" class="md-nav__link">
<span class="md-ellipsis">
Object Oriented Programming
</span>
</a>
<nav class="md-nav" aria-label="Object Oriented Programming">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#constructors-and-object-instances" class="md-nav__link">
<span class="md-ellipsis">
Constructors and object instances
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#prototypes" class="md-nav__link">
<span class="md-ellipsis">
Prototypes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#extending-with-prototypes" class="md-nav__link">
<span class="md-ellipsis">
Extending with prototypes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#classes-es6" class="md-nav__link">
<span class="md-ellipsis">
Classes (ES6+)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#extending-with-classes" class="md-nav__link">
<span class="md-ellipsis">
Extending with Classes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#deconstruction" class="md-nav__link">
<span class="md-ellipsis">
Deconstruction
</span>
</a>
<nav class="md-nav" aria-label="Deconstruction">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#object-deconstruction" class="md-nav__link">
<span class="md-ellipsis">
Object deconstruction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#array-deconstruction" class="md-nav__link">
<span class="md-ellipsis">
Array Deconstruction
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#serialization" class="md-nav__link">
<span class="md-ellipsis">
Serialization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#timing" class="md-nav__link">
<span class="md-ellipsis">
Timing
</span>
</a>
<nav class="md-nav" aria-label="Timing">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#timers" class="md-nav__link">
<span class="md-ellipsis">
Timers
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#let-vs-var-with-settimeout" class="md-nav__link">
<span class="md-ellipsis">
let vs var with setTimeout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#preserving-the-context" class="md-nav__link">
<span class="md-ellipsis">
Preserving the context
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#intervals" class="md-nav__link">
<span class="md-ellipsis">
Intervals
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#datetime" class="md-nav__link">
<span class="md-ellipsis">
DateTime
</span>
</a>
<nav class="md-nav" aria-label="DateTime">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#comparing-dates" class="md-nav__link">
<span class="md-ellipsis">
Comparing Dates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#exports" class="md-nav__link">
<span class="md-ellipsis">
Exports
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="javascript">JavaScript</h1>
<h2 id="basics">Basics</h2>
<h3 id="notable-javascript-engines">Notable javascript engines</h3>
<ul>
<li><strong>Chromium</strong>: <code>V8</code> from Google </li>
<li><strong>Firefox</strong>: <code>SpiderMonkey</code> from Mozilla </li>
<li><strong>Safari</strong>: <code>JavaScriptCore</code> from Apple </li>
<li><strong>Internet Explorer</strong>: <code>Chakra</code> from Microsoft </li>
</ul>
<h3 id="comments">Comments</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span>
<span class="normal"><a href="#__codelineno-0-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="c1">//single line comment</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="cm">/*multiline comment*/</span>
</code></pre></div></td></tr></table></div>
<h3 id="file-header">File Header</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span>
<span class="normal"><a href="#__codelineno-1-5">5</a></span>
<span class="normal"><a href="#__codelineno-1-6">6</a></span>
<span class="normal"><a href="#__codelineno-1-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="cm">/**</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="cm"> * @file filename.js</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="cm"> * @author author&#39;s name</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="cm"> * purpose of file</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="cm"> *</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a><span class="cm"> * detailed explanation of what the file does on multiple lines</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a><span class="cm"> */</span>
</code></pre></div></td></tr></table></div>
<h3 id="modern-mode">Modern Mode</h3>
<p>If located at the top of the script the whole script works the “modern” way (enables post-ES5 functionalities). </p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="s2">&quot;use strict&quot;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="c1">// script contents</span>
</code></pre></div></td></tr></table></div>
<h3 id="pop-up-message">Pop-Up message</h3>
<p>Interrupts script execution until closure, <strong>to be avoided</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;message&quot;</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<h3 id="print-message-to-console">Print message to console</h3>
<p><code>console.log(value);</code></p>
<h2 id="variables">Variables</h2>
<h3 id="declaration-initialization">Declaration &amp; Initialization</h3>
<p><a href="https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/">var vs let vs const</a></p>
<p>Variable names can only contain numbers, digits, underscores and $. Variable names are camelCase.</p>
<p><code>let</code>: Block-scoped; access to variable restricted to the nearest enclosing block.
<code>var</code>: Function-scoped</p>
<p><code>let variable1 = value1, variable2 = value2;</code>
<code>var variable1 = value1, variable2 = value2;</code></p>
<h3 id="scope">Scope</h3>
<p>Variable declared with <code>let</code> are in local to the code block in which are declared.
Variable declared with <code>var</code> are local only if declared in a function.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span>
<span class="normal"><a href="#__codelineno-4-12">12</a></span>
<span class="normal"><a href="#__codelineno-4-13">13</a></span>
<span class="normal"><a href="#__codelineno-4-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">func</span><span class="p">(){</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span><span class="p">;</span><span class="w"> </span><span class="c1">// implicitly declared as a global variable</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span><span class="p">;</span><span class="w"> </span><span class="c1">// local variable</span>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="p">}</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a><span class="kd">var</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">10</span><span class="p">;</span><span class="w"> </span><span class="c1">// a is 10</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a><span class="kd">let</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">10</span><span class="p">;</span><span class="w"> </span><span class="c1">// b is 10</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a><span class="p">{</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span><span class="w"> </span><span class="c1">// a is 2</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span><span class="w"> </span><span class="c1">// b is 2</span>
<a id="__codelineno-4-11" name="__codelineno-4-11"></a><span class="p">}</span>
<a id="__codelineno-4-12" name="__codelineno-4-12"></a><span class="c1">// a is 2, b is 10</span>
<a id="__codelineno-4-13" name="__codelineno-4-13"></a><span class="c1">// x can NOT be used here</span>
<a id="__codelineno-4-14" name="__codelineno-4-14"></a><span class="c1">// y CAN be used here</span>
</code></pre></div></td></tr></table></div>
<h3 id="constants">Constants</h3>
<p>Hard-coded values are UPPERCASE and snake_case, camelCase otherwise.<br />
<code>const CONSTANT = value;</code></p>
<h2 id="data-types">Data Types</h2>
<p><code>Number</code>, <code>String</code>, <code>Boolean</code>, etc are <em>built-in global objects</em>. They are <strong>not</strong> types. <strong>Do not use them for type checking</strong>.</p>
<h3 id="numeric-data-types">Numeric data types</h3>
<p>Only numeric type is <code>number</code>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1">1</a></span>
<span class="normal"><a href="#__codelineno-5-2">2</a></span>
<span class="normal"><a href="#__codelineno-5-3">3</a></span>
<span class="normal"><a href="#__codelineno-5-4">4</a></span>
<span class="normal"><a href="#__codelineno-5-5">5</a></span>
<span class="normal"><a href="#__codelineno-5-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">10</span><span class="p">;</span><span class="w"> </span><span class="c1">//integer numbers</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">15.7</span><span class="p">;</span><span class="w"> </span><span class="c1">//floating point numbers</span>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">Infinity</span><span class="p">;</span><span class="w"> </span><span class="c1">//mathematical infinity</span>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="kc">Infinity</span><span class="p">;</span>
<a id="__codelineno-5-5" name="__codelineno-5-5"></a><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi">1234567890123456789012345678901234567890n</span><span class="p">;</span><span class="w"> </span><span class="c1">//BigInt, value &gt; 2^53, &quot;n&quot; at the end</span>
<a id="__codelineno-5-6" name="__codelineno-5-6"></a><span class="nx">number</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;text&quot;</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span><span class="w"> </span><span class="c1">//NaN --&gt; not a number.</span>
</code></pre></div></td></tr></table></div>
<p><a href="https://www.jacklmoore.com/notes/rounding-in-javascript/">Rounding Decimals in JavaScript</a>
<a href="https://github.com/MikeMcl/decimal.js">Decimal.js</a></p>
<p>Mathematical expression will <em>never</em> cause an error. At worst the result will be NaN.</p>
<h3 id="string-data-type">String data type</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span>
<span class="normal"><a href="#__codelineno-6-2">2</a></span>
<span class="normal"><a href="#__codelineno-6-3">3</a></span>
<span class="normal"><a href="#__codelineno-6-4">4</a></span>
<span class="normal"><a href="#__codelineno-6-5">5</a></span>
<span class="normal"><a href="#__codelineno-6-6">6</a></span>
<span class="normal"><a href="#__codelineno-6-7">7</a></span>
<span class="normal"><a href="#__codelineno-6-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">string</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;text&quot;</span><span class="p">;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">string$</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">;</span>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="kd">let</span><span class="w"> </span><span class="nx">string_</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`text </span><span class="si">${</span><span class="nx">expression</span><span class="si">}</span><span class="sb">`</span><span class="p">;</span><span class="w"> </span><span class="c1">//string interpolation (needs backticks)</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a><span class="nx">string</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="c1">// length of the string</span>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a><span class="kd">let</span><span class="w"> </span><span class="kr">char</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">string</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">index</span><span class="p">);</span><span class="w"> </span><span class="c1">// extraction of a single character by position</span>
<a id="__codelineno-6-7" name="__codelineno-6-7"></a><span class="nx">string</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span><span class="w"> </span><span class="c1">// char extraction by property access</span>
<a id="__codelineno-6-8" name="__codelineno-6-8"></a><span class="kd">let</span><span class="w"> </span><span class="nx">index</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">string</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">substring</span><span class="p">);</span><span class="w"> </span><span class="c1">// start index of substring in string</span>
</code></pre></div></td></tr></table></div>
<p>Property access is unpredictable:</p>
<ul>
<li>does not work in IE7 or earlier</li>
<li>makes strings look like arrays (confusing)</li>
<li>if no character is found, <code>[ ]</code> returns undefined, <code>charAt()</code> returns an empty string</li>
<li>Is read only: <code>string[index] = "value"</code> does not work and gives no errors</li>
</ul>
<h3 id="slice-vs-substring-vs-substr"><a href="https://stackoverflow.com/questions/2243824/what-is-the-difference-between-string-slice-and-string-substring">Slice vs Substring vs Substr</a></h3>
<p>If the parameters to slice are negative, they reference the string from the end. Substring and substr doesn´t.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1">1</a></span>
<span class="normal"><a href="#__codelineno-7-2">2</a></span>
<span class="normal"><a href="#__codelineno-7-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="nx">string</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="nx">begin</span><span class="w"> </span><span class="p">[,</span><span class="w"> </span><span class="nx">end</span><span class="p">]);</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="nx">string</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="kr">from</span><span class="w"> </span><span class="p">[,</span><span class="w"> </span><span class="nx">to</span><span class="p">]);</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a><span class="nx">string</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="nx">start</span><span class="w"> </span><span class="p">[,</span><span class="w"> </span><span class="nx">length</span><span class="p">]);</span>
</code></pre></div></td></tr></table></div>
<h3 id="boolean-data-type">Boolean data type</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1">1</a></span>
<span class="normal"><a href="#__codelineno-8-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="kd">let</span><span class="w"> </span><span class="kr">boolean</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">boolean_</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span>
</code></pre></div></td></tr></table></div>
<h3 id="null-data-type">Null data type</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">_</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span>
</code></pre></div></td></tr></table></div>
<h3 id="undefined">Undefined</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1">1</a></span>
<span class="normal"><a href="#__codelineno-10-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">$</span><span class="p">;</span><span class="w"> </span><span class="c1">//value is &quot;undefined&quot;</span>
<a id="__codelineno-10-2" name="__codelineno-10-2"></a><span class="nx">$</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">undefined</span><span class="p">;</span>
</code></pre></div></td></tr></table></div>
<h3 id="typeof">Typeof()</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1">1</a></span>
<span class="normal"><a href="#__codelineno-11-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a><span class="ow">typeof</span><span class="w"> </span><span class="nx">x</span><span class="p">;</span><span class="w"> </span><span class="c1">//returns the type of the variable x as a string</span>
<a id="__codelineno-11-2" name="__codelineno-11-2"></a><span class="ow">typeof</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span><span class="w"> </span><span class="c1">//returns the type of the variable x as a string</span>
</code></pre></div></td></tr></table></div>
<p>The result of typeof null is "object". That's wrong.<br />
It is an officially recognized error in typeof, kept for compatibility. Of course, null is not an object.
It is a special value with a separate type of its own. So, again, this is an error in the language. </p>
<h3 id="type-casting">Type Casting</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-12-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-12-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-12-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-12-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-12-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-12-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-12-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-12-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-12-10">10</a></span>
<span class="normal"><a href="#__codelineno-12-11">11</a></span>
<span class="normal"><a href="#__codelineno-12-12">12</a></span>
<span class="normal"><a href="#__codelineno-12-13">13</a></span>
<span class="normal"><a href="#__codelineno-12-14">14</a></span>
<span class="normal"><a href="#__codelineno-12-15">15</a></span>
<span class="normal"><a href="#__codelineno-12-16">16</a></span>
<span class="normal"><a href="#__codelineno-12-17">17</a></span>
<span class="normal"><a href="#__codelineno-12-18">18</a></span>
<span class="normal"><a href="#__codelineno-12-19">19</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a><span class="nb">String</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span><span class="w"> </span><span class="c1">//converts value to string</span>
<a id="__codelineno-12-2" name="__codelineno-12-2"></a>
<a id="__codelineno-12-3" name="__codelineno-12-3"></a><span class="nb">Number</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span><span class="w"> </span><span class="c1">//converts value to a number</span>
<a id="__codelineno-12-4" name="__codelineno-12-4"></a><span class="nb">Number</span><span class="p">(</span><span class="kc">undefined</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; NaN</span>
<a id="__codelineno-12-5" name="__codelineno-12-5"></a><span class="nb">Number</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; 0</span>
<a id="__codelineno-12-6" name="__codelineno-12-6"></a><span class="nb">Number</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; 1</span>
<a id="__codelineno-12-7" name="__codelineno-12-7"></a><span class="nb">Number</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; 0</span>
<a id="__codelineno-12-8" name="__codelineno-12-8"></a><span class="nb">Number</span><span class="p">(</span><span class="nb">String</span><span class="p">);</span><span class="w"> </span><span class="c1">//Whitespace from the start and end is removed. If the remaining string is empty, the result is 0. Otherwise, the number is &quot;read&quot; from the string. An error gives NaN.</span>
<a id="__codelineno-12-9" name="__codelineno-12-9"></a>
<a id="__codelineno-12-10" name="__codelineno-12-10"></a><span class="nb">Boolean</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; true</span>
<a id="__codelineno-12-11" name="__codelineno-12-11"></a><span class="nb">Boolean</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; false</span>
<a id="__codelineno-12-12" name="__codelineno-12-12"></a><span class="nb">Boolean</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; false</span>
<a id="__codelineno-12-13" name="__codelineno-12-13"></a><span class="nb">Boolean</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; false</span>
<a id="__codelineno-12-14" name="__codelineno-12-14"></a><span class="nb">Boolean</span><span class="p">(</span><span class="kc">undefined</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; false</span>
<a id="__codelineno-12-15" name="__codelineno-12-15"></a><span class="nb">Boolean</span><span class="p">(</span><span class="kc">NaN</span><span class="p">);</span><span class="w"> </span><span class="c1">//--&gt; false</span>
<a id="__codelineno-12-16" name="__codelineno-12-16"></a>
<a id="__codelineno-12-17" name="__codelineno-12-17"></a>
<a id="__codelineno-12-18" name="__codelineno-12-18"></a><span class="c1">//numeric type checking the moronic way</span>
<a id="__codelineno-12-19" name="__codelineno-12-19"></a><span class="ow">typeof</span><span class="w"> </span><span class="nx">var_</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">&quot;number&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// typeof returns a string with the name of the type</span>
</code></pre></div></td></tr></table></div>
<h3 id="type-checking">Type Checking</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-13-1">1</a></span>
<span class="normal"><a href="#__codelineno-13-2">2</a></span>
<span class="normal"><a href="#__codelineno-13-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1"></a><span class="nb">isNaN</span><span class="p">(</span><span class="kd">var</span><span class="p">);</span><span class="w"> </span><span class="c1">// converts var in number and then check if is NaN</span>
<a id="__codelineno-13-2" name="__codelineno-13-2"></a>
<a id="__codelineno-13-3" name="__codelineno-13-3"></a><span class="nb">Number</span><span class="p">(</span><span class="s2">&quot;A&quot;</span><span class="p">)</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="kc">NaN</span><span class="p">;</span><span class="w"> </span><span class="c1">//false ?!?</span>
</code></pre></div></td></tr></table></div>
<h3 id="dangerous-stupid-implicit-type-casting">Dangerous &amp; Stupid Implicit Type Casting</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-14-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-14-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-14-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-14-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-14-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-14-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-14-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-14-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-14-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-14-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1"></a><span class="mf">2</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">;</span><span class="w"> </span><span class="c1">//&quot;2text&quot;, implicit conversion and concatenation</span>
<a id="__codelineno-14-2" name="__codelineno-14-2"></a><span class="mf">1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;1&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">//&quot;11&quot;, implicit conversion and concatenation</span>
<a id="__codelineno-14-3" name="__codelineno-14-3"></a><span class="s2">&quot;1&quot;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span><span class="w"> </span><span class="c1">//&quot;11&quot;, implicit conversion and concatenation</span>
<a id="__codelineno-14-4" name="__codelineno-14-4"></a><span class="o">+</span><span class="s2">&quot;1&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">//1, implicit conversion</span>
<a id="__codelineno-14-5" name="__codelineno-14-5"></a><span class="o">+</span><span class="s2">&quot;text&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// NaN</span>
<a id="__codelineno-14-6" name="__codelineno-14-6"></a><span class="mf">1</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s2">&quot;1&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">//true</span>
<a id="__codelineno-14-7" name="__codelineno-14-7"></a><span class="mf">1</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s2">&quot;1&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">//false</span>
<a id="__codelineno-14-8" name="__codelineno-14-8"></a><span class="mf">1</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="kc">true</span><span class="p">;</span><span class="w"> </span><span class="c1">//true</span>
<a id="__codelineno-14-9" name="__codelineno-14-9"></a><span class="mf">0</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"> </span><span class="c1">//true</span>
<a id="__codelineno-14-10" name="__codelineno-14-10"></a><span class="s2">&quot;&quot;</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span><span class="w"> </span><span class="c1">//true</span>
</code></pre></div></td></tr></table></div>
<h2 id="operators">Operators</h2>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>(...)</code></td>
<td>grouping</td>
</tr>
<tr>
<td>a<code>.</code>b</td>
<td>member access</td>
</tr>
<tr>
<td><code>new</code> a(...)</td>
<td>object creation</td>
</tr>
<tr>
<td>a <code>in</code> b</td>
<td>membership</td>
</tr>
</tbody>
</table>
<h3 id="mathematical-operators">Mathematical Operators</h3>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>a <code>+</code> b</td>
<td>addition</td>
</tr>
<tr>
<td>a <code>-</code> b</td>
<td>subtraction</td>
</tr>
<tr>
<td>a <code>*</code> b</td>
<td>multiplication</td>
</tr>
<tr>
<td>a <code>**</code> b</td>
<td>a^b</td>
</tr>
<tr>
<td>a <code>/</code> b</td>
<td>division</td>
</tr>
<tr>
<td>a <code>%</code> b</td>
<td>modulus</td>
</tr>
</tbody>
</table>
<h3 id="unary-increment-operators">Unary Increment Operators</h3>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>--</code>variable</td>
<td>prefix decrement</td>
</tr>
<tr>
<td><code>++</code>variable</td>
<td>prefix increment</td>
</tr>
<tr>
<td>variable<code>--</code></td>
<td>postfix decrement</td>
</tr>
<tr>
<td>variable<code>++</code></td>
<td>postfix increment</td>
</tr>
</tbody>
</table>
<h3 id="logical-operators">Logical Operators</h3>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>a <code>&amp;&amp;</code> b</td>
<td>logical <strong>AND</strong></td>
</tr>
<tr>
<td>a <code>||</code> b</td>
<td>logical <strong>OR</strong></td>
</tr>
<tr>
<td><code>!</code>a</td>
<td>logical <strong>NOT</strong></td>
</tr>
</tbody>
</table>
<h3 id="comparison-operators">Comparison Operators</h3>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>a <code>&lt;</code> b</td>
<td>less than</td>
</tr>
<tr>
<td>a <code>&lt;=</code> b</td>
<td>less or equal to</td>
</tr>
<tr>
<td>a <code>&gt;</code> b</td>
<td>greater than</td>
</tr>
<tr>
<td>a <code>&gt;=</code> b</td>
<td>greater or equal to</td>
</tr>
<tr>
<td>a <code>==</code> b</td>
<td>equality</td>
</tr>
<tr>
<td>a <code>!=</code> b</td>
<td>inequality</td>
</tr>
<tr>
<td>a <code>===</code> b</td>
<td>strict equality</td>
</tr>
<tr>
<td>a <code>!==</code> b</td>
<td>strict inequality</td>
</tr>
</tbody>
</table>
<h3 id="bitwise-logical-operators">Bitwise Logical Operators</h3>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>a <code>&amp;</code> b</td>
<td>bitwise AND</td>
</tr>
<tr>
<td>a <code>|</code> b</td>
<td>bitwise OR</td>
</tr>
<tr>
<td>a <code>^</code> b</td>
<td>bitwise XOR</td>
</tr>
<tr>
<td><code>~</code>a</td>
<td>bitwise NOT</td>
</tr>
<tr>
<td>a <code>&lt;&lt;</code> b</td>
<td>bitwise left shift</td>
</tr>
<tr>
<td>a <code>&gt;&gt;</code> b</td>
<td>bitwise right shift</td>
</tr>
<tr>
<td>a <code>&gt;&gt;&gt;</code> b</td>
<td>bitwise unsigned right shift</td>
</tr>
</tbody>
</table>
<h3 id="compound-operators">Compound Operators</h3>
<table>
<thead>
<tr>
<th>Operator</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>a <code>+=</code> b</td>
<td>a = a + b</td>
</tr>
<tr>
<td>a <code>-=</code> b</td>
<td>a = a - b</td>
</tr>
<tr>
<td>a <code>*=</code> b</td>
<td>a = a * b</td>
</tr>
<tr>
<td>a <code>**=</code> b</td>
<td>a = a ** b</td>
</tr>
<tr>
<td>a <code>/=</code> b</td>
<td>a = a / b</td>
</tr>
<tr>
<td>a <code>%=</code> b</td>
<td>a = a % b</td>
</tr>
<tr>
<td>a <code>&lt;&lt;=</code> b</td>
<td>a = a &lt;&lt; b</td>
</tr>
<tr>
<td>a <code>&gt;&gt;=</code> b</td>
<td>a = a &gt;&gt; b</td>
</tr>
<tr>
<td>a <code>&gt;&gt;&gt;=</code> b</td>
<td>a = a &gt;&gt;&gt; b</td>
</tr>
<tr>
<td>a <code>&amp;=</code> b</td>
<td>a = a &amp; b</td>
</tr>
<tr>
<td>a <code>^=</code> b</td>
<td>a = a ^ b</td>
</tr>
<tr>
<td>a <code>|=</code> b</td>
<td>a = a ! b</td>
</tr>
</tbody>
</table>
<h2 id="decision-statements">Decision Statements</h2>
<h3 id="if-else">IF-ELSE</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-15-1">1</a></span>
<span class="normal"><a href="#__codelineno-15-2">2</a></span>
<span class="normal"><a href="#__codelineno-15-3">3</a></span>
<span class="normal"><a href="#__codelineno-15-4">4</a></span>
<span class="normal"><a href="#__codelineno-15-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">condition</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-15-2" name="__codelineno-15-2"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-15-3" name="__codelineno-15-3"></a><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-15-4" name="__codelineno-15-4"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-15-5" name="__codelineno-15-5"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="if-else-multi-branch">IF-ELSE Multi-Branch</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-16-1">1</a></span>
<span class="normal"><a href="#__codelineno-16-2">2</a></span>
<span class="normal"><a href="#__codelineno-16-3">3</a></span>
<span class="normal"><a href="#__codelineno-16-4">4</a></span>
<span class="normal"><a href="#__codelineno-16-5">5</a></span>
<span class="normal"><a href="#__codelineno-16-6">6</a></span>
<span class="normal"><a href="#__codelineno-16-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">condition</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-2" name="__codelineno-16-2"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-16-3" name="__codelineno-16-3"></a><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">condition</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-4" name="__codelineno-16-4"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-16-5" name="__codelineno-16-5"></a><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-6" name="__codelineno-16-6"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-16-7" name="__codelineno-16-7"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="ternary-operator">Ternary Operator</h3>
<p><code>condition ? &lt;expr1&gt; : &lt;expr2&gt;;</code> </p>
<h3 id="switch-statement">Switch Statement</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-17-1">1</a></span>
<span class="normal"><a href="#__codelineno-17-2">2</a></span>
<span class="normal"><a href="#__codelineno-17-3">3</a></span>
<span class="normal"><a href="#__codelineno-17-4">4</a></span>
<span class="normal"><a href="#__codelineno-17-5">5</a></span>
<span class="normal"><a href="#__codelineno-17-6">6</a></span>
<span class="normal"><a href="#__codelineno-17-7">7</a></span>
<span class="normal"><a href="#__codelineno-17-8">8</a></span>
<span class="normal"><a href="#__codelineno-17-9">9</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1"></a><span class="k">switch</span><span class="w"> </span><span class="p">(</span><span class="nx">expression</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-17-2" name="__codelineno-17-2"></a><span class="w"> </span><span class="k">case</span><span class="w"> </span><span class="nx">expression</span><span class="o">:</span>
<a id="__codelineno-17-3" name="__codelineno-17-3"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-17-4" name="__codelineno-17-4"></a><span class="w"> </span><span class="k">break</span><span class="p">;</span>
<a id="__codelineno-17-5" name="__codelineno-17-5"></a>
<a id="__codelineno-17-6" name="__codelineno-17-6"></a><span class="w"> </span><span class="k">default</span><span class="o">:</span>
<a id="__codelineno-17-7" name="__codelineno-17-7"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-17-8" name="__codelineno-17-8"></a><span class="w"> </span><span class="k">break</span><span class="p">;</span>
<a id="__codelineno-17-9" name="__codelineno-17-9"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="loops">Loops</h2>
<h3 id="while-loop">While Loop</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-18-1">1</a></span>
<span class="normal"><a href="#__codelineno-18-2">2</a></span>
<span class="normal"><a href="#__codelineno-18-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1"></a><span class="k">while</span><span class="w"> </span><span class="p">(</span><span class="nx">condition</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-18-2" name="__codelineno-18-2"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-18-3" name="__codelineno-18-3"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="do-while-loop">Do-While Loop</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-19-1">1</a></span>
<span class="normal"><a href="#__codelineno-19-2">2</a></span>
<span class="normal"><a href="#__codelineno-19-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1"></a><span class="k">do</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-19-2" name="__codelineno-19-2"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-19-3" name="__codelineno-19-3"></a><span class="p">}</span><span class="w"> </span><span class="k">while</span><span class="w"> </span><span class="p">(</span><span class="nx">condition</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<h3 id="for-loop">For Loop</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-20-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-20-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-20-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-20-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-20-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-20-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-20-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-20-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-20-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-20-10">10</a></span>
<span class="normal"><a href="#__codelineno-20-11">11</a></span>
<span class="normal"><a href="#__codelineno-20-12">12</a></span>
<span class="normal"><a href="#__codelineno-20-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-20-1" name="__codelineno-20-1"></a><span class="c1">// basic for</span>
<a id="__codelineno-20-2" name="__codelineno-20-2"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="nx">begin</span><span class="p">;</span><span class="w"> </span><span class="nx">condition</span><span class="p">;</span><span class="w"> </span><span class="nx">step</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-20-3" name="__codelineno-20-3"></a>
<a id="__codelineno-20-4" name="__codelineno-20-4"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">iterable</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c1">// for/in statement loops through the properties of an object</span>
<a id="__codelineno-20-5" name="__codelineno-20-5"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">iterable</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c1">// instantiate a new variable at each iteration</span>
<a id="__codelineno-20-6" name="__codelineno-20-6"></a>
<a id="__codelineno-20-7" name="__codelineno-20-7"></a><span class="c1">// for/of statement loops through the values of an iterable objects</span>
<a id="__codelineno-20-8" name="__codelineno-20-8"></a><span class="c1">// for/of lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.</span>
<a id="__codelineno-20-9" name="__codelineno-20-9"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">iterable</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-20-10" name="__codelineno-20-10"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="nx">iterable</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c1">// instantiate a new variable at each iteration</span>
<a id="__codelineno-20-11" name="__codelineno-20-11"></a>
<a id="__codelineno-20-12" name="__codelineno-20-12"></a><span class="c1">// foreach (similar to for..of)</span>
<a id="__codelineno-20-13" name="__codelineno-20-13"></a><span class="nx">iterable</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* statements */</span><span class="w"> </span><span class="p">});</span>
</code></pre></div></td></tr></table></div>
<h3 id="break-continue-statements">Break &amp; Continue statements</h3>
<p><code>break;</code> exits the loop.<br />
<code>continue;</code> skip to next loop cycle.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-21-1">1</a></span>
<span class="normal"><a href="#__codelineno-21-2">2</a></span>
<span class="normal"><a href="#__codelineno-21-3">3</a></span>
<span class="normal"><a href="#__codelineno-21-4">4</a></span>
<span class="normal"><a href="#__codelineno-21-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1"></a><span class="nx">label</span><span class="o">:</span><span class="w"> </span><span class="k">for</span><span class="p">(</span><span class="nx">begin</span><span class="p">;</span><span class="w"> </span><span class="nx">condition</span><span class="p">;</span><span class="w"> </span><span class="nx">step</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-21-2" name="__codelineno-21-2"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-21-3" name="__codelineno-21-3"></a><span class="p">}</span>
<a id="__codelineno-21-4" name="__codelineno-21-4"></a>
<a id="__codelineno-21-5" name="__codelineno-21-5"></a><span class="k">break</span><span class="w"> </span><span class="nx">label</span><span class="p">;</span><span class="w"> </span><span class="c1">//breaks labelled loop and nested loops inside it</span>
</code></pre></div></td></tr></table></div>
<h2 id="arrays">Arrays</h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-22-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-22-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-22-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-22-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-22-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-22-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-22-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-22-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-22-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-22-10">10</a></span>
<span class="normal"><a href="#__codelineno-22-11">11</a></span>
<span class="normal"><a href="#__codelineno-22-12">12</a></span>
<span class="normal"><a href="#__codelineno-22-13">13</a></span>
<span class="normal"><a href="#__codelineno-22-14">14</a></span>
<span class="normal"><a href="#__codelineno-22-15">15</a></span>
<span class="normal"><a href="#__codelineno-22-16">16</a></span>
<span class="normal"><a href="#__codelineno-22-17">17</a></span>
<span class="normal"><a href="#__codelineno-22-18">18</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">array</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span><span class="w"> </span><span class="c1">// empty array</span>
<a id="__codelineno-22-2" name="__codelineno-22-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">array</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;text&quot;</span><span class="p">,</span><span class="w"> </span><span class="mf">3.14</span><span class="p">,</span><span class="w"> </span><span class="p">[</span><span class="mf">1.41</span><span class="p">]];</span><span class="w"> </span><span class="c1">// array declaration and initialization</span>
<a id="__codelineno-22-3" name="__codelineno-22-3"></a>
<a id="__codelineno-22-4" name="__codelineno-22-4"></a><span class="nx">array</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="c1">// number of items in the array</span>
<a id="__codelineno-22-5" name="__codelineno-22-5"></a><span class="nx">array</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span><span class="w"> </span><span class="c1">// access to item by index</span>
<a id="__codelineno-22-6" name="__codelineno-22-6"></a><span class="nx">array</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">item</span><span class="p">;</span><span class="w"> </span><span class="c1">// change or add item by index</span>
<a id="__codelineno-22-7" name="__codelineno-22-7"></a>
<a id="__codelineno-22-8" name="__codelineno-22-8"></a><span class="nx">array</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span><span class="w"> </span><span class="c1">//add item to array</span>
<a id="__codelineno-22-9" name="__codelineno-22-9"></a><span class="nx">array</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span><span class="w"> </span><span class="c1">// remove and return last item</span>
<a id="__codelineno-22-10" name="__codelineno-22-10"></a>
<a id="__codelineno-22-11" name="__codelineno-22-11"></a><span class="nx">array</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;separator&quot;</span><span class="p">);</span><span class="w"> </span><span class="c1">// construct a string from the items of the array, separated by SEPARATOR</span>
<a id="__codelineno-22-12" name="__codelineno-22-12"></a><span class="nx">array</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">item</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">condition</span><span class="p">);</span><span class="w"> </span><span class="c1">// returns the value of the first element in the provided array that satisfies the provided testing function</span>
<a id="__codelineno-22-13" name="__codelineno-22-13"></a><span class="nx">array</span><span class="p">.</span><span class="nx">fill</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span><span class="w"> </span><span class="nx">start</span><span class="p">,</span><span class="w"> </span><span class="nx">end</span><span class="p">);</span><span class="w"> </span><span class="c1">// fills an array with the passed value</span>
<a id="__codelineno-22-14" name="__codelineno-22-14"></a>
<a id="__codelineno-22-15" name="__codelineno-22-15"></a>
<a id="__codelineno-22-16" name="__codelineno-22-16"></a><span class="c1">// https://stackoverflow.com/a/37601776</span>
<a id="__codelineno-22-17" name="__codelineno-22-17"></a><span class="nx">array</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span><span class="w"> </span><span class="nx">end</span><span class="p">);</span><span class="w"> </span><span class="c1">// RETURN list of items between indexes start and end-1</span>
<a id="__codelineno-22-18" name="__codelineno-22-18"></a><span class="nx">array</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span><span class="w"> </span><span class="nx">deleteCount</span><span class="p">,</span><span class="w"> </span><span class="p">[</span><span class="nx">items_to_add</span><span class="p">]);</span><span class="w"> </span><span class="c1">// remove and RETURN items from array, can append a list of items. IN PLACE operation</span>
</code></pre></div></td></tr></table></div>
<h3 id="filter-map-reduce"><code>filter()</code> &amp; <code>map()</code>, <code>reduce()</code></h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-23-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-23-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-23-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-23-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-23-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-23-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-23-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-23-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-23-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-23-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-23-1" name="__codelineno-23-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">array</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="nx">items</span><span class="w"> </span><span class="p">];</span>
<a id="__codelineno-23-2" name="__codelineno-23-2"></a>
<a id="__codelineno-23-3" name="__codelineno-23-3"></a><span class="c1">// execute an operation on each item, producing a new array</span>
<a id="__codelineno-23-4" name="__codelineno-23-4"></a><span class="nx">array</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">);</span>
<a id="__codelineno-23-5" name="__codelineno-23-5"></a><span class="nx">array</span><span class="p">.</span><span class="nx">map</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">operation</span><span class="p">);</span><span class="w"> </span>
<a id="__codelineno-23-6" name="__codelineno-23-6"></a>
<a id="__codelineno-23-7" name="__codelineno-23-7"></a><span class="nx">array</span><span class="p">.</span><span class="nx">filter</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">condition</span><span class="p">);</span><span class="w"> </span><span class="c1">// return an items only if the condition is true</span>
<a id="__codelineno-23-8" name="__codelineno-23-8"></a>
<a id="__codelineno-23-9" name="__codelineno-23-9"></a><span class="c1">// execute a reducer function on each element of the array, resulting in single output value</span>
<a id="__codelineno-23-10" name="__codelineno-23-10"></a><span class="nx">array</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">x</span><span class="p">,</span><span class="w"> </span><span class="nx">y</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">...);</span>
</code></pre></div></td></tr></table></div>
<h2 id="spread-operator">Spread Operator (...)</h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-24-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-24-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-24-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-24-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-24-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-24-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-24-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-24-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-24-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-24-10">10</a></span>
<span class="normal"><a href="#__codelineno-24-11">11</a></span>
<span class="normal"><a href="#__codelineno-24-12">12</a></span>
<span class="normal"><a href="#__codelineno-24-13">13</a></span>
<span class="normal"><a href="#__codelineno-24-14">14</a></span>
<span class="normal"><a href="#__codelineno-24-15">15</a></span>
<span class="normal"><a href="#__codelineno-24-16">16</a></span>
<span class="normal"><a href="#__codelineno-24-17">17</a></span>
<span class="normal"><a href="#__codelineno-24-18">18</a></span>
<span class="normal"><a href="#__codelineno-24-19">19</a></span>
<span class="normal"><a href="#__codelineno-24-20">20</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-24-1" name="__codelineno-24-1"></a><span class="c1">// arrays</span>
<a id="__codelineno-24-2" name="__codelineno-24-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">array1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="mf">3</span><span class="p">,</span><span class="w"> </span><span class="mf">4</span><span class="p">,</span><span class="w"> </span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="mf">6</span><span class="w"> </span><span class="p">];</span>
<a id="__codelineno-24-3" name="__codelineno-24-3"></a><span class="kd">let</span><span class="w"> </span><span class="nx">array2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="mf">7</span><span class="p">,</span><span class="w"> </span><span class="mf">8</span><span class="p">,</span><span class="w"> </span><span class="mf">9</span><span class="p">,</span><span class="w"> </span><span class="mf">10</span><span class="w"> </span><span class="p">];</span>
<a id="__codelineno-24-4" name="__codelineno-24-4"></a><span class="kd">let</span><span class="w"> </span><span class="nx">copy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="p">...</span><span class="nx">array1</span><span class="w"> </span><span class="p">];</span><span class="w"> </span><span class="c1">// shallow copy</span>
<a id="__codelineno-24-5" name="__codelineno-24-5"></a><span class="kd">let</span><span class="w"> </span><span class="nx">copyAndAdd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">array1</span><span class="p">,</span><span class="w"> </span><span class="mf">7</span><span class="w"> </span><span class="p">];</span><span class="w"> </span><span class="c1">// insert all values in new array</span>
<a id="__codelineno-24-6" name="__codelineno-24-6"></a><span class="kd">let</span><span class="w"> </span><span class="nx">merge</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="p">...</span><span class="nx">array1</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">array2</span><span class="w"> </span><span class="p">];</span><span class="w"> </span><span class="c1">// merge the arrays contents in new array</span>
<a id="__codelineno-24-7" name="__codelineno-24-7"></a>
<a id="__codelineno-24-8" name="__codelineno-24-8"></a><span class="c1">// objects</span>
<a id="__codelineno-24-9" name="__codelineno-24-9"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">prop1</span><span class="o">:</span><span class="w"> </span><span class="nx">value1</span><span class="p">,</span><span class="w"> </span><span class="nx">prop2</span><span class="o">:</span><span class="w"> </span><span class="nx">value2</span><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-24-10" name="__codelineno-24-10"></a><span class="kd">let</span><span class="w"> </span><span class="nx">clone</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="nx">obj</span><span class="p">,</span><span class="w"> </span><span class="nx">prop</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="w"> </span><span class="p">};</span><span class="w"> </span><span class="c1">// shallow copy, and update copy prop</span>
<a id="__codelineno-24-11" name="__codelineno-24-11"></a><span class="kd">let</span><span class="w"> </span><span class="nx">cloneAndAdd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">prop0</span><span class="o">:</span><span class="w"> </span><span class="nx">value0</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">obj</span><span class="p">,</span><span class="w"> </span><span class="nx">prop3</span><span class="o">:</span><span class="w"> </span><span class="nx">value3</span><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-24-12" name="__codelineno-24-12"></a>
<a id="__codelineno-24-13" name="__codelineno-24-13"></a><span class="c1">// strings</span>
<a id="__codelineno-24-14" name="__codelineno-24-14"></a><span class="kd">let</span><span class="w"> </span><span class="nx">alphabet</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;abcdefghijklmnopqrstxyz&quot;</span>
<a id="__codelineno-24-15" name="__codelineno-24-15"></a><span class="kd">let</span><span class="w"> </span><span class="nx">letters</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="p">...</span><span class="nx">alphabet</span><span class="w"> </span><span class="p">];</span><span class="w"> </span><span class="c1">// alphabet.split(&quot;&quot;)</span>
<a id="__codelineno-24-16" name="__codelineno-24-16"></a>
<a id="__codelineno-24-17" name="__codelineno-24-17"></a><span class="c1">//function arguments</span>
<a id="__codelineno-24-18" name="__codelineno-24-18"></a><span class="kd">let</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">arg1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">val1</span><span class="p">,</span><span class="w"> </span><span class="nx">arg2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">val2</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span>
<a id="__codelineno-24-19" name="__codelineno-24-19"></a><span class="kd">let</span><span class="w"> </span><span class="nx">args</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="nx">value1</span><span class="p">,</span><span class="w"> </span><span class="nx">value2</span><span class="w"> </span><span class="p">];</span>
<a id="__codelineno-24-20" name="__codelineno-24-20"></a><span class="nx">func</span><span class="p">(</span><span class="nx">arg0</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">args</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<h2 id="dictionaries">Dictionaries</h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-25-1">1</a></span>
<span class="normal"><a href="#__codelineno-25-2">2</a></span>
<span class="normal"><a href="#__codelineno-25-3">3</a></span>
<span class="normal"><a href="#__codelineno-25-4">4</a></span>
<span class="normal"><a href="#__codelineno-25-5">5</a></span>
<span class="normal"><a href="#__codelineno-25-6">6</a></span>
<span class="normal"><a href="#__codelineno-25-7">7</a></span>
<span class="normal"><a href="#__codelineno-25-8">8</a></span>
<span class="normal"><a href="#__codelineno-25-9">9</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-25-1" name="__codelineno-25-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">dict</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">FirstName</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Chris&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;one&quot;</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;some value&quot;</span><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-25-2" name="__codelineno-25-2"></a>
<a id="__codelineno-25-3" name="__codelineno-25-3"></a>
<a id="__codelineno-25-4" name="__codelineno-25-4"></a><span class="c1">// add new or update property</span>
<a id="__codelineno-25-5" name="__codelineno-25-5"></a><span class="nx">dict</span><span class="p">[</span><span class="s2">&quot;Age&quot;</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">42</span><span class="p">;</span>
<a id="__codelineno-25-6" name="__codelineno-25-6"></a>
<a id="__codelineno-25-7" name="__codelineno-25-7"></a><span class="c1">// direct property by name</span>
<a id="__codelineno-25-8" name="__codelineno-25-8"></a><span class="c1">// because it&#39;s a dynamic language</span>
<a id="__codelineno-25-9" name="__codelineno-25-9"></a><span class="nx">dict</span><span class="p">.</span><span class="nx">FirstName</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Chris&quot;</span><span class="p">;</span>
</code></pre></div></td></tr></table></div>
<h3 id="iterating-key-value-pairs">Iterating Key-Value pairs</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-26-1">1</a></span>
<span class="normal"><a href="#__codelineno-26-2">2</a></span>
<span class="normal"><a href="#__codelineno-26-3">3</a></span>
<span class="normal"><a href="#__codelineno-26-4">4</a></span>
<span class="normal"><a href="#__codelineno-26-5">5</a></span>
<span class="normal"><a href="#__codelineno-26-6">6</a></span>
<span class="normal"><a href="#__codelineno-26-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-26-1" name="__codelineno-26-1"></a><span class="k">for</span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">key</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">dict</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-26-2" name="__codelineno-26-2"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">dict</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
<a id="__codelineno-26-3" name="__codelineno-26-3"></a>
<a id="__codelineno-26-4" name="__codelineno-26-4"></a><span class="w"> </span><span class="c1">// do something with &quot;key&quot; and &quot;value&quot; variables</span>
<a id="__codelineno-26-5" name="__codelineno-26-5"></a><span class="p">}</span>
<a id="__codelineno-26-6" name="__codelineno-26-6"></a>
<a id="__codelineno-26-7" name="__codelineno-26-7"></a><span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">dict</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">key</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">});</span>
</code></pre></div></td></tr></table></div>
<h2 id="functions">Functions</h2>
<h3 id="jsdoc-documentation-standard">JSDOC documentation standard</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-27-1">1</a></span>
<span class="normal"><a href="#__codelineno-27-2">2</a></span>
<span class="normal"><a href="#__codelineno-27-3">3</a></span>
<span class="normal"><a href="#__codelineno-27-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-27-1" name="__codelineno-27-1"></a><span class="cm">/**</span>
<a id="__codelineno-27-2" name="__codelineno-27-2"></a><span class="cm"> * @param {type} parameter - description</span>
<a id="__codelineno-27-3" name="__codelineno-27-3"></a><span class="cm"> * @returns {type} parameter - description</span>
<a id="__codelineno-27-4" name="__codelineno-27-4"></a><span class="cm"> * */</span>
</code></pre></div></td></tr></table></div>
<h3 id="function-declaration">Function Declaration</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-28-1">1</a></span>
<span class="normal"><a href="#__codelineno-28-2">2</a></span>
<span class="normal"><a href="#__codelineno-28-3">3</a></span>
<span class="normal"><a href="#__codelineno-28-4">4</a></span>
<span class="normal"><a href="#__codelineno-28-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-28-1" name="__codelineno-28-1"></a><span class="c1">// ...args will contain extra parameters (rest argument)</span>
<a id="__codelineno-28-2" name="__codelineno-28-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">functionName</span><span class="p">(</span><span class="nx">parameter</span><span class="o">=</span><span class="k">default</span><span class="o">-</span><span class="nx">value</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="nx">args</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-28-3" name="__codelineno-28-3"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-28-4" name="__codelineno-28-4"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">expression</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-28-5" name="__codelineno-28-5"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="default-parameters-old-versions">Default Parameters (old versions)</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-29-1">1</a></span>
<span class="normal"><a href="#__codelineno-29-2">2</a></span>
<span class="normal"><a href="#__codelineno-29-3">3</a></span>
<span class="normal"><a href="#__codelineno-29-4">4</a></span>
<span class="normal"><a href="#__codelineno-29-5">5</a></span>
<span class="normal"><a href="#__codelineno-29-6">6</a></span>
<span class="normal"><a href="#__codelineno-29-7">7</a></span>
<span class="normal"><a href="#__codelineno-29-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-29-1" name="__codelineno-29-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">functionName</span><span class="p">(</span><span class="nx">parameters</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-29-2" name="__codelineno-29-2"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">parameter</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-29-3" name="__codelineno-29-3"></a><span class="w"> </span><span class="nx">parameter</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span><span class="p">;</span>
<a id="__codelineno-29-4" name="__codelineno-29-4"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-29-5" name="__codelineno-29-5"></a>
<a id="__codelineno-29-6" name="__codelineno-29-6"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-29-7" name="__codelineno-29-7"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">expression</span><span class="o">&gt;</span><span class="p">;</span>
<a id="__codelineno-29-8" name="__codelineno-29-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="function-expressions">Function Expressions</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-30-1">1</a></span>
<span class="normal"><a href="#__codelineno-30-2">2</a></span>
<span class="normal"><a href="#__codelineno-30-3">3</a></span>
<span class="normal"><a href="#__codelineno-30-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-30-1" name="__codelineno-30-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">functionName</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">parameters</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-30-2" name="__codelineno-30-2"></a><span class="w"> </span><span class="c1">//code here</span>
<a id="__codelineno-30-3" name="__codelineno-30-3"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span>
<a id="__codelineno-30-4" name="__codelineno-30-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="arrow-functions">Arrow Functions</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-31-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-31-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-31-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-31-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-31-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-31-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-31-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-31-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-31-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-31-10">10</a></span>
<span class="normal"><a href="#__codelineno-31-11">11</a></span>
<span class="normal"><a href="#__codelineno-31-12">12</a></span>
<span class="normal"><a href="#__codelineno-31-13">13</a></span>
<span class="normal"><a href="#__codelineno-31-14">14</a></span>
<span class="normal"><a href="#__codelineno-31-15">15</a></span>
<span class="normal"><a href="#__codelineno-31-16">16</a></span>
<span class="normal"><a href="#__codelineno-31-17">17</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-31-1" name="__codelineno-31-1"></a><span class="p">(</span><span class="nx">input</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* statements */</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-31-2" name="__codelineno-31-2"></a><span class="p">(</span><span class="nx">input</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span>
<a id="__codelineno-31-3" name="__codelineno-31-3"></a><span class="nx">input</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span><span class="w"> </span><span class="c1">// parenthesis are optional</span>
<a id="__codelineno-31-4" name="__codelineno-31-4"></a><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span><span class="w"> </span><span class="c1">// no parameters syntax</span>
<a id="__codelineno-31-5" name="__codelineno-31-5"></a>
<a id="__codelineno-31-6" name="__codelineno-31-6"></a><span class="c1">// variants</span>
<a id="__codelineno-31-7" name="__codelineno-31-7"></a><span class="kd">let</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">input</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-31-8" name="__codelineno-31-8"></a><span class="w"> </span><span class="c1">// code here</span>
<a id="__codelineno-31-9" name="__codelineno-31-9"></a><span class="p">};</span>
<a id="__codelineno-31-10" name="__codelineno-31-10"></a>
<a id="__codelineno-31-11" name="__codelineno-31-11"></a><span class="kd">let</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">input</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span>
<a id="__codelineno-31-12" name="__codelineno-31-12"></a><span class="kd">let</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">input</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span>
<a id="__codelineno-31-13" name="__codelineno-31-13"></a>
<a id="__codelineno-31-14" name="__codelineno-31-14"></a><span class="nx">func</span><span class="p">();</span><span class="w"> </span><span class="c1">// function call</span>
<a id="__codelineno-31-15" name="__codelineno-31-15"></a>
<a id="__codelineno-31-16" name="__codelineno-31-16"></a><span class="c1">// return object literal</span>
<a id="__codelineno-31-17" name="__codelineno-31-17"></a><span class="kd">let</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="p">});</span>
</code></pre></div></td></tr></table></div>
<h2 id="object-oriented-programming">Object Oriented Programming</h2>
<p>An object is a collection of related data and/or functionality.</p>
<p><strong>Note</strong>: It's not possible to transform a variable in an object simply by using the object assignment.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-32-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-32-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-32-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-32-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-32-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-32-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-32-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-32-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-32-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-32-10">10</a></span>
<span class="normal"><a href="#__codelineno-32-11">11</a></span>
<span class="normal"><a href="#__codelineno-32-12">12</a></span>
<span class="normal"><a href="#__codelineno-32-13">13</a></span>
<span class="normal"><a href="#__codelineno-32-14">14</a></span>
<span class="normal"><a href="#__codelineno-32-15">15</a></span>
<span class="normal"><a href="#__codelineno-32-16">16</a></span>
<span class="normal"><a href="#__codelineno-32-17">17</a></span>
<span class="normal"><a href="#__codelineno-32-18">18</a></span>
<span class="normal"><a href="#__codelineno-32-19">19</a></span>
<span class="normal"><a href="#__codelineno-32-20">20</a></span>
<span class="normal"><a href="#__codelineno-32-21">21</a></span>
<span class="normal"><a href="#__codelineno-32-22">22</a></span>
<span class="normal"><a href="#__codelineno-32-23">23</a></span>
<span class="normal"><a href="#__codelineno-32-24">24</a></span>
<span class="normal"><a href="#__codelineno-32-25">25</a></span>
<span class="normal"><a href="#__codelineno-32-26">26</a></span>
<span class="normal"><a href="#__codelineno-32-27">27</a></span>
<span class="normal"><a href="#__codelineno-32-28">28</a></span>
<span class="normal"><a href="#__codelineno-32-29">29</a></span>
<span class="normal"><a href="#__codelineno-32-30">30</a></span>
<span class="normal"><a href="#__codelineno-32-31">31</a></span>
<span class="normal"><a href="#__codelineno-32-32">32</a></span>
<span class="normal"><a href="#__codelineno-32-33">33</a></span>
<span class="normal"><a href="#__codelineno-32-34">34</a></span>
<span class="normal"><a href="#__codelineno-32-35">35</a></span>
<span class="normal"><a href="#__codelineno-32-36">36</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-32-1" name="__codelineno-32-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span><span class="p">;</span>
<a id="__codelineno-32-2" name="__codelineno-32-2"></a>
<a id="__codelineno-32-3" name="__codelineno-32-3"></a><span class="c1">// object literal</span>
<a id="__codelineno-32-4" name="__codelineno-32-4"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-32-5" name="__codelineno-32-5"></a><span class="w"> </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="p">,</span>
<a id="__codelineno-32-6" name="__codelineno-32-6"></a><span class="w"> </span><span class="nx">variable</span><span class="p">,</span><span class="w"> </span><span class="c1">// same as variable: variable</span>
<a id="__codelineno-32-7" name="__codelineno-32-7"></a><span class="w"> </span><span class="p">[</span><span class="nx">property</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="w"> </span><span class="c1">// dynamic prop name</span>
<a id="__codelineno-32-8" name="__codelineno-32-8"></a>
<a id="__codelineno-32-9" name="__codelineno-32-9"></a><span class="w"> </span><span class="nx">object</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-32-10" name="__codelineno-32-10"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-32-11" name="__codelineno-32-11"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-32-12" name="__codelineno-32-12"></a>
<a id="__codelineno-32-13" name="__codelineno-32-13"></a><span class="w"> </span><span class="nx">method</span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-32-14" name="__codelineno-32-14"></a><span class="w"> </span><span class="c1">// code here</span>
<a id="__codelineno-32-15" name="__codelineno-32-15"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">propertyName</span><span class="p">;</span><span class="w"> </span><span class="c1">// reference to object property inside the object</span>
<a id="__codelineno-32-16" name="__codelineno-32-16"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-32-17" name="__codelineno-32-17"></a>
<a id="__codelineno-32-18" name="__codelineno-32-18"></a><span class="w"> </span><span class="nx">method</span><span class="p">;</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-32-19" name="__codelineno-32-19"></a><span class="w"> </span><span class="nx">obj</span><span class="p">.</span><span class="nx">propertyName</span><span class="p">;</span><span class="w"> </span><span class="c1">// this is undefined here, use full object name</span>
<a id="__codelineno-32-20" name="__codelineno-32-20"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-32-21" name="__codelineno-32-21"></a><span class="p">};</span>
<a id="__codelineno-32-22" name="__codelineno-32-22"></a>
<a id="__codelineno-32-23" name="__codelineno-32-23"></a><span class="c1">// access to property (non existant properties will return Undefined)</span>
<a id="__codelineno-32-24" name="__codelineno-32-24"></a><span class="nx">obj</span><span class="p">.</span><span class="nx">property</span><span class="p">;</span><span class="w"> </span><span class="c1">// dot notation</span>
<a id="__codelineno-32-25" name="__codelineno-32-25"></a><span class="nx">obj</span><span class="p">[</span><span class="s2">&quot;property&quot;</span><span class="p">];</span><span class="w"> </span><span class="c1">// array notation</span>
<a id="__codelineno-32-26" name="__codelineno-32-26"></a>
<a id="__codelineno-32-27" name="__codelineno-32-27"></a><span class="c1">// property modification (will add property if missing)</span>
<a id="__codelineno-32-28" name="__codelineno-32-28"></a><span class="nx">obj</span><span class="p">.</span><span class="nx">property</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span><span class="p">;</span><span class="w"> </span><span class="c1">// dot notation</span>
<a id="__codelineno-32-29" name="__codelineno-32-29"></a><span class="nx">obj</span><span class="p">[</span><span class="s2">&quot;property&quot;</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">value</span><span class="p">;</span><span class="w"> </span><span class="c1">// array notation</span>
<a id="__codelineno-32-30" name="__codelineno-32-30"></a>
<a id="__codelineno-32-31" name="__codelineno-32-31"></a><span class="nx">obj</span><span class="p">.</span><span class="nx">func</span><span class="p">();</span><span class="w"> </span><span class="c1">//method access</span>
<a id="__codelineno-32-32" name="__codelineno-32-32"></a>
<a id="__codelineno-32-33" name="__codelineno-32-33"></a><span class="ow">delete</span><span class="w"> </span><span class="nx">obj</span><span class="p">.</span><span class="nx">propertyName</span><span class="p">;</span><span class="w"> </span><span class="c1">// delete property</span>
<a id="__codelineno-32-34" name="__codelineno-32-34"></a>
<a id="__codelineno-32-35" name="__codelineno-32-35"></a><span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span><span class="w"> </span><span class="c1">// list of all property names</span>
<a id="__codelineno-32-36" name="__codelineno-32-36"></a><span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">obj</span><span class="p">);</span><span class="w"> </span><span class="c1">// list contents as key-value pairs</span>
</code></pre></div></td></tr></table></div>
<h3 id="constructors-and-object-instances">Constructors and object instances</h3>
<p>JavaScript uses special functions called <strong>constructor functions</strong> to define and initialize objects and their features.
Notice that it has all the features you'd expect in a function, although it doesn't return anything or explicitly create an object — it basically just defines properties and methods.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-33-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-33-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-33-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-33-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-33-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-33-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-33-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-33-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-33-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-33-10">10</a></span>
<span class="normal"><a href="#__codelineno-33-11">11</a></span>
<span class="normal"><a href="#__codelineno-33-12">12</a></span>
<span class="normal"><a href="#__codelineno-33-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-33-1" name="__codelineno-33-1"></a><span class="c1">// constructor function definition</span>
<a id="__codelineno-33-2" name="__codelineno-33-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">Class</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-33-3" name="__codelineno-33-3"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">property</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">param</span><span class="p">;</span>
<a id="__codelineno-33-4" name="__codelineno-33-4"></a>
<a id="__codelineno-33-5" name="__codelineno-33-5"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">method</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* code here */</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-33-6" name="__codelineno-33-6"></a><span class="p">}</span>
<a id="__codelineno-33-7" name="__codelineno-33-7"></a>
<a id="__codelineno-33-8" name="__codelineno-33-8"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Class</span><span class="p">(</span><span class="nx">params</span><span class="p">);</span><span class="w"> </span><span class="c1">// object instantiation</span>
<a id="__codelineno-33-9" name="__codelineno-33-9"></a>
<a id="__codelineno-33-10" name="__codelineno-33-10"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Object</span><span class="p">();</span><span class="w"> </span><span class="c1">// creates empty object</span>
<a id="__codelineno-33-11" name="__codelineno-33-11"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Object</span><span class="p">({</span>
<a id="__codelineno-33-12" name="__codelineno-33-12"></a><span class="w"> </span><span class="c1">// JSON</span>
<a id="__codelineno-33-13" name="__codelineno-33-13"></a><span class="p">});</span>
</code></pre></div></td></tr></table></div>
<h3 id="prototypes">Prototypes</h3>
<p>Prototypes are the mechanism by which JavaScript objects <em>inherit</em> features from one another.</p>
<p>JavaScript is often described as a <strong>prototype-based language</strong>; to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.</p>
<p>An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on.
This is often referred to as a <strong>prototype chain</strong>, and explains why different objects have properties and methods defined on other objects available to them.
If a method is implemented on an object (and not it's prototype) then only that object will heve that method and not all the ones that come from the same prototype.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-34-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-34-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-34-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-34-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-34-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-34-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-34-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-34-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-34-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-34-10">10</a></span>
<span class="normal"><a href="#__codelineno-34-11">11</a></span>
<span class="normal"><a href="#__codelineno-34-12">12</a></span>
<span class="normal"><a href="#__codelineno-34-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-34-1" name="__codelineno-34-1"></a><span class="c1">// constructor function</span>
<a id="__codelineno-34-2" name="__codelineno-34-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">Obj</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="p">...)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-34-3" name="__codelineno-34-3"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">param1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">param1</span><span class="p">,</span>
<a id="__codelineno-34-4" name="__codelineno-34-4"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-34-5" name="__codelineno-34-5"></a><span class="p">}</span>
<a id="__codelineno-34-6" name="__codelineno-34-6"></a>
<a id="__codelineno-34-7" name="__codelineno-34-7"></a><span class="c1">// method on the object</span>
<a id="__codelineno-34-8" name="__codelineno-34-8"></a><span class="nx">Obj</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">method</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-34-9" name="__codelineno-34-9"></a><span class="w"> </span><span class="c1">// code here (operate w/ this)</span>
<a id="__codelineno-34-10" name="__codelineno-34-10"></a><span class="p">}</span>
<a id="__codelineno-34-11" name="__codelineno-34-11"></a>
<a id="__codelineno-34-12" name="__codelineno-34-12"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Obj</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span><span class="w"> </span><span class="c1">// object instantiation</span>
<a id="__codelineno-34-13" name="__codelineno-34-13"></a><span class="nx">obj</span><span class="p">.</span><span class="nx">method</span><span class="p">();</span><span class="w"> </span><span class="c1">// call method from prototype</span>
</code></pre></div></td></tr></table></div>
<h3 id="extending-with-prototypes">Extending with prototypes</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-35-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-35-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-35-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-35-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-35-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-35-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-35-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-35-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-35-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-35-10">10</a></span>
<span class="normal"><a href="#__codelineno-35-11">11</a></span>
<span class="normal"><a href="#__codelineno-35-12">12</a></span>
<span class="normal"><a href="#__codelineno-35-13">13</a></span>
<span class="normal"><a href="#__codelineno-35-14">14</a></span>
<span class="normal"><a href="#__codelineno-35-15">15</a></span>
<span class="normal"><a href="#__codelineno-35-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-35-1" name="__codelineno-35-1"></a><span class="c1">// constructor function</span>
<a id="__codelineno-35-2" name="__codelineno-35-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">DerivedObj</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="nx">param2</span><span class="p">,</span><span class="w"> </span><span class="p">...)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-35-3" name="__codelineno-35-3"></a><span class="w"> </span><span class="nx">Obj</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span><span class="w"> </span><span class="nx">param1</span><span class="p">);</span><span class="w"> </span><span class="c1">// use prototype constructor</span>
<a id="__codelineno-35-4" name="__codelineno-35-4"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">param2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">param2</span><span class="p">;</span>
<a id="__codelineno-35-5" name="__codelineno-35-5"></a><span class="p">}</span>
<a id="__codelineno-35-6" name="__codelineno-35-6"></a>
<a id="__codelineno-35-7" name="__codelineno-35-7"></a><span class="c1">// extend Obj</span>
<a id="__codelineno-35-8" name="__codelineno-35-8"></a><span class="nx">DerivedObj</span><span class="p">.</span><span class="nx">prototype</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Object</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">Obj</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span>
<a id="__codelineno-35-9" name="__codelineno-35-9"></a>
<a id="__codelineno-35-10" name="__codelineno-35-10"></a><span class="c1">// method on object</span>
<a id="__codelineno-35-11" name="__codelineno-35-11"></a><span class="nx">DerivedObj</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">method</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-35-12" name="__codelineno-35-12"></a><span class="w"> </span><span class="c1">// code here (operate w/ this)</span>
<a id="__codelineno-35-13" name="__codelineno-35-13"></a><span class="p">}</span>
<a id="__codelineno-35-14" name="__codelineno-35-14"></a>
<a id="__codelineno-35-15" name="__codelineno-35-15"></a><span class="kd">let</span><span class="w"> </span><span class="nx">dobj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">DerivedObj</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span><span class="w"> </span><span class="c1">// object instantiation</span>
<a id="__codelineno-35-16" name="__codelineno-35-16"></a><span class="nx">dobj</span><span class="p">.</span><span class="nx">method</span><span class="p">();</span><span class="w"> </span><span class="c1">// call method from prototype</span>
</code></pre></div></td></tr></table></div>
<h3 id="classes-es6">Classes (ES6+)</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-36-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-36-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-36-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-36-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-36-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-36-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-36-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-36-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-36-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-36-10">10</a></span>
<span class="normal"><a href="#__codelineno-36-11">11</a></span>
<span class="normal"><a href="#__codelineno-36-12">12</a></span>
<span class="normal"><a href="#__codelineno-36-13">13</a></span>
<span class="normal"><a href="#__codelineno-36-14">14</a></span>
<span class="normal"><a href="#__codelineno-36-15">15</a></span>
<span class="normal"><a href="#__codelineno-36-16">16</a></span>
<span class="normal"><a href="#__codelineno-36-17">17</a></span>
<span class="normal"><a href="#__codelineno-36-18">18</a></span>
<span class="normal"><a href="#__codelineno-36-19">19</a></span>
<span class="normal"><a href="#__codelineno-36-20">20</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-36-1" name="__codelineno-36-1"></a><span class="kd">class</span><span class="w"> </span><span class="nx">Obj</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-36-2" name="__codelineno-36-2"></a><span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="p">...)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-36-3" name="__codelineno-36-3"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">param1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">param1</span><span class="p">,</span>
<a id="__codelineno-36-4" name="__codelineno-36-4"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-36-5" name="__codelineno-36-5"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-36-6" name="__codelineno-36-6"></a>
<a id="__codelineno-36-7" name="__codelineno-36-7"></a><span class="w"> </span><span class="nx">get</span><span class="w"> </span><span class="nx">param1</span><span class="p">()</span><span class="w"> </span><span class="c1">// getter</span>
<a id="__codelineno-36-8" name="__codelineno-36-8"></a><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-36-9" name="__codelineno-36-9"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">param1</span><span class="p">;</span>
<a id="__codelineno-36-10" name="__codelineno-36-10"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-36-11" name="__codelineno-36-11"></a>
<a id="__codelineno-36-12" name="__codelineno-36-12"></a><span class="w"> </span><span class="nx">func</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-36-13" name="__codelineno-36-13"></a><span class="w"> </span><span class="c1">// code here (operate w/ this)</span>
<a id="__codelineno-36-14" name="__codelineno-36-14"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-36-15" name="__codelineno-36-15"></a>
<a id="__codelineno-36-16" name="__codelineno-36-16"></a><span class="w"> </span><span class="k">static</span><span class="w"> </span><span class="nx">func</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c1">// static method</span>
<a id="__codelineno-36-17" name="__codelineno-36-17"></a>
<a id="__codelineno-36-18" name="__codelineno-36-18"></a><span class="c1">// object instantiation</span>
<a id="__codelineno-36-19" name="__codelineno-36-19"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Obj</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="p">...);</span>
<a id="__codelineno-36-20" name="__codelineno-36-20"></a><span class="nx">obj</span><span class="p">.</span><span class="nx">func</span><span class="p">();</span><span class="w"> </span><span class="c1">// call method</span>
</code></pre></div></td></tr></table></div>
<h3 id="extending-with-classes">Extending with Classes</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-37-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-37-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-37-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-37-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-37-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-37-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-37-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-37-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-37-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-37-10">10</a></span>
<span class="normal"><a href="#__codelineno-37-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-37-1" name="__codelineno-37-1"></a><span class="kd">class</span><span class="w"> </span><span class="nx">DerivedObj</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Obj</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-37-2" name="__codelineno-37-2"></a><span class="w"> </span><span class="kr">constructor</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="nx">param2</span><span class="p">,</span><span class="w"> </span><span class="p">...){</span>
<a id="__codelineno-37-3" name="__codelineno-37-3"></a><span class="w"> </span><span class="k">super</span><span class="p">(</span><span class="nx">param1</span><span class="p">);</span><span class="w"> </span><span class="c1">// use superclass constructor</span>
<a id="__codelineno-37-4" name="__codelineno-37-4"></a><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">param2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">param2</span><span class="p">;</span>
<a id="__codelineno-37-5" name="__codelineno-37-5"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-37-6" name="__codelineno-37-6"></a>
<a id="__codelineno-37-7" name="__codelineno-37-7"></a><span class="w"> </span><span class="nx">newFunc</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-37-8" name="__codelineno-37-8"></a><span class="p">}</span>
<a id="__codelineno-37-9" name="__codelineno-37-9"></a>
<a id="__codelineno-37-10" name="__codelineno-37-10"></a><span class="kd">let</span><span class="w"> </span><span class="nx">dobj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">DerivedObj</span><span class="p">();</span>
<a id="__codelineno-37-11" name="__codelineno-37-11"></a><span class="nx">dobj</span><span class="p">.</span><span class="nx">newFunc</span><span class="p">();</span>
</code></pre></div></td></tr></table></div>
<h2 id="deconstruction">Deconstruction</h2>
<h3 id="object-deconstruction">Object deconstruction</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-38-1">1</a></span>
<span class="normal"><a href="#__codelineno-38-2">2</a></span>
<span class="normal"><a href="#__codelineno-38-3">3</a></span>
<span class="normal"><a href="#__codelineno-38-4">4</a></span>
<span class="normal"><a href="#__codelineno-38-5">5</a></span>
<span class="normal"><a href="#__codelineno-38-6">6</a></span>
<span class="normal"><a href="#__codelineno-38-7">7</a></span>
<span class="normal"><a href="#__codelineno-38-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-38-1" name="__codelineno-38-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-38-2" name="__codelineno-38-2"></a><span class="w"> </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="p">,</span>
<a id="__codelineno-38-3" name="__codelineno-38-3"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-38-4" name="__codelineno-38-4"></a><span class="p">}</span>
<a id="__codelineno-38-5" name="__codelineno-38-5"></a>
<a id="__codelineno-38-6" name="__codelineno-38-6"></a><span class="kd">let</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">var1</span><span class="p">,</span><span class="w"> </span><span class="nx">var2</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">obj</span><span class="p">;</span><span class="w"> </span><span class="c1">// extract values from object into variables</span>
<a id="__codelineno-38-7" name="__codelineno-38-7"></a><span class="kd">let</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="nx">var1</span><span class="p">,</span><span class="w"> </span><span class="nx">property2</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="nx">var2</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">obj</span><span class="p">;</span><span class="w"> </span><span class="c1">// extract props in variables w/ specified names</span>
<a id="__codelineno-38-8" name="__codelineno-38-8"></a><span class="kd">let</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">property</span><span class="o">:</span><span class="w"> </span><span class="nx">var1</span><span class="p">,</span><span class="w"> </span><span class="nx">var2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">default_value</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">obj</span><span class="p">;</span><span class="w"> </span><span class="c1">// use default values if object has less then expected props</span>
</code></pre></div></td></tr></table></div>
<h3 id="array-deconstruction">Array Deconstruction</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-39-1">1</a></span>
<span class="normal"><a href="#__codelineno-39-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-39-1" name="__codelineno-39-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">array</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="mf">3</span><span class="p">,</span><span class="w"> </span><span class="mf">4</span><span class="p">,</span><span class="w"> </span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="mf">6</span><span class="w"> </span><span class="p">];</span>
<a id="__codelineno-39-2" name="__codelineno-39-2"></a><span class="kd">let</span><span class="w"> </span><span class="p">[</span><span class="nx">first</span><span class="p">,</span><span class="w"> </span><span class="p">,</span><span class="w"> </span><span class="nx">third</span><span class="p">,</span><span class="w"> </span><span class="p">,</span><span class="w"> </span><span class="nx">seventh</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;missing&quot;</span><span class="w"> </span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">array</span><span class="p">;</span><span class="w"> </span><span class="c1">// extract specific values from array</span>
</code></pre></div></td></tr></table></div>
<h2 id="serialization">Serialization</h2>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-40-1">1</a></span>
<span class="normal"><a href="#__codelineno-40-2">2</a></span>
<span class="normal"><a href="#__codelineno-40-3">3</a></span>
<span class="normal"><a href="#__codelineno-40-4">4</a></span>
<span class="normal"><a href="#__codelineno-40-5">5</a></span>
<span class="normal"><a href="#__codelineno-40-6">6</a></span>
<span class="normal"><a href="#__codelineno-40-7">7</a></span>
<span class="normal"><a href="#__codelineno-40-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-40-1" name="__codelineno-40-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">object</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-40-2" name="__codelineno-40-2"></a><span class="w"> </span><span class="c1">// object attributes</span>
<a id="__codelineno-40-3" name="__codelineno-40-3"></a><span class="p">}</span>
<a id="__codelineno-40-4" name="__codelineno-40-4"></a>
<a id="__codelineno-40-5" name="__codelineno-40-5"></a><span class="kd">let</span><span class="w"> </span><span class="nx">json</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">object</span><span class="p">);</span><span class="w"> </span><span class="c1">// serialize object in JSON</span>
<a id="__codelineno-40-6" name="__codelineno-40-6"></a>
<a id="__codelineno-40-7" name="__codelineno-40-7"></a><span class="kd">let</span><span class="w"> </span><span class="nx">json</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* JSON */</span><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-40-8" name="__codelineno-40-8"></a><span class="kd">let</span><span class="w"> </span><span class="nx">object</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">json</span><span class="p">);</span><span class="w"> </span><span class="c1">// deserialize to Object</span>
</code></pre></div></td></tr></table></div>
<h2 id="timing">Timing</h2>
<h3 id="timers">Timers</h3>
<p>Function runs <em>once</em> after an interval of time.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-41-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-41-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-41-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-41-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-41-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-41-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-41-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-41-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-41-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-41-10">10</a></span>
<span class="normal"><a href="#__codelineno-41-11">11</a></span>
<span class="normal"><a href="#__codelineno-41-12">12</a></span>
<span class="normal"><a href="#__codelineno-41-13">13</a></span>
<span class="normal"><a href="#__codelineno-41-14">14</a></span>
<span class="normal"><a href="#__codelineno-41-15">15</a></span>
<span class="normal"><a href="#__codelineno-41-16">16</a></span>
<span class="normal"><a href="#__codelineno-41-17">17</a></span>
<span class="normal"><a href="#__codelineno-41-18">18</a></span>
<span class="normal"><a href="#__codelineno-41-19">19</a></span>
<span class="normal"><a href="#__codelineno-41-20">20</a></span>
<span class="normal"><a href="#__codelineno-41-21">21</a></span>
<span class="normal"><a href="#__codelineno-41-22">22</a></span>
<span class="normal"><a href="#__codelineno-41-23">23</a></span>
<span class="normal"><a href="#__codelineno-41-24">24</a></span>
<span class="normal"><a href="#__codelineno-41-25">25</a></span>
<span class="normal"><a href="#__codelineno-41-26">26</a></span>
<span class="normal"><a href="#__codelineno-41-27">27</a></span>
<span class="normal"><a href="#__codelineno-41-28">28</a></span>
<span class="normal"><a href="#__codelineno-41-29">29</a></span>
<span class="normal"><a href="#__codelineno-41-30">30</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-41-1" name="__codelineno-41-1"></a><span class="c1">// param1, param2, ... are the arguments passed to the function (IE9+)</span>
<a id="__codelineno-41-2" name="__codelineno-41-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">timerId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">func</span><span class="w"> </span><span class="p">[,</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">,</span><span class="w"> </span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="nx">param2</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">]);</span><span class="w"> </span><span class="c1">// wait milliseconds before executing the code (params are read at execution time)</span>
<a id="__codelineno-41-3" name="__codelineno-41-3"></a>
<a id="__codelineno-41-4" name="__codelineno-41-4"></a><span class="c1">// works in IE9</span>
<a id="__codelineno-41-5" name="__codelineno-41-5"></a><span class="kd">let</span><span class="w"> </span><span class="nx">timerId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<a id="__codelineno-41-6" name="__codelineno-41-6"></a><span class="w"> </span><span class="nx">func</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="nx">param2</span><span class="p">);</span>
<a id="__codelineno-41-7" name="__codelineno-41-7"></a><span class="p">},</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">);</span>
<a id="__codelineno-41-8" name="__codelineno-41-8"></a>
<a id="__codelineno-41-9" name="__codelineno-41-9"></a><span class="c1">// Anonymous functions with arguments</span>
<a id="__codelineno-41-10" name="__codelineno-41-10"></a><span class="kd">let</span><span class="w"> </span><span class="nx">timerId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="p">...){</span>
<a id="__codelineno-41-11" name="__codelineno-41-11"></a><span class="w"> </span><span class="c1">// code here</span>
<a id="__codelineno-41-12" name="__codelineno-41-12"></a><span class="p">},</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">,</span><span class="w"> </span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="p">...);</span>
<a id="__codelineno-41-13" name="__codelineno-41-13"></a>
<a id="__codelineno-41-14" name="__codelineno-41-14"></a><span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timerId</span><span class="p">)</span><span class="w"> </span><span class="c1">// cancel execution</span>
<a id="__codelineno-41-15" name="__codelineno-41-15"></a>
<a id="__codelineno-41-16" name="__codelineno-41-16"></a><span class="c1">// example of multiple consecutive schedules</span>
<a id="__codelineno-41-17" name="__codelineno-41-17"></a><span class="kd">let</span><span class="w"> </span><span class="nx">list</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="mf">1</span><span class="w"> </span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="mf">3</span><span class="p">,</span><span class="w"> </span><span class="mf">4</span><span class="p">,</span><span class="w"> </span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="mf">6</span><span class="p">,</span><span class="w"> </span><span class="mf">7</span><span class="p">,</span><span class="w"> </span><span class="mf">8</span><span class="p">,</span><span class="w"> </span><span class="mf">9</span><span class="p">,</span><span class="w"> </span><span class="mf">10</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;A&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;B&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;C&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;D&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;E&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;F&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;G&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;H&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;I&quot;</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;J&quot;</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">2</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">3</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">4</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">6</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">7</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">8</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">9</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">10</span><span class="p">]</span>
<a id="__codelineno-41-18" name="__codelineno-41-18"></a><span class="kd">function</span><span class="w"> </span><span class="nx">useTimeout</span><span class="p">(</span><span class="nx">pos</span><span class="o">=</span><span class="mf">0</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-41-19" name="__codelineno-41-19"></a>
<a id="__codelineno-41-20" name="__codelineno-41-20"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<a id="__codelineno-41-21" name="__codelineno-41-21"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">list</span><span class="p">[</span><span class="nx">pos</span><span class="p">]);</span>
<a id="__codelineno-41-22" name="__codelineno-41-22"></a><span class="w"> </span><span class="nx">pos</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="mf">1</span><span class="p">;</span><span class="w"> </span><span class="c1">// update value for next call</span>
<a id="__codelineno-41-23" name="__codelineno-41-23"></a>
<a id="__codelineno-41-24" name="__codelineno-41-24"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">pos</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// recursion exit condition</span>
<a id="__codelineno-41-25" name="__codelineno-41-25"></a><span class="w"> </span><span class="nx">useTimeout</span><span class="p">(</span><span class="nx">pos</span><span class="p">);</span><span class="w"> </span><span class="c1">// schedule next call with new value</span>
<a id="__codelineno-41-26" name="__codelineno-41-26"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-41-27" name="__codelineno-41-27"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">1</span><span class="nx">_000</span><span class="p">,</span><span class="w"> </span><span class="nx">pos</span><span class="p">);</span>
<a id="__codelineno-41-28" name="__codelineno-41-28"></a><span class="p">}</span>
<a id="__codelineno-41-29" name="__codelineno-41-29"></a>
<a id="__codelineno-41-30" name="__codelineno-41-30"></a><span class="nx">useTimeout</span><span class="p">();</span>
</code></pre></div></td></tr></table></div>
<h3 id="let-vs-var-with-settimeout"><code>let</code> vs <code>var</code> with <code>setTimeout</code></h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-42-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-42-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-42-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-42-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-42-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-42-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-42-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-42-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-42-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-42-10">10</a></span>
<span class="normal"><a href="#__codelineno-42-11">11</a></span>
<span class="normal"><a href="#__codelineno-42-12">12</a></span>
<span class="normal"><a href="#__codelineno-42-13">13</a></span>
<span class="normal"><a href="#__codelineno-42-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-42-1" name="__codelineno-42-1"></a><span class="c1">// let instantiates a new variable for each iteration</span>
<a id="__codelineno-42-2" name="__codelineno-42-2"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">3</span><span class="p">;</span><span class="w"> </span><span class="o">++</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-42-3" name="__codelineno-42-3"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-42-4" name="__codelineno-42-4"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
<a id="__codelineno-42-5" name="__codelineno-42-5"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">100</span><span class="p">);</span>
<a id="__codelineno-42-6" name="__codelineno-42-6"></a><span class="p">}</span>
<a id="__codelineno-42-7" name="__codelineno-42-7"></a><span class="c1">// output: 0, 1, 2</span>
<a id="__codelineno-42-8" name="__codelineno-42-8"></a>
<a id="__codelineno-42-9" name="__codelineno-42-9"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="mf">3</span><span class="p">;</span><span class="w"> </span><span class="o">++</span><span class="nx">i</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-42-10" name="__codelineno-42-10"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-42-11" name="__codelineno-42-11"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
<a id="__codelineno-42-12" name="__codelineno-42-12"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">100</span><span class="p">);</span>
<a id="__codelineno-42-13" name="__codelineno-42-13"></a><span class="p">}</span>
<a id="__codelineno-42-14" name="__codelineno-42-14"></a><span class="c1">// output: 3, 3, 3</span>
</code></pre></div></td></tr></table></div>
<h3 id="preserving-the-context">Preserving the context</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-43-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-43-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-43-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-43-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-43-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-43-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-43-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-43-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-43-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-43-10">10</a></span>
<span class="normal"><a href="#__codelineno-43-11">11</a></span>
<span class="normal"><a href="#__codelineno-43-12">12</a></span>
<span class="normal"><a href="#__codelineno-43-13">13</a></span>
<span class="normal"><a href="#__codelineno-43-14">14</a></span>
<span class="normal"><a href="#__codelineno-43-15">15</a></span>
<span class="normal"><a href="#__codelineno-43-16">16</a></span>
<span class="normal"><a href="#__codelineno-43-17">17</a></span>
<span class="normal"><a href="#__codelineno-43-18">18</a></span>
<span class="normal"><a href="#__codelineno-43-19">19</a></span>
<span class="normal"><a href="#__codelineno-43-20">20</a></span>
<span class="normal"><a href="#__codelineno-43-21">21</a></span>
<span class="normal"><a href="#__codelineno-43-22">22</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-43-1" name="__codelineno-43-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-43-2" name="__codelineno-43-2"></a><span class="w"> </span><span class="nx">prop</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="p">,</span>
<a id="__codelineno-43-3" name="__codelineno-43-3"></a>
<a id="__codelineno-43-4" name="__codelineno-43-4"></a><span class="w"> </span><span class="nx">method1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* statement */</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-43-5" name="__codelineno-43-5"></a>
<a id="__codelineno-43-6" name="__codelineno-43-6"></a><span class="w"> </span><span class="nx">method2</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-43-7" name="__codelineno-43-7"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">self</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="w"> </span><span class="c1">// memorize context inside method (otherwise callback will not know it)</span>
<a id="__codelineno-43-8" name="__codelineno-43-8"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* code here (uses self) */</span><span class="w"> </span><span class="p">})</span>
<a id="__codelineno-43-9" name="__codelineno-43-9"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-43-10" name="__codelineno-43-10"></a><span class="p">}</span>
<a id="__codelineno-43-11" name="__codelineno-43-11"></a>
<a id="__codelineno-43-12" name="__codelineno-43-12"></a>
<a id="__codelineno-43-13" name="__codelineno-43-13"></a><span class="c1">// better</span>
<a id="__codelineno-43-14" name="__codelineno-43-14"></a><span class="kd">let</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-43-15" name="__codelineno-43-15"></a><span class="w"> </span><span class="nx">prop</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="p">,</span>
<a id="__codelineno-43-16" name="__codelineno-43-16"></a>
<a id="__codelineno-43-17" name="__codelineno-43-17"></a><span class="w"> </span><span class="nx">method1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* statement */</span><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-43-18" name="__codelineno-43-18"></a>
<a id="__codelineno-43-19" name="__codelineno-43-19"></a><span class="w"> </span><span class="nx">method2</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-43-20" name="__codelineno-43-20"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="cm">/* code here (uses this) */</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="c1">// arrow func does not create new scope, this context preserved</span>
<a id="__codelineno-43-21" name="__codelineno-43-21"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-43-22" name="__codelineno-43-22"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="intervals">Intervals</h3>
<p>Function runs regularly with a specified interval. JavaScript is <strong>Single Threaded</strong>.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-44-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-44-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-44-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-44-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-44-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-44-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-44-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-44-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-44-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-44-10">10</a></span>
<span class="normal"><a href="#__codelineno-44-11">11</a></span>
<span class="normal"><a href="#__codelineno-44-12">12</a></span>
<span class="normal"><a href="#__codelineno-44-13">13</a></span>
<span class="normal"><a href="#__codelineno-44-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-44-1" name="__codelineno-44-1"></a><span class="c1">// param1, param2, ... are the arguments passed to the function (IE9+)</span>
<a id="__codelineno-44-2" name="__codelineno-44-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">timerId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setInterval</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span><span class="w"> </span><span class="nx">milliseconds</span><span class="w"> </span><span class="p">[,</span><span class="w"> </span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="nx">param2</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">]);</span><span class="w"> </span><span class="c1">// (params are read at execution time)</span>
<a id="__codelineno-44-3" name="__codelineno-44-3"></a>
<a id="__codelineno-44-4" name="__codelineno-44-4"></a><span class="c1">// works in IE9</span>
<a id="__codelineno-44-5" name="__codelineno-44-5"></a><span class="kd">let</span><span class="w"> </span><span class="nx">timerId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<a id="__codelineno-44-6" name="__codelineno-44-6"></a><span class="w"> </span><span class="nx">func</span><span class="p">(</span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="nx">param2</span><span class="p">);</span>
<a id="__codelineno-44-7" name="__codelineno-44-7"></a><span class="p">},</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">);</span>
<a id="__codelineno-44-8" name="__codelineno-44-8"></a>
<a id="__codelineno-44-9" name="__codelineno-44-9"></a><span class="c1">// Anonymous functions with arguments</span>
<a id="__codelineno-44-10" name="__codelineno-44-10"></a><span class="kd">let</span><span class="w"> </span><span class="nx">timerId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">arg1</span><span class="p">,</span><span class="w"> </span><span class="p">...){</span>
<a id="__codelineno-44-11" name="__codelineno-44-11"></a><span class="w"> </span><span class="c1">// code here</span>
<a id="__codelineno-44-12" name="__codelineno-44-12"></a><span class="p">},</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">,</span><span class="w"> </span><span class="nx">param1</span><span class="p">,</span><span class="w"> </span><span class="p">...);</span>
<a id="__codelineno-44-13" name="__codelineno-44-13"></a>
<a id="__codelineno-44-14" name="__codelineno-44-14"></a><span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timerId</span><span class="p">);</span><span class="w"> </span><span class="c1">// cancel execution</span>
</code></pre></div></td></tr></table></div>
<h2 id="datetime">DateTime</h2>
<p>A date consists of a year, a month, a day, an hour, a minute, a second, and milliseconds.</p>
<p>There are generally 4 types of JavaScript date input formats:</p>
<ul>
<li><strong>ISO Date</strong>: <code>"2015-03-25"</code></li>
<li>Short Date: <code>"03/25/2015"</code></li>
<li>Long Date: <code>"Mar 25 2015"</code> or <code>"25 Mar 2015"</code></li>
<li>Full Date: <code>"Wednesday March 25 2015"</code></li>
</ul>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-45-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-45-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-45-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-45-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-45-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-45-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-45-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-45-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-45-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-45-10">10</a></span>
<span class="normal"><a href="#__codelineno-45-11">11</a></span>
<span class="normal"><a href="#__codelineno-45-12">12</a></span>
<span class="normal"><a href="#__codelineno-45-13">13</a></span>
<span class="normal"><a href="#__codelineno-45-14">14</a></span>
<span class="normal"><a href="#__codelineno-45-15">15</a></span>
<span class="normal"><a href="#__codelineno-45-16">16</a></span>
<span class="normal"><a href="#__codelineno-45-17">17</a></span>
<span class="normal"><a href="#__codelineno-45-18">18</a></span>
<span class="normal"><a href="#__codelineno-45-19">19</a></span>
<span class="normal"><a href="#__codelineno-45-20">20</a></span>
<span class="normal"><a href="#__codelineno-45-21">21</a></span>
<span class="normal"><a href="#__codelineno-45-22">22</a></span>
<span class="normal"><a href="#__codelineno-45-23">23</a></span>
<span class="normal"><a href="#__codelineno-45-24">24</a></span>
<span class="normal"><a href="#__codelineno-45-25">25</a></span>
<span class="normal"><a href="#__codelineno-45-26">26</a></span>
<span class="normal"><a href="#__codelineno-45-27">27</a></span>
<span class="normal"><a href="#__codelineno-45-28">28</a></span>
<span class="normal"><a href="#__codelineno-45-29">29</a></span>
<span class="normal"><a href="#__codelineno-45-30">30</a></span>
<span class="normal"><a href="#__codelineno-45-31">31</a></span>
<span class="normal"><a href="#__codelineno-45-32">32</a></span>
<span class="normal"><a href="#__codelineno-45-33">33</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-45-1" name="__codelineno-45-1"></a><span class="c1">// constructors</span>
<a id="__codelineno-45-2" name="__codelineno-45-2"></a><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">();</span>
<a id="__codelineno-45-3" name="__codelineno-45-3"></a><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">milliseconds</span><span class="p">);</span>
<a id="__codelineno-45-4" name="__codelineno-45-4"></a><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">dateString</span><span class="p">);</span>
<a id="__codelineno-45-5" name="__codelineno-45-5"></a><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="nx">day</span><span class="p">,</span><span class="w"> </span><span class="nx">hours</span><span class="p">,</span><span class="w"> </span><span class="nx">minutes</span><span class="p">,</span><span class="w"> </span><span class="nx">seconds</span><span class="p">,</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">);</span>
<a id="__codelineno-45-6" name="__codelineno-45-6"></a>
<a id="__codelineno-45-7" name="__codelineno-45-7"></a><span class="c1">// accepts parameters similar to the Date constructor, but treats them as UTC. It returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.</span>
<a id="__codelineno-45-8" name="__codelineno-45-8"></a><span class="nb">Date</span><span class="p">.</span><span class="nx">UTC</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="nx">day</span><span class="p">,</span><span class="w"> </span><span class="nx">hours</span><span class="p">,</span><span class="w"> </span><span class="nx">minutes</span><span class="p">,</span><span class="w"> </span><span class="nx">seconds</span><span class="p">,</span><span class="w"> </span><span class="nx">milliseconds</span><span class="p">);</span>
<a id="__codelineno-45-9" name="__codelineno-45-9"></a>
<a id="__codelineno-45-10" name="__codelineno-45-10"></a><span class="c1">//static methods</span>
<a id="__codelineno-45-11" name="__codelineno-45-11"></a><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">();</span><span class="w"> </span><span class="c1">// returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.</span>
<a id="__codelineno-45-12" name="__codelineno-45-12"></a>
<a id="__codelineno-45-13" name="__codelineno-45-13"></a><span class="c1">// methods</span>
<a id="__codelineno-45-14" name="__codelineno-45-14"></a><span class="kd">let</span><span class="w"> </span><span class="nx">date</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">();</span>
<a id="__codelineno-45-15" name="__codelineno-45-15"></a><span class="nx">date</span><span class="p">.</span><span class="nx">toSting</span><span class="p">();</span><span class="w"> </span><span class="c1">// returns a string representing the specified Date object</span>
<a id="__codelineno-45-16" name="__codelineno-45-16"></a><span class="nx">date</span><span class="p">.</span><span class="nx">toUTCString</span><span class="p">();</span>
<a id="__codelineno-45-17" name="__codelineno-45-17"></a><span class="nx">date</span><span class="p">.</span><span class="nx">toDateString</span><span class="p">();</span>
<a id="__codelineno-45-18" name="__codelineno-45-18"></a><span class="nx">date</span><span class="p">.</span><span class="nx">toTimeString</span><span class="p">();</span><span class="w"> </span><span class="c1">// method returns the time portion of a Date object in human readable form in American English.</span>
<a id="__codelineno-45-19" name="__codelineno-45-19"></a>
<a id="__codelineno-45-20" name="__codelineno-45-20"></a>
<a id="__codelineno-45-21" name="__codelineno-45-21"></a><span class="c1">// get date</span>
<a id="__codelineno-45-22" name="__codelineno-45-22"></a>
<a id="__codelineno-45-23" name="__codelineno-45-23"></a><span class="nx">dare</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span>
<a id="__codelineno-45-24" name="__codelineno-45-24"></a><span class="nx">date</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">();</span>
<a id="__codelineno-45-25" name="__codelineno-45-25"></a><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span>
<a id="__codelineno-45-26" name="__codelineno-45-26"></a>
<a id="__codelineno-45-27" name="__codelineno-45-27"></a><span class="c1">// set date</span>
<a id="__codelineno-45-28" name="__codelineno-45-28"></a><span class="nx">date</span><span class="p">.</span><span class="nx">setFullYear</span><span class="p">(</span><span class="mf">2020</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">14</span><span class="p">);</span>
<a id="__codelineno-45-29" name="__codelineno-45-29"></a><span class="nx">date</span><span class="p">.</span><span class="nx">setDate</span><span class="p">(</span><span class="nx">date</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">50</span><span class="p">);</span>
<a id="__codelineno-45-30" name="__codelineno-45-30"></a>
<a id="__codelineno-45-31" name="__codelineno-45-31"></a><span class="c1">// parse valid dates</span>
<a id="__codelineno-45-32" name="__codelineno-45-32"></a><span class="kd">let</span><span class="w"> </span><span class="nx">msec</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">Date</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="s2">&quot;March 21, 2012&quot;</span><span class="p">);</span>
<a id="__codelineno-45-33" name="__codelineno-45-33"></a><span class="kd">let</span><span class="w"> </span><span class="nx">date</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">msec</span><span class="p">);</span>
</code></pre></div></td></tr></table></div>
<h3 id="comparing-dates">Comparing Dates</h3>
<p>Comparison operators work also on dates</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-46-1">1</a></span>
<span class="normal"><a href="#__codelineno-46-2">2</a></span>
<span class="normal"><a href="#__codelineno-46-3">3</a></span>
<span class="normal"><a href="#__codelineno-46-4">4</a></span>
<span class="normal"><a href="#__codelineno-46-5">5</a></span>
<span class="normal"><a href="#__codelineno-46-6">6</a></span>
<span class="normal"><a href="#__codelineno-46-7">7</a></span>
<span class="normal"><a href="#__codelineno-46-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-46-1" name="__codelineno-46-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">date1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">();</span>
<a id="__codelineno-46-2" name="__codelineno-46-2"></a><span class="kd">let</span><span class="w"> </span><span class="nx">date2</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="s2">&quot;May 24, 2017 10:50:00&quot;</span><span class="p">);</span>
<a id="__codelineno-46-3" name="__codelineno-46-3"></a>
<a id="__codelineno-46-4" name="__codelineno-46-4"></a><span class="k">if</span><span class="p">(</span><span class="nx">date1</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nx">date2</span><span class="p">){</span>
<a id="__codelineno-46-5" name="__codelineno-46-5"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;break time&#39;</span><span class="p">);</span>
<a id="__codelineno-46-6" name="__codelineno-46-6"></a><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-46-7" name="__codelineno-46-7"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;stay in class&#39;</span><span class="p">);</span>
<a id="__codelineno-46-8" name="__codelineno-46-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h2 id="exports"><a href="https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export">Exports</a></h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Firefox CORS not HTTP</a></p>
<blockquote>
<p><strong>Note</strong>: Firefox 68 and later define the origin of a page opened using a <code>file:///</code> URI as unique. Therefore, other resources in the same directory or its subdirectories no longer satisfy the CORS same-origin rule. This new behavior is enabled by default using the <code>privacy.file_unique_origin</code> preference.</p>
</blockquote>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JSON</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-47-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-47-1" name="__codelineno-47-1"></a><span class="nt">&quot;privacy.file_unique_origin&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;false&quot;</span>
</code></pre></div></td></tr></table></div>
<p>In <code>page.html</code></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">HTML</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-48-1">1</a></span>
<span class="normal"><a href="#__codelineno-48-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-48-1" name="__codelineno-48-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;scripts/module.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-48-2" name="__codelineno-48-2"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;scripts/script.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>In <code>module.js</code>:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-49-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-49-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-49-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-49-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-49-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-49-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-49-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-49-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-49-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-49-10">10</a></span>
<span class="normal"><a href="#__codelineno-49-11">11</a></span>
<span class="normal"><a href="#__codelineno-49-12">12</a></span>
<span class="normal"><a href="#__codelineno-49-13">13</a></span>
<span class="normal"><a href="#__codelineno-49-14">14</a></span>
<span class="normal"><a href="#__codelineno-49-15">15</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-49-1" name="__codelineno-49-1"></a><span class="c1">// exporting individual fractures</span>
<a id="__codelineno-49-2" name="__codelineno-49-2"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{}</span><span class="w"> </span><span class="c1">// one per module</span>
<a id="__codelineno-49-3" name="__codelineno-49-3"></a><span class="k">export</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">expression</span><span class="p">;</span><span class="w"> </span><span class="c1">// zero or more per module</span>
<a id="__codelineno-49-4" name="__codelineno-49-4"></a>
<a id="__codelineno-49-5" name="__codelineno-49-5"></a><span class="c1">// Export list</span>
<a id="__codelineno-49-6" name="__codelineno-49-6"></a><span class="k">export</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">name1</span><span class="p">,</span><span class="w"> </span><span class="nx">name2</span><span class="p">,</span><span class="w"> </span><span class="err">…</span><span class="p">,</span><span class="w"> </span><span class="nx">nameN</span><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-49-7" name="__codelineno-49-7"></a>
<a id="__codelineno-49-8" name="__codelineno-49-8"></a><span class="c1">// Renaming exports</span>
<a id="__codelineno-49-9" name="__codelineno-49-9"></a><span class="k">export</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">variable1</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">name1</span><span class="p">,</span><span class="w"> </span><span class="nx">variable2</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">name2</span><span class="p">,</span><span class="w"> </span><span class="err">…</span><span class="p">,</span><span class="w"> </span><span class="nx">nameN</span><span class="w"> </span><span class="p">};</span>
<a id="__codelineno-49-10" name="__codelineno-49-10"></a>
<a id="__codelineno-49-11" name="__codelineno-49-11"></a><span class="c1">// Exporting destructured assignments with renaming</span>
<a id="__codelineno-49-12" name="__codelineno-49-12"></a><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">name1</span><span class="p">,</span><span class="w"> </span><span class="nx">name2</span><span class="o">:</span><span class="w"> </span><span class="nx">bar</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">o</span><span class="p">;</span>
<a id="__codelineno-49-13" name="__codelineno-49-13"></a>
<a id="__codelineno-49-14" name="__codelineno-49-14"></a><span class="w"> </span><span class="c1">// re-export</span>
<a id="__codelineno-49-15" name="__codelineno-49-15"></a><span class="k">export</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;other_script.js&quot;</span><span class="w"> </span>
</code></pre></div></td></tr></table></div>
<p>In <code>script.js</code>:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-50-1">1</a></span>
<span class="normal"><a href="#__codelineno-50-2">2</a></span>
<span class="normal"><a href="#__codelineno-50-3">3</a></span>
<span class="normal"><a href="#__codelineno-50-4">4</a></span>
<span class="normal"><a href="#__codelineno-50-5">5</a></span>
<span class="normal"><a href="#__codelineno-50-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-50-1" name="__codelineno-50-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">default_func_alias</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">alias</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./module.js&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// import default and set alias</span>
<a id="__codelineno-50-2" name="__codelineno-50-2"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">default_func_alias</span><span class="p">,</span><span class="w"> </span><span class="nx">func</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="nx">alias</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./module.js&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// import default and set alias</span>
<a id="__codelineno-50-3" name="__codelineno-50-3"></a>
<a id="__codelineno-50-4" name="__codelineno-50-4"></a><span class="c1">// use imported functions</span>
<a id="__codelineno-50-5" name="__codelineno-50-5"></a><span class="nx">default_func_alias</span><span class="p">();</span>
<a id="__codelineno-50-6" name="__codelineno-50-6"></a><span class="nx">alias</span><span class="p">();</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JavaScript</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-51-1">1</a></span>
<span class="normal"><a href="#__codelineno-51-2">2</a></span>
<span class="normal"><a href="#__codelineno-51-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-51-1" name="__codelineno-51-1"></a><span class="k">import</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./module.js&quot;</span><span class="p">;</span><span class="w"> </span><span class="c1">// import all</span>
<a id="__codelineno-51-2" name="__codelineno-51-2"></a>
<a id="__codelineno-51-3" name="__codelineno-51-3"></a><span class="nx">module</span><span class="p">.</span><span class="kd">function</span><span class="p">();</span><span class="w"> </span><span class="c1">// use imported content with fully qualified name</span>
</code></pre></div></td></tr></table></div>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../rust/unit-tests.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: Unit Tests">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Unit Tests
</div>
</div>
</a>
<a href="dom.html" class="md-footer__link md-footer__link--next" aria-label="Next: DOM">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
DOM
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
MIT
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://hachyderm.io/@m_lamonaca" target="_blank" rel="noopener me" title="hachyderm.io" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="https://github.com/m-lamonaca" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.instant", "navigation.indexes", "navigation.tracking", "navigation.pruning", "navigation.sections", "navigation.top", "navigation.tabs", "navigation.tabs.sticky", "navigation.footer", "toc.follow", "content.code.copy"], "search": "../../assets/javascripts/workers/search.07f07601.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.56dfad97.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink