Skip to content
Sign upLog in

Learning modern Javascript!

Profile icon
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?

function () { /* code here */ } // becomes () => { /* code here */ }

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!

function (a) { return a + 1; } // becomes a => { return a + 1 };

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.

a => { return a + 1; } // becomes a => a + 1

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.

class B { constructor() { // a + b = 7 this.a = 2; this.b = 5; } } class A { constructor() { // a + b = 3 this.a = 1; this.b = 2; // the below takes A's this.a and this.b, which returns 3 B.prototype.broken = () => this.a + this.b; // the below takes B's this.a and this.b, which returns 7 B.prototype.working = function () { return this.a + this.b }; } }

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.

// this WILL NOT throw an error. hoisted = 42; console.log(hoisted); var hoisted;

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).

// because I used let not var here, // this WILL throw an error. notHoisted = 42; console.log(notHoisted); let notHoisted;

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

import { reverse } from "./util.js"; console.log(reverse("hello world")); // outputs "dlrow olleh"

util.js

export let reverse = str => str .split("") .reverse() .join(""); // ah yes, clever es6 arrow function :)

Illogical Logic

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

if (a == true) { console.log("yes"); } else if (a == false) { console.log("no"); }

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

if (a) { console.log("yes"); } else { console.log("no"); }

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

console.log(a ? "yes" : "no");

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

condition ? "if condition is true this is returned" : "otherwise return this"

The mnemonic goes that it's like a question.

condition is true? return 5, otherwise return 4
condition ? 5 : 4

Anti-type

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

true == 1; // outputs true, because true can be casted to 1. true === 1; // outputs false, true is type boolean however 1 is type number.

In other words:

a === b // is the same as (a == b) && (typeof a == typeof b)

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
Profile icon
firefish

require is pretty slow

@StringentDev
js is slow in general. As a wise man once said:

everything is so fast that if it's horribly inefficient it doesn't matter
- Totally A. Real-Person, 2022