Forem: Charlie @ 90-10.dev

15 Javascript Frameworks and Libraries you need to know

Charlie @ 90-10.dev — Sun, 26 Feb 2023 10:00:00 +0000

Javascript is a programming language that is widely used for web development. Its popularity has led to the creation of many frameworks and libraries that make it easier to develop complex applications. In this article, we will discuss some of the most popular frameworks and libraries that can be used to develop advanced Javascript applications.

1. React

React is a Javascript library that was developed by Facebook. It is used for building user interfaces and is known for its performance and flexibility. React makes it easy to create reusable UI components, which can be used across different parts of an application. It also has a large and active community, which means that developers can find plenty of resources and support when working with React.

2. Angular

Angular is a Javascript framework that was developed by Google. It is used for building complex web applications and provides a range of features, such as data binding, dependency injection, and routing. Angular is known for its ease of use and provides a range of tools and resources that make it easy to build robust applications.

3. Vue.js

Vue.js is a Javascript framework that is known for its simplicity and ease of use. It is used for building user interfaces and provides a range of features, such as data binding, routing, and state management. Vue.js is also known for its small size, which makes it easy to integrate into existing projects.

4. Node.js

Node.js is a Javascript runtime environment that allows developers to run Javascript code outside of a web browser. It is used for building server-side applications and provides a range of features, such as event-driven programming and non-blocking I/O. Node.js is known for its scalability and is used by many large companies, such as Netflix, LinkedIn, and Walmart.

5. Redux

Redux is a Javascript library that is used for managing the state of an application. It provides a predictable state container, which makes it easy to manage and update the state of an application. Redux is used by many popular frameworks, such as React and Angular, and is known for its ease of use and flexibility.

6. Express.js

Express.js is a popular, minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is designed for building web applications and APIs.

7. jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and AJAX much simpler with an easy-to-use API that works across a multitude of browsers.

8. Ember.js

Ember.js is a JavaScript framework that is used for building web applications. It provides a range of features, such as data binding, dependency injection, and routing. Ember.js is known for its ease of use and provides a range of tools and resources that make it easy to build robust applications.

9. Backbone.js

Backbone.js is a JavaScript library that is used for developing single-page applications. It provides a range of features, such as models, collections, and views. Backbone.js is known for being lightweight and flexible.

10. D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.

11. Jest

Jest is a JavaScript testing framework that is used for unit testing and integration testing of JavaScript code. It is known for its ease of use and provides a range of features, such as snapshot testing, mocking, and code coverage analysis. Jest is used by many popular frameworks, such as React and Vue.js.

12. Lodash

Lodash is a JavaScript utility library that provides a range of utility functions that can be used to simplify JavaScript code. It provides functions for working with arrays, objects, strings, and more. Lodash is known for its speed and efficiency and is used by many popular frameworks, such as React and Angular.

13. Moment.js

Moment.js is a JavaScript library that is used for working with dates and times. It provides a range of functions for parsing, validating, manipulating, and formatting dates and times. Moment.js is known for its ease of use and is used by many popular frameworks, such as React and Angular.

14. Chart.js

Chart.js is a JavaScript library for creating interactive charts and graphs. It provides a range of chart types, such as line charts, bar charts, and pie charts. Chart.js is known for its ease of use and provides a range of customization options. It is used by many popular frameworks, such as React and Vue.js.

15. Three.js

Three.js is a JavaScript library that is used for building 3D graphics on the web. It provides a range of features, such as 3D geometry, lighting, and material effects. Three.js is known for its ease of use and provides a range of tools and resources that make it easy to build 3D applications on the web.

There are many advanced Javascript frameworks and libraries available that can be used to develop complex web applications. Each framework or library has its own unique features and advantages, so developers should choose the one that best suits their needs. However, it is important to note that mastering any of these frameworks or libraries requires a good understanding of core Javascript concepts.

Harnessing the Power of Error Objects in JavaScript

Charlie @ 90-10.dev — Tue, 24 Jan 2023 08:00:00 +0000

Encountering errors is inevitable and JavaScript is no exception. Understanding and effectively utilising error objects can turn these seemingly annoying occurrences into valuable tools for debugging and error handling.

What are Error Objects?

Error objects are specialised objects that encapsulate information about an error that occurs during the execution of a script. They provide essential details about the error, such as a message describing the error, the type of error, and the location of the error in the source code. JavaScript has a built-in Error object, which serves as the base object for all error types.

Error objects have two primary properties: name and message. The name property refers to the error's type, and the message property contains a human-readable description of the error. In addition to these properties, the Error object also has a stack property, which returns a string representing the stack trace at the time the error was thrown.

function divide(a, b) {
    if (b === 0) {
      throw new Error("Division by zero");
    }
    return a / b;
}

function quotient(a, b) {
    return divide(a, b);
}

try {
    quotient(42, 0);
} catch (error) {
    console.error("Error message:", error.message);
     // prints: "Error message: Division by zero"

    console.error("Error stack trace:", error.stack);
    /* prints:
      Error stack trace: Error: Division by zero
        at divide (REPL24:3:11)
        at quotient (REPL28:2:10)
        at REPL35:2:3
    */
}

Creating Custom Error Objects

Extend the Error Object

To create a custom error object, you can extend the built-in Error object using the following pattern:

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = 'CustomError';
  }
}

By extending the Error object, your custom error will inherit the properties and methods of the base Error object. This allows you to create more specific error types tailored to your application's needs.

Error.prototype

We can also extend the Error object by creating a custom constructor function. The constructor function should accept an error message as an argument and call the Error object's constructor with the message. This way, the new error object will have all the properties of the built-in Error object, along with any additional properties specified by the custom constructor function.

function CustomError(message) {
  this.name = 'CustomError';
  this.message = message || 'Default error message';
  this.stack = (new Error()).stack;
}

CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;

Throwing and Catching Errors

To throw an error, you can use the 'throw' statement followed by an error object:

throw new Error('Something went wrong');

To catch and handle errors, JavaScript provides the 'try...catch' statement. The 'try' block contains the code that may generate an error, and the 'catch' block handles the error:

try {
  // Code that may throw an error
} catch (error) {
  console.error(error.message);
}

Built-in Error Objects

The language also provides several other built-in error objects derived from the base Error object, including:

ReferenceError

Triggered when attempting to use a variable that has not been defined or is not in the current scope:

function greet() {
  try {
    console.log("Hello " + name);
  } catch (error) {
    if (error instanceof ReferenceError) {
      console.error("Error:", error.message);
    } else {
      // any other error types
      console.error("Unexpected error:", error.message);
    }
  }
}

greet(); // prints: "Error: name is not defined"

TypeError

Triggered when attempting to perform an operation on a value of an incorrect type, such as calling a non-function as a function or accessing a property on a non-object:

const greeting = {
  hello: function () {
    return "Hello!";
  },
};

try {
    // prints: hello
    console.log(greeting["hello"]());
    // prints: TypeError: greeting.goodbye is not a function
    console.log(greeting["goodbye"]());
} catch (error) {
    if (error instanceof TypeError) {
        console.error("TypeError:", error.message);
    } else {
        // any other error types
        console.error("Unexpected error:", error.message);
    }
}

RangeError

Triggered when providing a value that is outside the allowed range for a particular operation or data structure:

function createArray(size) {
    try {
        return new Array(size);
    } catch (error) {
        if (error instanceof RangeError) {
            console.error("RangeError:", error.message);
        } else {
            // any other error types
            console.error("Unexpected error:", error.message);
        }
    }
}

// prints: RangeError: Invalid array length
createArray(-3);

SyntaxError

Triggered when there is an issue with the syntax of the code, typically during parsing or evaluation - a common occurence is when using eval():

function execute(code) {
    try {
        return eval(code);
    } catch (error) {
        if (error instanceof SyntaxError) {
            console.error("SyntaxError:", error.message);
        } else {
            // any other error types
            console.error("Unexpected error:", error.message);
        }
    }
}

// prints: "Hello, World!"
execute("console.log('Hello, World!');");

// prints: "SyntaxError: missing ) after argument list"
execute("console.log('Hello, World!';");

Remember that using eval() is generally discouraged in modern JavaScript programming, as it can lead to security and performance issues.

EvalError

This is a deprecated error object related to the global eval() function - it is not thrown by the current ECMAScript specification with other error types such as SyntaxError, ReferenceError, or TypeError are thrown when issues encountered.

URIError

Thrown when a malformed URI is provided to certain global functions, such as encodeURI(), decodeURI(), encodeURIComponent(), or decodeURIComponent():

function decode(encodedURI) {
    try {
        return decodeURIComponent(encodedURI);
    } catch (error) {
        if (error instanceof URIError) {
            console.error("URIError:", error.message);
            return;
        }
        // any other error types
        console.error("Unexpected error:", error.message);
    }
}

// prints: "://example.com/test"
decode("%3A%2F%2Fexample.com/test");

// prints: "URIError: URI malformed"
decode("%C0%AFexample.com/test%");

Best Practices for Using Error Objects

Always throw an instance of an error object instead of a plain string or number to ensure proper error handling.
Use appropriate built-in error types when throwing errors. E.g. throw a ReferenceError when encountering an issue with an undefined variable.
Create custom error objects for application-specific errors.
Utilize the 'stack' property of error objects for better debugging, especially in development environments.
Handle errors gracefully by providing fallback behavior or informative messages for users.

Take Away

Effectively utilising error objects in JavaScript can greatly enhance your error handling and debugging processes. By understanding the built-in error types, creating custom error objects, and implementing proper error handling techniques, you can develop more robust, resilient, and user-friendly applications. Embrace the power of error objects and turn those inevitable errors into opportunities for improvement.

Harnessing the Power of JavaScript Bitwise Operators: Practical Examples

Charlie @ 90-10.dev — Sat, 21 Jan 2023 08:00:00 +0000

Bitwise operators in JavaScript are powerful tools that allow us to manipulate individual bits in a number. These operators are often under-utilised due to their seemingly cryptic nature, but they can prove to be incredibly efficient in certain applications.

There are six JavaScript bitwise operators that can be used to manipulate the binary representation of integers:

Bitwise AND (&) - returns a 1 in each bit position where the corresponding bits of both operands are 1; returns 0 if either bit in the compared position is 0.

24           // binary: 0001 1000
10           // binary: 0000 1010

24 & 10 = 8  // binary: 0000 1000

Bitwise OR (|) - returns a 1 in each bit position where the corresponding bits of either or both operands are 1; returns 0 if both bits are 0.

24            // binary: 0001 1000
10            // binary: 0000 1010

24 | 10 = 24  // binary: 0001 1010

Bitwise XOR (^) - returns a 1 in each bit position where the corresponding bits of either but not both operands are 1; returns 0 if both bits are 0 or both are 1.

24            // binary: 0001 1000
10            // binary: 0000 1010

24 ^ 10 = 18  // binary: 0001 0010

Bitwise NOT (~) - unary operator that inverts the bits of its operand. This will also flip the sign bit (the leftmost) so the result is negative. NB: Bitwise operators treat their operands as a sequence of 32 bits.

10        // binary: 00000000 00000000 00000000 00001010
~10 = -11 // binary: 11111111 11111111 11111111 11110101

Left Shift (<<) - shifts the bits of the first operand to the left by the number of positions specified by the second operand - effectively a multiplication with 2 to the power of the second operand.

10            // binary: 0000 1010
10 << 2 = 40  // binary: 0100 1000

Sign Propagating Right Shift (>>) - shifts the bits of the first operand to the right by the number of positions specified by the second operand. The leftmost bits are filled with the sign bit (0 for positive numbers and 1 for negative numbers).

10           // binary: 1010
10 >> 2 = 2  // binary: 0010

-10            // 11111111 11111111 11111111 11110110
-10 >> 2 = -3  // 11111111 11111111 11111111 11111101

Zero-fill Right Shift (>>>) - shifts the bits of the first operand to the right by the number of positions specified by the second operand. The leftmost bits are filled with 0s.

10            // binary: 1010
10 >>> 2 = 2  // binary: 0010

-10                    // 11111111 11111111 11111111 11110110
-10 >>> 2 = 1073741821 // 00111111 11111111 11111111 11111101

Practical Examples

Fast and Efficient Odd-Even Check

Instead of using the modulo operator (%), the bitwise AND operator (&) can be used to quickly determine if a number is even or odd.

function isEven(num) {
  return !(num & 1);
}

function isOdd(num) {
  return num & 1;
}

console.log(isEven(10)); // prints: true
console.log(isOdd(5));   // prints: true

How? The bitwise AND will flip every bit to 0 with only the last one staying the same:

13          // binary: 1101
1           // binary: 0001
13 & 1 = 1  // binary: 0001

12          // binary: 1100
1           // binary: 0001
12 & 1 = 0  // binary: 0000

Extracting Specific Bits

Specific bits in a value can be used to signify features availability

function bitAtPosition(num, position) {
  return (num & (1 << position)) >> position;
}

const number = 0b1011010; // decimal: 90
console.log(bitAtPosition(number, 3)); // prints: 1
console.log(bitAtPosition(number, 5)); // prints: 0

How?

1 << position created a number with only one bit set to 1, at the position given - this is offen referred to as the mask
The bitwise AND is applied on the given number and the mask created above resulting in only the bit we're interesting in being making it through
the bit is then moved to the right based on its position - the result will contain the required bit

JavaScript Objects

Charlie @ 90-10.dev — Sun, 15 Jan 2023 08:00:00 +0000

In JavaScript, objects are a fundamental data type that represent a collection of properties. A property is a key-value pair, where the key is a string (or symbol), and the value can be any data type.

Creating Objects

There are 4 ways to create objects:

1. Object literal notation

We're creating an object called person with three properties: name and age:

let person = {
    name: 'Paul',
    age: 30
};

2. Constructor function

A constructor function is a regular function that is called using the new keyword:

function Person(name, age) {
  this.name = name;
  this.age = age;
};

let person = new Person('Paul', 30);

3. `Object.create()`

The Object.create() method can be used to create an object with a specified prototype object and properties:

const personPrototype = {
    sayHello: function() {
        console.log(`Hello ${this.name}`);
    }
};

let person = Object.create(personPrototype, {
    name: { value: 'Paul' },
    age: { value: 30 }
});
person.sayHello(); // prints: Hello Paul

4. Class Notation

ES6 introduces classes that can be used to create objects. A class is a blueprint for creating objects with specific methods and properties:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let person = new Person('Paul', 30);

Accessing Properties

You can access an object's properties using dot notation or bracket notation:

let person = {
    name: 'Paul',
    age: 30,
    address: {
        city: 'London'
    }
};

console.log(person.name); // prints: Paul
console.log(person.address.city); // prints: London
console.log(person['age']); // prints: 30

In this example, we access the firstName property using dot notation and the lastName property using bracket notation.

Modifying Properties

You can modify an object's properties by assigning a new value to the property:

let person = {
    name: 'Paul',
    age: 30
};

person.age = 40;

console.log(person.age); // prints: 40

Adding Object Properties

You can add new properties to an object by assigning a value to a new key:

let person = {
    name: 'Paul',
    age: 30
};

person.twitter = '@90_10_dev';

console.log(person.twitter); // prints: @90_10_dev

In this example, we add a new property called twitter to the person object.

Take Away

Objects are used extensively in Javascript - they are incredibly flexible and powerful, and they can be used to represent a wide variety of data structures, including arrays, linked lists, trees, and graphs.

Create a mock API server with node and json-server

Charlie @ 90-10.dev — Sat, 14 Jan 2023 08:00:00 +0000

During the development lifecycle, we often encounter situations where we need to mock an external API server - either because it's temporarily unavailable (we might be offline) or because it simply wasn't built yet.

Here is how to get one running in no time.

Setup

We'll start by creating a new folder to store the files required for our server:

$ mkdir ApiServer

... and change the current path to that folder:

$ cd ApiServer

JSON Server

We are going to use the json-server npm library. To install JSON Server, globally in your system, run:

$ npm install -g json-server

/usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/lib/cli/bin.js + json-server@0.15.1 added 237 packages from 128 contributors in 12.542s

Data file

Let's now create a file that will contain the data to be served. Create a data.json file with the following content

{
  "tasks": [
    {
      "id": 1,
      "name": "Buy some milk"
    },
    {
      "id": 2,
      "name": "Renew insurance"
    }
  ]
}

Start server

Let's now start the server:

$ json-server -p 8080 --watch data.json

The console output will look like this:


  \{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:8080/tasks

  Home
  http://localhost:8080

  Type s + enter at any time to create a snapshot of the database
  Watching...

Navigate to http://localhost:8080 to see an overview page, or to http://localhost:8080/tasks to retrieve the tasks.

json-server has loads of other options that you might find useful:

$ json-server --help

json-server [options] 

Options:
  --config, -c Path to config file [default: "json-server.json"]
  --port, -p Set port [default: 3000]
  --host, -H Set host [default: "localhost"]
  --watch, -w Watch file(s) [boolean]
  --routes, -r Path to routes file
  --middlewares, -m Paths to middleware files [array]
  --static, -s Set static files directory
  --read-only, --ro Allow only GET requests [boolean]
  --no-cors, --nc Disable Cross-Origin Resource Sharing [boolean]
  --no-gzip, --ng Disable GZIP Content-Encoding [boolean]
  --snapshots, -S Set snapshots directory [default: "."]
  --delay, -d Add delay to responses (ms)
  --id, -i Set database id property (e.g. _id) [default: "id"]
  --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                                                 [default: "Id"]
  --quiet, -q Suppress log messages from output [boolean]
  --help, -h Show help [boolean]
  --version, -v Show version number [boolean]

Examples:
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

https://github.com/typicode/json-server

That's it. You can now consume the contents of data.json using simple local requests.

Javascript Hoisting

Charlie @ 90-10.dev — Thu, 12 Jan 2023 18:00:00 +0000

Hoisting is a mechanism where variable and function declarations are moved to the top of their scope before code execution - regardless of where they are declared in the code, they are processed first before the code is executed.

Variable Hoisting

When a variable is declared using the var keyword, it is hoisted to the top of its scope so can be accessed and used even before it is declared in the code. But, its value will be undefined until assigned a value.

console.log(name); // Output: undefined
var name = "Paul";
console.log(name); // Output: Paul

Function Hoisting

Functions declared using the function keyword are also hoisted to the top of their scope so can be called before they are declared in the code:

sayHello(); // Output: Hello World!

function sayHello() {
    console.log("Hello World!");
}

Hoisting in ES6

ES6 introduced the let and const keywords for declaring variables. Unlike variables declared using var, variables declared using let and const are not hoisted to the top of their scope, therefore cannot be accessible before declaration.

console.log(name); // Output: Uncaught ReferenceError: name is not defined
let name = "Paul";

In the above example, since name is declared using let, it is not hoisted to the top of its scope, so it results in a ReferenceError.

Take Away

It is recommended to use let or const instead of var to avoid hoisting-related issues.

Running JS in the Browser Console and Node

Charlie @ 90-10.dev — Thu, 12 Jan 2023 08:00:00 +0000

There are several ways to run JavaScript with the most popular being running JS inside a web page. Here we'll be looking at two other ways:

Run JavaScript in the Browser Console

All mainstream web browsers will include a powerful tool, the browser console, that allows developers to debug and troubleshoot issues on web pages by providing a way to interact with the web page's JavaScript code and examine the page's Document Object Model (DOM). This tool is especially useful for web developers who need to test and debug their code as they build web applications.

The browser console can be used to input JavaScript line-by-line and evaluate expressions in a CLI-like style.

Enable Browser Console

Here are the steps to enable your browser console - follow the steps for your browser:

Google Chrome: Press Ctrl + Shift + J (Windows) or Cmd + Option + J (Mac) to open the console. Alternatively, right-click on any element on the page and select "Inspect". This will open the console at the bottom of the browser window.
Mozilla Firefox: Press Ctrl + Shift + K (Windows) or Cmd + Option + K (Mac) to open the console. Alternatively, right-click on any element on the page and select "Inspect Element". This will open the console at the bottom of the browser window.
Microsoft Edge: Press Ctrl + Shift + J (Windows) or Cmd + Option + J (Mac) to open the console. Alternatively, right-click on any element on the page and select "Inspect Element". This will open the console at the bottom of the browser window.
Safari: Press Cmd + Option + C to open the console. Alternatively, go to Safari -> Preferences -> Advanced tab and check the box next to "Show Develop menu in menu bar". Then, right-click on any element on the page and select "Inspect Element". This will open the console at the bottom of the browser window.

Using the console

Once the console is open, you can start typing JavaScript right away - here is an example using the Google Chrome Browser Console.

Using the Google Chrome Browser Console

Notice that Chrome also provides auto-completion so make running JS easier.

Run JavaScript in Node.js

The second way of running JavaScript outside an HTML page is inside node.js. Once installed, open a terminal and type node. You will get a prompt allowing the input of JavaScript:

~ % node
Welcome to Node.js v16.19.0.
Type ".help" for more information.
>

Terminal

Each JavaScript expression will be evaluated as is entered:

> var theAnswer = 42
undefined
> console.log(theAnswer)
42
undefined
>

Terminal

JavaScript Modules

Charlie @ 90-10.dev — Thu, 12 Jan 2023 08:00:00 +0000

As our JavaScript code grows in site, there comes a times where including one file in not enough- here we're having a look at how to structure code across multiple files using modules.

Enable modules

Given an index.html file that includes a app.js file using a script tag, to enable module, we'll have to include type="module":

<html>
  <head>...</head>
  <body>
    ...
    <script src="app.js" type="module"></script>
  </body>
</html>

index.html

Default Import/Export

Now, can include functions defines in other files:

import f1 from './dependency.js';
...
f1();

app.js

... where f1 is exported from within the dependency:

function f1() {
  ...
}
export { f1 as default };

dependency.js

Named Import/Export

An alternative that is usually used when multiple 'transfers' are required is using named exports/imports:

function f1() {
  ...
}
function f2() {
  ...
}
export { f1, f2};

dependency.js

On import, the names must match the exact names from export (order not relevant):

import {f1, f2} from './dependency.js';
...
f1();

app.js

Renamed Export

Function can be renamed as part of the export:

function f1() {
  ...
}
function f2() {
  ...
}
export { f1, f2 as f3};

dependency.js

Now, it's imported as f3:

import {f1, f3} from './dependency.js';
...
f3();

app.js

Renamed Import

Function can also be renamed as part of the import:

function f1() {
  ...
}
function f2() {
  ...
}
export { f1, f2};

dependency.js

Now, it's imported as f3:

import {f1, f2 as f3} from './dependency.js';
...
f3();

app.js

Inline exports

The exports can also happen inline for each function that needs it:

export function f1() {
  ...
}
export function f2() {
  ...
}

dependency.js

Combined imports: Default & Named

Both of the previous methods can be combined for some interesting results:

function f1() {
  ...
}
function f2() {
  ...
}
export { f1 as default, f2};

dependency.js

Now, the import might look a bit strange:

import f1, {f2} from './dependency.js';

app.js

Passthrough Exports

Say we have 2 dependencies and we don't want to have to import both.

Given a second dependency:

function f2() {
  ...
}
export { f2 };

dependency2.js

We can simply "pass it through" in the first dependency:

function f1() {
  ...
}
export { f1 };
export { f2 } from './dependency2.js';

dependency1.js

Now app.js will only have to import from one dependency:

import {f1, f2} from './dependency1.js';

app.js

Import all

A great technique that sames keystrokes on import is the ability to import all functions together.

Given:

function f1() {
  ...
}
function f2() {
  ...
}
export { f1, f2};

dependency.js

All exports can be imported together, but the usage is slightly different:

import * as dependant from './dependency.js';
dependant.f1();

app.js

Finally

Classes can also be exported and imported.

Unfortunately, modules are not available in IE (see MDN docs) but are in Edge.

To achieve backward compatibility and avoid multiple HTTP requests in a production environment, we should probably use a module bundler such as Webpack or Babel.

JavaScript Symbols

Charlie @ 90-10.dev — Tue, 10 Jan 2023 18:00:00 +0000

A symbol is a unique and immutable data type that represents an identifier.

Symbols was first introduced in ECMAScript 6 , and they are used to define properties of an object that cannot be accessed or modified by other parts of the code.

Creating Symbols

Declaring a symbol doesn't require the new keyword:

let mySymbol = Symbol();

We can also provide a string when creating a symbol; it acts as a label for the symbol and can help with debugging.

let anotherSymbol = Symbol('test2');

Uniqueness

Symbols are unique, even when providing a string for them:

Symbol('a') === Symbol('a') // returns: false

Define Constants

Symbols can also be used to define constants by using them as property keys, ensuring that the property cannot be accidentally modified or deleted.

const THE_CONSTANT = Symbol();
const theAnswer = {

};
console.log(theAnswer[THE_CONSTANT]); // prints: 42

theAnswer[THE_CONSTANT] = 3.14;
console.log(theAnswer[THE_CONSTANT]); // prints: 42

delete theAnswer[THE_CONSTANT];
console.log(theAnswer[THE_CONSTANT]); // prints: 42

Hide Information

Symbols can be used to hide information:

let mySymbol = Symbol('answer');
let obj = {
  x: 24,

}
console.log(obj.x); // prints: 24
console.log(obj.mySymbol); // prints: undefined
console.log(obj[mySymbol]); // prints: 42

mySymbol.toString() // prints: "Symbol(answer)"

One would need to keep mySymbol variable around in order to access the second obj property.

let obj = {
    x: 24,

}

console.log(obj[Symbol("answer")]); // prints: undefined

Private methods

Symbols can also be used to create complex internal logic that can't be accessed from outside the object:

const obj = {
  [Symbol.for('sum')]: function(x, y) {
    return x + y;
  },
  add: function(x, y) {
    return this[Symbol.for('sum')](x, y);
  }
};
console.log(obj.add(2, 3)); // prints: 5
console.log(obj.sum(2, 3)); // TypeError: obj.sum is not a function

Notice the use of Symbol.for to retrieve a symbol from the global symbol registry.

Global Symbol Registry

The global symbol registry is a "concept" that might not be how actually it is implemented by JS engines but it's useful for the understanding how Symbol.for and Symbol.keyFor are used to retrieve symbols and keys across different files or global scopes.

// returns: false
Symbol('sum') === Symbol('sum')  

// returns: true
Symbol.for('sum') === Symbol.for('sum')  

Symbol.keyFor(Symbol.for("sum")) === "sum"

Reading List

JavaScript Arrays

Charlie @ 90-10.dev — Tue, 10 Jan 2023 08:00:00 +0000

Arrays are containers that store multiple values in a single variable, in a 0-indexed ordered list. They can hold any type of data, including numbers, strings, objects, and even other arrays, and are dynamic - i.e. you can add or remove items from an array as needed.

Creating an Array

Literal Syntax

Here is an array that stores 3 elements of different types:

const myArray = ['a', 42, 3.14];

`Array` Constructor

const myArray = new Array('a', 42, 3.14);

Introspection

Arrays are implemented in JavaScript as objects:

console.log(typeof myArray); // prints: object

You can check if a variable is an array:

const myArray = ['a', 42, 3.14];
console.log(Array.isArray(myArray)); //prints true

Element indexes

Arrays are 0-indexed, so to access the 3rd element of the array we'll use:

myArray[2]; // returns: 42

Indexes are also used if one wants to extract a range of elements from the array - in the example below we're extracting elements from index 2 to index 4. Notice that index 4 is not included in the response:

myArray.slice(2, 4); // returns: Array [42, 3.14]

Iteration

There are several way to iterate though the elements of an array.

Using `forEach`:

myArray.forEach(function(item) {
    console.log(item);
});

The classic `for` loop:

for(let i = 0; i < myArray.length; i++) { 
    console.log(myArray[i]);
}

`for ... in` loop:

for(const item of myArray) {
    console.log(item);
};

Modifying Arrays

push and pop

2 methods are available to add and remove elements from the end of an array: push & pop.

push allows us to add one or more elements at the end of the array - in the example below we're adding a string and an object:

myArray.push('Hello', {'x': 1});
// returns: 5  
// the new number of elements in our array

console.log(myArray); // prints Array(5) ["a", 42, 3.14, "Hello", {…}]

pop removes and returns the last element:

myArray.pop(); // returns: Object { x: 1 }
console.log(myArray); // prints: Array(4) ["a", 42, 3.14, "Hello"]

shift and unshift

To add and remove elements from the beginning of the array, we'll use unshift and shift.

Just like push, unshift takes one or more parameters:

myArray.unshift('Start', {'y': 2}); // returns: 6
console.log(myArray); 
// prints: Array(6) ["Start", {…}, "a", 42, 3.14, "Hello"]

In a similar fashion, shift removes and returns the first element:

myArray.shift(); // returns "Start"
console.log(myArray); 
// prints: Array(5) [{…}, "a", 42, 3.14, "Hello"]

Filter

Just as the name implies, we are 'filtering' the elements of an array based on a given criteria; in the example below, we're finding all even numbers in an array:

let myArray = [1, 4, 42, 11, 79];
let letters = myArray.filter((item) => {
  return (item % 2) === 0;
});
console.log(letters); // prints: [4, 42]

Let's look at a slightly more complicated example, retrieving all string elements from an array:

let myArray = ["a", 42, 3.14];
let letters = myArray.filter((item) => {
  return Object.prototype.toString.call(item) === "[object String]";
});
console.log(letters); // prints: ["a"]

Map

The map method allows us to transform each element of an array into another entity based on a certain flow. Here, we're calling an arrow function on each item of the array:

let myArray = [1, 4, 42, 11, 79];
let doubleArray = myArray.map((item) => {
  return item * 2;
});
console.log(doubleArray); // prints: [2, 8, 84, 22, 158]

Notice that we're returning a new array whilst the original one remains unchanged.

One very common use case is to return an array containing an object property:

let articles = [
  { title: 'article 1', abstract: 'abstract 1'},
  { title: 'article 2', abstract: 'abstract 2'},
  { title: 'article 3', abstract: 'abstract 3'}
];

let titles = articles.map((article) => {
  return article.title;
})
console.log(titles); // prints: ["article 1", "article 2", "article 3"]

Reduce

The reduce method might look a bit confusing at first but the clue it's in the name - it reduces the entire array to one value. Let's see how to calculate the sum of all elements in an array:

let myArray = [1, 4, 42, 11, 79];
let total = myArray.reduce((item, currentTotal) => {
  return currentTotal + item;
}, 0);
console.log(total); // prints: 137

Notice that reduce takes 2 parameters: an arrow function that computes the current step, and the initial value. The value returned at one step is being injected as currentTotal for the next step or returned when we exhausted the array.

We mentioned above that reduce "reduces" the array to one value - that's true when the array is single-dimensional. But it can also be used to flatten multi-dimensional arrays:

let myArray = [[1, 4], 23, [42, 11], 79];
const flatArray = myArray.reduce((currentFlatArray, amount) => {
  return currentFlatArray.concat(amount);
}, []);
console.log(flatArray); // prints: [1, 4, 23, 42, 11, 79]

Practical Example

Let's compute the words frequency in a piece of text:

let text = 'Alice was beginning to get very tired of sitting ' +
'by her sister on the bank, and of having nothing to do : ' +
'once or twice she had peeped into the book her sister was ' +
'reading, but it had no pictures or conversations in it ... ';

// 1. Split text into words

let words = text.split(" ");

// 2. Compute word count

var wordsCount = words.reduce( (tally, word) => {
  let lowercaseWord = word.toLowerCase();
  tally[lowercaseWord] = (tally[lowercaseWord] || 0) + 1 ;
  return tally;
} , {});

// 3. Sort word count with the most used first

// 3.1. Create array from dictionary

var wordsCountArray = Object.keys(wordsCount).map(function(key) {
  return [key, wordsCount[key]];
});

// 3.2. Sort the array based on the second element

wordsCountArray.sort(function(first, second) {
  return second[1] - first[1];
});

// 4. Display the end result

console.log(wordsCountArray);

The output will show the most used words:

[["was", 2], ["to", 2], ["of", 2], ["her", 2], ["sister", 2], ["the", 2], ["or", 2], ["had", 2], ["it", 2], ["alice", 1], ["beginning", 1], ["get", 1], ["very", 1], ["tired", 1], ["sitting", 1], ["by", 1], ["on", 1], ["bank,", 1], ["and", 1], ["having", 1], ["nothing", 1], ["do", 1], [":", 1], ["once", 1], ["twice", 1], ["she", 1], ["peeped", 1], ["into", 1], ["book", 1], ["reading,", 1], ["but", 1], ["no", 1], ["pictures", 1], ["conversations", 1], ["in", 1], ["...", 1], ["", 1]]

Reading List

MDN Array docs

JavaScript Variables and Constants

Charlie @ 90-10.dev — Mon, 09 Jan 2023 19:00:00 +0000

JavaScript Data Containers

When writing code, we need to keep track of various data we are working with – e.g.: which button was clicked, or how many items are on a page.

JavaScript provides a couple of different ways to store and manipulate data - variables and constants are containers that can be referenced by an arbitrary name and can be accessed and modified throughout the program.

Constants

Constants are containers that store immutable data (cannot be changed) - use the keyword const. The code below declares a theAnswer constant:

const theAnswer = 42

Updating a constants will trigger an error:

const theAnswer = 42
theAnswer = 12 // Uncaught TypeError: invalid assignment to const 'theAnswer'

Variables

Variables are containers that store data that can be changed during the execution of a program ( mutable ) - use the keyword let:

let colour = 'blue'
console.log(colour) // prints: blue
colour = 'red'
console.log(colour) // prints: red

"Legacy" Variables

The var keyword can also be used to declare a variable in JavaScript - in fact, it was the "original" and only way to do it for a while:

var colour = 'blue'

The use of var is being discourage because of unpredictable side effect - read on:

`let` vs `var`

Both var and let keywords can be used to declare variables with the main difference between them is the scope of the variable : var is function scoped , whereas let is block scoped.

If you declare a variable using var inside a function, it will be accessible anywhere within that function, but if you declare a variable using let inside a block, it will only be accessible within that block.

let scoping

Here is an example to illustrate the difference:

function sayHello() {
  if(true) {
    let name = "John"
  }
  console.log(`Hello ${name}`)
}

sayHello() // prints: Hello

The output below will be "Hello" as the name variable won't exist outside the if block.

Here is a another one:

function sayHello() {
  let name = "John"
  console.log(`Hello ${name}`)
  if(true) {
    let name = "Paul"
    console.log(`Hi ${name}`)
  }
  console.log(`Hello again ${name}`)
}

sayHello()

We declare a variable name inside the function and assign it the value John. Then, we declare another variable, with the same name , name, inside the if block and assign it the value Paul. The output will be:

"Hello John"
"Hi Paul"
"Hello again John"

Notice that the 3rd message includes the value of the first name variable.

var scoping

Here is the same code snippet but using vars:

function sayHello() {
  var name = "John"
  console.log(`Hello ${name}`)
  if(true) {
    var name = "Paul"
    console.log(`Hi ${name}`)
  }
  console.log(`Hello again ${name}`)
}

sayHello()

The output will be slightly different - notice that the 3rd message includes Paul rather than John:

"Hello John"
"Hi Paul"
"Hello again Paul"

In fact, the snippet above creates only one variable name. The second declaration gets ignores and the content of name will be changed to Paul.

NB: This behaviour can be prevented if strict mode is used - read more about the strict mode here.

JavaScript Destructuring

Charlie @ 90-10.dev — Mon, 09 Jan 2023 08:00:00 +0000

Destructuring is the process of unpacking (extracting) data from arrays or objects, into distinct variables to make it easier to work with complex data structures.

Array Destructuring

Given an array, we can "extract" some of its content and assign them to variables in a single statement, using square brackets []:

let colours = ['red', 'blue', 'green']
let [colour1, colour2] = colours
console.log(colour1) // prints: red
console.log(colour2) // prints: blue

It is possible to ignore certain values when required - notice the extra comma between colour1 and colour2 in the example below:

let colours = ['red', 'blue', 'green'];
let [colour1, , colour2] = colours;
console.log(colour2) // prints: green

Undefined

If not enough values are present, the destination will be undefined (as expected when declaring but not assigning variables):

let colours = ['red', 'blue']
let [colour1, colour2, colour3] = colours
console.log(colour43) // prints: undefined

Default value

However, default values can be provides:

let colours = ['red', 'blue']
let [colour1, colour2, colour3 = 'yellow'] = colours
console.log(colour3) // prints: yellow

Object Destructuring

This will feel very similar to the destructuring from arrays - however, the names of the variables to destructure to must match the name of the object properties:

let colour = { name: 'blue', score: 42}
let {name, score} = colour
console.log(name) // prints: blue
console.log(score) // prints: 42

Renaming

To unpack to different variable names, we need to specify both them alongside the object properties:

let colour = { name: 'blue', score: 42};
let {name: colourName, score: colourScore} = colour;

Default values

Just like before, we can specify default values:

let colour = { name: 'blue', score: 42};
let {
    id: colourId = 1, 
    name: colourName, 
    score: colourScore
} = colour;
console.log(colourId) // prints: 1
console.log(colourName) // prints: blue

Tip: Multiple assignment via destructuring

Sometime we need to assign values to multiple variable at the same time and destructuring makes is simpler and visually more appealing:

let colour, score;
[colour, score] = ['blue', 42];

Tip: Swap values

Another common scenario is when swapping the values of 2 variables - usually it requires a third temporary variable to hold one the values. With destructuring assignment, it becomes much easier:

let x = 1
let y = 2
[x, y] = [y, x]
console.log(x) // prints: 2
console.log(y) // prints: 1

Take Away

JavaScript destructuring is a powerful feature that can make our code more concise and readable, by allowing us to extract values from arrays and objects with ease and provides us with more control over variable assignment.

Forem: Charlie @ 90-10.dev

15 Javascript Frameworks and Libraries you need to know

1. React

2. Angular

3. Vue.js

4. Node.js

5. Redux

6. Express.js

7. jQuery

8. Ember.js

9. Backbone.js

10. D3.js

11. Jest

12. Lodash

13. Moment.js

14. Chart.js

15. Three.js

Harnessing the Power of Error Objects in JavaScript

What are Error Objects?

Creating Custom Error Objects

Extend the Error Object

Error.prototype

Throwing and Catching Errors

Built-in Error Objects

ReferenceError

TypeError

RangeError

SyntaxError

EvalError

URIError

Best Practices for Using Error Objects

Take Away

Harnessing the Power of JavaScript Bitwise Operators: Practical Examples

Practical Examples

Fast and Efficient Odd-Even Check

Extracting Specific Bits

JavaScript Objects

Creating Objects

1. Object literal notation

2. Constructor function

3. Object.create()

4. Class Notation

Accessing Properties

Modifying Properties

Adding Object Properties

Take Away

Create a mock API server with node and json-server

Setup

JSON Server

Data file

Start server

Javascript Hoisting

Variable Hoisting

Function Hoisting

Hoisting in ES6

Take Away

Running JS in the Browser Console and Node

Run JavaScript in the Browser Console

Enable Browser Console

Using the console

Run JavaScript in Node.js

JavaScript Modules

Enable modules

Default Import/Export

Named Import/Export

Renamed Export

Renamed Import

Inline exports

Combined imports: Default & Named

Passthrough Exports

Import all

Finally

JavaScript Symbols

Creating Symbols

Uniqueness

Define Constants

Hide Information

Private methods

Global Symbol Registry

Reading List

3. `Object.create()`

`Array` Constructor

Using `forEach`:

The classic `for` loop:

`for ... in` loop:

`let` vs `var`