Category: JavaScript

JavaScript Destructuring

Destructuring Assignment Syntax

The destructuring assignment syntax unpack object properties into variables:

let {firstName, lastName} = person;

It can also unpack arrays and any other iterables:

let [firstName, lastName] = person;

Object Destructuring

Example

// Create an Object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName} = person;

The order of the properties does not matter : Continue reading JavaScript Destructuring

JavaScript Type Conversion

  • Converting Strings to Numbers
  • Converting Numbers to Strings
  • Converting Dates to Numbers
  • Converting Numbers to Dates
  • Converting Booleans to Numbers
  • Converting Numbers to Booleans

JavaScript Type Conversion

JavaScript variables can be converted to a new variable and another data type:

  • By the use of a JavaScript function
  • Automatically by JavaScript itself

Continue reading JavaScript Type Conversion

JavaScript typeof

The typeof Operator

The typeof operator returns the data type of a JavaScript variable.

Primitive Data Types

In JavaScript, a primitive value is a single value with no properties or methods.

JavaScript has 7 primitive data types:

  • string
  • number
  • boolean
  • bigint
  • symbol
  • null
  • undefined

The typeof operator returns the type of a variable or an expression.

Examples

typeof "John"         // Returns string
typeof ("John"+"Doe") // Returns string
typeof 3.14           // Returns number
typeof 33             // Returns number
typeof (33 + 66)      // Returns number
typeof true           // Returns boolean
typeof false          // Returns boolean
typeof 1234n          // Returns bigint
typeof Symbol()       // Returns symbol
typeof x              // Returns undefined

typeof null           // Returns object

Note:

In JavaScript, null is a primitive value. However, typeof returns “object”.

This is a well-known bug in JavaScript and has historical reasons.

Continue reading JavaScript typeof

JavaScript Map Methods

The new Map() Method

You can create a map by passing an array to the new Map() constructor:

Example

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Map.get()

You get the value of a key in a map with the get() method Continue reading JavaScript Map Methods

JavaScript Maps

A Map holds key-value pairs where the keys can be any datatype.

A Map remembers the original insertion order of the keys.

How to Create a Map

You can create a JavaScript Map by:

  • Passing an Array to new Map()
  • Create a Map and use Map.set()

The new Map() Method

You can create a Map by passing an Array to the new Map() constructor : Continue reading JavaScript Maps

JavaScript Set Methods

The new Set() Method

Pass an array to the new Set() constructor:

Example

// Create a Set
const letters = new Set(["a","b","c"]);

The add() Method

Example

letters.add("d");
letters.add("e");

If you add equal elements, only the first will be saved : Continue reading JavaScript Set Methods

JavaScript Sets

A JavaScript Set is a collection of unique values.

Each value can only occur once in a Set.

The values can be of any type, primitive values or objects.

How to Create a Set

You can create a JavaScript Set by:

  • Passing an array to new Set()
  • Create an empty set and use add() to add values

Continue reading JavaScript Sets

JavaScript Iterables

Iterables are iterable objects (like Arrays).

Iterables can be accessed with simple and efficient code.

Iterables can be iterated over with for..of loops

The For Of Loop

The JavaScript for..of statement loops through the elements of an iterable object. Continue reading JavaScript Iterables

JavaScript Break and Continue

The break statement “jumps out” of a loop.

The continue statement “jumps over” one iteration in the loop.

The Break Statement

You have already seen the break statement used in an earlier chapter of this tutorial. It was used to “jump out” of a switch() statement.

The break statement can also be used to jump out of a loop:

Example

for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

In the example above, the break statement ends the loop (“breaks” the loop) when the loop counter (i) is 3. Continue reading JavaScript Break and Continue

JavaScript While Loop

Loops can execute a block of code as long as a specified condition is true.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

while (condition) {
  // code block to be executed
}

Example

In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10 :

Example

while (i < 10) {
  text += "The number is " + i;
  i++;
}

If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

Continue reading JavaScript While Loop