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.

3. Code:

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

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