Learn to Code via Tutorials on Repl.it!

← Back to all posts
Learning modern Javascript!
firefish (948)

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.


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


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.


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;

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;

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.


import { reverse } from "./util.js";

console.log(reverse("hello world")); // outputs "dlrow olleh"


export let reverse = str => str

// 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) {
} else if (a == false) {

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

if (a) {
} else {

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


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! :)

StringentDev (229)

yeah i recently found out about the tenery operators and then i felt so dumb for not using them. I also found classes 5 weeks back.

welp, thats why im still learning JS.

firefish (948)

@StringentDev ternary operators are a hangover from C btw

StringentDev (229)

@firefish i think we need to rewrite our imports (They are using RequireJS)

firefish (948)

@StringentDev so yeah any c-style language (i.e. C C++ C# Java JS etc) supports ternary. it's probably one of the most widely hated features

StringentDev (229)

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

firefish (948)

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

CyberHacker101 (128)

For my whole repl life ive thought you were a mod lkdsjo aodno andoijawniownan @firefish

firefish (948)

@CyberHacker101 i've never been a mod, i'm not notable enough


I hate JavaScript but this tutorial is cool

firefish (948)

@EpicGamer007 oh, you mean that cycle squeezer

firefish (948)

@EpicGamer007 how is he ahead if i made it to highlights?

firefish (948)

@EpicGamer007 to monthly repls (or as they call it now monthly highlights) duh have you been living under a rock

EpicGamer007 (1736)

@firefish i have not been living under a rock but thank you. i think you made it because now its just tutorials but back then it was share posts and tutorials so tutorials and stuff from other boards didn't really make the spotlight /shrug, but heres an upvote, i never said it was a bad tutorial anyways

DynamicSquid (4922)

Nice tutorial! Although JS sucks

firefish (948)

@DynamicSquid even though i do love js, i agree, it does suck, I mean there's a reason why you can only find hoisting in javascript and nowhere else