3-minute guide to Dart for JS developers

Were you ever interested in Flutter but never started because learning a whole new programming language for one framework felt like a overcommitment? Read through few examples and see for yourself that it’s not the case and knowing JavaScript or TypeScript is enough to get started with Flutter.

JS/TS vs Dart

Dart’s syntax does have a few false friends for the JS/TS developers. Fear not though, as this guide will bring your attention to them allowing you to avoid such syntax.

Semicolons

The big issue when starting a new JS/TS project and configuring linter —” should we mark the end of each command or not" does not exist in Flutter projects.
Semicolons are required in Dart.

It might be a subject to change in the future however, here’s the discussion https://github.com/dart-lang/language/issues/69 about the topic.

const != const

Probably the most frequently made mistake when coming to Dart with JS background is defining immutables with const keyword. Especially because const is a valid Dart keyword but have different effect for the stored value.
Equivalent to JavaScript’s const is a final.

const in Dart represents a compile-time declared value, not an unchangeable one.

Comparison operator ===

JavaScript’s attempt at making developer’s life easier by automatically casting values compared with == operator sure was a great idea but turned out to be confusing for many. === came to the rescue for JS but Dart programmes never had the issue.
There are no === operator in Dart, == is the equivalent thanks to the Dart’s type system.

Promise is Future

In Dart, an idea of a task that will be finished later and can be awaited for is called Future, unlike in JS/TS where developers are making Promises all over the place.

async keyword positioning

async keyword enabling await syntax in the function body is placed after the function name:

example() async {...}

Fat arrow functions

This code in Dart

example() => true;

means that the example() function will return true and can have only one operation performed. For multistep operations, use:

example() {
 .. steps ..
 return true;
}

It works for lambdas too, like so

onEventHappened = () { .. do stuff .. }

this in Dart is not as confusing as in JS so one way of defining lambdas is enough 😉

Method return types

Unlike in TS, return types are defined before function declaration:

bool example() {
 return true;
}

Modules

Neither export keyword or module.exports object are present in Dart. Everything that is in the root level of the .dart file can be imported in other modules. To hide elements from other modules predicate the name of the element with _, effectively making it private for the module.

const importableByOtherModules = 100;
const _hiddenFromOtherModules = 101;

String templates

In Dart, you can use templates in both '' and "" strings like so

print(’${method()}, $variable’)

No backticks are required (or even supported).

Conclusions

As you can see, switching from JavaScript to Dart can be quick and easy. When you’re comfortable with the basics you can go deeper in Dart’s type system, threads or others optimisations. Here’s great Google’s guide https://flutter.dev/docs/get-started/flutter-for/web-devs for switching JS developers and the Dart overview https://dart.dev/overview — both are worth reading when you’re interested in Flutter development.

This is an extended part of a free Flutter workshop https://flutter-intro-workshop.web.app/docs/ for begginers.