CINXE.COM

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-5VSZM5J",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script><meta name="description" content="Leverage your JavaScript knowledge when learning Dart."><title>Learning Dart as a JavaScript developer | Dart</title><link rel="icon" sizes="64x64" href="/assets/img/logo/dart-64.png" eleventy:ignore><link href="/assets/img/touch-icon-iphone.png" rel="apple-touch-icon" eleventy:ignore><link href="/assets/img/touch-icon-ipad.png" rel="apple-touch-icon" sizes="152x152" eleventy:ignore><link href="/assets/img/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="180x180" eleventy:ignore><link href="/assets/img/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="167x167" eleventy:ignore><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@dart_lang"><meta name="twitter:title" content="Learning Dart as a JavaScript developer"><meta name="twitter:description" content="Leverage your JavaScript knowledge when learning Dart."><meta property="og:title" content="Learning Dart as a JavaScript developer"><meta property="og:description" content="Leverage your JavaScript knowledge when learning Dart."><meta property="og:url" content="/resources/coming-from/js-to-dart/"><meta property="og:image" content="/assets/img/logo/dart-logo-for-shares.png?2" eleventy:ignore><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Display:wght@400&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"><link rel="stylesheet" href="/assets/css/main.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js" integrity="sha512-nlp9/l96/EpjYBx7EP7pGASVXNe80hGhYAUrjeXnu/fyF5Py0/RXav4BBNs7n5Hx1WFhOEOWSAVjGeC3oKxDVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script src="/assets/js/os-tabs.js"></script><script src="/assets/js/utilities.js"></script><script src="/assets/js/main.js"></script><script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-26406144-4","auto"),ga("send","pageview")</script></head><body class="default.html show_banner highlight-languages"><a id="skip" href="#site-content-title">Skip to main content</a><section id="cookie-notice"><div class="container">dart.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.<button id="cookie-consent" class="btn btn-primary">OK, got it</button></div></section><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5VSZM5J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><header id="page-header" class="site-header"><nav id="mainnav" class="site-header"><div id="menu-toggle">menu</div><a href="/" class="brand" title="Dart"><img src="/assets/img/logo/logo-white-text.svg" alt="Dart"></a><ul class="navbar"><li><a href="/overview" class="nav-link">Overview</a></li><li class="mainnav__get-started"><a href="/guides" class="nav-link active">Docs</a></li><li><a href="/community" class="nav-link">Community</a></li><li><a href="/#try-dart" class="nav-link">Try Dart</a></li><li><a href="/get-dart" class="nav-link">Get Dart</a></li><li class="searchfield"><form action="/search" class="site-header__search form-inline" id="cse-search-box"><input type="hidden" name="cx" value="011220921317074318178:_yy-tmb5t_i"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="hl" value="en"> <input class="site-header__searchfield form-control search-field" type="search" name="q" id="search-main" autocomplete="off" placeholder="Search" aria-label="Search"></form></li></ul></nav></header><div class="banner">Announcing Dart 3.5 and an updated Dart roadmap! <a href="https://medium.com/dartlang/dart-3-5-6ca36259fa2f" target="_blank">Learn more</a></div><div id="sidenav"><form action="/search/" class="site-header__search form-inline"><input class="site-header__searchfield form-control search-field" type="search" name="q" id="search-side" autocomplete="off" placeholder="Search" aria-label="Search"></form><div class="site-sidebar"><ul class="navbar-nav"><li class="nav-item"><a href="/overview" class="nav-link">Overview</a></li><li class="nav-item"><a href="/community" class="nav-link">Community</a></li><li class="nav-item"><a href="https://dartpad.dev" class="nav-link">Try Dart</a></li><li class="nav-item"><a href="/get-dart" class="nav-link">Get Dart</a></li><li class="nav-item"><a href="/guides" class="nav-link">Docs</a></li><li aria-hidden="true"><div class="sidebar-primary-divider"></div></li></ul><ul class="nav flex-column"><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="false" aria-controls="sidenav-1">Language</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1"><li class="nav-item"><a class="nav-link" href="/language">Introduction</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-2" href="#sidenav-1-2" role="button" aria-expanded="false" aria-controls="sidenav-1-2">Syntax basics</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-2"><li class="nav-item"><a class="nav-link" href="/language/variables">Variables</a></li><li class="nav-item"><a class="nav-link" href="/language/operators">Operators</a></li><li class="nav-item"><a class="nav-link" href="/language/comments">Comments</a></li><li class="nav-item"><a class="nav-link" href="/language/metadata">Metadata</a></li><li class="nav-item"><a class="nav-link" href="/language/libraries">Libraries & imports</a></li><li class="nav-item"><a class="nav-link" href="/language/keywords">Keywords</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-3" href="#sidenav-1-3" role="button" aria-expanded="false" aria-controls="sidenav-1-3">Types</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-3"><li class="nav-item"><a class="nav-link" href="/language/built-in-types">Built-in types</a></li><li class="nav-item"><a class="nav-link" href="/language/records">Records</a></li><li class="nav-item"><a class="nav-link" href="/language/collections">Collections</a></li><li class="nav-item"><a class="nav-link" href="/language/generics">Generics</a></li><li class="nav-item"><a class="nav-link" href="/language/typedefs">Typedefs</a></li><li class="nav-item"><a class="nav-link" href="/language/type-system">Type system</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-4" href="#sidenav-1-4" role="button" aria-expanded="false" aria-controls="sidenav-1-4">Patterns</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-4"><li class="nav-item"><a class="nav-link" href="/language/patterns">Overview & usage</a></li><li class="nav-item"><a class="nav-link" href="/language/pattern-types">Pattern types</a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/dart-patterns-records" target="_blank" rel="noopener">Applied tutorial</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/language/functions">Functions</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-6" href="#sidenav-1-6" role="button" aria-expanded="false" aria-controls="sidenav-1-6">Control flow</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-6"><li class="nav-item"><a class="nav-link" href="/language/loops">Loops</a></li><li class="nav-item"><a class="nav-link" href="/language/branches">Branches</a></li><li class="nav-item"><a class="nav-link" href="/language/error-handling">Error handling</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-7" href="#sidenav-1-7" role="button" aria-expanded="false" aria-controls="sidenav-1-7">Classes & objects</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-7"><li class="nav-item"><a class="nav-link" href="/language/classes">Classes</a></li><li class="nav-item"><a class="nav-link" href="/language/constructors">Constructors</a></li><li class="nav-item"><a class="nav-link" href="/language/methods">Methods</a></li><li class="nav-item"><a class="nav-link" href="/language/extend">Extend a class</a></li><li class="nav-item"><a class="nav-link" href="/language/mixins">Mixins</a></li><li class="nav-item"><a class="nav-link" href="/language/enums">Enums</a></li><li class="nav-item"><a class="nav-link" href="/language/extension-methods">Extension methods</a></li><li class="nav-item"><a class="nav-link" href="/language/extension-types">Extension types</a></li><li class="nav-item"><a class="nav-link" href="/language/callable-objects">Callable objects</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-8" href="#sidenav-1-8" role="button" aria-expanded="false" aria-controls="sidenav-1-8">Class modifiers</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-8"><li class="nav-item"><a class="nav-link" href="/language/class-modifiers">Overview & usage</a></li><li class="nav-item"><a class="nav-link" href="/language/class-modifiers-for-apis">Class modifiers for API maintainers</a></li><li class="nav-item"><a class="nav-link" href="/language/modifier-reference">Reference</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-9" href="#sidenav-1-9" role="button" aria-expanded="false" aria-controls="sidenav-1-9">Concurrency</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-9"><li class="nav-item"><a class="nav-link" href="/language/concurrency">Overview</a></li><li class="nav-item"><a class="nav-link" href="/language/async">Asynchronous support</a></li><li class="nav-item"><a class="nav-link" href="/language/isolates">Isolates</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-1-10" href="#sidenav-1-10" role="button" aria-expanded="false" aria-controls="sidenav-1-10">Null safety</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-1-10"><li class="nav-item"><a class="nav-link" href="/null-safety">Sound null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/migration-guide">Migrating to null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/understanding-null-safety">Understanding null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/unsound-null-safety">Unsound null safety</a></li><li class="nav-item"><a class="nav-link" href="/null-safety/faq">FAQ</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-2" role="button" aria-expanded="false" aria-controls="sidenav-2">Core libraries</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-2"><li class="nav-item"><a class="nav-link" href="/libraries">Overview</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-core">dart:core</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-async">dart:async</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-math">dart:math</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-convert">dart:convert</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-io">dart:io</a></li><li class="nav-item"><a class="nav-link" href="/libraries/dart-html">dart:html</a></li><div class="dropdown-divider"></div><li class="nav-item"><a class="nav-link" href="/libraries/collections/iterables">Iterable collections</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-2-10" href="#sidenav-2-10" role="button" aria-expanded="false" aria-controls="sidenav-2-10">Asynchronous programming</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-2-10"><li class="nav-item"><a class="nav-link" href="/libraries/async/async-await">Tutorial</a></li><li class="nav-item"><a class="nav-link" href="/libraries/async/futures-error-handling">Futures and error handling</a></li><li class="nav-item"><a class="nav-link" href="/libraries/async/using-streams">Using streams</a></li><li class="nav-item"><a class="nav-link" href="/libraries/async/creating-streams">Creating streams</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-3" role="button" aria-expanded="false" aria-controls="sidenav-3">Effective Dart</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-3"><li class="nav-item"><a class="nav-link" href="/effective-dart">Overview</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/style">Style</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/documentation">Documentation</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/usage">Usage</a></li><li class="nav-item"><a class="nav-link" href="/effective-dart/design">Design</a></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4">Packages</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-4"><li class="nav-item"><a class="nav-link" href="/tools/pub/packages">How to use packages</a></li><li class="nav-item"><a class="nav-link" href="/resources/useful-packages">Commonly used packages</a></li><li class="nav-item"><a class="nav-link" href="/guides/libraries/create-packages">Creating packages</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/publishing">Publishing packages</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/writing-package-pages">Writing package pages</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-4-6" href="#sidenav-4-6" role="button" aria-expanded="false" aria-controls="sidenav-4-6">Package reference</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-4-6"><li class="nav-item"><a class="nav-link" href="/tools/pub/dependencies">Dependencies</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/glossary">Glossary</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/package-layout">Package layout conventions</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/environment-variables">Pub environment variables</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/pubspec">Pubspec file</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/troubleshoot">Troubleshooting pub</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/verified-publishers">Verified publishers</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/security-advisories">Security advisories</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/versioning">Versioning</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/custom-package-repositories">Custom package repositories</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/guides/libraries/private-files">What not to commit</a></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5">Development</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-5"><li class="nav-item"><a class="nav-link" href="/guides/json">JSON</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/numbers">Number representation</a></li><li class="nav-item"><a class="nav-link" href="/resources/google-apis">Google APIs</a></li><li class="nav-item"><a class="nav-link" href="/multiplatform-apps">Multi-platform apps</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-5" href="#sidenav-5-5" role="button" aria-expanded="false" aria-controls="sidenav-5-5">Command-line & server apps</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-5-5"><li class="nav-item"><a class="nav-link" href="/server">Overview</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/get-started">Get started</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/cmdline">Write command-line apps</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/fetch-data">Fetch data from the internet</a></li><li class="nav-item"><a class="nav-link" href="/tutorials/server/httpserver">Write HTTP servers</a></li><li class="nav-item"><a class="nav-link" href="/server/libraries">Libraries & packages</a></li><li class="nav-item"><a class="nav-link" href="/server/google-cloud">Google Cloud</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-6" href="#sidenav-5-6" role="button" aria-expanded="false" aria-controls="sidenav-5-6">Web apps</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-5-6"><li class="nav-item"><a class="nav-link" href="/web">Overview</a></li><li class="nav-item"><a class="nav-link" href="/web/get-started">Get started</a></li><li class="nav-item"><a class="nav-link" href="/web/deployment">Deployment</a></li><li class="nav-item"><a class="nav-link" href="/web/libraries">Libraries & packages</a></li><li class="nav-item"><a class="nav-link" href="/web/wasm">Wasm compilation</a></li></ul></li><li class="nav-item"><a class="nav-link" href="/guides/environment-declarations">Environment declarations</a></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-6" role="button" aria-expanded="false" aria-controls="sidenav-6">Interoperability</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-6"><li class="nav-item"><a class="nav-link" href="/interop/c-interop">C interop</a></li><li class="nav-item"><a class="nav-link" href="/interop/objective-c-interop">Objective-C & Swift interop</a></li><li class="nav-item"><a class="nav-link" href="/interop/java-interop">Java & Kotlin interop</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-6-4" href="#sidenav-6-4" role="button" aria-expanded="false" aria-controls="sidenav-6-4">JavaScript interop</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-6-4"><li class="nav-item"><a class="nav-link" href="/interop/js-interop">Overview</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/usage">Usage</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/js-types">JS types</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/tutorials">Tutorials</a></li><li class="nav-item"><a class="nav-link" href="/interop/js-interop/past-js-interop">Past JS interop</a></li><div class="dropdown-divider"></div><li class="nav-item"><a class="nav-link" href="/interop/js-interop/package-web">Web interop</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsed collapsible" data-toggle="collapse" href="#sidenav-7" role="button" aria-expanded="false" aria-controls="sidenav-7">Tools & techniques</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7"><li class="nav-item"><a class="nav-link" href="/tools">Overview</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-2" href="#sidenav-7-2" role="button" aria-expanded="false" aria-controls="sidenav-7-2">Editors & debuggers</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-2"><li class="nav-item"><a class="nav-link" href="/tools/jetbrains-plugin">IntelliJ & Android Studio</a></li><li class="nav-item"><a class="nav-link" href="/tools/vs-code">VS Code</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-devtools">Dart DevTools</a></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-2-4" href="#sidenav-7-2-4" role="button" aria-expanded="false" aria-controls="sidenav-7-2-4">DartPad</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-2-4"><li class="nav-item"><a class="nav-link" href="/tools/dartpad">Overview</a></li><li class="nav-item"><a class="nav-link" href="/tools/dartpad/troubleshoot">Troubleshooting DartPad</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-3" href="#sidenav-7-3" role="button" aria-expanded="false" aria-controls="sidenav-7-3">Command-line tools</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-3"><li class="nav-item"><a class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-7-3-1" href="#sidenav-7-3-1" role="button" aria-expanded="true" aria-controls="sidenav-7-3-1">Dart SDK</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-7-3-1"><li class="nav-item"><a class="nav-link" href="/tools/sdk">Overview</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-tool">dart</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-analyze">dart analyze</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-compile">dart compile</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-create">dart create</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-doc">dart doc</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-fix">dart fix</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-format">dart format</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-info">dart info</a></li><li class="nav-item"><a class="nav-link" href="/tools/pub/cmd">dart pub</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-run">dart run</a></li><li class="nav-item"><a class="nav-link" href="/tools/dart-test">dart test</a></li><li class="nav-item"><a class="nav-link" href="/tools/dartaotruntime">dartaotruntime</a></li><li class="nav-item"><a class="nav-link" href="/tools/experiment-flags">Experiment flags</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-7-3-2" href="#sidenav-7-3-2" role="button" aria-expanded="true" aria-controls="sidenav-7-3-2">Other command-line tools</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-7-3-2"><li class="nav-item"><a class="nav-link" href="/tools/build_runner">build_runner</a></li><li class="nav-item"><a class="nav-link" href="/tools/webdev">webdev</a></li></ul></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-4" href="#sidenav-7-4" role="button" aria-expanded="false" aria-controls="sidenav-7-4">Static analysis</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-4"><li class="nav-item"><a class="nav-link" href="/tools/analysis">Customizing static analysis</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/sound-problems">Fixing common type problems</a></li><li class="nav-item"><a class="nav-link" href="/tools/non-promotion-reasons">Fixing type promotion failures</a></li><li class="nav-item"><a class="nav-link" href="/tools/linter-rules">Linter rules</a></li><li class="nav-item"><a class="nav-link" href="/tools/diagnostic-messages">Diagnostic messages</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-7-5" href="#sidenav-7-5" role="button" aria-expanded="false" aria-controls="sidenav-7-5">Testing & optimization</a><ul class="nav flex-column flex-nowrap collapse" id="sidenav-7-5"><li class="nav-item"><a class="nav-link" href="/guides/testing">Testing</a></li><li class="nav-item"><a class="nav-link" href="/web/debugging">Debugging web apps</a></li></ul></li></ul></li><li aria-hidden="true"><div class="sidebar-primary-divider"></div></li><li class="nav-item"><a class="nav-link active collapsible" data-toggle="collapse" href="#sidenav-9" role="button" aria-expanded="true" aria-controls="sidenav-9">Resources</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-9"><li class="nav-item"><a class="nav-link" href="/resources/dart-cheatsheet">Language cheatsheet</a></li><li class="nav-item"><a class="nav-link" href="/resources/breaking-changes">Breaking changes</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/evolution">Language evolution</a></li><li class="nav-item"><a class="nav-link" href="/guides/language/spec">Language specification</a></li><li class="nav-item"><a class="nav-link" href="/resources/dart-3-migration">Dart 3 migration guide</a></li><li class="nav-item"><a class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-9-6" href="#sidenav-9-6" role="button" aria-expanded="true" aria-controls="sidenav-9-6">Coming from ...</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-9-6"><li class="nav-item"><a class="nav-link active" href="/resources/coming-from/js-to-dart">JavaScript to Dart</a></li><li class="nav-item"><a class="nav-link" href="/resources/coming-from/swift-to-dart">Swift to Dart</a></li></ul></li><div class="dropdown-divider"></div><li class="nav-item"><a class="nav-link" href="/resources/faq">FAQ</a></li><li class="nav-item"><a class="nav-link" href="/resources/glossary">Glossary</a></li><li class="nav-item"><a class="nav-link" href="/resources/books">Books</a></li><li class="nav-item"><a class="nav-link" href="/resources/videos">Videos</a></li><li class="nav-item"><a class="nav-link" href="/tutorials">Tutorials</a></li></ul></li><li class="nav-item"><a class="nav-link collapsible" data-toggle="collapse" href="#sidenav-10" role="button" aria-expanded="true" aria-controls="sidenav-10">Related sites</a><ul class="nav flex-column flex-nowrap collapse show" id="sidenav-10"><li class="nav-item"><a class="nav-link" href="https://api.dart.dev" target="_blank" rel="noopener">API reference</a></li><li class="nav-item"><a class="nav-link" href="https://medium.com/dartlang" target="_blank" rel="noopener">Blog</a></li><li class="nav-item"><a class="nav-link" href="https://dartpad.dev" target="_blank" rel="noopener">DartPad (online editor)</a></li><li class="nav-item"><a class="nav-link" href="https://flutter.dev" target="_blank" rel="noopener">Flutter</a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev" target="_blank" rel="noopener">Package site</a></li></ul></li></ul></div></div><main id="page-content"><div id="site-toc--side" class="site-toc"><header class="site-toc__title">Contents</header><ul class="section-nav"><li class="toc-entry nav-item"><a class="nav-link" href="#conventions-and-linting">Conventions and linting</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#built-in-types">Built-in types</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#primitive-types">Primitive Types</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#variables">Variables</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#final-and-const">Final and const</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#null-safety">Null safety</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#nullable-vs-non-nullable-types">Nullable vs non-nullable types</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#null-aware-operators">Null-aware operators</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#functions">Functions</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#arrow-syntax">Arrow syntax</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#parameters">Parameters</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#first-class-functions">First-class functions</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#anonymous-functions">Anonymous functions</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#generator-functions">Generator functions</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#statements">Statements</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#control-flow-ifelse-for-while-switch">Control flow (if/else, for, while, switch)</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#operators">Operators</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#assignment-operators">Assignment operators</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#cascades-operator">Cascades (.. operator)</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#collections">Collections</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#lists">Lists</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#sets">Sets</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#maps">Maps</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#unmodifiable">Unmodifiable</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#spread-operator">Spread operator</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#collection-iffor">Collection if/for</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#asynchrony">Asynchrony</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#futures">Futures</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#streams">Streams</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#classes">Classes</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#this-context">"this" context</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#constructors">Constructors</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#methods">Methods</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#extending-classes">Extending classes</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#classes-as-interfaces">Classes as interfaces</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#abstract-classes-and-methods">Abstract classes and methods</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#mixins">Mixins</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#extensions">Extensions</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#getters-and-setters">Getters and setters</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#public-and-private-members">Public and private members</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#late-variables">Late variables</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#generics">Generics</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#generic-methods">Generic methods</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#generic-classes">Generic classes</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#restricting-generics">Restricting generics</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#generics-in-literals">Generics in literals</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#doc-comments">Doc comments</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#next-steps">Next steps</a></li></ul></div><article><div class="content"><div id="site-content-title"><h1>Learning Dart as a JavaScript developer</h1></div><div id="site-toc--inline" class="site-toc toc-collapsible toc-collapsed"><header class="site-toc__title">Contents keyboard_arrow_down keyboard_arrow_up</header><ul class="section-nav"><li class="toc-entry"><a href="#conventions-and-linting">Conventions and linting</a></li><li class="toc-entry"><a href="#built-in-types">Built-in types</a><ul><li class="toc-entry"><a href="#primitive-types">Primitive Types</a></li></ul></li><li class="toc-entry"><a href="#variables">Variables</a><ul><li class="toc-entry"><a href="#final-and-const">Final and const</a></li></ul></li><li class="toc-entry"><a href="#null-safety">Null safety</a><ul><li class="toc-entry"><a href="#nullable-vs-non-nullable-types">Nullable vs non-nullable types</a></li><li class="toc-entry"><a href="#null-aware-operators">Null-aware operators</a></li><li class="toc-entry"><a href="#functions">Functions</a></li><li class="toc-entry"><a href="#arrow-syntax">Arrow syntax</a></li><li class="toc-entry"><a href="#parameters">Parameters</a></li><li class="toc-entry"><a href="#first-class-functions">First-class functions</a></li><li class="toc-entry"><a href="#anonymous-functions">Anonymous functions</a></li><li class="toc-entry"><a href="#generator-functions">Generator functions</a></li></ul></li><li class="toc-entry"><a href="#statements">Statements</a><ul><li class="toc-entry"><a href="#control-flow-ifelse-for-while-switch">Control flow (if/else, for, while, switch)</a></li><li class="toc-entry"><a href="#operators">Operators</a></li><li class="toc-entry"><a href="#assignment-operators">Assignment operators</a></li><li class="toc-entry"><a href="#cascades-operator">Cascades (.. operator)</a></li></ul></li><li class="toc-entry"><a href="#collections">Collections</a><ul><li class="toc-entry"><a href="#lists">Lists</a></li><li class="toc-entry"><a href="#sets">Sets</a></li><li class="toc-entry"><a href="#maps">Maps</a></li><li class="toc-entry"><a href="#unmodifiable">Unmodifiable</a></li><li class="toc-entry"><a href="#spread-operator">Spread operator</a></li><li class="toc-entry"><a href="#collection-iffor">Collection if/for</a></li></ul></li><li class="toc-entry"><a href="#asynchrony">Asynchrony</a><ul><li class="toc-entry"><a href="#futures">Futures</a></li><li class="toc-entry"><a href="#streams">Streams</a></li></ul></li><li class="toc-entry"><a href="#classes">Classes</a><ul><li class="toc-entry"><a href="#this-context">"this" context</a></li><li class="toc-entry"><a href="#constructors">Constructors</a></li><li class="toc-entry"><a href="#methods">Methods</a></li><li class="toc-entry"><a href="#extending-classes">Extending classes</a></li><li class="toc-entry"><a href="#classes-as-interfaces">Classes as interfaces</a></li><li class="toc-entry"><a href="#abstract-classes-and-methods">Abstract classes and methods</a></li><li class="toc-entry"><a href="#mixins">Mixins</a></li><li class="toc-entry"><a href="#extensions">Extensions</a></li><li class="toc-entry"><a href="#getters-and-setters">Getters and setters</a></li><li class="toc-entry"><a href="#public-and-private-members">Public and private members</a></li><li class="toc-entry"><a href="#late-variables">Late variables</a></li></ul></li><li class="toc-entry"><a href="#generics">Generics</a><ul><li class="toc-entry"><a href="#generic-methods">Generic methods</a></li><li class="toc-entry"><a href="#generic-classes">Generic classes</a></li><li class="toc-entry"><a href="#restricting-generics">Restricting generics</a></li><li class="toc-entry"><a href="#generics-in-literals">Generics in literals</a></li></ul></li><li class="toc-entry"><a href="#doc-comments">Doc comments</a></li><li class="toc-entry"><a href="#next-steps">Next steps</a></li></ul>more_horiz</div>This guide aims to leverage your JavaScript programming knowledge when learning Dart. It showcases key similarities and differences in both languages, and introduces Dart concepts that are unsupported in JavaScript. As a JavaScript developer, Dart should feel quite familiar, as both languages share many concepts.Like JavaScript, Dart runs on an event loop, so both languages execute code in a similar way. For example, asynchronous concepts like futures (promises in JavaScript) and the <code>async/await</code> syntax are very similar.Dart is strongly typed, unlike JavaScript. If you have used with TypeScript or Flow, this should simplify learning Dart. If you've mostly worked with pure JavaScript, it might be more of an adjustment. With strong typing, Dart catches many errors before compiling that might exist in JavaScript code.Dart enables null safety by default. JavaScript doesn't support null safety. As a JavaScript developer, it might take a while to learn how to write null safe code, but the trade-off is better protection against null reference exceptions that are detected even before compiling Dart code. (Thereby avoiding those dreaded <code>TypeError</code>s that occur when doing operations on a JavaScript variable that turns out to be null.)<div class="header-wrapper"><h2 id="conventions-and-linting">Conventions and linting</h2><a class="heading-link" href="#conventions-and-linting" aria-label="Link to 'Conventions and linting' section">#</a></div>JavaScript and Dart both have linting tools to enforce standard conventions. While JavaScript offers many tools, standards, and configurations, Dart has one official set of layout and style conventions plus a linter to simplify compliance. The Dart analyzer lints code along with providing more analytical functions. To customize the lint rules for your project, follow the <a href="/tools/analysis">Customizing static analysis</a> instructions.Dart provides <a href="/tools/dart-fix"><code>dart fix</code></a> to find and fix errors.Dart also provides a code formatter similar to JavaScript tools like <a href="https://prettier.io/">Prettier</a>. To format code in any Dart project, run <a href="/tools/dart-format"><code>dart format</code></a> on your command line. The IDE plugins for Dart and Flutter also provide this ability.Dart supports trailing commas for comma-separated lists of collections, parameters, or arguments. When you add the trailing comma, the formatter places each list item on its own line. When you believe your list may have more items at a later date, add the trailing comma. Avoid adding the trailing comma for the formatting benefit alone.JavaScript supports trailing commas in list and map literals only.<aside class="alert alert-secondary"><div class="alert-header">To learn more about:</div><div class="alert-content"><ul><li>Using commas to make your code read more like HTML, read <a href="https://docs.flutter.dev/development/tools/formatting#using-trailing-commas">Using trailing commas</a> on flutter.dev.</li><li>Linting Dart, read <a href="/tools/linter-rules">Linter rules</a>.</li><li>Writing good Dart code, read <a href="/effective-dart">Effective Dart</a>.</li></ul></div></aside><div class="header-wrapper"><h2 id="built-in-types">Built-in types</h2><a class="heading-link" href="#built-in-types" aria-label="Link to 'Built-in types' section">#</a></div>Both JavaScript and Dart categorize their data into types. Every variable has an associated type. The type determines the kind of value the variable can store and what operations can be performed on these values. Dart differs from JavaScript in that it assigns a static type to every expression and variable. The static type predicts the runtime type of the values of a variable, or of the value of an expression. This means that Dart apps have sound static typing.JavaScript provides primitive types <code>num</code>, <code>string</code>, and <code>boolean</code> and the <code>null</code> value as well as arrays and a <code>Map</code> type.Dart supports the following built-in types:<ul><li>Numbers (<code>num</code>, <code>int</code>, <code>double</code>)</li><li>Strings (<code>String</code>)</li><li>Booleans (<code>bool</code>)</li><li>Lists (<code>List</code>, also known as arrays)</li><li>Sets (<code>Set</code>)</li><li>Maps (<code>Map</code>)</li><li>Symbols (<code>Symbol</code>)</li><li>The value <code>null</code> (<code>Null</code>)</li></ul>To learn more, check out <a href="/language/built-in-types">Built-in types</a> in the <a href="/guides/language">Dart Language Tour</a>.All non-<code>Null</code> types in Dart are subtypes of Object. All values are also objects. Dart doesn't use "primitive types" like JavaScript. By contrast, Dart normalizes or canonicalizes number, boolean and <code>null</code> values. This means only one <code>int</code> value with the numerical value <code>1</code> exists.<aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">JavaScript has two equality operators, <code>==</code> and <code>===</code>. The <code>==</code> operator performs the equality test after doing any necessary type conversions on or to primitive values. The <code>===</code> operator doesn't perform type conversions. Dart uses the <code>identical</code> function to check if two values are the same object, and the <code>==</code> operator to check whether the objects consider themselves as equal.</div></aside>For example: The equals operator <code>==</code> and the <code>identical()</code> method return <code>true</code> for the same values of number types. Review the example shown in the following code:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var a = 2; var b = 1 + 1; print(a == b); // Prints true print(identical(a, b)); // Prints true; only one "2" object exists</code></pre></div></div><div class="header-wrapper"><h3 id="primitive-types">Primitive Types</h3><a class="heading-link" href="#primitive-types" aria-label="Link to 'Primitive Types' section">#</a></div>This section covers how Dart represents primitive types from JavaScript.<div class="header-wrapper"><h4 id="numbers">Numbers</h4><a class="heading-link" href="#numbers" aria-label="Link to 'Numbers' section">#</a></div>Dart has three data types for holding numbers:<dl><dt><code>num</code></dt><dd>The equivalent to the generic number type in JavaScript.</dd><dt><code>int</code></dt><dd>A numeric value without a fractional part.</dd><dt><code>double</code></dt><dd>Any 64-bit (double-precision) floating point number.</dd></dl>The Dart API includes all these types as classes. Both the <code>int</code> and <code>double</code> types share <code>num</code> as their parent class:<img src="/assets/img/guides/number-classes.png" alt="num subclasses Object and int and double each subclass num">As Dart considers numbers as objects, numbers can expose their own utility functions as object methods. You don't need to use an additional object to apply a function to a number.For example, to round a <code>double</code> to an integer:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>let rounded = Math.round(2.5);</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var rounded = 2.5.round();</code></pre></div></div><div class="header-wrapper"><h4 id="strings">Strings</h4><a class="heading-link" href="#strings" aria-label="Link to 'Strings' section">#</a></div>Strings in Dart work like strings in JavaScript. To write a string literal, enclose it in single (<code>'</code>) or double (<code>"</code>) quotation marks. The majority of Dart developers use single quotes, but the language enforces no standard. Use double quotation marks if you don't want to escape single quotes within the string.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var a = 'This is a string.';</code></pre></div></div><div class="header-wrapper"><h5 id="escaping-special-characters">Escaping special characters</h5><a class="heading-link" href="#escaping-special-characters" aria-label="Link to 'Escaping special characters' section">#</a></div>To include a character with another meaning in a string, like a <code>$</code> used for string interpolation, you must escape that character. Escaping special characters in Dart works like JavaScript and most other languages. To escape special characters, precede that character with the backslash character (<code>\</code>).The following code shows some examples.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final singleQuotes = 'I\'m learning Dart'; // I'm learning Dart final doubleQuotes = "Escaping the \" character"; // Escaping the " character final dollarEscape = 'The price is \$3.14.'; // The price is $3.14. final backslashEscape = 'The Dart string escape character is \\.'; final unicode = '\u{1F60E}'; // 😎, Unicode scalar U+1F60E</code></pre></div></div><aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">You can use four-digit hexadecimal characters with or without curly braces. To learn more about working with unicode characters, see <a href="/language/built-in-types#runes-and-grapheme-clusters">Runes and grapheme clusters</a>.</div></aside><div class="header-wrapper"><h5 id="string-interpolation">String interpolation</h5><a class="heading-link" href="#string-interpolation" aria-label="Link to 'String interpolation' section">#</a></div>JavaScript supports template literals. These use backtick (<code>`</code>) character delimiters for the following reasons:<ul><li>To allow for multiline strings</li><li>To interpolate strings with embedded expressions</li><li>To create special constructs called tagged templates</li></ul>In Dart, you don't need to enclose a string in backticks to concatenate strings or use interpolations within string literals.To learn more, check out <a href="/language/built-in-types#strings">Strings</a> in the Dart Language Tour.As in JavaScript template literals, you can use the <code>${<expression>}</code> syntax to insert expressions into a string literal. Dart uses this syntax and allows you to omit the curly braces when the expression uses a single identifier.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var food = 'bread'; var str = 'I eat $food'; // I eat bread var str = 'I eat ${food}'; // I eat bread</code></pre></div></div><div class="header-wrapper"><h4 id="string-concatenation-and-multiline-declaration">String concatenation and multiline declaration</h4><a class="heading-link" href="#string-concatenation-and-multiline-declaration" aria-label="Link to 'String concatenation and multiline declaration' section">#</a></div>In JavaScript, you can define multiline strings using template literals. Dart has two ways to define multiline strings.<ol><li>Using implicit string concatenation: Dart concatenates any neighboring string literals, even when spread over multiple lines:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final s1 = 'String ' 'concatenation' " even works over line breaks.";</code></pre></div></div></li><li>Using a multi line string literal: When using three quotation marks (either single or double) on either side of the string, the literal can span multiple lines.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final s2 = ''' You can create multiline strings like this one. '''; final s3 = """ This is also a multiline string.""";</code></pre></div></div></li></ol><div class="header-wrapper"><h4 id="equality">Equality</h4><a class="heading-link" href="#equality" aria-label="Link to 'Equality' section">#</a></div>Dart considers two strings equal when they contain the same sequence of code units. To determine if two strings have the same sequences, use the equal-to operator (<code>==</code>).<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final s1 = 'String ' 'concatenation' " works even over line breaks."; assert(s1 == 'String concatenation works even over ' 'line breaks.');</code></pre></div></div><div class="header-wrapper"><h4 id="booleans">Booleans</h4><a class="heading-link" href="#booleans" aria-label="Link to 'Booleans' section">#</a></div>Boolean values in both Dart and Javascript express a binary condition. These two values represent whether a value or expression is <code>true</code> or <code>false</code>. You can return the values using the literals <code>true</code> and <code>false</code>, or produced them using expressions like <code>x < 5</code> or <code>y == null</code>.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>let isBananaPeeled = false;</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var isBananaPeeled = false;</code></pre></div></div><div class="header-wrapper"><h2 id="variables">Variables</h2><a class="heading-link" href="#variables" aria-label="Link to 'Variables' section">#</a></div>Variables in Dart work like variables in JavaScript, with two exceptions:<ol><li>Each variable has a type.</li><li>Dart scopes all variables at the block level, like <code>let</code> and <code>const</code> variables in JavaScript.</li></ol>A Dart variable gets its type in one of two ways:<ol><li>Declared: A type written in the declaration.</li><li>Inferred: An expression used to initialize the variable. By <a href="/effective-dart/design#dont-redundantly-type-annotate-initialized-local-variables">convention</a>, use <code>var</code> or <code>final</code> when the analyzer can infer the type.</li></ol><div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>// Declare and initialize a variable at once let name = "bob";</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Declare a variable with a specific type // when you don't provide an initial value String name; // Declare and initialize a variable // at the same time and Dart infers // the type var name = 'bob';</code></pre></div></div>Variables can only accept values of their type.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var name = 'bob'; name = 5; // Forbidden, as `name` has type `String`.</code></pre></div></div>If you don't provide an initial value or explicit type, Dart infers the variable's type to be the catch-all type <code>dynamic</code>.Like JavaScript variables, you can assign any value to Dart variables that use the <code>dynamic</code> type.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>// Declare a variable let name; // Initialize the variable name = "bob";</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Declare a variable without a type or assigned value // and Dart infers the 'dynamic' type var name; // Initialize the variable and the type remains `dynamic` name = 'bob'; name = 5; // Allowed, as `name` has type `dynamic`.</code></pre></div></div><div class="header-wrapper"><h3 id="final-and-const">Final and const</h3><a class="heading-link" href="#final-and-const" aria-label="Link to 'Final and const' section">#</a></div>Both JavaScript and Dart use variable modifiers. Both use <code>const</code>, but differ in how <code>const</code> works. Where JavaScript would use <code>const</code>, Dart uses <code>final</code>.When you add <code>final</code> to a Dart variable or <code>const</code> to a JavaScript variable, you must initialize the variable before other code can read its value. Once initialized, you can't change these variables' references.When Dart uses <code>const</code>, it refers to special values that it creates when compiling. Dart uses limited expressions to create these immutable values. These expressions cannot have side effects. Under these conditions, the compiler can then predict the precise value of a constant variable or expression, not just its static type.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final String name; // Cannot read name here, not initialized. if (useNickname) { name = "Bob"; } else { name = "Robert"; } print(name); // Properly initialized here.</code></pre></div></div><aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">When you create an object, the class constructor must initialize the <code>final</code> instance variables. This ensures that these variables have a value before anyone can read them.Learn more in the <a href="#classes">Classes</a> section.</div></aside>In Dart, constant variables must contain constant values. Non-constant variables can contain constant values that you can also mark as <code>const</code>.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var foo = const []; // foo is not constant, but the value it points to is. // You can reassign foo to a different list value, // but its current list value cannot be altered. const baz = []; // Equivalent to `const []`</code></pre></div></div>Likewise, classes can have their own <code>const</code> constructors that produce immutable instances.You can't modify a <code>const</code> variable in JavaScript or Dart. JavaScript does allow you to modify a <code>const</code> object's fields, but Dart does not.To learn more, see the <a href="#classes">Classes</a> section.<div class="header-wrapper"><h2 id="null-safety">Null safety</h2><a class="heading-link" href="#null-safety" aria-label="Link to 'Null safety' section">#</a></div>Unlike JavaScript, Dart supports null safety. In Dart, all types default to non-nullable. This benefits Dart developers because Dart catches null reference exceptions when writing code, rather than at runtime.<div class="header-wrapper"><h3 id="nullable-vs-non-nullable-types">Nullable vs non-nullable types</h3><a class="heading-link" href="#nullable-vs-non-nullable-types" aria-label="Link to 'Nullable vs non-nullable types' section">#</a></div>None of the variables in the following code example can be <code>null</code>.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// In null-safe Dart, none of these can ever be null. var i = 42; // Inferred to be an int. String name = getFileName(); final b = Foo(); // Foo() invokes a constructor</code></pre></div></div>To indicate that a variable might have the value <code>null</code>, add <code>?</code> to its type declaration:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>int? aNullableInt = null;</code></pre></div></div>The same goes for any other type declaration, such as a function declaration:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>String? returnsNullable() { return random.nextDouble() < 0.5 ? 'Sometimes null!' : null; } String returnsNonNullable() { return 'Never null!'; }</code></pre></div></div><div class="header-wrapper"><h3 id="null-aware-operators">Null-aware operators</h3><a class="heading-link" href="#null-aware-operators" aria-label="Link to 'Null-aware operators' section">#</a></div>Dart supports several operators to deal with nullability. As in JavaScript, Dart supports the null assignment operator (<code>??=</code>), null-coalescing operator (<code>??</code>), and optional chaining operator (<code>?.</code>). These operators work the same as JavaScript.<div class="header-wrapper"><h4 id="operator">! Operator</h4><a class="heading-link" href="#operator" aria-label="Link to '! Operator' section">#</a></div>In cases where a nullable variable or expression might be non-null, you can tell the compiler to repress any compile time errors using the (<code>!</code>) operator. Place this operator after the expression.Don't confuse this with Dart's not (<code>!</code>) operator, which uses the same symbol but place before the expression.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>int? a = 5; int b = a; // Not allowed. int b = a!; // Allowed.</code></pre></div></div>At runtime, if a turns out to be <code>null</code>, a runtime error occurs.Like the <code>?.</code> operator, use the <code>!</code> operator when accessing properties or methods on an object:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>myObject!.someProperty; myObject!.someMethod();</code></pre></div></div>If <code>myObject</code> is <code>null</code> at runtime, a runtime error occurs.<div class="header-wrapper"><h3 id="functions">Functions</h3><a class="heading-link" href="#functions" aria-label="Link to 'Functions' section">#</a></div>While Dart's functions work much the same as their counterparts in JavaScript, they do have some additional features, and some minor syntax differences when declaring them. Similar to JavaScript, you can declare functions pretty much anywhere, whether at the top level, as a class field, or in the local scope.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>// On the top level function multiply(a, b) { return a * b; } // As a class field class Multiplier { multiply(a, b) { return a * b; } } // In a local scope function main() { function multiply(a, b) { return a * b; } console.log(multiply(3, 4)); }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// On the top level int multiply(a, b) { return a * b; } // As a class field class Multiplier { multiply(a, b) { return a * b; } } // In a local scope main() { multiply(a, b) { return a * b; } print(multiply(3, 4)); }</code></pre></div></div><div class="header-wrapper"><h3 id="arrow-syntax">Arrow syntax</h3><a class="heading-link" href="#arrow-syntax" aria-label="Link to 'Arrow syntax' section">#</a></div>Both Dart and JavaScript support arrow syntax (<code>=></code>), but differ in how they support it. In Dart, you can only use the arrow syntax when the function contains a single expression or return statement.For example, the following <code>isNoble</code> functions are equivalent:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>bool isNoble(int atomicNumber) { return _nobleGases[atomicNumber] != null; }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;</code></pre></div></div><div class="header-wrapper"><h3 id="parameters">Parameters</h3><a class="heading-link" href="#parameters" aria-label="Link to 'Parameters' section">#</a></div>In JavaScript, all parameters can be positional parameters. By default, Dart requires you to pass all parameters as arguments to functions.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>int multiply(int a, int b) { return a * b; } main() { multiply(3, 5); // Valid. All parameters are provided. multiply(3); // Invalid. All parameters must be provided. }</code></pre></div></div>This can change in two situations:<ol><li>The positional parameters are marked as optional.</li><li>The parameters are named and not marked as required.</li></ol>To define optional positional parameters, enclose them in square brackets following any required positional parameters. You can't follow optional parameters with required parameters.Due to null safety, optional positional parameters must have a default value or be marked as nullable. To learn more, see the preceding section about <a href="#null-safety">null safety</a>.The following code has one valid and two invalid examples of functions that define optional positional parameters.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Valid: `b` has a default value of 5. `c` is marked as nullable. multiply(int a, [int b = 5, int? c]) { ... } // Invalid: a required positional parameter follows an optional one. multiply(int a, [int b = 5], int c) { ... } // Invalid: Neither optional positional parameter has a default // value or has been flagged as nullable. multiply(int a, [int b, int c]) { ... }</code></pre></div></div>The following example shows how to call a function with optional parameters:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>multiply(int a, [int b = 5, int? c]) { ... } main() { // All are valid function calls. multiply(3); multiply(3, 5); multiply(3, 5, 7); }</code></pre></div></div>Dart supports named parameters. These don't have to be provided in the order they're defined, as with positional parameters. You refer to them by name instead. By default, these are optional, unless they're flagged as required. Named parameters are defined by surrounding them with curly braces. You can combine named parameters with required positional parameters—in this scenario, the named parameters are always placed after positional. When calling a function with named parameters, pass values by prefixing the passed value with the name of the parameter, separated by a colon. For example, <code>f(namedParameter: 5)</code>.Again, with null safety, named parameters that are not flagged as required either need to have a default value or be flagged as nullable.The following code defines a function with named parameters:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Valid: // - `a` has been flagged as required // - `b` has a default value of 5 // - `c` is marked as nullable // - Named parameters follow the positional one multiply(bool x, {required int a, int b = 5, int? c}) { ... }</code></pre></div></div>The following examples call a function with named parameters:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// All are valid function calls. // Beyond providing the required positional parameter: multiply(false, a: 3); // Only provide required named parameters multiply(false, a: 3, b: 9); // Override default value of `b` multiply(false, c: 9, a: 3, b: 2); // Provide all named parameters out of order</code></pre></div></div><div class="header-wrapper"><h3 id="first-class-functions">First-class functions</h3><a class="heading-link" href="#first-class-functions" aria-label="Link to 'First-class functions' section">#</a></div>JavaScript and Dart treat functions as first-class citizens. This means that Dart treats functions as any other object. For example, the following code shows how to pass a function as a parameter to another function:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>void printElement(int element) { print(element); } var list = [1, 2, 3]; // Pass printElement as a parameter. list.forEach(printElement);</code></pre></div></div><div class="header-wrapper"><h3 id="anonymous-functions">Anonymous functions</h3><a class="heading-link" href="#anonymous-functions" aria-label="Link to 'Anonymous functions' section">#</a></div>JavaScript and Dart both support <a href="https://en.wikipedia.org/wiki/Anonymous_function">anonymous functions</a>, or functions without a name. As with named functions, you can pass anonymous functions like any other value. For example, store anonymous functions in a variable, pass them as an argument to another function, or return them from another function.JavaScript has two ways to declare an anonymous function:<ol><li>Use a standard function expression</li><li>Use arrow syntax</li></ol>Likewise, Dart also has two ways to declare anonymous functions. Both work in a similar manner to the JavaScript arrow expression. Dart's anonymous functions do not support the extra functionality that comes with regular function expressions. For example, JavaScript's support for a function expression acting like a constructor, or creating a custom binding to this.To learn more, see the <a href="#classes">Classes</a> section.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>// A regular function expression // assigned to a variable let funcExpr = function(a, b) { return a * b; } // The same anonymous function // expressed as an arrow // function with curly braces. let arrowFuncExpr = (a, b) => { return a * b; } // An arrow function with only // one return statement as // its contents does not // require a block. let arrowFuncExpr2 = (a, b) => a * b;</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Assign an anonymous function // to a variable. var blockFunc = optionalCallback ?? (int a, int b) { return a * b; }; // For an expression with only a return statement, // you can use the arrow syntax: var singleFunc = (int a, int b) => a * b;</code></pre></div></div>As with JavaScript, you can pass anonymous functions to other functions. Developers often pass anonymous functions when using the <code>map</code> function for arrays and lists:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>// returns [4, 5, 6] [1, 2, 3].map(e => e + 3); // returns [5, 7, 9] [1, 2, 3].map(e => { e *= 2; return e + 3; });</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// returns [4, 5, 6] [1, 2, 3].map((e) => e + 3).toList(); // returns [5, 7, 9] var list2 = [1, 2, 3].map((e) { e *= 2; return e + 3; }).toList();</code></pre></div></div><aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">The <code>map</code> function in the previous examples returns an <code>Iterable<T></code>, rather than a <code>List<T></code>. The <code>toList</code> function converts the returned <code>Iterable</code> back to a <code>List</code>.A list literal could achieve the same goal.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// These two statements are equivalent: print([for (var e in [1, 2, 3]) e + 3]); print([1, 2, 3].map((e) => e + 3).toList());</code></pre></div></div></div></aside><div class="header-wrapper"><h3 id="generator-functions">Generator functions</h3><a class="heading-link" href="#generator-functions" aria-label="Link to 'Generator functions' section">#</a></div>Both languages support <a href="/language/functions#generators">generator functions</a>. These functions return an iterable collection of items computed to avoid unnecessary work.To write a generator function in Dart, add the <code>sync*</code> keyword after the function parameters, and return an <code>Iterable</code>. Add items to the final iterable using the <code>yield</code> keyword, or add whole sets of items using <code>yield*</code>.The following example shows how to write a basic generator function:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>function* naturalsTo(n) { let k = 0; while (k < n) { yield k++; } } // Returns [0, 1, 2, 3, 4] for (let value of naturalsTo(5)) { console.log(value); }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Iterable<int> naturalsTo(int n) sync* { int k = 0; while (k < n) { yield k++; } } // Returns an iterable with [0, 1, 2, 3, 4] print(naturalsTo(5).toList());</code></pre></div></div><div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>function* doubleNaturalsTo(n) { let k = 0; while (k < n) { yield* [k, k]; k++; } } // Returns [0, 0, 1, 1, 2, 2] for (let value of doubleNaturalsTo(3)) { console.log(value); }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Iterable<int> doubleNaturalsTo(int n) sync* { int k = 0; while (k < n) { yield* [k, k]; k++; } } // Returns an iterable with [0, 0, 1, 1, 2, 2] print(doubleNaturalsTo(3));</code></pre></div></div>You can also define asynchronous generator functions, which return streams instead of iterables. Learn more in the upcoming <a href="#asynchrony">Asynchrony</a> section.<div class="header-wrapper"><h2 id="statements">Statements</h2><a class="heading-link" href="#statements" aria-label="Link to 'Statements' section">#</a></div>This section describes differences in statements between JavaScript and Dart.<div class="header-wrapper"><h3 id="control-flow-ifelse-for-while-switch">Control flow (if/else, for, while, switch)</h3><a class="heading-link" href="#control-flow-ifelse-for-while-switch" aria-label="Link to 'Control flow (if/else, for, while, switch)' section">#</a></div>Most control statements work like their JavaScript counterparts. Some have additional uses for <a href="#collections">Collections</a>.<div class="header-wrapper"><h4 id="iteration">Iteration</h4><a class="heading-link" href="#iteration" aria-label="Link to 'Iteration' section">#</a></div>While both JavaScript and Dart have <code>for-in</code> loops, their behaviors differ.JavaScript's <code>for-in</code> loop iterates over an object's properties. To iterate over a JavaScript iterable object's elements, you must use <code>for-of</code> or <code>Array.forEach()</code>. Dart's <code>for-in</code> loop works like JavaScripts <code>for-of</code>.The following example shows iterating over a collection and printing out each element:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>for (const element of list) { console.log(element); }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>for (final element in list) { print(element); }</code></pre></div></div><div class="header-wrapper"><h4 id="switch">Switch</h4><a class="heading-link" href="#switch" aria-label="Link to 'Switch' section">#</a></div><aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">One key difference with the <code>switch</code> statement in JavaScript and Dart: when a case has no <code>break</code>, <code>continue</code>, or <code>return</code> statement, JavaScript allows execution to fall through and continue with the next statement. However, Dart only allows this when a case's body is empty.</div></aside>When using <code>continue</code> in a <code>switch</code> statement, you can combine it with a label that is put on a case:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>switch (testEnum) { case TestEnum.A: print('A'); continue b; b: case TestEnum.B: print('B'); break; }</code></pre></div></div><div class="header-wrapper"><h3 id="operators">Operators</h3><a class="heading-link" href="#operators" aria-label="Link to 'Operators' section">#</a></div>Both Dart and JavaScript contain predefined operators. Neither language supports adding new operators. Dart supports overloading some existing operators with the <code>operator</code> keyword. For example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Vector { final double x; final double y; final double z; Vector(this.x, this.y, this.z); Vector operator +(Vector other) => Vector( x + other.x, y + other.y, z + other.z, ); Vector operator *(double scalar) => Vector( x * scalar, y * scalar, z * scalar, ); }</code></pre></div></div><div class="header-wrapper"><h4 id="arithmetic-operators">Arithmetic operators</h4><a class="heading-link" href="#arithmetic-operators" aria-label="Link to 'Arithmetic operators' section">#</a></div>The equality and relational operators of both languages are almost identical, as shown in the following table:<div class="table-wrapper"><table class="table table-striped"><thead><tr><th>Meaning</th><th>JavaScript operator</th><th>Dart operator</th></tr></thead><tbody><tr><td>Add</td><td><code>+</code></td><td><code>+</code></td></tr><tr><td>Subtract</td><td><code>-</code></td><td><code>-</code></td></tr><tr><td>Unary minus, also known as negation</td><td><code>-expr</code></td><td><code>-expr</code></td></tr><tr><td>Multiply</td><td><code>*</code></td><td><code>*</code></td></tr><tr><td>Divide</td><td><code>/</code></td><td><code>/</code></td></tr><tr><td>Divide returning an integer result</td><td></td><td><code>~/</code></td></tr><tr><td>Get the remainder of an integer division (modulo)</td><td><code>%</code></td><td><code>%</code></td></tr><tr><td><code>x = x + 1</code> (expression value is <code>x + 1</code>)</td><td><code>++x</code></td><td><code>++x</code></td></tr><tr><td><code>x = x + 1</code> (expression value is <code>x</code>)</td><td><code>x++</code></td><td><code>x++</code></td></tr><tr><td><code>x = x - 1</code> (expression value is <code>x - 1</code>)</td><td><code>--x</code></td><td><code>--x</code></td></tr><tr><td><code>x = x - 1</code> (expression value is <code>x</code>)</td><td><code>x--</code></td><td><code>x--</code></td></tr></tbody></table></div>For example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>assert(2 + 3 == 5); assert(2 - 3 == -1); assert(2 * 3 == 6); assert(5 / 2 == 2.5); // Result is a double assert(5 ~/ 2 == 2); // Result is an int assert(5 % 2 == 1); // Remainder a = 0; b = ++a; // Increment a before b gets its value. assert(a == b); // 1 == 1 a = 0; b = a++; // Increment a AFTER b gets its value. assert(a != b); // 1 != 0 a = 0; b = --a; // Decrement a before b gets its value. assert(a == b); // -1 == -1 a = 0; b = a--; // Decrement a AFTER b gets its value. assert(a != b); // -1 != 0</code></pre></div></div>You've probably noticed that Dart also contains a <code>~/</code> operator (called a truncating division operator), that divides a double and outputs a floored integer:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>assert(25 == 50.4 ~/ 2); assert(25 == 50.6 ~/ 2); assert(25 == 51.6 ~/ 2);</code></pre></div></div><div class="header-wrapper"><h4 id="equality-and-relational-operators">Equality and relational operators</h4><a class="heading-link" href="#equality-and-relational-operators" aria-label="Link to 'Equality and relational operators' section">#</a></div>The equality and relational operators of both languages work in the same way:<div class="table-wrapper"><table class="table table-striped"><thead><tr><th>Meaning</th><th>JavaScript operator</th><th>Dart operator</th></tr></thead><tbody><tr><td>Strict equal</td><td><code>===</code></td><td><code>==</code></td></tr><tr><td>Abstract equal</td><td><code>==</code></td><td></td></tr><tr><td>Strict not equal</td><td><code>!==</code></td><td><code>!=</code></td></tr><tr><td>Abstract not equal</td><td><code>!=</code></td><td></td></tr><tr><td>Greater than</td><td><code>></code></td><td><code>></code></td></tr><tr><td>Less than</td><td><code><</code></td><td><code><</code></td></tr><tr><td>Greater than or equal to</td><td><code>>=</code></td><td><code>>=</code></td></tr><tr><td>Less than or equal to</td><td><code><=</code></td><td><code><=</code></td></tr></tbody></table></div>The <code>==</code> and <code>!=</code> JavaScript operators have no equivalent.For example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>assert(2 == 2); assert(2 != 3); assert(3 > 2); assert(2 < 3); assert(3 >= 3); assert(2 <= 3);</code></pre></div></div><div class="header-wrapper"><h4 id="type-test-operators">Type test operators</h4><a class="heading-link" href="#type-test-operators" aria-label="Link to 'Type test operators' section">#</a></div>The implementation of test operators is a bit different between the two languages:<div class="table-wrapper"><table class="table table-striped"><thead><tr><th>Meaning</th><th>JavaScript operator</th><th>Dart operator</th></tr></thead><tbody><tr><td>Typecast</td><td></td><td><code>x as T</code></td></tr><tr><td>True if object has specified type</td><td><code>x instanceof T</code></td><td><code>x is T</code></td></tr><tr><td>True if object lacks specified type</td><td><code>!(x instanceof T)</code></td><td><code>x is! T</code></td></tr></tbody></table></div>The result of <code>obj is T</code> is true if <code>obj</code> implements the interface specified by <code>T</code>. For example, <code>obj is Object?</code> is always true.Use the typecast operator (<code>as</code>) to ensure that a value has a particular type. The compiler can use that, if you know that the object will have that type.For example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>(person as Employee).employeeNumber = 4204583;</code></pre></div></div>If you don't know that the object is of type <code>T</code>, then use <code>is T</code> to check the type before using the object.In Dart, the types of local variables update within the scope of the if statement. This is not the case for instance variables.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>if (person is Employee) { person.employeeNumber = 4204583; }</code></pre></div></div><div class="header-wrapper"><h4 id="logical-operators">Logical operators</h4><a class="heading-link" href="#logical-operators" aria-label="Link to 'Logical operators' section">#</a></div>You can invert or combine boolean expressions using logical operators. The logical operators of both languages are identical.<div class="table-wrapper"><table class="table table-striped"><thead><tr><th>Meaning</th><th>JavaScript operator</th><th>Dart operator</th></tr></thead><tbody><tr><td>Inverts next expression (changes false to true and vice versa)</td><td><code>!x</code></td><td><code>!x</code></td></tr><tr><td>Logical OR</td><td><code>||</code></td><td><code>||</code></td></tr><tr><td>Logical AND</td><td><code>&&</code></td><td><code>&&</code></td></tr></tbody></table></div>JavaScript allows any value to be used where you need a Boolean value. It then converts those values to either <code>true</code> or <code>false</code>. JavaScript considers empty strings and the number <code>0</code> to be "falsy" values. Dart allows <code>bool</code> values in conditions and as operands of logical operators.For example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>if (!done && (col == 0 || col == 3)) { // ...Do something... }</code></pre></div></div><div class="header-wrapper"><h4 id="bitwise-and-shift-operators">Bitwise and shift operators</h4><a class="heading-link" href="#bitwise-and-shift-operators" aria-label="Link to 'Bitwise and shift operators' section">#</a></div>You can manipulate the individual bits of numbers by using bitwise and shift operators with integers. The operators of both languages are almost identical, as shown in the following table:<div class="table-wrapper"><table class="table table-striped"><thead><tr><th>Meaning</th><th>JavaScript operator</th><th>Dart operator</th></tr></thead><tbody><tr><td>Bitwise AND</td><td><code>&</code></td><td><code>&</code></td></tr><tr><td>Bitwise OR</td><td><code>|</code></td><td><code>|</code></td></tr><tr><td>Bitwise XOR</td><td><code>^</code></td><td><code>^</code></td></tr><tr><td>Unary bitwise complement (0s become 1s; 1s become 0s)</td><td><code>~expr</code></td><td><code>~expr</code></td></tr><tr><td>Shift left</td><td><code><<</code></td><td><code><<</code></td></tr><tr><td>Shift right</td><td><code>>></code></td><td><code>>></code></td></tr><tr><td>Unsigned shift right</td><td><code>>>></code></td><td><code>>>></code></td></tr></tbody></table></div>For example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final value = 0x22; final bitmask = 0x0f; assert((value & bitmask) == 0x02); // AND assert((value & ~bitmask) == 0x20); // AND NOT assert((value | bitmask) == 0x2f); // OR assert((value ^ bitmask) == 0x2d); // XOR assert((value << 4) == 0x220); // Shift left assert((value >> 4) == 0x02); // Shift right assert((-value >> 4) == -0x03); // Shift right assert((value >>> 4) == 0x02); // Unsigned shift right assert((-value >>> 4) > 0); // Unsigned shift right</code></pre></div></div><div class="header-wrapper"><h4 id="conditional-operator">Conditional operator</h4><a class="heading-link" href="#conditional-operator" aria-label="Link to 'Conditional operator' section">#</a></div>Both Dart and JavaScript contain a conditional operator (<code>?:</code>) for evaluating expressions. Some developers refer to this as a ternary operator because it takes three operands. As Dart has another operator (<code>[]=</code>) that takes three operands, call this operator (<code>?:</code>) the conditional operator. This operator works for expressions like <a href="/language/branches#if">if-else</a> does for statements.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>let visibility = isPublic ? "public" : "private";</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final visibility = isPublic ? 'public' : 'private';</code></pre></div></div><div class="header-wrapper"><h3 id="assignment-operators">Assignment operators</h3><a class="heading-link" href="#assignment-operators" aria-label="Link to 'Assignment operators' section">#</a></div>Use the (<code>=</code>) operator to assign values.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Assign value to a a = value;</code></pre></div></div>This operator also has a null-aware variant (<code>??=</code>).To learn more, see the <a href="#null-aware-operators">null-assignment</a> operator section.JavaScript and Dart include operators that calculate and assign new values to the variable in the expression. These assignment operators use the right-side value and the variable initial value as operands.The following table lists these assignment operators:<div class="table-wrapper"><table class="table table-striped"><thead><tr><th>Operator</th><th>Description</th></tr></thead><tbody><tr><td><code>=</code></td><td>Assignment</td></tr><tr><td><code>+=</code></td><td>Addition assignment</td></tr><tr><td><code>-=</code></td><td>Subtraction assignment</td></tr><tr><td><code>*=</code></td><td>Multiplication assignment</td></tr><tr><td><code>/=</code></td><td>Division assignment</td></tr><tr><td><code>~/=</code></td><td>Truncating division assignment</td></tr><tr><td><code>%=</code></td><td>Remainder (modulo) assignment</td></tr><tr><td><code>>>>=</code></td><td>Unsigned right shift assignment</td></tr><tr><td><code>^=</code></td><td>Bitwise XOR assignment</td></tr><tr><td><code><<=</code></td><td>Left shift assignment</td></tr><tr><td><code>>>=</code></td><td>Right shift assignment</td></tr><tr><td><code>&=</code></td><td>Bitwise AND assignment</td></tr><tr><td><code>|=</code></td><td>Bitwise OR assignment</td></tr></tbody></table></div>JavaScript does not support the <code>~/=</code> assignment operator.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var a = 5; a *= 2; // Multiply `a` by 2 and assign the result back to a. print(a); // `a` is now 10.</code></pre></div></div><div class="header-wrapper"><h3 id="cascades-operator">Cascades (<code>..</code> operator)</h3><a class="heading-link" href="#cascades-operator" aria-label="Link to 'Cascades (.. operator)' section">#</a></div>Dart allows you to chain multiple method calls, property assignments, or both on a single object. Dart refers to this as cascading and uses the cascade syntax (<code>..</code>) to perform this action.JavaScript lacks this syntax.The following example shows chaining multiple methods on a newly constructed object using the cascade syntax:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var animal = Animal() // Sets multiple properties and methods ..name = "Bob" ..age = 5 ..feed() ..walk(); print(animal.name); // "Bob" print(animal.age); // 5</code></pre></div></div>To make the first cascade syntax null-aware, write it as <code>?..</code>.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var result = maybePerson ?..employment = employer ..salary = salary;</code></pre></div></div>Dart ignores the entire cascade if the <code>maybePerson</code> value is <code>null</code>.<div class="header-wrapper"><h2 id="collections">Collections</h2><a class="heading-link" href="#collections" aria-label="Link to 'Collections' section">#</a></div>This section covers some collection types in Dart and compare them to similar types in JavaScript.<div class="header-wrapper"><h3 id="lists">Lists</h3><a class="heading-link" href="#lists" aria-label="Link to 'Lists' section">#</a></div>Dart writes list literals in the same ways as JavaScript arrays. Dart encloses lists in square brackets and separate values with commas.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Initialize list and specify full type final List<String> list1 = <String>['one', 'two', 'three']; // Initialize list using shorthand type final list2 = <String>['one', 'two', 'three']; // Dart can also infer the type final list3 = ['one', 'two', 'three'];</code></pre></div></div>The following code samples give an overview of the basic actions that you can perform on a Dart <code>List</code>. The following example shows how to retrieve a value from a <code>List</code> using the index operator.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; final fruit = fruits[1];</code></pre></div></div>Add a value to the end of the <code>List</code> using the <code>add</code> method. Add another <code>List</code> using the <code>addAll</code> method:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; fruits.add('peach'); fruits.addAll(['kiwi', 'mango']);</code></pre></div></div>Insert a value at a specific position using the <code>insert</code> method. Insert another <code>List</code> at a specific position using the <code>insertAll</code> method:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; fruits.insert(0, 'peach'); fruits.insertAll(0, ['kiwi', 'mango']);</code></pre></div></div>Update a value in the <code>List</code> combining the index and assignment operators:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; fruits[2] = 'peach';</code></pre></div></div>Remove items from a <code>List</code> using one of the following methods:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; // Remove the value 'pear' from the list. fruits.remove('pear'); // Removes the last element from the list. fruits.removeLast(); // Removes the element at position 1 from the list. fruits.removeAt(1); // Removes the elements with positions greater than // or equal to start (1) and less than end (3) from the list. fruits.removeRange(1, 3); // Removes all elements from the list that match the given predicate. fruits.removeWhere((fruit) => fruit.contains('p'));</code></pre></div></div>Use <code>length</code> to obtain the number of values in the <code>List</code>:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; assert(fruits.length == 3);</code></pre></div></div>Use <code>isEmpty</code> to check if the <code>List</code> is empty:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var fruits = []; assert(fruits.isEmpty);</code></pre></div></div>Use <code>isNotEmpty</code> to check if the <code>List</code> is not empty:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = <String>['apple', 'orange', 'pear']; assert(fruits.isNotEmpty);</code></pre></div></div><div class="header-wrapper"><h4 id="filled">Filled</h4><a class="heading-link" href="#filled" aria-label="Link to 'Filled' section">#</a></div>Dart's <code>List</code> class includes a way to create a List with each item having the same value. This <code>filled</code> constructor creates a fixed-length list of size <code>n</code> with one default value. The following example create a list of 3 items:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final list1 = List.filled(3, 'a'); // Creates: [ 'a', 'a', 'a' ]</code></pre></div></div><ul><li>You cannot add or remove elements from this list by default. To permit this list to add or remove elements, add <code>, growable: true</code> to the end of the parameter list.</li><li>You can access and update elements of this list using their index value.</li></ul><div class="header-wrapper"><h4 id="generate">Generate</h4><a class="heading-link" href="#generate" aria-label="Link to 'Generate' section">#</a></div>The Dart <code>List</code> class includes a way to create a List of incrementing values. This <code>generate</code> constructor creates a fixed-length list of size <code>n</code> with a template to build element values. This template takes the index as a parameter.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Creates: [ 'a0', 'a1', 'a2' ] final list1 = List.generate(3, (index) => 'a$index');</code></pre></div></div><div class="header-wrapper"><h3 id="sets">Sets</h3><a class="heading-link" href="#sets" aria-label="Link to 'Sets' section">#</a></div>Unlike JavaScript, Dart supports defining <code>Set</code>s with literals. Dart defines sets in the same way as lists, but using curly braces rather than square brackets. Sets are unordered collections that only contain unique items. Dart enforces the uniqueness of these items using hash codes, meaning that objects need hash values to be stored in a <code>Set</code>.<aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">In Dart, the hash value defaults to the instance of an object but you can override it to use a set of properties. To learn more, see the <a href="https://api.dart.dev/dart-core/Object/hashCode.html"><code>hashCode</code></a> property page.</div></aside>The following code snippet shows how to initialize a <code>Set</code>:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final abc = {'a', 'b', 'c'};</code></pre></div></div>The syntax for creating an empty set might seem confusing at first, because specifying empty curly braces (<code>{}</code>) results in creating an empty <code>Map</code>. To create an empty <code>Set</code>, precede the <code>{}</code> declaration with a type argument or assign <code>{}</code> to a variable of type <code>Set</code>:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final names = <String>{}; // Set<String> names = {}; // This works, too. // final names = {}; // Creates an empty map, not a set.</code></pre></div></div>The following examples provide an overview of the basic actions that you can perform on a Dart <code>Set</code>.Add a value to the <code>Set</code> using the <code>add</code> method. Use the <code>addAll</code> method to add multiple values:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = {'apple', 'orange', 'pear'}; fruits.add('peach'); fruits.addAll(['kiwi', 'mango']);</code></pre></div></div>Use one of the following methods in <code>Set</code> to remove content from the set:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = {'apple', 'orange', 'pear'}; // Remove the value 'pear' from the set. fruits.remove('pear'); // Remove all elements in the supplied list from the set. fruits.removeAll(['orange', 'apple']); // Removes all elements from the list that match the given predicate. fruits.removeWhere((fruit) => fruit.contains('p'));</code></pre></div></div>Use <code>length</code> to get the number of values in the <code>Set</code>:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = {'apple', 'orange', 'pear'}; assert(fruits.length == 3);</code></pre></div></div>Use <code>isEmpty</code> to check if the <code>Set</code> is empty:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var fruits = <String>{}; assert(fruits.isEmpty);</code></pre></div></div>Use <code>isNotEmpty</code> to check if the <code>Set</code> is not empty:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final fruits = {'apple', 'orange', 'pear'}; assert(fruits.isNotEmpty);</code></pre></div></div><div class="header-wrapper"><h3 id="maps">Maps</h3><a class="heading-link" href="#maps" aria-label="Link to 'Maps' section">#</a></div>The <code>Map</code> type in Dart resembles the <code>Map</code> type in JavaScript. Both types associate keys with values. A key can be any object type if all keys have the same type. This rule applies to values as well. Each key occurs once at most, but you can use the same value multiple times.Dart bases the dictionary on a hash table. This means that keys need to be hashable. Every Dart object contains a hash.<aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">In Dart, the hash value of an object defaults to a value derived from the object's identity, and being compatible with an equality where the object can only equal itself. To introduce an equality based on the contents of the object, override <code>hashCode</code> and <code>operator==</code>.</div></aside>Consider these simple <code>Map</code> examples, created using literals:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = { 'first': 'partridge', 'second': 'turtle doves', 'fifth': 'golden rings' }; final nobleGases = { 2: 'helium', 10: 'neon', 18: 'argon', };</code></pre></div></div>The following code samples provide an overview of the basic actions that you can perform on a Dart <code>Map</code>. The following example shows how to retrieve a value from a <code>Map</code> using the index operator.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; final gift = gifts['first'];</code></pre></div></div><aside class="alert alert-info"><div class="alert-header">info Note</div><div class="alert-content">If the map does not include the lookup key, the index operator returns <code>null</code>.</div></aside>Use the <code>containsKey</code> method to check if the <code>Map</code> includes a key.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; assert(gifts.containsKey('fifth'));</code></pre></div></div>Use the index assignment operator (<code>[]=</code>) to add or update an entry in the <code>Map</code>. If the <code>Map</code> doesn't yet contain the key, Dart adds the entry. If the key exists, Dart updates its value.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; gifts['second'] = 'turtle'; // Gets added gifts['second'] = 'turtle doves'; // Gets updated</code></pre></div></div>Use the <code>addAll</code> method to add another <code>Map</code>. Use the <code>addEntries</code> method to add other entries to the <code>Map</code>.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; gifts['second'] = 'turtle doves'; gifts.addAll({ 'second': 'turtle doves', 'fifth': 'golden rings', }); gifts.addEntries([ MapEntry('second', 'turtle doves'), MapEntry('fifth', 'golden rings'), ]);</code></pre></div></div>Use the <code>remove</code> method to remove an entry from the <code>Map</code>. Use the <code>removeWhere</code> method to remove all entries that satisfy a given test.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; gifts.remove('first'); gifts.removeWhere((key, value) => value == 'partridge');</code></pre></div></div>Use <code>length</code> to obtain the number of key-value pairs in the <code>Map</code>.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; gifts['fourth'] = 'calling birds'; assert(gifts.length == 2);</code></pre></div></div>Use <code>isEmpty</code> to check if the <code>Map</code> is empty.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {}; assert(gifts.isEmpty);</code></pre></div></div>Use <code>isNotEmpty</code> to check if the <code>Map</code> is not empty.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final gifts = {'first': 'partridge'}; assert(gifts.isNotEmpty);</code></pre></div></div><div class="header-wrapper"><h3 id="unmodifiable">Unmodifiable</h3><a class="heading-link" href="#unmodifiable" aria-label="Link to 'Unmodifiable' section">#</a></div>Pure JavaScript doesn't support immutability. Dart offers multiple ways to make collections like arrays, sets, or dictionaries immutable.<ul><li>If the collection is a compile-time constant and shouldn't be modified, use the <code>const</code> keyword: <code>const fruits = <String>{'apple', 'orange', 'pear'};</code></li><li>Assign the <code>Set</code> to a <code>final</code> field, meaning that the <code>Set</code> itself doesn't have to be a compile-time constant. This ensures that the field can't be overridden with another <code>Set</code>, but it still allows the size or the contents of the <code>Set</code> to be modified: <code>final fruits = <String>{'apple', 'orange', 'pear'};</code></li><li>Create a final version of your collection type using the <code>unmodifiable</code> constructor (as shown in the following example). This creates a collection that cannot change its size or content:</li></ul><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>final _set = Set<String>.unmodifiable(['a', 'b', 'c']); final _list = List<String>.unmodifiable(['a', 'b', 'c']); final _map = Map<String, String>.unmodifiable({'foo': 'bar'});</code></pre></div></div><div class="header-wrapper"><h3 id="spread-operator">Spread operator</h3><a class="heading-link" href="#spread-operator" aria-label="Link to 'Spread operator' section">#</a></div>As in JavaScript, Dart supports embedding a list into another list using the spread operator (<code>...</code>) and the null-aware spread operator (<code>...?</code>).<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var list1 = [1, 2, 3]; var list2 = [0, ...list1];　// [0, 1, 2, 3] // When the list being inserted could be null: list1 = null; var list2 = [0, ...?list1]; // [0]</code></pre></div></div>This also works for sets and maps:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Spread operator with maps var map1 = {'foo': 'bar', 'key': 'value'}; var map2 = {'foo': 'baz', ...map1}; // {foo: bar, key: value} // Spread operator with sets var set1 = {'foo', 'bar'}; var set2 = {'foo', 'baz', ...set1}; // {foo, baz, bar}</code></pre></div></div><div class="header-wrapper"><h3 id="collection-iffor">Collection if/for</h3><a class="heading-link" href="#collection-iffor" aria-label="Link to 'Collection if/for' section">#</a></div>In Dart, the <code>for</code> and <code>if</code> keywords have additional functionality when it comes to collections.A collection <code>if</code> statement includes items from a list literal only when the specified condition is met:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var nav = [ 'Home', 'Furniture', 'Plants', if (promoActive) 'Outlet', ];</code></pre></div></div>It works similarly for maps and sets.A collection <code>for</code> statement allows multiple items to be mapped into another list:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var listOfInts = [1, 2, 3]; var listOfStrings = [ '#0', for (var i in listOfInts) '#$i', ]; // [#0, #1, #2, #3]</code></pre></div></div>This also works in the same way for maps and sets.<div class="header-wrapper"><h2 id="asynchrony">Asynchrony</h2><a class="heading-link" href="#asynchrony" aria-label="Link to 'Asynchrony' section">#</a></div>Like JavaScript, the Dart Virtual Machine (VM) runs a single event loop that processes all your Dart code. This means that similar rules for asynchrony apply here. All of your code runs synchronously, but you can handle it in a different order, depending on how you use the asynchronous tools at your disposal. Here are some of these constructs and how they relate to their JavaScript counterparts.<div class="header-wrapper"><h3 id="futures">Futures</h3><a class="heading-link" href="#futures" aria-label="Link to 'Futures' section">#</a></div><code>Future</code> is Dart's version of a JavaScript <code>Promise</code>. Both are the result of an asynchronous operation that resolves at a later point.Functions in Dart or in Dart packages might return a <code>Future</code>, rather than the value they represent, as the value might not be available until later.The following example shows that handling a future works in the same way in Dart as a promise works in JavaScript.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>const httpResponseBody = func(); httpResponseBody.then(value => { console.log( `Promise resolved to a value: ${value}` ); });</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Future<String> httpResponseBody = func(); httpResponseBody.then((String value) { print('Future resolved to a value: $value'); });</code></pre></div></div>Similarly, futures can fail like promises. Catching errors works the same as well:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>httpResponseBody .then(...) .catch(err => { console.log( "Promise encountered an error before resolving." ); });</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>httpResponseBody .then(...) .catchError((err) { print( 'Future encountered an error before resolving.' ); });</code></pre></div></div>You can also create futures. To create a <code>Future</code>, define and call an <code>async</code> function. When you have a value that needs to be a <code>Future</code>, convert the function as in the following example.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>String str = 'String Value'; Future<String> strFuture = Future<String>.value(str);</code></pre></div></div><div class="header-wrapper"><h4 id="asyncawait">Async/Await</h4><a class="heading-link" href="#asyncawait" aria-label="Link to 'Async/Await' section">#</a></div>If you're familiar with promises in JavaScript, you're likely also familiar with the <code>async</code>/<code>await</code> syntax. This syntax is identical in Dart: functions are marked <code>async</code>, and <code>async</code> functions always return a <code>Future</code>. If the function returns a <code>String</code> and is marked <code>async</code>, it returns a <code>Future<String></code> instead. If it returns nothing, but it is <code>async</code>, it returns <code>Future<void></code>.The following example shows how to write an <code>async</code> function:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>// Returns a Promise of a string, // as the method is async async fetchString() { // Typically some other async // operations would be done here. return "String Value"; }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Returns a future of a string, // as the method is async Future<String> fetchString() async { // Typically some other async // operations would be done here. return 'String Value'; }</code></pre></div></div>Call this <code>async</code> function as follows:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Future<String> stringFuture = fetchString(); stringFuture.then((String str) { print(str); // 'String Value' });</code></pre></div></div>Obtain a future's value using the <code>await</code> keyword. As in JavaScript, this removes the need to call <code>then</code> on the <code>Future</code> to obtain its value, and it allows you to write asynchronous code in a more synchronous-like way. As in JavaScript, awaiting futures is only possible within an <code>async</code> context (such as another <code>async</code> function).The following example shows how to await a future for its value:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// We can only await futures within an async context. Future<void> asyncFunction() async { var str = await fetchString(); print(str); // 'String Value' }</code></pre></div></div>To learn more about <code>Future</code>s and the <code>async</code>/<code>await</code> syntax, see the <a href="/libraries/async/async-await">Asynchronous programming</a> tutorial.<div class="header-wrapper"><h3 id="streams">Streams</h3><a class="heading-link" href="#streams" aria-label="Link to 'Streams' section">#</a></div>Another tool in Dart's async toolbox is <code>Stream</code>s. While JavaScript has its own concept of streams, Dart's are more akin to <code>Observable</code>s, as found in the commonly used <code>rxjs</code> library. If you happen to be familiar with this library, Dart's streams should feel familiar.For those not familiar with these concepts: <code>Stream</code>s basically act like <code>Future</code>s, but with multiple values spread out over time, like an event bus. Your code can listen to a stream, and it can either complete or reach a fail state.<div class="header-wrapper"><h4 id="listening">Listening</h4><a class="heading-link" href="#listening" aria-label="Link to 'Listening' section">#</a></div>To listen to a stream, call its <code>listen</code> method and provide a callback method. Whenever the stream emits a value, Dart calls this method:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Stream<int> stream = ... stream.listen((int value) { print('A value has been emitted: $value'); });</code></pre></div></div>The <code>listen</code> method includes optional callbacks for handling errors or for when the stream completes:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>stream.listen( (int value) { ... }, onError: (err) { print('Stream encountered an error! $err'); }, onDone: () { print('Stream completed!'); }, );</code></pre></div></div>The <code>listen</code> method returns an instance of a <code>StreamSubscription</code>, which you can use to stop listening to the stream:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>StreamSubscription subscription = stream.listen(...); subscription.cancel();</code></pre></div></div>This is not the only way to listen to a stream. Similar to the <code>async</code>/<code>await</code> syntax for <code>Future</code>s, you can combine a stream with a <code>for-in</code> loop in an <code>async</code> context. The <code>for</code> loop invokes the callback method for each item emitted, and it ends when the stream completes or errors out:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Future<int> sumStream(Stream<int> stream) async { var sum = 0; await for (final value in stream) { sum += value; } return sum; }</code></pre></div></div>When an error occurs when listening to a stream in this way, the error is rethrown at the line containing the <code>await</code> keyword. You can handle this error with a <code>try-catch</code> statement:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>try { await for (final value in stream) { ... } } catch (err) { print('Stream encountered an error! $err'); }</code></pre></div></div><div class="header-wrapper"><h4 id="creating-streams">Creating streams</h4><a class="heading-link" href="#creating-streams" aria-label="Link to 'Creating streams' section">#</a></div>As with <code>Future</code>s, you have several different ways to create a stream. The <code>Stream</code> class has utility constructors for creating streams from <code>Future</code>s or <code>Iterable</code>s, or for creating streams that emit values at a timed interval. To learn more, see the <a href="https://api.dart.dev/dart-async/Stream-class.html"><code>Stream</code></a> API page.<div class="header-wrapper"><h5 id="streamcontroller">StreamController</h5><a class="heading-link" href="#streamcontroller" aria-label="Link to 'StreamController' section">#</a></div>The utility class <a href="https://api.dart.dev/dart-async/StreamController-class.html"><code>StreamController</code></a> can create and control streams. Its stream property exposes the stream it controls. Its methods provides ways to add events to that stream.For example, the <code>add</code> method can emit new items and the <code>close</code> method completes the stream.The following example shows basic usage of a stream controller:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>var listeners = 0; StreamController<int>? controller; controller = StreamController<int>( onListen: () { // Emit a new value every time the stream gets a new listener. controller!.add(listeners++); // Close the stream after the fifth listener. if (listeners > 5) controller.close(); } ); // Get the stream for the stream controller var stream = controller.stream; // Listen to the stream stream.listen((int value) { print('$value'); });</code></pre></div></div><div class="header-wrapper"><h5 id="async-generators">Async generators</h5><a class="heading-link" href="#async-generators" aria-label="Link to 'Async generators' section">#</a></div>Async generator functions can create streams. These functions resemble a synchronous generator function but use the <code>async*</code> keyword and return a <code>Stream</code>.In an async generator function, the <code>yield</code> keyword emits the given value to the stream. The <code>yield*</code> keyword, however, works with streams instead of other iterables. This allows events from other streams to be emitted to this stream. In the following example, the function continues once the newly yielded stream has completed.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Stream<int> asynchronousNaturalsTo(int n) async* { var k = 0; while (k < n) yield k++; } Stream<int> stream = asynchronousNaturalsTo(5); // Prints each of 0 1 2 3 4 in succession. stream.forEach(print(value));</code></pre></div></div>Learn more about futures, streams, and other asynchronous functionality in the <a href="/libraries/async/async-await">asynchronous programming</a> docs.<div class="header-wrapper"><h2 id="classes">Classes</h2><a class="heading-link" href="#classes" aria-label="Link to 'Classes' section">#</a></div>On the surface, classes in Dart are similar to classes in JavaScript, although JavaScript classes are technically more of a wrapper around prototypes. In Dart, classes are a standard feature of the language. This section covers defining and using classes in Dart and how they differ from JavaScript.<div class="header-wrapper"><h3 id="this-context">"this" context</h3><a class="heading-link" href="#this-context" aria-label="Link to '"this" context' section">#</a></div>The <code>this</code> keyword in Dart is more straightforward than in JavaScript. In Dart, you can't bind functions to <code>this</code>, and <code>this</code> never depends on the execution context (as it does in JavaScript). In Dart, <code>this</code> is only used within classes, and always refers to the current instance.<div class="header-wrapper"><h3 id="constructors">Constructors</h3><a class="heading-link" href="#constructors" aria-label="Link to 'Constructors' section">#</a></div>This section discusses how constructors differ in Dart from JavaScript.<div class="header-wrapper"><h4 id="standard-constructor">Standard constructor</h4><a class="heading-link" href="#standard-constructor" aria-label="Link to 'Standard constructor' section">#</a></div>A standard class constructor looks very similar to a JavaScript constructor. In Dart, the <code>constructor</code> keyword is replaced by the full class name, and all parameters must be explicitly typed. In Dart, the <code>new</code> keyword was once required for creating class instances, but is now optional and its use is no longer recommended.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Point { final double x; final double y; Point(double x, double y) : this.x = x, this.y = y { } } // Create a new instance of the Point class Point p = Point(3, 5);</code></pre></div></div><div class="header-wrapper"><h4 id="initializer-lists">Initializer lists</h4><a class="heading-link" href="#initializer-lists" aria-label="Link to 'Initializer lists' section">#</a></div>Use initializer lists to write your constructor. Insert the initializer list between the constructor's parameters and body.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Point { ... Point.fromJson(Map<String, double> json) : x = json['x']!, y = json['y']! { print('In Point.fromJson(): ($x, $y)'); } ... }</code></pre></div></div><div class="header-wrapper"><h4 id="constructor-parameters">Constructor parameters</h4><a class="heading-link" href="#constructor-parameters" aria-label="Link to 'Constructor parameters' section">#</a></div>Writing code to assign class fields in the constructor can feel like creating boilerplate code, so Dart has some syntactic sugar, called <a href="/language/constructors">initializing parameters</a> to make this easier:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Point { double x; double y; // Syntactic sugar for setting x and y // before the constructor body runs. Point(this.x, this.y); } // Create a new instance of the Point class Point p = Point(3, 5);</code></pre></div></div>Similar to functions, constructors have the option to take positioned or named parameters:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Point { ... // With an optional positioned parameter Point(this.x, [this.y = 5]); // With named parameters Point({ required this.y, this.x = 5 }); // With both positional and named parameters Point(int x, int y, { boolean multiply }) { ... } ... }</code></pre></div></div><div class="header-wrapper"><h4 id="named-constructors">Named constructors</h4><a class="heading-link" href="#named-constructors" aria-label="Link to 'Named constructors' section">#</a></div>Unlike JavaScript, Dart allows classes to have multiple constructors, by allowing you to name them. You can optionally have one single unnamed constructor, any additional constructors must be named:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>const double xOrigin = 0; const double yOrigin = 0; class Point { double x = 0; double y = 0; Point(this.x, this.y); // Named constructor Point.origin() : x = xOrigin, y = yOrigin; }</code></pre></div></div><div class="header-wrapper"><h4 id="const-constructors">Const constructors</h4><a class="heading-link" href="#const-constructors" aria-label="Link to 'Const constructors' section">#</a></div>To enable immutable class instances, use a <code>const</code> constructor. A class with a <code>const</code> constructor can have <code>final</code> instance variables only.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class ImmutablePoint { final double x, y; const ImmutablePoint(this.x, this.y); }</code></pre></div></div><div class="header-wrapper"><h4 id="constructor-redirection">Constructor redirection</h4><a class="heading-link" href="#constructor-redirection" aria-label="Link to 'Constructor redirection' section">#</a></div>You can call constructors from other constructors to prevent code duplication or to add additional defaults for parameters:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Point { double x, y; // The main constructor for this class. Point(this.x, this.y); // Delegates to the main constructor. Point.alongXAxis(double x) : this(x, 0); }</code></pre></div></div><div class="header-wrapper"><h4 id="factory-constructors">Factory constructors</h4><a class="heading-link" href="#factory-constructors" aria-label="Link to 'Factory constructors' section">#</a></div>You can use a factory constructor when you don't need to create a new class instance. One example would be when returning a cached instance:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Logger { static final Map<String, Logger> _cache = <String, Logger>{}; final String name; // Factory constructor that returns a cached copy, // or creates a new one if it is not yet available. factory Logger(String name) { return _cache.putIfAbsent( name, () => _cache[name] ??= Logger._internal(name); } // Private constructor for internal use only Logger._internal(this.name); }</code></pre></div></div><div class="header-wrapper"><h3 id="methods">Methods</h3><a class="heading-link" href="#methods" aria-label="Link to 'Methods' section">#</a></div>In both Dart and JavaScript, methods serve as functions that provide behavior for an object.<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>function doSomething() { // This is a function // Implementation.. } class Example { doSomething() { // This is a method // Implementation.. } }</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>void doSomething() { // This is a function // Implementation.. } class Example { void doSomething() { // This is a method // Implementation.. } }</code></pre></div></div><div class="header-wrapper"><h3 id="extending-classes">Extending classes</h3><a class="heading-link" href="#extending-classes" aria-label="Link to 'Extending classes' section">#</a></div>Dart allows classes to extend another class, in the same way that JavaScript does.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Animal { int eyes; Animal(this.eyes); makeNoise() { print('???'); } } class Cat extends Animal { Cat(): super(2); @override makeNoise() { print('Meow'); } } Animal animal = Cat(); print(animal.eyes); // 2 animal.makeNoise(); // Meow</code></pre></div></div>When overriding a method from the parent class, use the <code>@override</code> annotation. While this annotation is optional, it shows that the override is intentional. The Dart analyzer shows a warning if the method is not actually overriding a superclass method.The parent method that is being overridden can still be called using the <code>super</code> keyword:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Cat extends Animal { ... @override makeNoise() { print('Meow'); super.makeNoise(); } } Animal animal = Cat(); animal.makeNoise(); // Meow // ???</code></pre></div></div><div class="header-wrapper"><h3 id="classes-as-interfaces">Classes as interfaces</h3><a class="heading-link" href="#classes-as-interfaces" aria-label="Link to 'Classes as interfaces' section">#</a></div>Like JavaScript, Dart doesn't have a separate definition for interfaces. However, unlike JavaScript, all class definitions double as an interface; you can implement a class as an interface using the <code>implements</code> keyword.When a class is implemented as an interface, its public API must be implemented by the new class. Unlike <code>extends</code>, its method and field implementations aren't shared with the new class. While a class can only extend a single class, you can implement multiple interfaces at a time, even when the implementing class already extends another.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Consumer { consume() { print('Eating food...'); } } class Cat implements Consumer { consume() { print('Eating mice...'); } } Consumer consumer = Cat(); consumer.consume(); // Eating mice</code></pre></div></div>When implementing an interface, the <code>super</code> method can't be called as the method bodies are not inherited:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Cat implements Consumer { @override consume() { print('Eating mice...'); super.consume(); // Invalid. The superclass `Object` has no `consume` method. } }</code></pre></div></div><div class="header-wrapper"><h3 id="abstract-classes-and-methods">Abstract classes and methods</h3><a class="heading-link" href="#abstract-classes-and-methods" aria-label="Link to 'Abstract classes and methods' section">#</a></div>To ensure that a class can only be extended or have its interface implemented, but to disallow the construction of any instances, mark it as <code>abstract</code>.Classes marked as <code>abstract</code> can have abstract methods, which do not require a body and are instead required to be implemented when the class is either extended or its interface is implemented:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>abstract class Consumer { consume(); } // Extending the full class class Dog extends Consumer { consume() { print('Eating cookies...'); } } // Just implementing the interface class Cat implements Consumer { consume() { print('Eating mice...'); } } Consumer consumer; consumer = Dog(); consumer.consume(); // Eating cookies... consumer = Cat(); consumer.consume(); // Eating mice...</code></pre></div></div><div class="header-wrapper"><h3 id="mixins">Mixins</h3><a class="heading-link" href="#mixins" aria-label="Link to 'Mixins' section">#</a></div>Mixins are used to share functionality between classes. You can use the mixin's fields and methods in the class, using their functionality as if it were part of the class. A class can use multiple mixins. This helps when multiple classes share the same functionality, without needing to inherit from each other or share a common ancestor.Use the <code>with</code> keyword to add one or more comma-separated mixins to a class.JavaScript has no keyword equivalent. JavaScript can use <code>Object.assign</code> to merge additional objects into an existing object, after instantiating.The following examples show how JavaScript and Dart achieve similar behavior:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>class Animal {} // Defining the mixins class Flyer { fly = () => console.log('Flaps wings'); } class Walker { walk = () => console.log('Walks on legs'); } class Bat extends Animal {} class Goose extends Animal {} class Dog extends Animal {} // Composing the class instances with // their correct functionality. const bat = Object.assign( new Bat(), new Flyer() ); const goose = Object.assign( new Goose(), new Flyer(), new Walker() ); const dog = Object.assign( new Dog(), new Walker() ); // Correct calls bat.fly(); goose.fly(); goose.walk(); dog.walk(); // Incorrect calls bat.walk(); // `bat` lacks the `walk` method dog.fly(); // `dog` lacks the `fly` method</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>abstract class Animal {} // Defining the mixins class Flyer { fly() => print('Flaps wings'); } class Walker { walk() => print('Walks on legs'); } class Bat extends Animal with Flyer {} class Goose extends Animal with Flyer, Walker {} class Dog extends Animal with Walker {} // Correct calls Bat().fly(); Goose().fly(); Goose().walk(); Dog().walk(); // Incorrect calls Bat().walk(); // Not using the Walker mixin Dog().fly(); // Not using the Flyer mixin</code></pre></div></div>Alternatively, you can replace the <code>class</code> keyword with <code>mixin</code> to prevent the mixin from being used as a regular class:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>mixin Walker { walk() => print('Walks legs'); } // Not possible, as Walker is no longer a class. class Bat extends Walker {}</code></pre></div></div>Since you can use multiple mixins, they can have overlapping methods or fields with each other when used on the same class. They can even overlap with the class that uses them, or that class's superclass. The order in which they are added to a class matters.To give an example:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Bird extends Animal with Consumer, Flyer {</code></pre></div></div>When a method is called on an instance of <code>Bird</code>, Dart starts with its own class, <code>Bird</code>, which takes precedence over other implementations. If <code>Bird</code> has no implementation, then <code>Flyer</code> is checked, followed by <code>Consumer</code>, until an implementation is found. The parent class, <code>Animal</code>, is checked last.<div class="header-wrapper"><h3 id="extensions">Extensions</h3><a class="heading-link" href="#extensions" aria-label="Link to 'Extensions' section">#</a></div>Extending classes, implementing interfaces, or using mixins all work when the affected class is editable. However, sometimes it's useful to extend a class that already exists or is part of another library or the Dart SDK.In these cases, Dart offers the ability to write extensions for existing classes.As an example, the following extension on the <code>String</code> class from the Dart SDK allows parsing of integers:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>extension NumberParsing on String { int parseInt() { return int.parse(this); } }</code></pre></div></div>For the extension to become available, it has to be present in the same file, or its file must be imported.Use it as follows:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>import 'string_apis.dart'; // Import the file the extension is in var age = '42'.parseInt(); // Use the extension method.</code></pre></div></div><div class="header-wrapper"><h3 id="getters-and-setters">Getters and setters</h3><a class="heading-link" href="#getters-and-setters" aria-label="Link to 'Getters and setters' section">#</a></div>Getters and setters in Dart work exactly like their JavaScript counterparts:<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>class Person { _age = 0; get age() { return this._age; } set age(value) { if (value < 0) { throw new Error( 'age cannot be negative' ); } this._age = value; } } var person = new Person(); person.age = 10; console.log(person.age);</code></pre></div></div><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Person { int _age = 0; int get age { return _age; } set age(int value) { if (value < 0) { throw ArgumentError( 'Age cannot be negative' ); } _age = value; } } void main() { var person = Person(); person.age = 10; print(person.age); }</code></pre></div></div><div class="header-wrapper"><h3 id="public-and-private-members">Public and private members</h3><a class="heading-link" href="#public-and-private-members" aria-label="Link to 'Public and private members' section">#</a></div>Like JavaScript, Dart has no access modifier keywords: all class members are public by default.JavaScript will include private class members in the next practical revision of the EcmaScript standard. As such, implementations for this have been available in various browsers and runtimes for some time.To make a class member private in JavaScript, prefix its name with a pound (or hash) symbol (<code>#</code>).<div class="code-block-wrapper language-js"><div class="code-block-body">js<pre class="shiki dash-light" tabindex="0"><code>class Animal { eyes; // Public field #paws; // Private field #printEyes() { // Private method print(this.eyes); } printPaws() { // Public method print(this.#paws); } }</code></pre></div></div>To make a class member private in Dart, prefix its name with an underscore (<code>_</code>).<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Animal { int eyes; // Public field int _paws; // Private field void _printEyes() { // Private method print(this.eyes); } void printPaws() { // Public method print(this._paws); } }</code></pre></div></div>JavaScript uses the hash as a convention. Dart's compiler enforces use of the underscore for this feature.Dart makes private members private to the library, not the class. This means that you can access private members from code in the same library. By default, Dart limits access to private class members to code in the same file. To expand the scope of a library beyond one file, add the <code>part</code> directive. When possible, <a href="/guides/libraries/create-packages#organizing-a-package">avoid using <code>part</code></a>. Reserve using <code>part</code> for code generators.<div class="header-wrapper"><h3 id="late-variables">Late variables</h3><a class="heading-link" href="#late-variables" aria-label="Link to 'Late variables' section">#</a></div>To indicate that Dart initializes class fields at a later point, assign the <code>late</code> keyword to those class fields. Those class fields remain non-nullable. Do this when a variable doesn't need to observed or accessed immediately and can be initialized later. This differs from labeling the field as nullable.<ul><li>(Non-nullable) late fields cannot have null assigned at a later point.</li><li>(Non-nullable) late fields throw a runtime error when accessed before they initialize. This should be avoided.</li></ul><div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class PetOwner { final String name; late final Pet _pet; PetOwner(this.name, String petName) { // Cyclic object graph, cannot set _pet before owner exists. _pet = Pet(petName, this); } Pet get pet => _pet; } class Pet { final String name; final PetOwner owner; Pet(this.name, this.owner); }</code></pre></div></div>Use <code>late</code> for local variables only if unclear code results in the compiler being unable determine if the code initialized the variable.<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>doSomething(int n, bool capture) { late List<Foo> captures; if (capture) captures = []; for (var i = 0; i < n; i++) { var foo = something(i); if (capture) captures.add(foo); } }</code></pre></div></div>In the preceding example, the compiler does not know to assign <code>captures</code> if <code>capture</code> is true. Using <code>late</code> delays the normal "assigned" checks until runtime.<div class="header-wrapper"><h2 id="generics">Generics</h2><a class="heading-link" href="#generics" aria-label="Link to 'Generics' section">#</a></div>While JavaScript doesn't offer generics, Dart does to improve type safety and reduce code duplication.<div class="header-wrapper"><h3 id="generic-methods">Generic methods</h3><a class="heading-link" href="#generic-methods" aria-label="Link to 'Generic methods' section">#</a></div>You can apply generics to methods. To define a generic type parameter, place it between angle brackets <code>< ></code> after the method name. You can then use this type within the method as the return type or within the method's parameters:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>Map<Object?, Object?> _cache = {}; T cache<T>(T value) => (_cache[value] ??= value) as T;</code></pre></div></div>Define multiple generic types by separating them with a comma:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Defining a method with multiple generics. T transform<T, Q>(T param1, Q param2) { ... } // Calling the method with explicitly defined types. transform<int, String>(5, 'string value'); // Types are optional when the analyzer can infer them. transform(5, 'string value');</code></pre></div></div><div class="header-wrapper"><h3 id="generic-classes">Generic classes</h3><a class="heading-link" href="#generic-classes" aria-label="Link to 'Generic classes' section">#</a></div>Generics can also be applied to classes. You can include the type to use when calling a constructor. This allows you to tailor reusable classes to specific types.In the following example, the <code>Cache</code> class caches specific types:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class Cache<T> { T getByKey(String key) {} void setByKey(String key, T value) {} } // Creating a cache for strings var stringCache = Cache<String>(); // stringCache has type Cache<String> stringCache.setByKey('Foo', 'Bar'); // Valid, setting a string value. stringCache.setByKey('Baz', 5); // Invalid, int type does not match generic.</code></pre></div></div>If you omit the type declaration, the runtime type becomes <code>Cache<dynamic></code> and both calls to <code>setByKey</code> are valid.<div class="header-wrapper"><h3 id="restricting-generics">Restricting generics</h3><a class="heading-link" href="#restricting-generics" aria-label="Link to 'Restricting generics' section">#</a></div>You can use generics to restrict your code to a family of types using <code>extends</code>. This ensures that your class is instantiated with a generic type that extends a specific type:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>class NumberManager<T extends num> { ... } // Valid. var manager = NumberManager<int>(); var manager = NumberManager<double>(); // Invalid, String nor its parent classes extend num. var manager = NumberManager<String>();</code></pre></div></div><div class="header-wrapper"><h3 id="generics-in-literals">Generics in literals</h3><a class="heading-link" href="#generics-in-literals" aria-label="Link to 'Generics in literals' section">#</a></div><code>Map</code>, <code>Set</code>, and <code>List</code> literals can accept type arguments. This helps when Dart cannot infer the type or infer the type correctly.For example, the <code>List</code> class has a generic definition: <code>class List<E></code>. The type parameter <code>E</code> refers to the type of the list's contents. Normally, this type is automatically inferred, which is used in some <code>List</code> class's member types. (For example, its first getter returns a value of type <code>E</code>.) When defining a <code>List</code> literal, you can explicitly define the generic type as follows:<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Automatic type inference var objList = [5, 2.0]; // Type: List<num> // Explicit type definition: var objList = <Object>[5, 2.0]; // Type: List<Object> // Sets work identically: var objSet = <Object>{5, 2.0};</code></pre></div></div>This is also true for <code>Map</code>s, which also define their key and value types using generics (<code>class Map<K, V></code>):<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>// Automatic type inference var map = { 'foo': 'bar' }; // Type: Map<String, String> // Explicit type definition: var map = <String, Object>{ 'foo': 'bar' }; // Type: Map<String, Object></code></pre></div></div><div class="header-wrapper"><h2 id="doc-comments">Doc comments</h2><a class="heading-link" href="#doc-comments" aria-label="Link to 'Doc comments' section">#</a></div>Regular comments work the same in Dart as they do in JavaScript. Using <code>//</code> comments out everything beyond it for the remaining line, and you can use <code>/* ... */</code> to block comments spanning multiple lines.In addition to regular comments, Dart also has <a href="/effective-dart/documentation#doc-comments">doc comments</a> that work in tandem with <a href="/tools/dart-doc"><code>dart doc</code></a>: a first party tool that generates HTML documentation for Dart packages. It's considered best practice to place doc comments above all declarations for public members.Define a doc comment by using three forward slashes instead of two (<code>///</code>):<div class="code-block-wrapper language-dart"><div class="code-block-body">dart<pre class="shiki dash-light" tabindex="0"><code>/// The number of characters in this chunk when unsplit. int get length => ...</code></pre></div></div><div class="header-wrapper"><h2 id="next-steps">Next steps</h2><a class="heading-link" href="#next-steps" aria-label="Link to 'Next steps' section">#</a></div>This guide has introduced you to the major differences between Dart and JavaScript. At this point, consider reading the Dart documentation. You could also read the <a href="https://flutter.dev">Flutter</a> docs. Built with Dart, Flutter is an open-source framework that uses Dart for building natively compiled, multi-platform applications from a single codebase. These docs provide in-depth information about the language and practical ways of getting started.Some possible next steps:<ul><li><a href="/language">Language tour</a> to learn more about the Dart language</li><li><a href="/libraries">Core library documentation</a> to learn about Dart's core libraries</li><li><a href="/tutorials">Dart tutorials</a> for applied practice covering a variety of topics</li><li><a href="/effective-dart">Effective Dart</a> to learn about common conventions and guidelines when writing Dart code</li></ul>Unless stated otherwise, the documentation on this site reflects Dart 3.5.4. Page last updated on 2024-10-22. <a href="https://github.com/dart-lang/site-www/tree/main/src/content/resources/coming-from/js-to-dart.md" target="_blank" rel="noopener">View source</a> or <a href="https://github.com/dart-lang/site-www/issues/new?template=1_page_issue.yml&page-url=https://dart.dev/resources/coming-from/js-to-dart/&page-source=https://github.com/dart-lang/site-www/tree/main/src/content/resources/coming-from/js-to-dart.md" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.</div></article></main><footer id="page-footer"><div class="footer-section footer-main"><a href="/" class="brand" title="Dart"><img src="/assets/img/logo/logo-white-text.svg" alt="Dart" width="164"></a><div class="footer-social-links"><a href="https://medium.com/dartlang" target="_blank" rel="noopener" title="Medium blog"><svg><use href="/assets/img/social/medium.svg#medium"></use></svg> </a><a href="https://github.com/dart-lang" target="_blank" rel="noopener" title="GitHub"><svg><use href="/assets/img/social/github.svg#github"></use></svg> </a><a href="https://twitter.com/dart_lang" target="_blank" rel="noopener" title="X (Twitter)"><svg><use href="/assets/img/social/x.svg#x"></use></svg></a></div></div><div class="footer-section footer-tray"><div class="footer-licenses">Except as otherwise noted, this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License</a>.</div><div class="footer-utility-links"><ul><li><a href="/terms" title="Terms of use">Terms</a></li><li><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy">Privacy</a></li><li><a href="/security" title="Security philosophy and practices">Security</a></li></ul></div></div></footer></body></html>