Learning modern Javascript!
h
firefish

Learning es6 JS!

I've met a lot of people on repl.it who code in JS. But, they only code in old JS, and not es6. I'm also adding here some very useful syntactic features that not many seem to know.

NOTE: All of these do apply to NodeJS as well.

Functions

Everyone agrees. Functions are cool. But now we have some shorthand!

Pros

Arrow functions use an arrow (=>, sometimes known as the implies symbol) to denote when the parameters end and when the content finishes. Did I mention, there is no convoluted function keyword?

That's a lot easier to type. But, there is more shorthand! For instance, you only have one parameter. You can now omit the parentheses!

That is really simple. But it can be simplified further! If a value is returned, it is possible to omit the braces. It's hard to describe, I'll show you what I mean.

We've taken from a three line function, to a 10 character arrow function! You see the upsides.

Cons

I'm not saying old-fashioned functions don't have their use anymore. Far from it. If you make OOP projects in js, this is why you still use normal functions.

Arrow functions do some funny things with this scoping.

An arrow function uses this as the this at where the function was declared, and normal functions use this in the scope of the caller. Here's an example.

That was probably a bit confusing, so make sure you understand what the comments say before we move on.

Anti-hoist measures

In old JavaScript there was (and still is) a phenomenon known as hoisting. This meant anything declared got hoisted to the top of the scope, which is extremely counter-intuitive.

Doesn't make sense, right? There are declarations that don't hoist, which are let (which declares as mutable) and const (which declares as immutable).

Modules in JS

This is a recent addition: the import keyword! No RequireJS needed, just pure imports. Here's an example, with two files.

index.js

util.js

Illogical Logic

I've seen many people not know about the simple if (a). Here are just some simple examples:

It's painful. I know. Try this instead:

In this use case, we can do even better, using the ternary operator:

For those that don't know about the ternary operator, here's something to help you:

The mnemonic goes that it's like a question.

Anti-type

Some people I also have seen don't know the difference between == and ===. == matches value only, however === matches value and type.

In other words:

The end!

If you didn't understand some concepts in the tutorial, don't ask me, it's good practise to learn to use Google! :)

You are viewing a single comment. View All
StringentDev

@firefish well requireJS is pretty bad if we have a better alt for importig modules as Require is pretty slow.