Essential JavaScript for React

Scope (var, let, const)

Summary:

// myLetVariable is *not* visible out here
for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
// myLetVariable is only visible in here
}
// myLetVariable is *not* visible out here

var

  1. Code

    var numbers = [1, 2, 3, 4];
    for (var counter = 0; counter < numbers.length; counter++) {
    console.log(numbers[counter]);
    }
    console.log("at end: " + counter);

  2. Result

    1
    2
    3
    4
    at end: 4

let

  1. Code

    let numbers = [1, 2, 3, 4];
    - for (var counter = 0; counter < numbers.length; counter++) {
    + for (let counter = 0; counter < numbers.length; counter++) {
    console.log(numbers[counter]);
    }
    console.log('at end: ' + counter);

  2. Result

    console.log('at end: ' + counter);
    ^
    ReferenceError: counter is not defined

const

  1. Code

    const a = 1;
    a = 2;

  2. Result

    TypeError: Assignment to constant variable.

Arrow Functions

  1. Code

    Using a function

    let numbers = [1, 2, 3, 4];
    //verbose
    numbers.forEach(function (n) {
    console.log(n);
    });

  2. Result

    1
    2
    3
    4

    Using an arrow function

  3. Code

    let numbers = [1, 2, 3, 4];
    numbers.forEach((n) => console.log(n));

  4. Result

    1
    2
    3
    4

Destructuring

Objects

  1. Code

    let person = {
    first: "Thomas",
    last: "Edison",
    age: 5,
    twitter: "@tom",
    };
    let { first, last } = person;
    console.log(first);
    console.log(last);

  2. Result

    Thomas
    Edison

Assignment is left to right with an object literal.

  1. Code

    let person = {
    first: "Thomas",
    last: "Edison",
    age: 5,
    twitter: "@tom",
    };
    let { first: firstName, last: lastName } = person;
    console.log(firstName);
    console.log(lastName);

  2. Result

    Thomas
    Edison

Arrays

  1. Code

    let numbers = [1, 2, 3];
    let [a, b, c] = numbers;
    console.log(a);
    console.log(b);
    console.log(c);

  2. Result

    1
    2
    3

Classes

Constructors

  1. Code:

    If using Babel compiler:

    class Person {
    constructor(first, last) {
    this.first = first;
    this.last = last;
    }
    }
    let person = new Person("Ron", "Swanson");
    console.log(person.first + " " + person.last);

    If using TypeScript (tsc) compiler:

    class Person {
    first;
    last;
    constructor(first, last) {
    this.first = first;
    this.last = last;
    }
    }
    let person = new Person("Ron", "Swanson");
    console.log(person.first + " " + person.last);

  2. Result:

    Ron Swanson

Methods

  1. Code:

    If using Babel compiler:

    class Person {
    constructor(first, last) {
    this.first = first;
    this.last = last;
    }
    getFullName() {
    return this.first + " " + this.last;
    }
    }
    let person = new Person("Ron", "Swanson");
    console.log(person.getFullName());

    If using TypeScript (tsc) compiler:

    class Person {
    first;
    last;
    constructor(first, last) {
    this.first = first;
    this.last = last;
    }
    getFullName() {
    return this.first + " " + this.last;
    }
    }
    let person = new Person("Ron", "Swanson");
    console.log(person.getFullName());

  2. Result:

    Ron Swanson

Class Fields

Class Fields are only a stage-3 proposal so you need to install an additional plugin to use them.

Class field declarations for JavaScript

The proposed feature of class fields is commonly used in React projects and is included in Create React App's default configuration as well as the Run Code extension we are using to run these examples.

This propsed feature is available in TypeScript without any additional configuration.

  1. Code:

    class Person {
    first;
    last;
    }
    let person = new Person();
    person.first = "Tom";
    person.last = "Haverford";
    console.log(person.first + " " + person.last);

  2. Result:

    Craig McKeachie

Modules

First Module

  1. Create file src\my-module.js or .\my-module.ts

  2. Add the following code to my-module.[js|ts]

    export function myFunction() {
    return "myFunction was run.";
    }

  3. Code in program.[js|ts]

    • Auto import doesn't work in JavaScript, you need to use TypeScript
    import { myFunction } from "./my-module";
    console.log(myFunction());

  4. Result

    myFunction was run.

Another Module

  1. Code in my-module.[js|ts]

    export function myFunction() {
    return "myFunction was run.";
    }
    function myPrivateFunction() {
    return "myPrivateFunction was run.";
    }
    let myObject = {
    myName: "I can access myObject's name",
    myMethod: function () {
    return "myMethod on myObject is running.";
    },
    };
    export { myObject };
    export const myPrimitive = 55;
    export class MyClass {
    myClassMethod() {
    return "myClassMethod on myClass is running.";
    }
    }

  2. Code in program.[js|ts]

    import { myFunction, myObject, myPrimitive, MyClass } from "./my-module";
    console.log(myFunction());
    console.log(myObject.myName);
    console.log(myObject.myMethod());
    console.log(myPrimitive);
    let myClass = new MyClass();
    console.log(myClass.myClassMethod());

  3. Result

    myFunction was run.
    I can access myObject's name
    myMethod on myObject is running.
    55
    myClassMethod on myClass is running.

Spread

  1. Code

    program.[js|ts]

    let person = {
    first: "Thomas",
    last: "Edison",
    age: 5,
    twitter: "@tom",
    };
    let anotherPerson = {
    ...person,
    age: 80,
    };
    console.log(anotherPerson);

  2. Result

    { first: 'Thomas', last: 'Edison', age: 80, twitter: '@tom' }

  3. Code

    program.[js|ts]

    const numbers = [1, 2, 3, 4];
    const moreNumbers = [...numbers, 5, 6, 7, 8];
    console.log(moreNumbers);

  4. Result

    [
    1, 2, 3, 4,
    5, 6, 7, 8
    ]

Array.map() method

a. for loop

const numbers = [1, 2, 3, 4, 5];
const tens = [];
for (let index = 0; index < numbers.length; index++) {
const number = numbers[index];
tens.push(number * 10);
}
console.log(tens);

b. #array.forEach

const numbers = [1, 2, 3, 4, 5];
const tens = [];
numbers.forEach(function (number) {
tens.push(number * 10);
});
console.log(tens);

c. #array.map

const numbers = [1, 2, 3, 4, 5];
const tens = numbers.map(function (number) {
return number * 10;
});
console.log(tens);

d. #array.map with arrow function

const numbers = [1, 2, 3, 4, 5];
const tens = numbers.map((number) => number * 10);
console.log(tens);
Edit this page