JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Learn Javascript

Learn VSCode with Ahmad Awais (Open Source JavaScript DevRel ❯ Google Dev Expert ❯ Author of 3rd most popular VSCode theme called 🦄 Shades of Purple).

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

VSCode

Learn how to write a promise based delay function and then use it in `async await` to see how much it simplifies code over `setTimeout`.

Lets say you want to call a function after 1s, 2s, 3s. You can use `setTimeout`, or you can wrap it up into a simple delay function that works with async/await

Simplify Asynchronous Callback Functions using async/await

We can dot-chain our way to great success with an instance of Maybe, but there are probably cases where you need to apply the same series of transformations against different `Maybe`s. In this lesson, we’ll look at some point-free versions of some common Maybe methods and see how we can compose them together to get a reusable function that can be applied to any Maybe instance.

Compose Functions for Reusability with the Maybe Type

The goal of this course is to give you a solid understanding of how  `async / await` works and how to use it effectively with TypeScript.

To start, we will look at `Promise` basics and see how `.then` and `.catch` are greatly simplified by `async / await`. We will then look at methods for executing asynchronous code in serial (the default), in parallel (with `Promise.all`), and Async iteration.

All with the added benefit of code analysis and error checking by TypeScript. Here's a little intro to the course material. I hope you enjoy the course!

async / await using TypeScript Course Overview

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?

Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended. 

Additional resources: [Slides](http://kcd.im/confident-react), [react-testing-library](https://github.com/kentcdodds/react-testing-library), [Jest](https://facebook.github.io/jest/), [jsdom](https://github.com/jsdom/jsdom), [jest-dom](https://github.com/gnapse/jest-dom)

Confidently Ship Production React Apps

The maximum subarray problem is one of the nicest examples of dynamic programming application.

In this lesson we cover an example of how this problem might be presented and what your chain of thought should be to tackle this problem efficiently.

Maximum Contiguous Subarray algorithm implementation using TypeScript / JavaScript

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

This lesson introduces the native JavaScript [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object and the [`Promise.prototype.then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) method. We’re gonna look at how to make an HTTP request using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and how to asynchronously process the response in a promise chain.

In addition, we'll discuss the three mutually exclusive states a promise can be in: *pending*, *fulfilled*, or *rejected*.

Create a Promise Chain in JavaScript with Promise.prototype.then()

The [`Promise.prototype.then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) method accepts two callbacks as parameters, `onFulfilled` and `onRejected`:

- If the promise is fulfilled, `onFulfilled` will be called.
- If the promise is rejected, `onRejected` will be called.
- If the promise never settles (that is, stays pending forever), neither one will be called.

If you want to register a handler for rejected promises only, you can use the [`Promise.prototype.catch()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) method: `.catch(onRejected)` behaves the same as `.then(undefined, onRejected)`.

Catch Errors in a JavaScript Promise Chain with Promise.prototype.catch()

The [`Promise.prototype.finally()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) method lets you attach a callback to a JavaScript promise that is executed once that promise is settled, whether fulfilled or rejected. It is typically used to perform cleanup logic (such as hiding loading spinners, freeing used resources, …). By using `finally()`, you don't have to duplicate that cleanup logic in both the promise’s fulfillment and rejection handlers.

Execute Cleanup Logic in a JavaScript Promise Chain with Promise.prototype.finally()

You can use the [`Promise.reject()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) method to create a promise that is rejected with the given reason.

Create a Rejected Promise in JavaScript with Promise.reject()

The [`Promise.resolve()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) method returns a `Promise` object that is resolved with the given value. It can be used to convert “promise-like” objects to native `Promise` objects: If you pass a thenable (an object with a `then()` method) to `Promise.resolve()`, the returned `Promise` object will eventually adopt the same state.

Note that `Promise.resolve()` doesn't necessarily return a fulfilled promise. If it receives a thenable that ends up being rejected, the returned `Promise` object will be rejected as well. Check out [States and Fates](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) for a more detailed explanation.

Create a Resolved Promise in JavaScript with Promise.resolve()

The [`Promise` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) is used to create a new `Promise` object. It receives a single function as a parameter (known as the _executor function_), which in turn receives the `resolve` and `reject` functions as parameters:

```js
const promise = new Promise((resolve, reject) => {
  // Perform some operation, then call either resolve() or reject()
});
```

Within the body of the executor function, you can perform any operation — typically, an asynchronous one. You then either call `resolve(value)` or `reject(reason)`, depending on the outcome of that operation, to fulfill or reject the promise.

Note that the `Promise` object is rejected if an error is thrown within the body of the executor function. The return value of the executor function is ignored.

Create a New Promise in JavaScript with the Promise Constructor

Sometimes, you might want to convert a JavaScript function that accepts a callback to one that returns a `Promise` object. This lesson shows how to manually wrap a promise-based API around the [`fs.readFile()`](https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback) function. It also explains how to use the [`util.promisify()`](https://nodejs.org/api/util.html#util_util_promisify_original) method that is built into the Node.js standard library.

Convert a Callback-Based JavaScript Function to a Promise-Based One

The [`Promise.race()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) method accepts an array (or any other iterable) of promises as a parameter. It returns a `Promise` object that is fulfilled or rejected once the first input promise is fulfilled or rejected:

- As soon as any input promise is fulfilled, the returned `Promise` object is fulfilled with that value.
- As soon as any input promise is rejected, the returned `Promise` object is rejected with that reason.

`Promise.race()` can be used to race multiple promises against each other and find the first promise to settle.

Wait for the Fastest JavaScript Promise to Settle with Promise.race()

The [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) method accepts an array (or any other iterable) of promises as a parameter. It returns a `Promise` object that is fulfilled if all of the input promises are fulfilled or rejected if any of the input promises is rejected:

- If all input promises are fulfilled, the returned `Promise` object is fulfilled with an array of fulfillment values of all promises (in the same order as the promises passed to `Promise.all()`).
- If any input promise is rejected, the returned `Promise` object is rejected with that reason.

Wait for Multiple JavaScript Promises to Be Fulfilled with Promise.all()

The [`await` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) is used to wait for a promise to settle. It pauses the execution of an `async` function until the promise is either fulfilled or rejected.

To learn more about `async` and `await`, check out my [Asynchronous JavaScript with async/await](https://egghead.io/courses/asynchronous-javascript-with-async-await) course.

Await a JavaScript Promise in an async Function with the await Operator

This lesson teaches you the concepts of immutability, the difference between mutable and immutable data structures, and how to change data through mutable and immutable patterns. Immutable data is necessary in functional programming because mutations are a side effect. Our transformation of data should not affect the original data source, but instead should return a new data source with our updates applied.

To demonstrate the difference between mutability and immutability, imagine taking a drink from a glass of water. If our glass is mutable, when we take a drink, we retain the same glass and change the amount of water in that glass. However, if our glass is immutable, when we take a drink, we get back a brand new, identical glass containing the correctly drank amount. Perhaps a strange way to conceive of the action, but creating new data structures makes our methods pure and thread-safe, a benefit of functional programming.

Avoiding Mutations in JavaScript with Immutable Data Structures

A linked list is a collection of items where each item points to the next one in the list. Because of this structure, linked lists are very slow when searching for an item at a particular index. An array, by comparison, has quick `get`s when searching for an index, but a linked list must start at the beginning, often called the "head", and loop through each item's `next` property until we arrive at the item. This makes `get`s in a linked list an operation that takes `O(n)` time.

While `get`s might be slow in a linked list, it's other operations, like `push` and `delete` come with some great benefits we will see in the lesson.

Linked List Data Structure in JavaScript

In this lesson we'll learn how to refactor es5 functions into es6 arrow functions to decrease visual noise in our program. We'll take a step by step approach, increasing clarity with each rewrite.

Refactor es5 functions to es6 arrow functions

Breadth first search is a graph search algorithm that starts at one node and visits neighboring nodes as widely as possible before going further down any other path. This algorithm requires the use of a queue to keep track of which nodes to visit, so it might be worth your time to brush up on that data structure before watching this lesson.

Topics

Instructors

Content Type