CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Functions - JavaScript | MDN</title><link rel="alternate" title="Funktionen" href="https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Functions" hrefLang="de"/><link rel="alternate" title="Funciones" href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Functions" hrefLang="es"/><link rel="alternate" title="Fonctions" href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Functions" hrefLang="fr"/><link rel="alternate" title="関数" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions" hrefLang="ja"/><link rel="alternate" title="함수" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions" hrefLang="ko"/><link rel="alternate" title="Funções" href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Functions" hrefLang="pt"/><link rel="alternate" title="Функции" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions" hrefLang="ru"/><link rel="alternate" title="函数" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions" hrefLang="zh"/><link rel="alternate" title="函式" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Functions" hrefLang="zh-Hant"/><link rel="alternate" title="Functions" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions" hrefLang="en"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it."/><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions"/><meta property="og:title" content="Functions - JavaScript | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="en_US"/><meta property="og:description" content="Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/en-US/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/en-US/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/en-US/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/en-US/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/en-US/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/en-US/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/en-US/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/en-US/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/en-US/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FFunctions" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FFunctions" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">References</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/JavaScript" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/JavaScript/Guide" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Guide</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/JavaScript/Guide/Functions" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Functions</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Web/JavaScript/Guide/Functions" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="JsSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#defining_functions">Defining functions</a></li><li class="document-toc-item "><a class="document-toc-link" href="#calling_functions">Calling functions</a></li><li class="document-toc-item "><a class="document-toc-link" href="#function_scope">Function scope</a></li><li class="document-toc-item "><a class="document-toc-link" href="#scope_and_the_function_stack">Scope and the function stack</a></li><li class="document-toc-item "><a class="document-toc-link" href="#closures">Closures</a></li><li class="document-toc-item "><a class="document-toc-link" href="#using_the_arguments_object">Using the arguments object</a></li><li class="document-toc-item "><a class="document-toc-link" href="#function_parameters">Function parameters</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arrow_functions">Arrow functions</a></li></ul></section></div></div><div class="sidebar-body"> <ol> <li class="section"><a href="/en-US/docs/Web/JavaScript">JavaScript</a></li> <li class="section">Tutorials</li> <li class="toggle"> <details> <summary>Complete beginners</summary> <ol> <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li> <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></li> <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></li> <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></li> </ol> </details> </li> <li class="toggle"> <details open=""> <summary>JavaScript Guide</summary> <ol> <li><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduction</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li> <li><em><a href="/en-US/docs/Web/JavaScript/Guide/Functions" aria-current="page">Functions</a></em></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators">Expressions and operators</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_expressions">Regular expressions</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_objects">Working with objects</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_classes">Using classes</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Typed_arrays">JavaScript typed arrays</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators">Iterators and generators</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></li> <li><a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Intermediate</summary> <ol> <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Client-side JavaScript frameworks</a></li> <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></li> <li><a href="/en-US/docs/Web/JavaScript/Language_overview">Language overview</a></li> <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data structures</a></li> <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li> <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> <li><a href="/en-US/docs/Web/JavaScript/Closures">Closures</a></li> </ol> </details> </li> <li class="toggle"> <details> <summary>Advanced</summary> <ol> <li><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a></li> <li><a href="/en-US/docs/Web/JavaScript/Memory_management">Memory Management</a></li> <li><a href="/en-US/docs/Web/JavaScript/Event_loop">Concurrency model and Event Loop</a></li> </ol> </details> </li> <li class="section"><a href="/en-US/docs/Web/JavaScript/Reference">References</a></li> <li class="toggle"> <details> <summary>Built-in objects</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError">AggregateError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction">AsyncFunction</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator">AsyncGenerator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGeneratorFunction">AsyncGeneratorFunction</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator">AsyncIterator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics">Atomics</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array">BigInt64Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array">BigUint64Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView">DataView</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI">decodeURI()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent">decodeURIComponent()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI">encodeURI()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent">encodeURIComponent()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape">escape()</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError">EvalError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry">FinalizationRegistry</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float16Array">Float16Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array">Float32Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array">Float64Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">Generator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction">GeneratorFunction</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array">Int16Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array">Int32Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array">Int8Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError">InternalError</a><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite">isFinite()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator">Iterator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat">parseFloat()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseInt()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError">RangeError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect">Reflect</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">SharedArrayBuffer</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArray</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array">Uint16Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array">Uint32Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array">Uint8Array</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray">Uint8ClampedArray</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape">unescape()</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError">URIError</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef">WeakRef</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a></li></ol> </details> </li> <li class="toggle"> <details> <summary>Expressions & operators</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition (+)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment">Addition assignment (+=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment">Assignment (=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function*">async function* expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">Bitwise AND (&)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">Bitwise AND assignment (&=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT">Bitwise NOT (~)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">Bitwise OR (|)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">Bitwise OR assignment (|=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">Bitwise XOR (^)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">Bitwise XOR assignment (^=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_operator">Comma operator (,)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator">Conditional (ternary) operator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement (--)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division (/)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Division_assignment">Division assignment (/=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Equality">Equality (==)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation (**)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment">Exponentiation assignment (**=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function*">function* expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than (>)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal (>=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Grouping">Grouping operator ( )</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/import.meta">import.meta</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/import">import()</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment (++)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality (!=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift">Left shift (<<)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">Left shift assignment (<<=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than">Less than (<)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal (<=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND">Logical AND (&&)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment">Logical AND assignment (&&=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT">Logical NOT (!)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR (||)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">Logical OR assignment (||=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication (*)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment">Multiplication assignment (*=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/null">null</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment">Nullish coalescing assignment (??=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing">Nullish coalescing operator (??)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence">Operator precedence</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining (?.)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors">Property accessors</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder (%)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Remainder_assignment">Remainder assignment (%=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift">Right shift (>>)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">Right shift assignment (>>=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spread syntax (...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality (===)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality (!==)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction (-)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment">Subtraction assignment (-=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation (-)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus (+)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">Unsigned right shift (>>>)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">Unsigned right shift assignment (>>>=)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void">void operator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></li></ol> </details> </li> <li class="toggle"> <details> <summary>Statements & declarations</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function*">async function*</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">Block statement</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/debugger">debugger</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">Empty statement</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/Expression_statement">Expression statement</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of">for await...of</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">Labeled statement</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/throw">throw</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li></ol> </details> </li> <li class="toggle"> <details> <summary>Functions</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow function expressions</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">The arguments object</a></li></ol> </details> </li> <li class="toggle"> <details> <summary>Classes</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties">Private properties</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks">Static initialization blocks</a></li></ol> </details> </li> <li class="toggle"> <details> <summary>Regular expressions</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Backreference">Backreference: \1, \2</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Capturing_group">Capturing group: (...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_class_escape">Character class escape: \d, \D, \w, \W, \s, \S</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_class">Character class: [...], [^...]</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape">Character escape: \n, \u{...}</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Disjunction">Disjunction: |</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Input_boundary_assertion">Input boundary assertion: ^, $</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character">Literal character: a, b</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookahead_assertion">Lookahead assertion: (?=...), (?!...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion">Lookbehind assertion: (?<=...), (?<!...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Modifier">Modifier: (?ims-ims:...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_backreference">Named backreference: \k<name></a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group">Named capturing group: (?<name>...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Non-capturing_group">Non-capturing group: (?:...)</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Quantifier">Quantifier: *, +, ?, {n}, {n,}, {n,m}</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape">Unicode character class escape: \p{...}, \P{...}</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Wildcard">Wildcard: .</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Word_boundary_assertion">Word boundary assertion: \b, \B</a></li></ol> </details> </li> <li class="toggle"> <details> <summary>Errors</summary> <ol><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors">Overview</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Promise_any_all_rejected">AggregateError: No Promise in Promise.any was resolved</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Property_access_denied">Error: Permission denied to access property "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion">InternalError: too much recursion</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point">RangeError: argument is not a valid code point</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_division_by_zero">RangeError: BigInt division by zero</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_negative_exponent">RangeError: BigInt negative exponent</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Form_must_be_one_of">RangeError: form must be one of 'NFC', 'NFD', 'NFKC', or 'NFKD'</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length">RangeError: invalid array length</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_date">RangeError: invalid date</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Precision_range">RangeError: precision is out of range</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_radix">RangeError: radix must be an integer</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large">RangeError: repeat count must be less than infinity</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count">RangeError: repeat count must be non-negative</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_be_converted_to_BigInt_because_it_isnt_an_integer">RangeError: x can't be converted to BigInt because it isn't an integer</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Undeclared_var">ReferenceError: assignment to undeclared variable "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init">ReferenceError: can't access lexical declaration 'X' before initialization</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage">ReferenceError: deprecated caller or arguments usage</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Super_not_called">ReferenceError: must call super constructor before using 'this' in derived class constructor</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Super_called_twice">ReferenceError: super() called twice in derived class constructor</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_strict_arguments_eval">SyntaxError: 'arguments'/'eval' can't be defined or assigned to in strict mode code</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal">SyntaxError: "0"-prefixed octal literals are deprecated</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Strict_non_simple_params">SyntaxError: "use strict" not allowed in function with non-simple parameters</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Reserved_identifier">SyntaxError: "x" is a reserved identifier</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_backslash_at_end_of_pattern">SyntaxError: \ at end of pattern</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer">SyntaxError: a declaration in the head of a for-of loop can't have an initializer</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode">SyntaxError: applying the 'delete' operator to an unqualified name is deprecated</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Arguments_not_allowed">SyntaxError: arguments is not valid in fields</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_await">SyntaxError: await is only valid in async functions, async generators and modules</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/await_yield_in_parameter">SyntaxError: await/yield expression can't be used in parameter</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_use_nullish_coalescing_unparenthesized">SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_character_class_escape_in_class_range">SyntaxError: character class escape cannot be used in class range in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_continue">SyntaxError: continue must be inside loop</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_duplicate_capture_group_name">SyntaxError: duplicate capture group name in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Duplicate_parameter">SyntaxError: duplicate formal argument x</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement">SyntaxError: function statement requires a name</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Function_label">SyntaxError: functions cannot be labelled</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Either_be_both_static_or_non-static">SyntaxError: getter and setter for private name #x should either be both static or non-static</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Getter_no_arguments">SyntaxError: getter functions must have no arguments</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Identifier_after_number">SyntaxError: identifier starts immediately after numeric literal</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Illegal_character">SyntaxError: illegal character</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/import_decl_module_top_level">SyntaxError: import declarations may only appear at top level of a module</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_incomplete_quantifier">SyntaxError: incomplete quantifier in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side">SyntaxError: invalid assignment left-hand side</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_BigInt_syntax">SyntaxError: invalid BigInt syntax</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_capture_group_name">SyntaxError: invalid capture group name in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_char_in_class">SyntaxError: invalid character in class in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_class_set_operation">SyntaxError: invalid class set operation in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_decimal_escape">SyntaxError: invalid decimal escape in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_identity_escape">SyntaxError: invalid identity escape in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_named_capture_reference">SyntaxError: invalid named capture reference in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_property_name">SyntaxError: invalid property name in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_range_in_character_class">SyntaxError: invalid range in character class</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_group">SyntaxError: invalid regexp group</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag">SyntaxError: invalid regular expression flag "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_unicode_escape">SyntaxError: invalid unicode escape in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse">SyntaxError: JSON.parse: bad parsing</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Label_not_found">SyntaxError: label not found</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id">SyntaxError: missing : after property id</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition">SyntaxError: missing ) after condition</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list">SyntaxError: missing ] after element list</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body">SyntaxError: missing } after function body</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list">SyntaxError: missing } after property list</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const">SyntaxError: missing = in const declaration</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter">SyntaxError: missing formal parameter</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator">SyntaxError: missing name after . operator</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/No_variable_name">SyntaxError: missing variable name</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_negated_char_class_with_strings">SyntaxError: negated character class with strings in regular expression</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_new_optional">SyntaxError: new keyword cannot be used with an optional chain</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_nothing_to_repeat">SyntaxError: nothing to repeat</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_numbers_out_of_order_in_quantifier">SyntaxError: numbers out of order in {} quantifier.</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_escape_sequence">SyntaxError: octal escape sequences can't be used in untagged template literals or in strict mode code</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Parameter_after_rest_parameter">SyntaxError: parameter after rest parameter</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete_private_fields">SyntaxError: private fields can't be deleted</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Duplicate_proto">SyntaxError: property name __proto__ appears more than once in object literal</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Regex_raw_bracket">SyntaxError: raw bracket is not allowed in regular expression with unicode flag</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Undeclared_private_field_or_method">SyntaxError: reference to undeclared private field or method #x</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Rest_with_default">SyntaxError: rest parameter may not have a default</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return">SyntaxError: return not in function</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Setter_one_argument">SyntaxError: setter functions must have one argument</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/String_literal_EOL">SyntaxError: string literal contains an unescaped line break</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_super_call">SyntaxError: super() is only valid in derived class constructors</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_optional_template">SyntaxError: tagged template cannot be used with optional chain</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Hash_outside_class">SyntaxError: Unexpected '#' used outside of class body</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_break">SyntaxError: unlabeled break must be inside loop or switch</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unparenthesized_unary_expr_lhs_exponentiation">SyntaxError: unparenthesized unary expression can't appear on the left-hand side of '**'</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_super_prop">SyntaxError: use of super property/member accesses only valid within methods or eval code within methods</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma">SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable">TypeError: 'x' is not iterable</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_constructor">TypeError: "x" is not a constructor</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/No_non-null_object">TypeError: "x" is not a non-null object</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Read-only">TypeError: "x" is read-only</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_not_serializable">TypeError: BigInt value can't be serialized in JSON</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Builtin_ctor_no_new">TypeError: calling a builtin X constructor without new is forbidden</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Get_set_missing_private">TypeError: can't access/set private field or method: object is not the right class</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property">TypeError: can't assign to property "x" on "y": not an object</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_convert_BigInt_to_number">TypeError: can't convert BigInt to number</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_convert_x_to_BigInt">TypeError: can't convert x to BigInt</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible">TypeError: can't define property "x": "obj" is not extensible</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element">TypeError: can't delete non-configurable array element</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property">TypeError: can't redefine non-configurable property "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_set_prototype">TypeError: can't set prototype of this object</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_prototype">TypeError: can't set prototype: it would cause a prototype chain cycle</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/in_operator_no_object">TypeError: cannot use 'in' operator to search for 'x' in 'y'</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Class_ctor_no_new">TypeError: class constructors must be invoked with 'new'</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value">TypeError: cyclic object value</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_derived_return">TypeError: derived class constructor returned invalid value x</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Private_setter_only">TypeError: getting private setter-only property</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Private_double_initialization">TypeError: Initializing an object twice is an error with private fields/methods</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand">TypeError: invalid 'instanceof' operand 'x'</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Array_sort_argument">TypeError: invalid Array.prototype.sort argument</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment">TypeError: invalid assignment to const "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Constructor_cant_be_used_directly">TypeError: Iterator/AsyncIterator constructor can't be used directly</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Requires_global_RegExp">TypeError: matchAll/replaceAll must be called with a global RegExp</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/More_arguments_needed">TypeError: More arguments needed</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/No_properties">TypeError: null/undefined has no properties</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value">TypeError: Reduce of empty array with no initial value</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only">TypeError: setting getter-only property "x"</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Key_not_weakly_held">TypeError: WeakSet key/WeakMap value 'x' must be an object or an unregistered symbol</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type">TypeError: X.prototype.y called on incompatible type</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_URI">URIError: malformed URI sequence</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Already_has_pragma">Warning: -file- is being assigned a //# sourceMappingURL, but already has one</a></li><li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return">Warning: unreachable code after return statement</a></li></ol> </details> </li> <li class="toggle"> <details> <summary>Misc</summary> <ol> <li><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Trailing_commas">Trailing commas</a></li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> </ol> </details> </li> </ol> </div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#defining_functions">Defining functions</a></li><li class="document-toc-item "><a class="document-toc-link" href="#calling_functions">Calling functions</a></li><li class="document-toc-item "><a class="document-toc-link" href="#function_scope">Function scope</a></li><li class="document-toc-item "><a class="document-toc-link" href="#scope_and_the_function_stack">Scope and the function stack</a></li><li class="document-toc-item "><a class="document-toc-link" href="#closures">Closures</a></li><li class="document-toc-item "><a class="document-toc-link" href="#using_the_arguments_object">Using the arguments object</a></li><li class="document-toc-item "><a class="document-toc-link" href="#function_parameters">Function parameters</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arrow_functions">Arrow functions</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="en-US"><header><h1>Functions</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"><span class="button-wrap"> Previous </span></a></li> <li><a class="button secondary" href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators"><span class="button-wrap"> Next </span></a></li> </ul> <p>Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.</p> <p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a> to get to know the details.</p></div><section aria-labelledby="defining_functions"><h2 id="defining_functions"><a href="#defining_functions">Defining functions</a></h2><div class="section-content"></div></section><section aria-labelledby="function_declarations"><h3 id="function_declarations"><a href="#function_declarations">Function declarations</a></h3><div class="section-content"><p>A <strong>function definition</strong> (also called a <strong>function declaration</strong>, or <strong>function statement</strong>) consists of the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code></a> keyword, followed by:</p> <ul> <li>The name of the function.</li> <li>A list of parameters to the function, enclosed in parentheses and separated by commas.</li> <li>The JavaScript statements that define the function, enclosed in curly braces, <code>{ /* … */ }</code>.</li> </ul> <p>For example, the following code defines a function named <code>square</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function square(number) { return number * number; } </code></pre></div> <p>The function <code>square</code> takes one parameter, called <code>number</code>. The function consists of one statement that says to return the parameter of the function (that is, <code>number</code>) multiplied by itself. The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> statement specifies the value returned by the function, which is <code>number * number</code>.</p> <p>Parameters are essentially passed to functions <strong>by value</strong> — so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, <strong>the change is not reflected globally or in the code which called that function</strong>.</p> <p>When you pass an object as a parameter, if the function changes the object's properties, that change is visible outside the function, as shown in the following example:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function myFunc(theObject) { theObject.make = "Toyota"; } const myCar = { make: "Honda", model: "Accord", year: 1998, }; console.log(myCar.make); // "Honda" myFunc(myCar); console.log(myCar.make); // "Toyota" </code></pre></div> <p>When you pass an array as a parameter, if the function changes any of the array's values, that change is visible outside the function, as shown in the following example:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function myFunc(theArr) { theArr[0] = 30; } const arr = [45]; console.log(arr[0]); // 45 myFunc(arr); console.log(arr[0]); // 30 </code></pre></div></div></section><section aria-labelledby="function_expressions"><h3 id="function_expressions"><a href="#function_expressions">Function expressions</a></h3><div class="section-content"><p>While the function declaration above is syntactically a statement, functions can also be created by a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>.</p> <p>Such a function can be <strong>anonymous</strong>; it does not have to have a name. For example, the function <code>square</code> could have been defined as:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const square = function (number) { return number * number; }; console.log(square(4)); // 16 </code></pre></div> <p>However, a name <em>can</em> be provided with a function expression. Providing a name allows the function to refer to itself, and also makes it easier to identify the function in a debugger's stack traces:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); }; console.log(factorial(3)); // 6 </code></pre></div> <p>Function expressions are convenient when passing a function as an argument to another function. The following example shows a <code>map</code> function that should receive a function as first argument and an array as second argument:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function map(f, a) { const result = new Array(a.length); for (let i = 0; i < a.length; i++) { result[i] = f(a[i]); } return result; } </code></pre></div> <p>In the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function map(f, a) { const result = new Array(a.length); for (let i = 0; i < a.length; i++) { result[i] = f(a[i]); } return result; } const cube = function (x) { return x * x * x; }; const numbers = [0, 1, 2, 5, 10]; console.log(map(cube, numbers)); // [0, 1, 8, 125, 1000] </code></pre></div> <p>In JavaScript, a function can be defined based on a condition. For example, the following function definition defines <code>myFunc</code> only if <code>num</code> equals <code>0</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myFunc; if (num === 0) { myFunc = function (theObject) { theObject.make = "Toyota"; }; } </code></pre></div> <p>In addition to defining functions as described here, you can also use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> constructor to create functions from a string at runtime, much like <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a>.</p> <p>A <strong>method</strong> is a function that is a property of an object. Read more about objects and methods in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_objects">Working with objects</a>.</p></div></section><section aria-labelledby="calling_functions"><h2 id="calling_functions"><a href="#calling_functions">Calling functions</a></h2><div class="section-content"><p><em>Defining</em> a function does not <em>execute</em> it. Defining it names the function and specifies what to do when the function is called.</p> <p><strong>Calling</strong> the function actually performs the specified actions with the indicated parameters. For example, if you define the function <code>square</code>, you could call it as follows:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>square(5); </code></pre></div> <p>The preceding statement calls the function with an argument of <code>5</code>. The function executes its statements and returns the value <code>25</code>.</p> <p>Functions must be <em>in scope</em> when they are called, but the function declaration can be <a href="#function_hoisting">hoisted</a> (appear below the call in the code). The scope of a function declaration is the function in which it is declared (or the entire program, if it is declared at the top level).</p> <p>The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function. The <code>showProps()</code> function (defined in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_objects#objects_and_properties">Working with objects</a>) is an example of a function that takes an object as an argument.</p> <p>A function can call itself. For example, here is a function that computes factorials recursively:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function factorial(n) { if (n === 0 || n === 1) { return 1; } else { return n * factorial(n - 1); } } </code></pre></div> <p>You could then compute the factorials of <code>1</code> through <code>5</code> as follows:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>console.log(factorial(1)); // 1 console.log(factorial(2)); // 2 console.log(factorial(3)); // 6 console.log(factorial(4)); // 24 console.log(factorial(5)); // 120 </code></pre></div> <p>There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime.</p> <p>It turns out that <em>functions are themselves objects</em> — and in turn, these objects have methods. (See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> object.) The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call()</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a> methods can be used to achieve this goal.</p></div></section><section aria-labelledby="function_hoisting"><h3 id="function_hoisting"><a href="#function_hoisting">Function hoisting</a></h3><div class="section-content"><p>Consider the example below:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>console.log(square(5)); // 25 function square(n) { return n * n; } </code></pre></div> <p>This code runs without any error, despite the <code>square()</code> function being called before it's declared. This is because the JavaScript interpreter hoists the entire function declaration to the top of the current scope, so the code above is equivalent to:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// All function declarations are effectively at the top of the scope function square(n) { return n * n; } console.log(square(5)); // 25 </code></pre></div> <p>Function hoisting only works with function <em>declarations</em> — not with function <em>expressions</em>. The following code will not work:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>console.log(square(5)); // ReferenceError: Cannot access 'square' before initialization const square = function (n) { return n * n; }; </code></pre></div></div></section><section aria-labelledby="function_scope"><h2 id="function_scope"><a href="#function_scope">Function scope</a></h2><div class="section-content"><p>Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined.</p> <p>In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// The following variables are defined in the global scope const num1 = 20; const num2 = 3; const name = "Chamakh"; // This function is defined in the global scope function multiply() { return num1 * num2; } console.log(multiply()); // 60 // A nested function example function getScore() { const num1 = 2; const num2 = 3; function add() { return `${name} scored ${num1 + num2}`; } return add(); } console.log(getScore()); // "Chamakh scored 5" </code></pre></div></div></section><section aria-labelledby="scope_and_the_function_stack"><h2 id="scope_and_the_function_stack"><a href="#scope_and_the_function_stack">Scope and the function stack</a></h2><div class="section-content"></div></section><section aria-labelledby="recursion"><h3 id="recursion"><a href="#recursion">Recursion</a></h3><div class="section-content"><p>A function can refer to and call itself. There are three ways for a function to refer to itself:</p> <ol> <li>The function's name</li> <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee"><code>arguments.callee</code></a></li> <li>An in-scope variable that refers to the function</li> </ol> <p>For example, consider the following function definition:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const foo = function bar() { // statements go here }; </code></pre></div> <p>Within the function body, the following are all equivalent:</p> <ol> <li><code>bar()</code></li> <li><code>arguments.callee()</code></li> <li><code>foo()</code></li> </ol> <p>A function that calls itself is called a <em>recursive function</em>. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case).</p> <p>For example, consider the following loop:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let x = 0; // "x < 10" is the loop condition while (x < 10) { // do stuff x++; } </code></pre></div> <p>It can be converted into a recursive function declaration, followed by a call to that function:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function loop(x) { // "x >= 10" is the exit condition (equivalent to "!(x < 10)") if (x >= 10) { return; } // do stuff loop(x + 1); // the recursive call } loop(0); </code></pre></div> <p>However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (such as the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>) is easier via recursion:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function walkTree(node) { if (node === null) { return; } // do something with node for (let i = 0; i < node.childNodes.length; i++) { walkTree(node.childNodes[i]); } } </code></pre></div> <p>Compared to the function <code>loop</code>, each recursive call itself makes many recursive calls here.</p> <p>It is possible to convert any recursive algorithm to a non-recursive one, but the logic is often much more complex, and doing so requires the use of a stack.</p> <p>In fact, recursion itself uses a stack: the function stack. The stack-like behavior can be seen in the following example:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function foo(i) { if (i < 0) { return; } console.log(`begin: ${i}`); foo(i - 1); console.log(`end: ${i}`); } foo(3); // Logs: // begin: 3 // begin: 2 // begin: 1 // begin: 0 // end: 0 // end: 1 // end: 2 // end: 3 </code></pre></div></div></section><section aria-labelledby="nested_functions_and_closures"><h3 id="nested_functions_and_closures"><a href="#nested_functions_and_closures">Nested functions and closures</a></h3><div class="section-content"><p>You may nest a function within another function. The nested (inner) function is private to its containing (outer) function.</p> <p>It also forms a <em>closure</em>. A closure is an expression (most commonly, a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).</p> <p>Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p> <p>To summarize:</p> <ul> <li>The inner function can be accessed only from statements in the outer function.</li> <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li> </ul> <p>The following example shows nested functions:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function addSquares(a, b) { function square(x) { return x * x; } return square(a) + square(b); } console.log(addSquares(2, 3)); // 13 console.log(addSquares(3, 4)); // 25 console.log(addSquares(4, 5)); // 41 </code></pre></div> <p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function outside(x) { function inside(y) { return x + y; } return inside; } const fnInside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it console.log(fnInside(5)); // 8 console.log(outside(3)(5)); // 8 </code></pre></div></div></section><section aria-labelledby="preservation_of_variables"><h3 id="preservation_of_variables"><a href="#preservation_of_variables">Preservation of variables</a></h3><div class="section-content"><p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to <code>outside</code>. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p> <p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p></div></section><section aria-labelledby="multiply-nested_functions"><h3 id="multiply-nested_functions"><a href="#multiply-nested_functions">Multiply-nested functions</a></h3><div class="section-content"><p>Functions can be multiply-nested. For example:</p> <ul> <li>A function (<code>A</code>) contains a function (<code>B</code>), which itself contains a function (<code>C</code>).</li> <li>Both functions <code>B</code> and <code>C</code> form closures here. So, <code>B</code> can access <code>A</code>, and <code>C</code> can access <code>B</code>.</li> <li>In addition, since <code>C</code> can access <code>B</code> which can access <code>A</code>, <code>C</code> can also access <code>A</code>.</li> </ul> <p>Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (The reason it is called "chaining" is explained later.)</p> <p>Consider the following example:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function A(x) { function B(y) { function C(z) { console.log(x + y + z); } C(3); } B(2); } A(1); // Logs 6 (which is 1 + 2 + 3) </code></pre></div> <p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>.</p> <p>This can be done because:</p> <ol> <li><code>B</code> forms a closure including <code>A</code> (i.e., <code>B</code> can access <code>A</code>'s arguments and variables).</li> <li><code>C</code> forms a closure including <code>B</code>.</li> <li>Because <code>C</code>'s closure includes <code>B</code> and <code>B</code>'s closure includes <code>A</code>, then <code>C</code>'s closure also includes <code>A</code>. This means <code>C</code> can access <em>both</em> <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code>, <em>in that order</em>.</li> </ol> <p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p></div></section><section aria-labelledby="name_conflicts"><h3 id="name_conflicts"><a href="#name_conflicts">Name conflicts</a></h3><div class="section-content"><p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More nested scopes take precedence. So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain. The first on the chain is the innermost scope, and the last is the outermost scope. Consider the following:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function outside() { const x = 5; function inside(x) { return x * 2; } return inside; } console.log(outside()(10)); // 20 (instead of 10) </code></pre></div> <p>The name conflict happens at the statement <code>return x * 2</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is <code>inside</code> => <code>outside</code> => global object. Therefore, <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and <code>20</code> (<code>inside</code>'s <code>x</code>) is returned instead of <code>10</code> (<code>outside</code>'s <code>x</code>).</p></div></section><section aria-labelledby="closures"><h2 id="closures"><a href="#closures">Closures</a></h2><div class="section-content"><p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to).</p> <p>However, the outer function does <em>not</em> have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function.</p> <p>Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// The outer function defines a variable called "name" const pet = function (name) { const getName = function () { // The inner function has access to the "name" variable of the outer function return name; }; return getName; // Return the inner function, thereby exposing it to outer scopes }; const myPet = pet("Vivie"); console.log(myPet()); // "Vivie" </code></pre></div> <p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const createPet = function (name) { let sex; const pet = { // setName(newName) is equivalent to setName: function (newName) // in this context setName(newName) { name = newName; }, getName() { return name; }, getSex() { return sex; }, setSex(newSex) { if ( typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female") ) { sex = newSex; } }, }; return pet; }; const pet = createPet("Vivie"); console.log(pet.getName()); // Vivie pet.setName("Oliver"); pet.setSex("male"); console.log(pet.getSex()); // male console.log(pet.getName()); // Oliver </code></pre></div> <p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const getCode = (function () { const apiCode = "0]Eal(eh&2"; // A code we do not want outsiders to be able to modify… return function () { return apiCode; }; })(); console.log(getCode()); // "0]Eal(eh&2" </code></pre></div> <div class="notecard note"> <p><strong>Note:</strong> There are a number of pitfalls to watch out for when using closures!</p> <p>If an enclosed function defines a variable with the same name as a variable in the outer scope, then there is no way to refer to the variable in the outer scope again. (The inner scope variable "overrides" the outer one, until the program exits the inner scope. It can be thought of as a <a href="#name_conflicts">name conflict</a>.)</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const createPet = function (name) { // The outer function defines a variable called "name". return { setName(name) { // The enclosed function also defines a variable called "name". name = name; // How do we access the "name" defined by the outer function? }, }; }; </code></pre></div> </div></div></section><section aria-labelledby="using_the_arguments_object"><h2 id="using_the_arguments_object"><a href="#using_the_arguments_object">Using the arguments object</a></h2><div class="section-content"><p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>arguments[i]; </code></pre></div> <p>where <code>i</code> is the ordinal number of the argument, starting at <code>0</code>. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p> <p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p> <p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function myConcat(separator) { let result = ""; // initialize list // iterate through arguments for (let i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } </code></pre></div> <p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>console.log(myConcat(", ", "red", "orange", "blue")); // "red, orange, blue, " console.log(myConcat("; ", "elephant", "giraffe", "lion", "cheetah")); // "elephant; giraffe; lion; cheetah; " console.log(myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley")); // "sage. basil. oregano. pepper. parsley. " </code></pre></div> <div class="notecard note"> <p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that it has a numbered index and a <code>length</code> property. However, it does <em>not</em> possess all of the array-manipulation methods.</p> </div> <p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> object in the JavaScript reference for more information.</p></div></section><section aria-labelledby="function_parameters"><h2 id="function_parameters"><a href="#function_parameters">Function parameters</a></h2><div class="section-content"><p>There are two special kinds of parameter syntax: <em>default parameters</em> and <em>rest parameters</em>.</p></div></section><section aria-labelledby="default_parameters"><h3 id="default_parameters"><a href="#default_parameters">Default parameters</a></h3><div class="section-content"><p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is exactly what default parameters do.</p> <p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>.</p> <p>In the following example, if no value is provided for <code>b</code>, its value would be <code>undefined</code> when evaluating <code>a*b</code>, and a call to <code>multiply</code> would normally have returned <code>NaN</code>. However, this is prevented by the second line in this example:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function multiply(a, b) { b = typeof b !== "undefined" ? b : 1; return a * b; } console.log(multiply(5)); // 5 </code></pre></div> <p>With <em>default parameters</em>, a manual check in the function body is no longer necessary. You can put <code>1</code> as the default value for <code>b</code> in the function head:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function multiply(a, b = 1) { return a * b; } console.log(multiply(5)); // 5 </code></pre></div> <p>For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p></div></section><section aria-labelledby="rest_parameters"><h3 id="rest_parameters"><a href="#rest_parameters">Rest parameters</a></h3><div class="section-content"><p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array.</p> <p>In the following example, the function <code>multiply</code> uses <em>rest parameters</em> to collect arguments from the second one to the end. The function then multiplies these by the first argument.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function multiply(multiplier, ...theArgs) { return theArgs.map((x) => multiplier * x); } const arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6] </code></pre></div></div></section><section aria-labelledby="arrow_functions"><h2 id="arrow_functions"><a href="#arrow_functions">Arrow functions</a></h2><div class="section-content"><p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (also called a <em>fat arrow</em> to distinguish from a hypothetical <code>-></code> syntax in future JavaScript) has a shorter syntax compared to function expressions and does not have its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super</code></a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a>. Arrow functions are always anonymous.</p> <p>Two factors influenced the introduction of arrow functions: <em>shorter functions</em> and <em>non-binding</em> of <code>this</code>.</p></div></section><section aria-labelledby="shorter_functions"><h3 id="shorter_functions"><a href="#shorter_functions">Shorter functions</a></h3><div class="section-content"><p>In some functional patterns, shorter functions are welcome. Compare:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const a = ["Hydrogen", "Helium", "Lithium", "Beryllium"]; const a2 = a.map(function (s) { return s.length; }); console.log(a2); // [8, 6, 7, 9] const a3 = a.map((s) => s.length); console.log(a3); // [8, 6, 7, 9] </code></pre></div></div></section><section aria-labelledby="no_separate_this"><h3 id="no_separate_this"><a href="#no_separate_this">No separate this</a></h3><div class="section-content"><p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value (a new object in the case of a constructor, undefined in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function Person() { // The Person() constructor defines `this` as itself. this.age = 0; setInterval(function growUp() { // In nonstrict mode, the growUp() function defines `this` // as the global object, which is different from the `this` // defined by the Person() constructor. this.age++; }, 1000); } const p = new Person(); </code></pre></div> <p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function Person() { // Some choose `that` instead of `self`. // Choose one and be consistent. const self = this; self.age = 0; setInterval(function growUp() { // The callback refers to the `self` variable of which // the value is the expected object. self.age++; }, 1000); } </code></pre></div> <p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> <p>An arrow function does not have its own <code>this</code>; the <code>this</code> value of the enclosing execution context is used. Thus, in the following code, the <code>this</code> within the function that is passed to <code>setInterval</code> has the same value as <code>this</code> in the enclosing function:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function Person() { this.age = 0; setInterval(() => { this.age++; // `this` properly refers to the person object }, 1000); } const p = new Person(); </code></pre></div><ul class="prev-next"> <li><a class="button secondary" href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"><span class="button-wrap"> Previous </span></a></li> <li><a class="button secondary" href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators"><span class="button-wrap"> Next </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-11-14T18:37:42.000Z">Nov 14, 2024</time> by <a href="/en-US/docs/Web/JavaScript/Guide/Functions/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/content/blob/main/files/en-us/web/javascript/guide/functions/index.md?plain=1" title="Folder: en-us/web/javascript/guide/functions (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FFunctions&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fjavascript%2Fguide%2Ffunctions%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FFunctions%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fjavascript%2Fguide%2Ffunctions%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F5bdcf72ed6ffc7d4fa878060a548869ed6ae149b%0A*+Document+last+modified%3A+2024-11-14T18%3A37%3A42.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/en-US/docs/Web/JavaScript/Guide/Functions","doc":{"isMarkdown":true,"isTranslated":false,"isActive":true,"flaws":{},"title":"Functions","mdn_url":"/en-US/docs/Web/JavaScript/Guide/Functions","locale":"en-US","native":"English (US)","sidebarHTML":"\n <ol>\n <li class=\"section\"><a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a></li>\n <li class=\"section\">Tutorials</li>\n <li class=\"toggle\">\n <details>\n <summary>Complete beginners</summary>\n <ol>\n <li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript basics</a></li>\n <li><a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a></li>\n <li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">JavaScript building blocks</a></li>\n <li><a href=\"/en-US/docs/Learn/JavaScript/Objects\">Introducing JavaScript objects</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details open=\"\">\n <summary>JavaScript Guide</summary>\n <ol>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Introduction\">Introduction</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Grammar_and_types\">Grammar and types</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling\">Control flow and error handling</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\">Loops and iteration</a></li>\n <li><em><a href=\"/en-US/docs/Web/JavaScript/Guide/Functions\" aria-current=\"page\">Functions</a></em></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators\">Expressions and operators</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates\">Numbers and dates</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Text_formatting\">Text formatting</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Regular_expressions\">Regular expressions</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Indexed_collections\">Indexed collections</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Keyed_collections\">Keyed collections</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Working_with_objects\">Working with objects</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Using_classes\">Using classes</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Using_promises\">Using promises</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Typed_arrays\">JavaScript typed arrays</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Iterators_and_generators\">Iterators and generators</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Meta_programming\">Meta programming</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Guide/Modules\">JavaScript modules</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Intermediate</summary>\n <ol>\n <li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks\">Client-side JavaScript frameworks</a></li>\n <li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs\">Client-side web APIs</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Language_overview\">Language overview</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Data_structures\">JavaScript data structures</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness\">Equality comparisons and sameness</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties\">Enumerability and ownership of properties</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Closures\">Closures</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Advanced</summary>\n <ol>\n <li><a href=\"/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\">Inheritance and the prototype chain</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Memory_management\">Memory Management</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Event_loop\">Concurrency model and Event Loop</a></li>\n </ol>\n </details>\n </li>\n <li class=\"section\"><a href=\"/en-US/docs/Web/JavaScript/Reference\">References</a></li>\n <li class=\"toggle\">\n <details>\n <summary>Built-in objects</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError\">AggregateError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array\">Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer\">ArrayBuffer</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction\">AsyncFunction</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator\">AsyncGenerator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGeneratorFunction\">AsyncGeneratorFunction</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator\">AsyncIterator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics\">Atomics</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt\">BigInt</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array\">BigInt64Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array\">BigUint64Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean\">Boolean</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView\">DataView</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date\">Date</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI\">decodeURI()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent\">decodeURIComponent()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI\">encodeURI()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent\">encodeURIComponent()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error\">Error</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape\">escape()</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval\">eval()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError\">EvalError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry\">FinalizationRegistry</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float16Array\">Float16Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array\">Float32Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\">Float64Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function\">Function</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator\">Generator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction\">GeneratorFunction</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis\">globalThis</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity\">Infinity</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array\">Int16Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\">Int32Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array\">Int8Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError\">InternalError</a><abbr class=\"icon icon-nonstandard\" title=\"Non-standard. Check cross-browser support before using.\">\n <span class=\"visually-hidden\">Non-standard</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl\">Intl</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite\">isFinite()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN\">isNaN()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator\">Iterator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON\">JSON</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map\">Map</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math\">Math</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN\">NaN</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number\">Number</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\">Object</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\">parseFloat()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt\">parseInt()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\">Promise</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy\">Proxy</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError\">RangeError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError\">ReferenceError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect\">Reflect</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp\">RegExp</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set\">Set</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer\">SharedArrayBuffer</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/String\">String</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol\">Symbol</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError\">SyntaxError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray\">TypedArray</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError\">TypeError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array\">Uint16Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array\">Uint32Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array\">Uint8Array</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray\">Uint8ClampedArray</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined\">undefined</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape\">unescape()</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError\">URIError</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\">WeakMap</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\">WeakRef</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet\">WeakSet</a></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Expressions & operators</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Addition\">Addition (+)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment\">Addition assignment (+=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Assignment\">Assignment (=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/async_function\">async function expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/async_function*\">async function* expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/await\">await</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND\">Bitwise AND (&)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment\">Bitwise AND assignment (&=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT\">Bitwise NOT (~)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR\">Bitwise OR (|)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment\">Bitwise OR assignment (|=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR\">Bitwise XOR (^)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment\">Bitwise XOR assignment (^=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/class\">class expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Comma_operator\">Comma operator (,)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator\">Conditional (ternary) operator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Decrement\">Decrement (--)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/delete\">delete</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment\">Destructuring assignment</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Division\">Division (/)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Division_assignment\">Division assignment (/=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Equality\">Equality (==)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation\">Exponentiation (**)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment\">Exponentiation assignment (**=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/function\">function expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/function*\">function* expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than\">Greater than (>)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal\">Greater than or equal (>=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Grouping\">Grouping operator ( )</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/import.meta\">import.meta</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/import\">import()</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/in\">in</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Increment\">Increment (++)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Inequality\">Inequality (!=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/instanceof\">instanceof</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift\">Left shift (<<)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment\">Left shift assignment (<<=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Less_than\">Less than (<)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal\">Less than or equal (<=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND\">Logical AND (&&)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment\">Logical AND assignment (&&=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT\">Logical NOT (!)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR\">Logical OR (||)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment\">Logical OR assignment (||=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication\">Multiplication (*)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment\">Multiplication assignment (*=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/new\">new</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/new.target\">new.target</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/null\">null</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment\">Nullish coalescing assignment (??=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing\">Nullish coalescing operator (??)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer\">Object initializer</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence\">Operator precedence</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining\">Optional chaining (?.)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors\">Property accessors</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Remainder\">Remainder (%)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Remainder_assignment\">Remainder assignment (%=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift\">Right shift (>>)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment\">Right shift assignment (>>=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\">Spread syntax (...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality\">Strict equality (===)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality\">Strict inequality (!==)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction\">Subtraction (-)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment\">Subtraction assignment (-=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/super\">super</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/this\">this</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/typeof\">typeof</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation\">Unary negation (-)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus\">Unary plus (+)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift\">Unsigned right shift (>>>)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment\">Unsigned right shift assignment (>>>=)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/void\">void operator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/yield\">yield</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/yield*\">yield*</a></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Statements & declarations</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/async_function\">async function</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/async_function*\">async function*</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/block\">Block statement</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/break\">break</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/class\">class</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/const\">const</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/continue\">continue</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/debugger\">debugger</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/do...while\">do...while</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/Empty\">Empty statement</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/export\">export</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/Expression_statement\">Expression statement</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for\">for</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of\">for await...of</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for...in\">for...in</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/for...of\">for...of</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/function\">function</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/function*\">function*</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">if...else</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/import\">import</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/label\">Labeled statement</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/let\">let</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/return\">return</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/switch\">switch</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/throw\">throw</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/try...catch\">try...catch</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/var\">var</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/while\">while</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/with\">with</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n <span class=\"visually-hidden\">Deprecated</span>\n</abbr></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Functions</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">Arrow function expressions</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters\">Default parameters</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/get\">get</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions\">Method definitions</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters\">Rest parameters</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/set\">set</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/arguments\">The arguments object</a></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Classes</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes/constructor\">constructor</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes/extends\">extends</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties\">Private properties</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields\">Public class fields</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes/static\">static</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks\">Static initialization blocks</a></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Regular expressions</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Backreference\">Backreference: \\1, \\2</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Capturing_group\">Capturing group: (...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_class_escape\">Character class escape: \\d, \\D, \\w, \\W, \\s, \\S</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_class\">Character class: [...], [^...]</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape\">Character escape: \\n, \\u{...}</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Disjunction\">Disjunction: |</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Input_boundary_assertion\">Input boundary assertion: ^, $</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character\">Literal character: a, b</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookahead_assertion\">Lookahead assertion: (?=...), (?!...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion\">Lookbehind assertion: (?<=...), (?<!...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Modifier\">Modifier: (?ims-ims:...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_backreference\">Named backreference: \\k<name></a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group\">Named capturing group: (?<name>...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Non-capturing_group\">Non-capturing group: (?:...)</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Quantifier\">Quantifier: *, +, ?, {n}, {n,}, {n,m}</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape\">Unicode character class escape: \\p{...}, \\P{...}</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Wildcard\">Wildcard: .</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Word_boundary_assertion\">Word boundary assertion: \\b, \\B</a></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Errors</summary>\n <ol><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors\">Overview</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Promise_any_all_rejected\">AggregateError: No Promise in Promise.any was resolved</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Property_access_denied\">Error: Permission denied to access property \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion\">InternalError: too much recursion</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point\">RangeError: argument is not a valid code point</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_division_by_zero\">RangeError: BigInt division by zero</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_negative_exponent\">RangeError: BigInt negative exponent</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Form_must_be_one_of\">RangeError: form must be one of 'NFC', 'NFD', 'NFKC', or 'NFKD'</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length\">RangeError: invalid array length</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_date\">RangeError: invalid date</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Precision_range\">RangeError: precision is out of range</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_radix\">RangeError: radix must be an integer</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large\">RangeError: repeat count must be less than infinity</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count\">RangeError: repeat count must be non-negative</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_be_converted_to_BigInt_because_it_isnt_an_integer\">RangeError: x can't be converted to BigInt because it isn't an integer</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined\">ReferenceError: \"x\" is not defined</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Undeclared_var\">ReferenceError: assignment to undeclared variable \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init\">ReferenceError: can't access lexical declaration 'X' before initialization</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage\">ReferenceError: deprecated caller or arguments usage</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Super_not_called\">ReferenceError: must call super constructor before using 'this' in derived class constructor</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Super_called_twice\">ReferenceError: super() called twice in derived class constructor</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_strict_arguments_eval\">SyntaxError: 'arguments'/'eval' can't be defined or assigned to in strict mode code</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal\">SyntaxError: \"0\"-prefixed octal literals are deprecated</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Strict_non_simple_params\">SyntaxError: \"use strict\" not allowed in function with non-simple parameters</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Reserved_identifier\">SyntaxError: \"x\" is a reserved identifier</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_backslash_at_end_of_pattern\">SyntaxError: \\ at end of pattern</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer\">SyntaxError: a declaration in the head of a for-of loop can't have an initializer</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode\">SyntaxError: applying the 'delete' operator to an unqualified name is deprecated</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Arguments_not_allowed\">SyntaxError: arguments is not valid in fields</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_await\">SyntaxError: await is only valid in async functions, async generators and modules</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/await_yield_in_parameter\">SyntaxError: await/yield expression can't be used in parameter</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_use_nullish_coalescing_unparenthesized\">SyntaxError: cannot use `??` unparenthesized within `||` and `&&` expressions</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_character_class_escape_in_class_range\">SyntaxError: character class escape cannot be used in class range in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_continue\">SyntaxError: continue must be inside loop</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_duplicate_capture_group_name\">SyntaxError: duplicate capture group name in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Duplicate_parameter\">SyntaxError: duplicate formal argument x</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer\">SyntaxError: for-in loop head declarations may not have initializers</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement\">SyntaxError: function statement requires a name</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Function_label\">SyntaxError: functions cannot be labelled</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Either_be_both_static_or_non-static\">SyntaxError: getter and setter for private name #x should either be both static or non-static</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Getter_no_arguments\">SyntaxError: getter functions must have no arguments</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Identifier_after_number\">SyntaxError: identifier starts immediately after numeric literal</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Illegal_character\">SyntaxError: illegal character</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/import_decl_module_top_level\">SyntaxError: import declarations may only appear at top level of a module</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_incomplete_quantifier\">SyntaxError: incomplete quantifier in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side\">SyntaxError: invalid assignment left-hand side</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_BigInt_syntax\">SyntaxError: invalid BigInt syntax</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_capture_group_name\">SyntaxError: invalid capture group name in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_char_in_class\">SyntaxError: invalid character in class in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_class_set_operation\">SyntaxError: invalid class set operation in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_decimal_escape\">SyntaxError: invalid decimal escape in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_identity_escape\">SyntaxError: invalid identity escape in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_named_capture_reference\">SyntaxError: invalid named capture reference in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_property_name\">SyntaxError: invalid property name in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_range_in_character_class\">SyntaxError: invalid range in character class</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_group\">SyntaxError: invalid regexp group</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag\">SyntaxError: invalid regular expression flag \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_invalid_unicode_escape\">SyntaxError: invalid unicode escape in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse\">SyntaxError: JSON.parse: bad parsing</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Label_not_found\">SyntaxError: label not found</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id\">SyntaxError: missing : after property id</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list\">SyntaxError: missing ) after argument list</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition\">SyntaxError: missing ) after condition</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list\">SyntaxError: missing ] after element list</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body\">SyntaxError: missing } after function body</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list\">SyntaxError: missing } after property list</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const\">SyntaxError: missing = in const declaration</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter\">SyntaxError: missing formal parameter</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator\">SyntaxError: missing name after . operator</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/No_variable_name\">SyntaxError: missing variable name</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_negated_char_class_with_strings\">SyntaxError: negated character class with strings in regular expression</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_new_optional\">SyntaxError: new keyword cannot be used with an optional chain</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_nothing_to_repeat\">SyntaxError: nothing to repeat</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_numbers_out_of_order_in_quantifier\">SyntaxError: numbers out of order in {} quantifier.</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_escape_sequence\">SyntaxError: octal escape sequences can't be used in untagged template literals or in strict mode code</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Parameter_after_rest_parameter\">SyntaxError: parameter after rest parameter</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete_private_fields\">SyntaxError: private fields can't be deleted</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Duplicate_proto\">SyntaxError: property name __proto__ appears more than once in object literal</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Regex_raw_bracket\">SyntaxError: raw bracket is not allowed in regular expression with unicode flag</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter\">SyntaxError: redeclaration of formal parameter \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Undeclared_private_field_or_method\">SyntaxError: reference to undeclared private field or method #x</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Rest_with_default\">SyntaxError: rest parameter may not have a default</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_return\">SyntaxError: return not in function</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Setter_one_argument\">SyntaxError: setter functions must have one argument</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/String_literal_EOL\">SyntaxError: string literal contains an unescaped line break</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_super_call\">SyntaxError: super() is only valid in derived class constructors</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_optional_template\">SyntaxError: tagged template cannot be used with optional chain</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Hash_outside_class\">SyntaxError: Unexpected '#' used outside of class body</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token\">SyntaxError: Unexpected token</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_break\">SyntaxError: unlabeled break must be inside loop or switch</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Unparenthesized_unary_expr_lhs_exponentiation\">SyntaxError: unparenthesized unary expression can't appear on the left-hand side of '**'</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Bad_super_prop\">SyntaxError: use of super property/member accesses only valid within methods or eval code within methods</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma\">SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable\">TypeError: 'x' is not iterable</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type\">TypeError: \"x\" is (not) \"y\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_constructor\">TypeError: \"x\" is not a constructor</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function\">TypeError: \"x\" is not a function</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/No_non-null_object\">TypeError: \"x\" is not a non-null object</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Read-only\">TypeError: \"x\" is read-only</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_not_serializable\">TypeError: BigInt value can't be serialized in JSON</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Builtin_ctor_no_new\">TypeError: calling a builtin X constructor without new is forbidden</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Get_set_missing_private\">TypeError: can't access/set private field or method: object is not the right class</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property\">TypeError: can't assign to property \"x\" on \"y\": not an object</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_convert_BigInt_to_number\">TypeError: can't convert BigInt to number</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_convert_x_to_BigInt\">TypeError: can't convert x to BigInt</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible\">TypeError: can't define property \"x\": \"obj\" is not extensible</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element\">TypeError: can't delete non-configurable array element</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property\">TypeError: can't redefine non-configurable property \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_set_prototype\">TypeError: can't set prototype of this object</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_prototype\">TypeError: can't set prototype: it would cause a prototype chain cycle</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/in_operator_no_object\">TypeError: cannot use 'in' operator to search for 'x' in 'y'</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Class_ctor_no_new\">TypeError: class constructors must be invoked with 'new'</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value\">TypeError: cyclic object value</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_derived_return\">TypeError: derived class constructor returned invalid value x</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Private_setter_only\">TypeError: getting private setter-only property</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Private_double_initialization\">TypeError: Initializing an object twice is an error with private fields/methods</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand\">TypeError: invalid 'instanceof' operand 'x'</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Array_sort_argument\">TypeError: invalid Array.prototype.sort argument</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment\">TypeError: invalid assignment to const \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Constructor_cant_be_used_directly\">TypeError: Iterator/AsyncIterator constructor can't be used directly</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Requires_global_RegExp\">TypeError: matchAll/replaceAll must be called with a global RegExp</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/More_arguments_needed\">TypeError: More arguments needed</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/No_properties\">TypeError: null/undefined has no properties</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete\">TypeError: property \"x\" is non-configurable and can't be deleted</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value\">TypeError: Reduce of empty array with no initial value</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only\">TypeError: setting getter-only property \"x\"</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Key_not_weakly_held\">TypeError: WeakSet key/WeakMap value 'x' must be an object or an unregistered symbol</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type\">TypeError: X.prototype.y called on incompatible type</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_URI\">URIError: malformed URI sequence</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Already_has_pragma\">Warning: -file- is being assigned a //# sourceMappingURL, but already has one</a></li><li><a href=\"/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return\">Warning: unreachable code after return statement</a></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Misc</summary>\n <ol>\n <li><a href=\"/en-US/docs/Web/JavaScript/JavaScript_technologies_overview\">JavaScript technologies overview</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Lexical_grammar\">Lexical grammar</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Iteration_protocols\">Iteration protocols</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Strict_mode\">Strict mode</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Template_literals\">Template literals</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Trailing_commas\">Trailing commas</a></li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features\">Deprecated features</a></li>\n </ol>\n </details>\n </li>\n </ol>\n","sidebarMacro":"JsSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\"><span class=\"button-wrap\"> Previous </span></a></li>\n \n <li><a class=\"button secondary\" href=\"/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators\"><span class=\"button-wrap\"> Next </span></a></li>\n</ul>\n<p>Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.</p>\n<p>See also the <a href=\"/en-US/docs/Web/JavaScript/Reference/Functions\">exhaustive reference chapter about JavaScript functions</a> to get to know the details.</p>"}},{"type":"prose","value":{"id":"defining_functions","title":"Defining functions","isH3":false,"content":""}},{"type":"prose","value":{"id":"function_declarations","title":"Function declarations","isH3":true,"content":"<p>A <strong>function definition</strong> (also called a <strong>function declaration</strong>, or <strong>function statement</strong>) consists of the <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/function\"><code>function</code></a> keyword, followed by:</p>\n<ul>\n <li>The name of the function.</li>\n <li>A list of parameters to the function, enclosed in parentheses and separated by commas.</li>\n <li>The JavaScript statements that define the function, enclosed in curly braces, <code>{ /* … */ }</code>.</li>\n</ul>\n<p>For example, the following code defines a function named <code>square</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function square(number) {\n return number * number;\n}\n</code></pre></div>\n<p>The function <code>square</code> takes one parameter, called <code>number</code>. The function consists of one statement that says to return the parameter of the function (that is, <code>number</code>) multiplied by itself. The <a href=\"/en-US/docs/Web/JavaScript/Reference/Statements/return\"><code>return</code></a> statement specifies the value returned by the function, which is <code>number * number</code>.</p>\n<p>Parameters are essentially passed to functions <strong>by value</strong> — so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, <strong>the change is not reflected globally or in the code which called that function</strong>.</p>\n<p>When you pass an object as a parameter, if the function changes the object's properties, that change is visible outside the function, as shown in the following example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function myFunc(theObject) {\n theObject.make = \"Toyota\";\n}\n\nconst myCar = {\n make: \"Honda\",\n model: \"Accord\",\n year: 1998,\n};\n\nconsole.log(myCar.make); // \"Honda\"\nmyFunc(myCar);\nconsole.log(myCar.make); // \"Toyota\"\n</code></pre></div>\n<p>When you pass an array as a parameter, if the function changes any of the array's values, that change is visible outside the function, as shown in the following example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function myFunc(theArr) {\n theArr[0] = 30;\n}\n\nconst arr = [45];\n\nconsole.log(arr[0]); // 45\nmyFunc(arr);\nconsole.log(arr[0]); // 30\n</code></pre></div>"}},{"type":"prose","value":{"id":"function_expressions","title":"Function expressions","isH3":true,"content":"<p>While the function declaration above is syntactically a statement, functions can also be created by a <a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/function\">function expression</a>.</p>\n<p>Such a function can be <strong>anonymous</strong>; it does not have to have a name. For example, the function <code>square</code> could have been defined as:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const square = function (number) {\n return number * number;\n};\n\nconsole.log(square(4)); // 16\n</code></pre></div>\n<p>However, a name <em>can</em> be provided with a function expression. Providing a name allows the function to refer to itself, and also makes it easier to identify the function in a debugger's stack traces:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const factorial = function fac(n) {\n return n < 2 ? 1 : n * fac(n - 1);\n};\n\nconsole.log(factorial(3)); // 6\n</code></pre></div>\n<p>Function expressions are convenient when passing a function as an argument to another function. The following example shows a <code>map</code> function that should receive a function as first argument and an array as second argument:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function map(f, a) {\n const result = new Array(a.length);\n for (let i = 0; i < a.length; i++) {\n result[i] = f(a[i]);\n }\n return result;\n}\n</code></pre></div>\n<p>In the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function map(f, a) {\n const result = new Array(a.length);\n for (let i = 0; i < a.length; i++) {\n result[i] = f(a[i]);\n }\n return result;\n}\n\nconst cube = function (x) {\n return x * x * x;\n};\n\nconst numbers = [0, 1, 2, 5, 10];\nconsole.log(map(cube, numbers)); // [0, 1, 8, 125, 1000]\n</code></pre></div>\n<p>In JavaScript, a function can be defined based on a condition. For example, the following function definition defines <code>myFunc</code> only if <code>num</code> equals <code>0</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myFunc;\nif (num === 0) {\n myFunc = function (theObject) {\n theObject.make = \"Toyota\";\n };\n}\n</code></pre></div>\n<p>In addition to defining functions as described here, you can also use the <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function\"><code>Function</code></a> constructor to create functions from a string at runtime, much like <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval\"><code>eval()</code></a>.</p>\n<p>A <strong>method</strong> is a function that is a property of an object. Read more about objects and methods in <a href=\"/en-US/docs/Web/JavaScript/Guide/Working_with_objects\">Working with objects</a>.</p>"}},{"type":"prose","value":{"id":"calling_functions","title":"Calling functions","isH3":false,"content":"<p><em>Defining</em> a function does not <em>execute</em> it. Defining it names the function and specifies what to do when the function is called.</p>\n<p><strong>Calling</strong> the function actually performs the specified actions with the indicated parameters. For example, if you define the function <code>square</code>, you could call it as follows:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>square(5);\n</code></pre></div>\n<p>The preceding statement calls the function with an argument of <code>5</code>. The function executes its statements and returns the value <code>25</code>.</p>\n<p>Functions must be <em>in scope</em> when they are called, but the function declaration can be <a href=\"#function_hoisting\">hoisted</a> (appear below the call in the code). The scope of a function declaration is the function in which it is declared (or the entire program, if it is declared at the top level).</p>\n<p>The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function. The <code>showProps()</code> function (defined in <a href=\"/en-US/docs/Web/JavaScript/Guide/Working_with_objects#objects_and_properties\">Working with objects</a>) is an example of a function that takes an object as an argument.</p>\n<p>A function can call itself. For example, here is a function that computes factorials recursively:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function factorial(n) {\n if (n === 0 || n === 1) {\n return 1;\n } else {\n return n * factorial(n - 1);\n }\n}\n</code></pre></div>\n<p>You could then compute the factorials of <code>1</code> through <code>5</code> as follows:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>console.log(factorial(1)); // 1\nconsole.log(factorial(2)); // 2\nconsole.log(factorial(3)); // 6\nconsole.log(factorial(4)); // 24\nconsole.log(factorial(5)); // 120\n</code></pre></div>\n<p>There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime.</p>\n<p>It turns out that <em>functions are themselves objects</em> — and in turn, these objects have methods. (See the <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function\"><code>Function</code></a> object.) The <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call\"><code>call()</code></a> and <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\"><code>apply()</code></a> methods can be used to achieve this goal.</p>"}},{"type":"prose","value":{"id":"function_hoisting","title":"Function hoisting","isH3":true,"content":"<p>Consider the example below:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>console.log(square(5)); // 25\n\nfunction square(n) {\n return n * n;\n}\n</code></pre></div>\n<p>This code runs without any error, despite the <code>square()</code> function being called before it's declared. This is because the JavaScript interpreter hoists the entire function declaration to the top of the current scope, so the code above is equivalent to:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// All function declarations are effectively at the top of the scope\nfunction square(n) {\n return n * n;\n}\n\nconsole.log(square(5)); // 25\n</code></pre></div>\n<p>Function hoisting only works with function <em>declarations</em> — not with function <em>expressions</em>. The following code will not work:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>console.log(square(5)); // ReferenceError: Cannot access 'square' before initialization\nconst square = function (n) {\n return n * n;\n};\n</code></pre></div>"}},{"type":"prose","value":{"id":"function_scope","title":"Function scope","isH3":false,"content":"<p>Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined.</p>\n<p>In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// The following variables are defined in the global scope\nconst num1 = 20;\nconst num2 = 3;\nconst name = \"Chamakh\";\n\n// This function is defined in the global scope\nfunction multiply() {\n return num1 * num2;\n}\n\nconsole.log(multiply()); // 60\n\n// A nested function example\nfunction getScore() {\n const num1 = 2;\n const num2 = 3;\n\n function add() {\n return `${name} scored ${num1 + num2}`;\n }\n\n return add();\n}\n\nconsole.log(getScore()); // \"Chamakh scored 5\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"scope_and_the_function_stack","title":"Scope and the function stack","isH3":false,"content":""}},{"type":"prose","value":{"id":"recursion","title":"Recursion","isH3":true,"content":"<p>A function can refer to and call itself. There are three ways for a function to refer to itself:</p>\n<ol>\n <li>The function's name</li>\n <li><a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee\"><code>arguments.callee</code></a></li>\n <li>An in-scope variable that refers to the function</li>\n</ol>\n<p>For example, consider the following function definition:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const foo = function bar() {\n // statements go here\n};\n</code></pre></div>\n<p>Within the function body, the following are all equivalent:</p>\n<ol>\n <li><code>bar()</code></li>\n <li><code>arguments.callee()</code></li>\n <li><code>foo()</code></li>\n</ol>\n<p>A function that calls itself is called a <em>recursive function</em>. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case).</p>\n<p>For example, consider the following loop:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let x = 0;\n// \"x < 10\" is the loop condition\nwhile (x < 10) {\n // do stuff\n x++;\n}\n</code></pre></div>\n<p>It can be converted into a recursive function declaration, followed by a call to that function:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function loop(x) {\n // \"x >= 10\" is the exit condition (equivalent to \"!(x < 10)\")\n if (x >= 10) {\n return;\n }\n // do stuff\n loop(x + 1); // the recursive call\n}\nloop(0);\n</code></pre></div>\n<p>However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (such as the <a href=\"/en-US/docs/Web/API/Document_Object_Model\">DOM</a>) is easier via recursion:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function walkTree(node) {\n if (node === null) {\n return;\n }\n // do something with node\n for (let i = 0; i < node.childNodes.length; i++) {\n walkTree(node.childNodes[i]);\n }\n}\n</code></pre></div>\n<p>Compared to the function <code>loop</code>, each recursive call itself makes many recursive calls here.</p>\n<p>It is possible to convert any recursive algorithm to a non-recursive one, but the logic is often much more complex, and doing so requires the use of a stack.</p>\n<p>In fact, recursion itself uses a stack: the function stack. The stack-like behavior can be seen in the following example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function foo(i) {\n if (i < 0) {\n return;\n }\n console.log(`begin: ${i}`);\n foo(i - 1);\n console.log(`end: ${i}`);\n}\nfoo(3);\n\n// Logs:\n// begin: 3\n// begin: 2\n// begin: 1\n// begin: 0\n// end: 0\n// end: 1\n// end: 2\n// end: 3\n</code></pre></div>"}},{"type":"prose","value":{"id":"nested_functions_and_closures","title":"Nested functions and closures","isH3":true,"content":"<p>You may nest a function within another function. The nested (inner) function is private to its containing (outer) function.</p>\n<p>It also forms a <em>closure</em>. A closure is an expression (most commonly, a function) that can have free variables together with an environment that binds those variables (that \"closes\" the expression).</p>\n<p>Since a nested function is a closure, this means that a nested function can \"inherit\" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p>\n<p>To summarize:</p>\n<ul>\n <li>The inner function can be accessed only from statements in the outer function.</li>\n <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li>\n</ul>\n<p>The following example shows nested functions:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function addSquares(a, b) {\n function square(x) {\n return x * x;\n }\n return square(a) + square(b);\n}\n\nconsole.log(addSquares(2, 3)); // 13\nconsole.log(addSquares(3, 4)); // 25\nconsole.log(addSquares(4, 5)); // 41\n</code></pre></div>\n<p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function outside(x) {\n function inside(y) {\n return x + y;\n }\n return inside;\n}\n\nconst fnInside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it\nconsole.log(fnInside(5)); // 8\nconsole.log(outside(3)(5)); // 8\n</code></pre></div>"}},{"type":"prose","value":{"id":"preservation_of_variables","title":"Preservation of variables","isH3":true,"content":"<p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to <code>outside</code>. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p>\n<p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p>"}},{"type":"prose","value":{"id":"multiply-nested_functions","title":"Multiply-nested functions","isH3":true,"content":"<p>Functions can be multiply-nested. For example:</p>\n<ul>\n <li>A function (<code>A</code>) contains a function (<code>B</code>), which itself contains a function (<code>C</code>).</li>\n <li>Both functions <code>B</code> and <code>C</code> form closures here. So, <code>B</code> can access <code>A</code>, and <code>C</code> can access <code>B</code>.</li>\n <li>In addition, since <code>C</code> can access <code>B</code> which can access <code>A</code>, <code>C</code> can also access <code>A</code>.</li>\n</ul>\n<p>Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (The reason it is called \"chaining\" is explained later.)</p>\n<p>Consider the following example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function A(x) {\n function B(y) {\n function C(z) {\n console.log(x + y + z);\n }\n C(3);\n }\n B(2);\n}\nA(1); // Logs 6 (which is 1 + 2 + 3)\n</code></pre></div>\n<p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>.</p>\n<p>This can be done because:</p>\n<ol>\n <li><code>B</code> forms a closure including <code>A</code> (i.e., <code>B</code> can access <code>A</code>'s arguments and variables).</li>\n <li><code>C</code> forms a closure including <code>B</code>.</li>\n <li>Because <code>C</code>'s closure includes <code>B</code> and <code>B</code>'s closure includes <code>A</code>, then <code>C</code>'s closure also includes <code>A</code>. This means <code>C</code> can access <em>both</em> <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code>, <em>in that order</em>.</li>\n</ol>\n<p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p>"}},{"type":"prose","value":{"id":"name_conflicts","title":"Name conflicts","isH3":true,"content":"<p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More nested scopes take precedence. So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain. The first on the chain is the innermost scope, and the last is the outermost scope. Consider the following:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function outside() {\n const x = 5;\n function inside(x) {\n return x * 2;\n }\n return inside;\n}\n\nconsole.log(outside()(10)); // 20 (instead of 10)\n</code></pre></div>\n<p>The name conflict happens at the statement <code>return x * 2</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is <code>inside</code> => <code>outside</code> => global object. Therefore, <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and <code>20</code> (<code>inside</code>'s <code>x</code>) is returned instead of <code>10</code> (<code>outside</code>'s <code>x</code>).</p>"}},{"type":"prose","value":{"id":"closures","title":"Closures","isH3":false,"content":"<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to).</p>\n<p>However, the outer function does <em>not</em> have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function.</p>\n<p>Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// The outer function defines a variable called \"name\"\nconst pet = function (name) {\n const getName = function () {\n // The inner function has access to the \"name\" variable of the outer function\n return name;\n };\n return getName; // Return the inner function, thereby exposing it to outer scopes\n};\nconst myPet = pet(\"Vivie\");\n\nconsole.log(myPet()); // \"Vivie\"\n</code></pre></div>\n<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const createPet = function (name) {\n let sex;\n\n const pet = {\n // setName(newName) is equivalent to setName: function (newName)\n // in this context\n setName(newName) {\n name = newName;\n },\n\n getName() {\n return name;\n },\n\n getSex() {\n return sex;\n },\n\n setSex(newSex) {\n if (\n typeof newSex === \"string\" &&\n (newSex.toLowerCase() === \"male\" || newSex.toLowerCase() === \"female\")\n ) {\n sex = newSex;\n }\n },\n };\n\n return pet;\n};\n\nconst pet = createPet(\"Vivie\");\nconsole.log(pet.getName()); // Vivie\n\npet.setName(\"Oliver\");\npet.setSex(\"male\");\nconsole.log(pet.getSex()); // male\nconsole.log(pet.getName()); // Oliver\n</code></pre></div>\n<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold \"persistent\" and \"encapsulated\" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const getCode = (function () {\n const apiCode = \"0]Eal(eh&2\"; // A code we do not want outsiders to be able to modify…\n\n return function () {\n return apiCode;\n };\n})();\n\nconsole.log(getCode()); // \"0]Eal(eh&2\"\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>Note:</strong> There are a number of pitfalls to watch out for when using closures!</p>\n <p>If an enclosed function defines a variable with the same name as a variable in the outer scope, then there is no way to refer to the variable in the outer scope again. (The inner scope variable \"overrides\" the outer one, until the program exits the inner scope. It can be thought of as a <a href=\"#name_conflicts\">name conflict</a>.)</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const createPet = function (name) {\n // The outer function defines a variable called \"name\".\n return {\n setName(name) {\n // The enclosed function also defines a variable called \"name\".\n name = name; // How do we access the \"name\" defined by the outer function?\n },\n };\n};\n</code></pre></div>\n</div>"}},{"type":"prose","value":{"id":"using_the_arguments_object","title":"Using the arguments object","isH3":false,"content":"<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>arguments[i];\n</code></pre></div>\n<p>where <code>i</code> is the ordinal number of the argument, starting at <code>0</code>. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p>\n<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p>\n<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function myConcat(separator) {\n let result = \"\"; // initialize list\n // iterate through arguments\n for (let i = 1; i < arguments.length; i++) {\n result += arguments[i] + separator;\n }\n return result;\n}\n</code></pre></div>\n<p>You can pass any number of arguments to this function, and it concatenates each argument into a string \"list\":</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>console.log(myConcat(\", \", \"red\", \"orange\", \"blue\"));\n// \"red, orange, blue, \"\n\nconsole.log(myConcat(\"; \", \"elephant\", \"giraffe\", \"lion\", \"cheetah\"));\n// \"elephant; giraffe; lion; cheetah; \"\n\nconsole.log(myConcat(\". \", \"sage\", \"basil\", \"oregano\", \"pepper\", \"parsley\"));\n// \"sage. basil. oregano. pepper. parsley. \"\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>Note:</strong> The <code>arguments</code> variable is \"array-like\", but not an array. It is array-like in that it has a numbered index and a <code>length</code> property. However, it does <em>not</em> possess all of the array-manipulation methods.</p>\n</div>\n<p>See the <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function\"><code>Function</code></a> object in the JavaScript reference for more information.</p>"}},{"type":"prose","value":{"id":"function_parameters","title":"Function parameters","isH3":false,"content":"<p>There are two special kinds of parameter syntax: <em>default parameters</em> and <em>rest parameters</em>.</p>"}},{"type":"prose","value":{"id":"default_parameters","title":"Default parameters","isH3":true,"content":"<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is exactly what default parameters do.</p>\n<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>.</p>\n<p>In the following example, if no value is provided for <code>b</code>, its value would be <code>undefined</code> when evaluating <code>a*b</code>, and a call to <code>multiply</code> would normally have returned <code>NaN</code>. However, this is prevented by the second line in this example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function multiply(a, b) {\n b = typeof b !== \"undefined\" ? b : 1;\n return a * b;\n}\n\nconsole.log(multiply(5)); // 5\n</code></pre></div>\n<p>With <em>default parameters</em>, a manual check in the function body is no longer necessary. You can put <code>1</code> as the default value for <code>b</code> in the function head:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function multiply(a, b = 1) {\n return a * b;\n}\n\nconsole.log(multiply(5)); // 5\n</code></pre></div>\n<p>For more details, see <a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters\">default parameters</a> in the reference.</p>"}},{"type":"prose","value":{"id":"rest_parameters","title":"Rest parameters","isH3":true,"content":"<p>The <a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters\">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array.</p>\n<p>In the following example, the function <code>multiply</code> uses <em>rest parameters</em> to collect arguments from the second one to the end. The function then multiplies these by the first argument.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function multiply(multiplier, ...theArgs) {\n return theArgs.map((x) => multiplier * x);\n}\n\nconst arr = multiply(2, 1, 2, 3);\nconsole.log(arr); // [2, 4, 6]\n</code></pre></div>"}},{"type":"prose","value":{"id":"arrow_functions","title":"Arrow functions","isH3":false,"content":"<p>An <a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">arrow function expression</a> (also called a <em>fat arrow</em> to distinguish from a hypothetical <code>-></code> syntax in future JavaScript) has a shorter syntax compared to function expressions and does not have its own <a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/this\"><code>this</code></a>, <a href=\"/en-US/docs/Web/JavaScript/Reference/Functions/arguments\"><code>arguments</code></a>, <a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/super\"><code>super</code></a>, or <a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/new.target\"><code>new.target</code></a>. Arrow functions are always anonymous.</p>\n<p>Two factors influenced the introduction of arrow functions: <em>shorter functions</em> and <em>non-binding</em> of <code>this</code>.</p>"}},{"type":"prose","value":{"id":"shorter_functions","title":"Shorter functions","isH3":true,"content":"<p>In some functional patterns, shorter functions are welcome. Compare:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const a = [\"Hydrogen\", \"Helium\", \"Lithium\", \"Beryllium\"];\n\nconst a2 = a.map(function (s) {\n return s.length;\n});\n\nconsole.log(a2); // [8, 6, 7, 9]\n\nconst a3 = a.map((s) => s.length);\n\nconsole.log(a3); // [8, 6, 7, 9]\n</code></pre></div>"}},{"type":"prose","value":{"id":"no_separate_this","title":"No separate this","isH3":true,"content":"<p>Until arrow functions, every new function defined its own <a href=\"/en-US/docs/Web/JavaScript/Reference/Operators/this\"><code>this</code></a> value (a new object in the case of a constructor, undefined in <a href=\"/en-US/docs/Web/JavaScript/Reference/Strict_mode\">strict mode</a> function calls, the base object if the function is called as an \"object method\", etc.). This proved to be less than ideal with an object-oriented style of programming.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function Person() {\n // The Person() constructor defines `this` as itself.\n this.age = 0;\n\n setInterval(function growUp() {\n // In nonstrict mode, the growUp() function defines `this`\n // as the global object, which is different from the `this`\n // defined by the Person() constructor.\n this.age++;\n }, 1000);\n}\n\nconst p = new Person();\n</code></pre></div>\n<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function Person() {\n // Some choose `that` instead of `self`.\n // Choose one and be consistent.\n const self = this;\n self.age = 0;\n\n setInterval(function growUp() {\n // The callback refers to the `self` variable of which\n // the value is the expected object.\n self.age++;\n }, 1000);\n}\n</code></pre></div>\n<p>Alternatively, a <a href=\"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p>\n<p>An arrow function does not have its own <code>this</code>; the <code>this</code> value of the enclosing execution context is used. Thus, in the following code, the <code>this</code> within the function that is passed to <code>setInterval</code> has the same value as <code>this</code> in the enclosing function:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function Person() {\n this.age = 0;\n\n setInterval(() => {\n this.age++; // `this` properly refers to the person object\n }, 1000);\n}\n\nconst p = new Person();\n</code></pre></div><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration\"><span class=\"button-wrap\"> Previous </span></a></li>\n \n <li><a class=\"button secondary\" href=\"/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators\"><span class=\"button-wrap\"> Next </span></a></li>\n</ul>"}}],"toc":[{"text":"Defining functions","id":"defining_functions"},{"text":"Calling functions","id":"calling_functions"},{"text":"Function scope","id":"function_scope"},{"text":"Scope and the function stack","id":"scope_and_the_function_stack"},{"text":"Closures","id":"closures"},{"text":"Using the arguments object","id":"using_the_arguments_object"},{"text":"Function parameters","id":"function_parameters"},{"text":"Arrow functions","id":"arrow_functions"}],"summary":"Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.","popularity":0.2622,"modified":"2024-11-14T18:37:42.000Z","other_translations":[{"locale":"de","title":"Funktionen","native":"Deutsch"},{"locale":"es","title":"Funciones","native":"Español"},{"locale":"fr","title":"Fonctions","native":"Français"},{"locale":"ja","title":"関数","native":"日本語"},{"locale":"ko","title":"함수","native":"한국어"},{"locale":"pt-BR","title":"Funções","native":"Português (do Brasil)"},{"locale":"ru","title":"Функции","native":"Русский"},{"locale":"zh-CN","title":"函数","native":"中文 (简体)"},{"locale":"zh-TW","title":"函式","native":"正體中文 (繁體)"}],"pageType":"guide","source":{"folder":"en-us/web/javascript/guide/functions","github_url":"https://github.com/mdn/content/blob/main/files/en-us/web/javascript/guide/functions/index.md","last_commit_url":"https://github.com/mdn/content/commit/5bdcf72ed6ffc7d4fa878060a548869ed6ae149b","filename":"index.md"},"short_title":"Functions","parents":[{"uri":"/en-US/docs/Web","title":"References"},{"uri":"/en-US/docs/Web/JavaScript","title":"JavaScript"},{"uri":"/en-US/docs/Web/JavaScript/Guide","title":"Guide"},{"uri":"/en-US/docs/Web/JavaScript/Guide/Functions","title":"Functions"}],"pageTitle":"Functions - JavaScript | MDN","noIndexing":false}}</script></body></html>