Let's look at how to make a request to GPT-4 using Python in a Jupyter notebook.

To follow along, you'll need an API key from OpenAI. If you don't have one, visit [platform.openai.com](https://platform.openai.com) to obtain one.

In the Jupyter Notebook, the first step is to install the OpenAI package:

```bash
pip install openai
```

Next, add a cell and import the `openai` package. It's recommended to use an environment variable to store your API key.

```python
import openai
```

In this example, we'll use the `dotenv` package to load the API key from an .env file:

```python
# second cell
from dotenv import load_dotenv
import os

# third cell
load_dotenv()
openai.api_key = os.getenv('OPENAI_API_KEY')
```


## Making a Request

Here's the basic syntax for making a request with the OpenAI package:

```python
openai.ChatCompletion.create(
  model='gpt-3.5-turbo',  # or 'gpt-4'
  messages=[
    {"role": "user", "content": "tell me a joke"}
  ]  # A list of messages
)
```

The `messages` parameter is a list of dictionaries, even if there is only a single message. Each movie must contain a `role` and `content`

The `role` can be one of the following:

- `’system’`: Sets an overall system directive.
- `’user’`: Represents the user (or developer) asking a question or making a request.
- `’assistant’`: Shows the model the desired response format.

Now, let's add a new notebook cell and create a request to ask GPT-4 about OpenAI:

```python
res = openai.ChatCompletion.create(
    model='gpt-4',
    messages=[
        {
            'role': 'user',
            'content': 'Tell me about OpenAI'
        }
    ]
)
```

## Accessing the Response

The response object contains a lot of information:

![code screen](https://res.cloudinary.com/dwppkb069/image/upload/v1683736289/tips/images-01.-GPT_Requests_Python.mp4/01-gpt_requests_python_25_02-38000-youll-notice-theres-quite-a-bit-of-information-in-here-_yaurkw.png)

What we're interested in is the `assistant's` reply, which is nested inside of `choices` which is a list.

To access the content of the response message, use the following code:

```python
res['choices'][0]['message']['content']
```

This will print the assistant's response, providing the information about OpenAI that we asked the API for.

Learn how you can use the OpenAI package for Python inside of a Jupyter Notebook to communicate with the chat completion API.

OpenAI GPT-4 Requests with Python

[00:00] In this video, I'll show you how easy it is to make a request to GPT-4 using Python. So I'm working in a notebook, and the first thing we have to do is install the OpenAI package. So pip install OpenAI. I've already done this. It will take a moment for you, most likely.


[00:16] And then we have to import OpenAI and provide our API key. So if you haven't gotten an API key yet, you'll need to go to platform.openai.com to get your own API key.

[00:28] Once you have it, all we do is on the OpenAI package, we set OpenAI.APIKey equal to whatever your API key is. Although it's a much better idea to use an environment variable, which is what I'm going to do.

[00:43] There we go. I'm using a package called.env. It's specifically a function load.env. I have a file called.env with my environment variable in it, and then it loads it. I get access to it, and I set OpenAI.APIKey equal to my API key. Okay, so now it's time to make a request.

[01:02] This is the basic syntax for making a request with the OpenAI package. So the first thing you'll notice is that we call OpenAI.chatCompletion.create. We specify a model. If you don't have access to GPT-4, GPT-3.5 Turbo is your best bet. And then we have to specify a list of messages.

[01:20] So this list of messages follows a particular format. I'll talk more about it in a moment. Let me just show you an example. Let's do an OpenAI.chatCompletion.create. I'll set my model here to be GPT-4 because I have access to it for now.

[01:37] And then I provide a list of messages, even if it's just a single message. Each message has to follow this format. It must be an object or in Python a dictionary that has a role, which can be set to system, user, or assistant. You can use the system role to set an overall system directive.

[01:55] The user role is what you'll most commonly use anytime you're asking or requesting anything from the model. And we can also use role set to assistant if we're trying to show the model what we want it to give us back. And then most importantly, we have to provide content, which is the content of the message.

[02:13] So let's start with a very simple, single little message. Role will be user. Again, that refers to me or the developer, the user here talking to the assistant. And then our content, let's ask the model to tell us about OpenAI. All right. And I'm going to save this response into a variable. I'll call it res, and I'll run that cell.

[02:32] When it finishes, here's our response variable. You'll notice there's quite a bit of information in here, but the actual content we want is nested inside of choices, which is a list. We want the first choice, and then we want message, and then finally, we want the content of that message.

[02:50] Notice this message has a role set to assistant. It's the assistant's response. And finally, I'll just print this, and we'll see our nice response we got back, a little bit of information about OpenAI.

## Making Requests to OpenAI's GPT APIs Using JavaScript

In this guide you'll learn how to make requests using JavaScript to OpenAI's GPT APIs.

Most of the documentation on OpenAI's website shows Python examples, but there is a Node client from OpenAI called `openai-node` on GitHub.

Make sure you have an API key for OpenAI, as it is required for the client.

### Installing openai-node

First, install the `openai-node` package using npm:

```bash
npm install openai
```

### Basic Query in JavaScript

Create an `app.js` file.

In this example we're using an environment variable for our API key using the `dotenv` package. You can also hardcode the key, but it's not recommended.

```bash
require("dotenv").config();
```

Next we'll bring in the OpenAI package, then create a new configuration instance with the API key variable:

```js
const { Configuration, OpenAIApi } = require('openai');

const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
```

Then we can create a new instance of OpenAIApi with the configuration:

```js
const openai = new OpenAIApi(configuration);
```

Everything is now in place to make requests!

### Making a Request

To make a request we'll be using the `createChatCompletion` method from openai.

Here's an example of an async function called `getPoem`. The `createChatCompletion` method returns a promise, so we use `await` to handle it.

The `modelName` will be either `gpt-3.5-turbo` or `gpt-4`. Then we have an array of `messages` that will contain at least one object with a `role` and `content`.

In this case, the message will be a `user` prompting for a rhyming poem:

```js
async function getPoem() {
  const response = await openai.createChatCompletion({
    modelName: 'gpt-4',
    messages: [
      {
        role: 'user',
        content: 'generate a short rhyming poem',
      },
    ],
  });

  console.log(response.data.choices[0].message.content)
}
```

The content of the response message is accessed with:

```js
response.data.choices[0].message.content
```

Now every time you run `getPoem()`, a new rhyming poem will be displayed in the console:

![gptrequests](https://res.cloudinary.com/dwppkb069/image/upload/v1683736289/tips/images-02-js_gpt4_requests.mp4/02-js_gpt4_requests_32_03-42000-theres-no-divider-between-the-two--but-this-is-the-first-poem--and-this-is-the-second-poem_p13joe.png)

That's it! Now you know how to make requests to OpenAI's GPT APIs using JavaScript and the `openai-node` client.

OpenAI offers an npm package that allows you to communicate with the chat completion API, allowing you to take advantage of the latest models behind ChatGPT.

OpenAI API Requests in JavaScript

[00:00] In this quick video, I'm going to show you how to make requests using JavaScript to OpenAI's GPT APIs. So most of the documentation on OpenAI's website shows Python examples, but there is a Node client put out by OpenAI called OpenAI-Node on GitHub that we can use.

[00:19] The first step, of course, is to install it. npm install openai. And if you haven't already signed up for an API key, you'll need to do that because the client needs the API key. So this is my app.js file. I'm just going to do a very basic query in here.

[00:34] And the first step is, of course, to require OpenAI, which we just installed. Specifically, though, we're going to require configuration and OpenAI API. The next step is to provide our API key to a new configuration instance.

[00:51] So I'm using an environment variable. Of course, you could just hard code your key in here, but that's not really good practice. But if you just want to get up and running, you can do that.

[00:59] So I have mine in a.env file. I'm using the.env package to load my environment variables and then grabbing one of them called OpenAI API key and assigning it here.

[01:12] Once we have this configuration, the second step is to create a new instance of OpenAI API where we pass in our configuration. So if you get to that point and you have a valid API key, we now should be able to make requests. So how do we make requests?

[01:28] If you look at the documentation for this package, it's a little bit out of date, and it shows the create completion method, which still works. But this does not support the chat endpoint, meaning it does not support GPT 3.5 Turbo or GPT 4.

[01:43] It only supports Text DaVinci 003 as the most recent model. So instead, what we need to do is use a method that exists, it's just not on the readme called create chat completion. And this returns a promise. So we're going to want to await this and put it in some sort of async function.

[02:02] I'll call my async function get poem. We will await this. We'll call this response or something that we get back. And then we have to provide an object in here that has a couple of pieces. The first thing is the model name that we want to use. I'm going to use GPT 4.

[02:20] And then we have to provide a list of messages or an array of messages. Now, I have a separate video talking about the messages format, but the bare minimum here is a single message in an array. And each message has a role. We'll set this first one to user. And I'm going to ask it to generate me a poem.

[02:38] So the content will be generate a short rhyming poem. I'm not even going to give a direction as to what the poem should be about. So we await this. This will make our API request, assuming our key is configured properly.

[02:54] Then we need to look at the response.data. And maybe I'll just start by printing that out. Response.data. Let's execute get poem just one time down at the bottom here. And let's run our file, app.js. All right. So we get some data back.

[03:10] The stuff we care about for the most part is inside of choices, which is an array. We want the first choice, the message. It's a little bit annoying. It looks like this. Response.data.choices. We want the zero with element. And then we want.message.content. And that will give us the content of the response message.

[03:29] So let's try running this. And maybe we'll do it twice to get two different poems. Okay. So we'll wait. And here's our first poem. There's no divider between the two, but this is the first poem, and this is the second poem. Not the most useful query, but that's beside the point.

[03:44] What matters most here is seeing how to make a request in JavaScript using the OpenAI client.

The OpenAI temperature parameter can be provided to any of the GPT family of models.

It's very useful, but it's not all that self-explanatory.

Temperature is a number between 0 and 2, with a default value of 1 or 0.7 depending on the model you choose.

The temperature is used to control the randomness of the output.

When you set it higher, you'll get more random outputs. When you set it lower, towards 0, the values are more deterministic.

![temp screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1683736291/tips/images-03-temperature.mp4/03-temperature_3_00-35000-so-let-me-show-you-an-example_j2vdfa.png)

## Sentence Completion Example

For this example, we're working in a Python notebook, but this would easily work with JavaScript as well.

We have an environment variable for the OpenAI API key, and we're making a very simple completion using `gpt-3.5-turbo`.

The message we send asks the model to complete the sentence "the key to happiness is" with two words.

```python
res = openai.ChatCompletion.create(
  model="gpt-3.5-turbo",
  messages=[{"role": "user", "content": "Complete the sentence with two words. The key to happiness is"}]
)
```

With the default temperature, running this will usually return "contentment and gratitude" or "inner peace".

![code different](https://res.cloudinary.com/dwppkb069/image/upload/v1683736290/tips/images-03-temperature.mp4/03-temperature_9_01-09000-we-got-something-different--inner-peace_a4zmq1.png)

## Increasing and Decreasing the Temperature

If we increase the temperature parameter to the maximum of 2 by adding `temperature=2, it's going to give me a much more varied output: "personal fulfillment", "simplicity and gratitude", "contentment and balance", "satisfaction and appreciation", "different for everybody", "gratitude and teamwork", "mindfulness and empathy".

![screenshot output](https://res.cloudinary.com/dwppkb069/image/upload/v1683736290/tips/images-03-temperature.mp4/03-temperature_10_01-21000-its-going-to-give-me-a-much-more-varied-output-_xalt3r.png)

Generally I wouldn't recommend increasing the temperature so high, but it works for this example.

Moving the temperature all the way down to zero, it's going to return "contentment and gratitude" pretty much every single time. It's not guaranteed to be the same, but it is most likely that it will be the same output.

## Haiku Example

Increasing the temperature will produce more interesting and creative output.

However, going too high has its own issues.

In this example, we ask the model to write a haiku.

```python
res = openai.ChatCompletion.create(
  model="gpt-3.5-turbo",
  temperature=0.9,
  messages=[{"role": "user", "content": "Write a haiku"}]
)
```

With the temperature at 0.9, it's going to produce nice haikus that are typically nature-themed:

```md
flowers in the field,
dancing in the summer breeze,
nature's symphony.
```

```md
Solitary bee
over forgotten blossoms,
April cold leaves.
```

Moving the temperature all the way up to 2, we'll certainly get something different, but it won't always be coherent:

```md
Easy tropical flips-
trade palms winds filter music_,
without flotates spring waves
```

First of all, this is not a haiku. It also starts introducing some very weird stuff like underscores and a made up word.

The output can get even more strange:

![output](https://res.cloudinary.com/dwppkb069/image/upload/v1683736290/tips/images-03-temperature.mp4/03-temperature_23_02-58000-so-if-youre-wondering-how-this-works--without-going-into-too-much-detail-_gizp4i.png)

It doesn't make any sense.

This is why I generally recommend sticking with a temperature between 0 and 1.

## How Temperature Works

Without going into too much detail, there's some math behind the scenes of the temperature.

Basically, the temperature value we provide is used to scale down the probabilities of the next individual tokens that the model can select from.

With a higher temperature, we'll have a softer curve of probabilities. With a lower temperature, we have a much more peaked distribution. If the temperature is almost 0, we're going to have a very sharp peaked distribution.

Here's a visualization:

![screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1683736290/tips/images-03-temperature.mp4/03-temperature_30_03-25000-if-temperature-is-like-almost-0--were-going-to-have-a-very-sharp-peaked-distribution_wprxqo.png)

### Recommended Temperatures

I recommend starting somewhere around 1 for the temperature.

If you need something to be more deterministic, you can decrease it. If you want some spicier results, you can increase it above 1.

Just remember, if you go too high, you will get some really weird output!

The temperature parameter in an OpenAI API request influences how creative your prompt's output will be.

Understanding OpenAI's Temperature Parameter

## Understanding Tokens in OpenAI APIs

When working with any of the OpenAI APIs, one of the most important concepts to understand is tokens.

GPT models don't work with words as we know them in the English language, but instead break things down into a system of tokens which are usually pieces of words, although some tokens are actually full words.

On average, a token is about four characters of English text (it does vary from language to language).

![hamburger token](https://res.cloudinary.com/dwppkb069/image/upload/v1683736291/tips/images-04-tokens.mp4/04-tokens_2_00-38260-so-theres-two-main-reasons-this-matters_l3lxsz.png)

As an example, the phrase "I like hamburgers" is three English words but it's actually five separate tokens in the world of GPT.

## Pricing and API Request Cost

Tokens determine billing and how much our API requests cost.

OpenAI charges based on the number of tokens that we use, both in the prompt plus the tokens in the output. They multiply the number of tokens by the price per token, which varies from one model to the next.

As of this writing, there are some very cheap models, along with the comparatively expensive GPT-4.

![pricing models](https://res.cloudinary.com/dwppkb069/image/upload/v1683736291/tips/images-04-tokens.mp4/04-tokens_4_00-58820-so-theres-some-very-cheap-models-_j7dtto.png)

Although for GPT-4, there's two different price points, and I'll talk about why in a moment. If you look at GPT-3.5 Turbo, it is significantly cheaper, $0.002 for 1,000 tokens.

## Tokenizer Tool

There's a tool called the Tokenizer on the OpenAI website.

While the tool does not support GPT-4 or 3.5, it will show us the tokens behind the scenes.

Let's look at the phrase "hello world my name is colt":

![token screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1683736291/tips/images-04-tokens.mp4/04-tokens_11_01-34260-you-can-see-some-of-these-tokens-are-full-words-_lldsgx.png)

You can see some of these tokens are full words, and they often will have a leading space. But then something like "col" isn't really a word, and the final letter "T" is its own individual token.

We would be billed seven tokens for this individual phrase.

### Token Usage Example

Here is an example of simple sentiment analysis request in Python. The prompt was a list of messages, and the sentiment output it gave was the word "neutral."

![screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1683736291/tips/images-04-tokens.mp4/04-tokens_17_01-59900-this-is-the-output-it-gave-me--the-word-neutral_hdmeiz.png)

Looking at the usage portion of the response, we can see the total number of tokens used.

In this case, the number of tokens in the completion (output) was one token. The number of tokens in the prompt was 59 tokens, so our total was 60 tokens.

In this example the request used GPT-4, so I would be billed for 60 tokens at the rate of six cents per 1,000 tokens (at the time of this writing).

## Maximum Context Window

The other reason tokens really matter is that there is a *maximum context window* for each model. This is the total number of tokens that each model can work with at a given time.

For the base `gpt-4`, that number is 8,192 tokens. However there are different variations like `gpt-4-32k` that have a maximum of 32,768 tokens, though it comes at double the price.

This context window is not just the length of the input, but the maximum number of tokens the model can work with period. It's the input plus the output tokens.

Generally token limits are not a problem for smaller tasks, though larger tasks like summarizing a book or really long chat conversations may give you problems when you run out of tokens.

It's a good idea to be aware of the amount of tokens you use!

Understand how tokens are used by OpenAI for providing context for your requests, as well as how you will be billed for using different GPT models.

The Role of Tokens for GPT Models

[00:00] If you're working with any of the OpenAI APIs, one of the most important concepts to understand is tokens. So the GPT models don't work with words as we know them in the English language, but instead break things down into a system of tokens, which are basically pieces of words, although some tokens are actually full words.

[00:19] On average, a token is about four characters of English text. Again, that's in English, it does vary from language to language. So as an example, the phrase, I like hamburgers, is three English words, but it's actually five separate tokens in the world of GPT. So there's two main reasons this matters.

[00:38] One is for billing and how much our API requests cost. OpenAI will charge us based on the number of tokens that we use, both in the prompt plus the tokens in the output. So it adds them together, and then it multiplies the number of tokens by the price per token, which varies from one model to the next.

[00:56] So there's some very cheap models, and then there's a very expensive model, which is GPT-4. Although for GPT-4, there's two different price points, and I'll talk about why in a moment. If you look at GPT-3.5 Turbo, it is significantly cheaper, $2.002 for 1,000 tokens.

[01:14] So there's a tool called the Tokenizer on the OpenAI website. It does not support GPT-4 or 3.5. But if we type things in here like, hello world, my name is Colt, it will show us the tokens behind the scenes. You can see some of these tokens are full words,

[01:34] and they often will have a leading space. But then something like this right here, Colt isn't really a word anyway, but the final letter T is its own individual token. We would be billed seven tokens for this individual phrase. When we make a request, like this one I'm making in Python, a simple sentiment analysis request.

[01:53] This is my prompt, a list of messages. This is the output it gave me, the word neutral. It assessed the sentiment was neutral in the tweet that I provided. But if we look at the usage portion of the response, it tells us the number of tokens in the completion, that's the output, was one token. So this was one token.

[02:12] The number of tokens in the prompt was 59 tokens. So all of this was 59 tokens. Then the total tokens is the sum of the two, 60 tokens. I was using GPT-4. So I would be billed at six cents per 1,000 tokens, and I used 60 tokens. Now, the other reason tokens really matter is that there is

[02:30] a maximum context window, a maximum number of tokens that each model can work with at a given time. So for GPT-4, that number is 8,192 tokens. Although there is a much larger context window available, if you use a different variation,

[02:47] GPT-4 32K, this is way more expensive. That's the 12 cents per 1,000 tokens compared to the six cents for 1,000 tokens. So this context window is not just the length of the input, but it's actually the maximum number of tokens the model can work with period. It's the input plus the output tokens.

[03:06] If we look at other models like 3.5 Turbo, 4,096 tokens is its context window. Generally, for a lot of the prompts that I write, it's not a problem. But if I'm trying to summarize a book or have a really long chat conversation, you can start to run out of tokens, and that can be a big problem. So in a separate video,

[03:24] I'll cover different ways of counting

[03:26] tokens programmatically using a library called TickToken.

Object destructuring is a helpful enhancement made to JavaScript syntax as part of ES2015.

Let's say we have a social media application with user objects containing several properties.

```javascript
cont user = {
	first: "Marlon",
	last: "Brando",
	email: "marlon@gmail.com",
	followers: 578226,
	birthYear: "1924",
};
```

We want to write a function called `makeUsername` that generates a simple username based on these properties. For example, we want to combine the first and last names and add the last two digits of the birth year, leaving the output as `'MarlonBrando24'`.

We'll need to extract the first name, last name, and birth year from the `user` object to achieve this.

In the past, the only way to do this within JavaScript was with a repetitive pattern where each variable matches the name of one of the properties.

```javascript
const first = user.first;
const last = user.last;
const birthYear = user.birthYear;
```

## Using Object Destructuring

Instead of writing multiple lines to extract properties from the `user` object, we can use object destructuring to do it more concisely:

```javascript
const { first, last, followers, birthYear } = user;
```

This single line of code does the same thing as the three lines above. It extracts the `first`, `last`, `followers`, and `birthYear` properties from the `user` object and assigns them to corresponding variables.

We use curly braces on the left side of the equal sign and set the right side equal to our user object. Inside the curly braces, we list the different properties we're interested in creating variables for.

You can execute this code in the console of your devtools to verify the variables:

```javascript
first;
last;
followers;
birthYear;
```

**Important:** The names inside the curly braces must match the property names in the object. If we try to destructure a property that doesn't exist in the object, JavaScript will set the new variable to undefined.

```javascript
const { middleName } = user;
// middleName is undefined!
```

Now, we can use these variables to create our simple `makeUsername` function:

```javascript
function makeUsername({first, last, birthYear}) {
	return first + last + birthYear.slice(-2);
}
```

This function takes a user object, destructures it to get the first name, last name, and the two last digits of the birth year, and then generate the username by concatenating these values. And that's how object destructuring can help us simplify our code and make it more readable.

The next time you need to extract multiple properties from an object in JavaScript, try object destructuring to simplify your code and make it more readable.

Object destructuring can simplify your JavaScript code by allowing you to extract only the values you need, exactly when you need them

Object Destructuring in JavaScript

[00:00] In this video, we'll cover object destructuring, a really useful enhancement that was made to JavaScript syntax. A couple of years ago at this point, it was part of ES2015, and it's something that I use day-to-day when I'm writing JavaScript. So here I have an object literal representing a single user for a website,

[00:18] let's say a social media application. It has a bunch of properties, first name, Marlon, last name, Brando, e-mail, a number of followers, and a birth year. I want to write a function called make username. It's going to be a very simple username that it generates based on a user.

[00:35] Basically, what I wanted to do is take the first name from any object like Marlon, take the last name, smoosh it together so we have Marlon Brando, and then take the last two digits of the birth year, in this case, 24. This will be your automatically generated username. It's not guaranteed to be unique,

[00:53] it's just a simple little demonstration function. So to do this, I'm going to need to extract the first name, I'll need to extract the last name, and the birth year. For a while, we really only had one way of doing this in JavaScript. We would do something like this, we'd make a variable, I'll do it in the console over here,

[01:11] const firstName, I'll just call it first, equals user.first, and then that would get me the firstName variable, or first, and then I could do the same thing, const last equals user.last,

[01:26] and const birthYear equals user.birthYear. It gets quite repetitive, not to mention that it takes three lines to do it, but each line follows the same pattern. We have some variable that is matching the name of some property. I'm just trying to extract a value out of the object,

[01:45] so I can then use them. So with destructuring, we have a syntax that we can use to extract values from an object by calling out their names, and creating new variables using those names. It looks like this. I'll just do it right here first, and then we'll move to my function.

[02:02] We use curly braces on the left side of the equal sign. I'm going to set the right side equal to our user object. Then inside of the curly braces, I can list the different properties I'm interested in creating variables for. So I'll do first, last. Why don't we do followers while we're here,

[02:20] and birthYear. Now, these names must match some name that's already in here. In this case, first matches first, last, last, followers, followers, birthYear, and birthYear. This will make me four separate variables in a single line, and each variable will be set to

[02:39] the corresponding property from the user object. So first will be set to user.first, last is set to user.last, and so on. So let me refresh the page, and I'll show you that we now have a first variable set to Marlon. We have a last variable set to Brando. We have a followers variable set to that number,

[02:58] and we have a birthYear variable. Now, we do not have an e-mail variable. I did not destructure the e-mail property into its own variable. Additionally, if I did not match these correctly, let's say just called this year, take a look at what happens. I still get a first variable and a last variable.

[03:17] But if I look at year, it's just set to undefined. JavaScript could not find a year property in this user object. So in this case, I destructured four different variables, although one of them is set to undefined. So let's go back to birthYear, which is the name in the actual object. Again, they have to match.

[03:36] One thing that we do a lot with destructuring is actually destructure an object as it comes into a function as an argument. So if I write this makeUser function, I'm going to extract the different variables out, the different properties from my user object. So first, last, I don't really need the followers property.

[03:53] Remember, my goal is to make a little string that I return that has the first name, concatenated with the last name, concatenated with the last two digits of birthYear. So I can extract those three things, and then I can just return something like first plus last plus,

[04:11] and I'll just start with the whole birthYear. This should work if I call makeUserName now, makeUserName, and I pass through the Marlon Brando object called user, this is what it returns to me, and that's great. But I don't need anything else from that object in this function. I just am interested in first, last, and birthYear.

[04:30] So what a lot of people will do is destructure in the function parameter list right here, and that looks like this. If we put our curly braces inside of the parentheses of a function definition, we can destructure, and in this case, we'll have access to three different variables in this function,

[04:48] first, last, and birthYear. It should still work just fine if I rerun that line. It does, Marlon Brando 1924. So that's a really common thing that we'll do. Now, I did say I only wanted to use the last two numbers in birthYear,

[05:04] so I'm just going to tweak this slightly and slice negative two, so the last two digits, and now we get Marlon Brando 24. Then if I had another user, how about this user2 object, Greta Garbo, born in 1905. If I now try and call this function with user2,

[05:23] it will destructure first, last, and birthYear as the values from that object are passed into the function. Well, it will make three separate variables that I can use within the function and we get Greta Garbo 05. So just a simple example of object destructuring.

[05:39] We can do it on our own just when declaring variables ourself or defining variables, or we can do it inside of a function parameter list,

[05:47] which makes our life a lot easier and cleans up the code significantly.

JavaScript allows us to destructure an object into individual variables [check this tip for details](https://www.coltsteele.com/tips/object-destructuring-in-javascript).

We can do the same thing with arrays, even though they are ordered and lack key-value pairs.

## Object Destructuring Example

As a refresher on object destructuring, say we have an object representing a product with properties such as `SKU`, `name`, `price`, and `inStock` status:


```javascript
const product = {
	sku: "198273902183",
	name: "landhauler wheelbarrow 400lbs",
	price: 199.99,
	inStock: false,
};
```

We can extract the `name` and `price` properties into their own variables very simply:

```javascript
let { name, price } = product;
```

If we run our code, we'll have `name` and `price` as standalone variables. [Check out this tip for more](https://www.coltsteele.com/tips/object-destructuring-in-javascript)

## Array Destructuring

Just as we can destructure an object into individual standalone variables, we can do the same with arrays. However, the key difference is that arrays are ordered, and we don't have key-value pairs as we do with objects

Array destructuring is slightly different because we can't extract values based on their property names. Instead, we do it based on their position in the array.

We have an array `results` representing the order in which employees finished a 100-meter sprint:

```javascript
const results = ["Elton", "Primrose", "Bennifer", "Tim", "Jim", "Bim"];
```

In this array, 'Elton' finished first, 'Primrose' second, and so on. 

To destructure values based on their order, we use the square brackets (or the array brackets) on the left-hand side of the equal sign and set that equal to the array.

Destructuring arrays allows us to assign variables to elements in an array without having to match the variable names with any specific element in the array. All that matters is the order or position of the elements in the array:

```javascript
const [gold, silver, bronze] = results;
```

In this case, the variable `gold` will be equal to 'Elton', `silver` will be equal to 'Primrose', and `bronze` will be equal to 'Bennifer'.

It's important to note that the order matters here. If we switch the order of the variables, the assignments will also switch. For example, if we switch `silver` and `gold`:

```js
const [silver, gold, bronze] = results;
```

Now `silver` will be equal to 'Elton', and `gold` will be equal to 'Primrose'.

Remember that this operation does not mutate or change the array in any way. It simply assigns values from the array to variables.

If we want to collect any remaining unassigned values into a new array, we can use the `...` rest operator:

```js
const [gold, silver, bronze, ...others] = results;
```

Now, 'Tim', 'Amy', and 'Jake' will be collected into the `others` array.

## Array Destructuring in React

Array destructuring might not seem as helpful as object destructuring at first, but it's commonly used in the world of React, particularly with the `useState` hook.

If you're not familiar with React or the `useState` hook, don't worry. The important thing to note here is that `useState` always returns an array with two elements. The first element is a value, and the second element is a function to update that value. By using array destructuring, we can directly extract these two elements into their own variables:

```jsx
const [dice, setDice] = useState(getRolls(numDice));
```

In this case, we're extracting the first element into a variable called `dice` and the second element into a function called `setDice`. The order matters here: `dice` corresponds to the first element of the array, and `setDice` corresponds to the second element.

Here's an even simpler React component following the same pattern:

```javascript
const [count, setCount] = useState(0);
```

Again, `useState` returns an array, and we're using array destructuring to extract the elements of that array into their own variables.

Array destructuring is a useful tool to be aware of, especially when working with React.

Using array destructuring to extract individual values from an array is essential when working with ordered data in JavaScript, particularly in React.

Array Destructuring in JavaScript

[00:00] In this video, we're going to talk about array destructuring. Now, if you're not familiar with object destructuring, I would check out the video I did on that first, mostly because object destructuring is far more common in the real world of JavaScript and it's a better place to start. So if you're familiar with that concept of destructuring values out of

[00:19] an object into individual standalone variables, we have a similar concept that we can do with arrays. The key difference here, of course, is that arrays are ordered. We don't really have key value pairs like we do with an object. I can destructure name out of here or price very simply. I could do const and then curly braces,

[00:38] name, price. This is an object representing a product. There's a skew, a name, a price, and in stock. I'm extracting the values of name and price into their own variables. If I run my code, I have name and I have price. Now, with an array,

[00:56] it's a little bit different because we can't call out variables based on names here, or the keys, but rather we do it based on their position in the array. So this is the results, let's say, of an inter-office race, a 100-meter sprint out in the field in front of the office.

[01:15] So it's in order. This person, Elton, finished first. Primrose was second. Benefer was third. Tim, Jim, and Bim round up the rest of the pack. What I can do to destructure values out based on the order is use the square brackets or the array brackets on the left-hand side of the equal sign. Set that equal to the array.

[01:33] In this case, it's called results. Then I can name variables whatever I want. The names don't have to match anything in here. All that matters is the position or the order. So I could call, maybe I'll give out metal awards, gold, silver, and bronze. So gold, if I just did this,

[01:51] will make me a variable called gold equal to the first value in the array, Elton. Now, if I add a second variable in here, silver, I now have gold, not golf, I have gold set to Elton, and then I have silver set to Primrose.

[02:10] It's based on the order. So if I switch the order here, silver and then gold, now silver will be set to the first value in the array of Elton and gold will be set to the second which doesn't really make sense if this is the winner and this is second place. Just like with object destructuring,

[02:29] this does not change or mutate the array in any way. It's simply referencing values from that array, putting them in variables. So let's fix this. Let's go back to gold, silver, and then bronze. So bronze here should be equal to Bennifer.

[02:46] Silver is the second element of Primrose and gold would be the first of Elton. I could keep chaining on as many different variables as I want. If I have a fourth place, I could just call the variable fourth and that would be equal to Tim. But another thing I can do is actually collect any remaining uncaptured values.

[03:06] So after the first three, Elton, Primrose, and Bennifer, collect all the others using dot, dot, dot. Into an array, we'll call this others. This will make me a variable called others that holds everything else in the array. However many things are in here,

[03:22] doesn't really matter, they will all be collected into others. As you see over here, Tim, Jim, Bim, ASDAS, ASDASD. But the first three values, Elton, Primrose, and Bennifer are extracted into their own variable.

[03:40] So it's not as useful in my experience as object destructuring, but there's at least one place where it comes up all the time in the world of React. This is a simple React component and it doesn't matter if you're not comfortable or even familiar with React. There's a very useful hook, basically a function built into React that we use a lot called useState.

[03:59] The way that useState works, I'm calling it right here, is that it always returns an array. This array always has the same shape. The first element is a value, the second element is a function. So when we call useState, we often, almost 100 percent of the time,

[04:17] we'll use array destructuring to get those two things out. In this case, I'm extracting a variable that I'm calling dice, and then a function called setDice, and it's all based on the order. We have array destructuring here. So take the first thing that we get back from this array, and it always returns an array with two elements.

[04:36] Take the first thing, call it dice. Take the second thing and call it setDice. Here's an even simpler React component, same exact pattern. We call this function useState. Again, it doesn't matter if you don't know what it does, and it returns an array. We destructure that array so that we get two pieces out. The first piece always is a value,

[04:56] the second piece always is a function, and conventionally, we'll name them num and setNum, dice and setDice, color and setColor, whatever the values are, it doesn't matter. What matters is that we're using array destructuring here to get the first element from the array and stick it in a variable. Get the second element and stick that in a separate variable.

[05:15] And that is the basic concept of array destructuring. We use the order of the array to destructure values, to extract them out into whatever variable names we want.

JavaScript's `typeof` operator is a really powerful and commonly used tool that is sometimes misunderstood by beginners.

The `typeof` does one thing: it helps us identify the data type of a given value.

It's important to know that `typeof` is an operator instead of a function.

However, instead of acting like the plus sign operator, which expects two operands on the left and the right, `typeof` is what's known as a unary operator, meaning it expects and it operates on a single operand, which we put after the word `typeof`.

To use it, `typeof` in all lowercase then write the thing you want to check.

Trying `typeof` on an int or float, you'll see `number`. A string like `hello` will show you `string`:

```javascript
typeof 35 // "number"
typeof 3.4 // "number"
typeof "hello" // "string"
```

However, If you try `typeof` on an array, it doesn't tell us `array` because In JavaScript, arrays are considered objects. The same is true when using `typeof` with actual objects.

```javascript
typeof [1, 2, 3]; // "object"
typeof {}; // "object"
```

There are some quirks with the `typeof` operator in JavaScript.

If you run `typeof` on the value `null`, it returns "object" due to a historical bug in JavaScript. This is a gotcha, as it doesn't return "null" as you might expect:

```javascript
typeof null; // "object"
```

However, if you use `typeof` on the `undefined` value, it returns "undefined":

```javascript
typeof undefined; // "undefined"
```

Using `typeof` on `NaN` (Not a Number) returns "number":

```javascript
typeof NaN; // "number"
```

The `typeof` operator works with Booleans as well:

```javascript
typeof false; // "boolean"
```

## Why Use Typeof?

The main reason to use the `typeof` operator is for basic type checking and validation.

JavaScript is a dynamically typed language, meaning a variable can hold any sort of value and change data types:

```javascript
let x = 23;
x = "aslkjd";
x = true;
```
However, this dynamic typing can lead to bugs when a variable unexpectedly holds a different type of value (this is the whole reason TypeScript exists!)

## Basic Type Checking with `typeof` Operator

In JavaScript, you can use the `typeof` operator to perform some basic type checking and validation.

Let's consider a simple example of a function called `add` that expects two arguments, but doesn't specify that they should be numbers. This means you could pass in strings, Booleans, or objects:

```javascript
function add(a, b) {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  } else {
    throw new Error('Both arguments must be numbers');
  }
}
```

In the `add` function, we use `typeof` to make sure that both `a` and `b` are numbers. If they are, we return their sum using the `+` operator. Otherwise, we throw an error.

```javascript
add(2, 3); // Works fine
add(2, 'd'); // Throws an error: Both arguments must be numbers
```

Without the type checking, if you try to add a number and a string, JavaScript will concatenate them into a string, which is probably not the behavior you want from an `add` function:

```javascript
function addWithoutTypeChecking(a, b) {
  return a + b;
}

addWithoutTypeChecking(2, 'd'); // Returns '2d'
```

By adding type checking using `typeof`, you can ensure that both `a` and `b` are numbers, making the function's behavior more predictable and less prone to errors.

## Comparing Values with `typeof`

When making comparisons with the result of `typeof`, it always returns a lowercase string as the result.

For example, when comparing `typeof true` to the string "Boolean", make sure to use a lowercase "b":

```javascript
typeof true === "Boolean" // This is false
typeof true === "boolean" // This is true
```

## Using `typeof` with Conditional Statements

Consider this `processInput` function that uses `typeof`:

```javascript
function processInput(input) {
  if (typeof input === "string") {
    console.log("PROCESSING YOUR STRING!");
  } else if (typeof input === "number") {
    console.log("PROCESSING YOUR NUMBER!");
  } else {
    console.log("PROCESSING YOUR OTHER DATA TYPE!");
  }
}
```

Depending on what is passed into `processInput`, it will print out a different message:

```javascript
processInput("hello"); // Output: PROCESSING YOUR STRING!
processInput(42); // Output: PROCESSING YOUR NUMBER!
processInput([1, 2, 3]); // Output: PROCESSING YOUR OTHER DATA TYPE!
```

## Debugging with `typeof`

The final use case we'll look at for `typeof` is for debugging and troubleshooting code that's not working as expected. It can be really helpful just to figure out the type of a value.

Imagine we have a variable called `annoyingProblematicVariable`, and we expect it to be an array but trying to access the first value gives us some unexpected results:

```javascript
annoyingProblematicVariable[0]

// Output: '['
```

To check the data type of `annoyingProblematicVariable`, you can simply run the `typeof` operator on it:

```javascript
typeof annoyingProblematicVariable

// Output: 'string'
```

In this example, `typeof` tells us that `annoyingProblematicVariable` is a string, even though you were expecting it to be an array. Remember, if it were an array, `typeof` would return "object" instead.

Although this example is contrived, you might often use `typeof` with some mystery variable that you're expecting to be one data type, only to find out it's actually another data type.

For example, you might see a string when you forgot to parse JSON or convert a value to a number.

## Wrap Up

While it's not perfect, the `typeof` operator can help you differentiate between objects, strings, and numbers. It will even tell you if a value is a function.

In addition to checking the data type of a value, you can use `typeof` to enforce typings within functions, handle various data types, and assist with debugging.

It's one of the essential tools in JavaScript!


Learn how JavaScript's typeof operator can help identify the data type of a value and how to use it for basic type checking and validation in your code.

Identifying Data Types with JavaScript's typeof Operator

[00:00] In this video, we're going to talk about JavaScript's typeof operator, a really powerful and commonly used tool that is sometimes misunderstood by beginners. So the first thing you need to know about typeof is that it does one thing. It helps us identify the data type of a given value. The next thing you need to know is that it's not a function.

[00:19] So we spell it typeof, all lowercase, not like this, like a lot of other things in JavaScript. It's all lowercased, and it's an operator. So operators include things like the plus sign. The big difference here, aside from the fact that the plus sign does math, is that the plus sign expects two operands on the left and the right,

[00:38] and then it returns some result, the sum of the two. Typeof is what's known as a unary operator, meaning it expects and it operates on a single operand, which we put after the word typeof. So after typeof, we can provide a value like 35.

[00:55] I don't know why I'm sticking with 30s, but it's 32, 34, 35. And you can see it returns to me a string that contains the type of the value I provided. In this case, 35 is a number. You may see people sometimes do this with parentheses.

[01:11] It's not going to cause a problem, but remember that it's not a function, and it's, in fact, an operator. So let's try a few more examples. If I do typeof on a number with a decimal point, it's still just considered number.

[01:24] If I do it on a string like hello, it tells me typeof that is string. But let's try a few more complicated examples, and this is where it trips people up. If you try typeof on an array, it doesn't tell us array. It only tells us that it's of type object,

[01:43] and this is because arrays are considered objects in JavaScript, and the same is true of an actual object. So if I have an object literal, just an empty pair of curly braces, that has the same value for typeof. It's the string object. Let's do another example. Here's a little bit trickier example.

[02:02] This is a weird quirk in JavaScript. If you run typeof on the value null, null is considered an object basically because of a historical bug in JavaScript. So that's kind of a gotcha. It's not going to tell you that its typeof is null.

[02:17] If I do typeof on the undefined value, that actually has a typeof undefined, and one more thing to know is if you do typeof not a number, that in fact has a value of number. So that's how it works. I didn't show an example of symbols. Let me just do one of Booleans real quick.

[02:36] The typeof, the value false, is Boolean. Okay, so that's how it works. Next, let's talk about why you should care about it and why it gets used. The main reason is to do basic type checking and validation. So JavaScript is a dynamically typed language, meaning that a variable can hold any sort of value.

[02:55] It can change data types. If I have x set to 23, I can change x to a string and then change it to a Boolean. JavaScript doesn't care. That's just the nature of JavaScript. But this dynamic typing can lead to all sorts of bugs. When you write code expecting one value or a type of a value

[03:14] it gets a different type of value, and it's the whole reason tools like TypeScript exist, to enforce typings. So we can use a typeof operator to perform some basic type checking and validation to do something like this. A very simple example, a function called add. It expects two numbers. Well, it doesn't actually say two numbers. You could provide strings.

[03:33] You could provide Booleans. You could provide objects. That's just how JavaScript works. However, in here we can use typeof to make sure that typeof a, the first argument, is a number, and typeof b, the second argument, is also a number. So both of these have to be true,

[03:49] and then we can return a plus b using math, the plus sign operator. Otherwise, if one of those or both of those are not numbers, we'll throw an error. A very simple example, but let me demonstrate. If I add two numbers, it works just fine. If I make one of these a string, we get an error saying both arguments must be numbers.

[04:08] Whereas before, if I didn't have this type checking in here and I simply returned a plus b, if I add two and the string d, I get some weird behavior. This is just what JavaScript does. When you try and add a number and a string, it concatenates them into a string.

[04:26] So this is where type checking comes in handy. Presumably this is not the behavior I want from an add function. If it is, then I could leave it alone, but it's kind of unpredictable and weird. So I add this type checking in using typeof, and it makes sure that a and b are both numbers. Another way to use the typeof operator is in a conditional statement

[04:45] to figure out the type of a given value and handle that value differently depending on its type. So instead of enforcing a single type and saying this add function only accepts numbers, I could write a very simple, trivial, useless function called processInput that expects some input value and then behaves differently

[05:04] depending on the type of that value. And one thing I want to be very clear about, when you are making comparisons to the result of typeof, it always gives us a lowercased string as the result. So it's always lowercase number, for example, or Boolean.

[05:20] So if you do something like typeof true equals equals Boolean spelled like this, it's not going to work. But if you do a lowercase b, that is in fact true because this is going to return the string Boolean with a lowercase b. So you just have to make sure you're matching that casing.

[05:39] Okay, so back to this example. If our input type is a string, we'll print processing your string. If it's a number, we'll print processing your number. If it's something else, we'll print processing your other data type. So if I call processInput with a string, it tells me processing your string.

[05:56] If I pass it in a number, processing your number, and if I give it an array, for example, which is of type typeof results in object, we get processing your other data type, a very simple example that doesn't actually do anything, but it demonstrates another way of using typeof.

[06:12] The final use case for typeof that I'll demonstrate is in debugging, troubleshooting code that's not working the way you expect. It can be really useful just to figure out the type of a value. Often, bugs are traced down to a single value that is of the wrong type. Again, that's why languages or tools like TypeScript exist in the first place.

[06:30] So I have this variable called annoyingProblematicVariable, and I'm expecting it to be an array. I want to access, let's say, the first value out of it, but it's giving me some weird result. This is not what I'm expecting. You don't have to know anything about what it's supposed to be, but let's just say it's wrong. I'm getting some weird result.

[06:49] So what I could do is just simply run typeof on annoyingProblematicVariable, and it tells me that thing is a string, and I was expecting it to be an array. Now, if I was expecting it to be an array, remember, it wouldn't say array. It would return, the typeof operator would return object.

[07:07] So this is a very contrived example, but often use typeof with some mystery variable. You're expecting it to be one thing, and then you'll find out, oh, it's actually a string. I forgot to parse this JSON, or I forgot to convert this to an object or convert this to a number or something like that. To wrap up, typeof is an operator.

[07:24] It's a unary operator, and it's one of the essential tools in JavaScript that helps us identify data types. It's not perfect. It doesn't tell us if an array is an array. It tells us an array is an object, but it will help us differentiate between objects and strings and numbers. And one last thing I did not demonstrate is functions.

[07:43] If I do typeof and then I have some function, just an empty function, it will tell me that thing is a function. You can use typeof to enforce typings in your functions, to enforce that arguments are numbers. You can use it to handle different data types, and you can use it to debug if you're unsure of the type of a given value.

Let's discuss two important special data types in JavaScript: `null` and `undefined`.

They are often confused by beginners, as both seem to relate to nothingness, negativity, or emptiness.

## `undefined`

Let's start with `undefined`. It is a primitive value in JavaScript, just like Boolean values (`true` or `false`) or numbers.
It is written as `undefined` in all lowercase letters. This value represents the absence of a value or an uninitialized value.

When you declare a variable without assigning a value, its default value is `undefined`. For example:

```javascript
let username;
```

In this case, the `username` variable has not been assigned a value, so its default value is `undefined`.

You could also explicitly set a variable to `undefined`:

```javascript
let username = undefined;
```

Remember, `undefined` represents the absence of a value.

A common scenario where you might encounter `undefined` is when trying to access a non-existent property on an object.

For instance, consider the following object:

```javascript
const person = {
  name: "Joaquin"
};
```

If you try to access a property that doesn't exist, like `person.age`, you will get `undefined` as the result:

```javascript
person.age // undefined
```

# Understanding Undefined and Null in JavaScript

In JavaScript, there are two primitive values that represent the absence of a value: `undefined` and `null`. Let's take a closer look at both.

## Undefined

`undefined` represents the lack or absence of a value. For example, if you have an object with a single property:

```javascript
let person = {
  name: 'Joaquin'
};
```

If you try to access a property that doesn't exist, like `age`, you'll get `undefined`:

```javascript
console.log(person.age); // undefined
```

Similarly, if you call a function without providing a value for an argument, the missing argument will be set to `undefined`.

Here's a simple `greet` function that expects a `name` argument:

```javascript
function greet(name) {
  console.log('HELLO, ' + name);
}
```

If you provide a name, like `'Tony'`, the function will print `'HELLO, Tony'`:

```javascript
greet('Tony'); // HELLO, Tony
```

However, if you don't provide a name, the function will print `'HELLO, undefined'`:

```javascript
greet(); // HELLO, undefined
```

In this case, `undefined` is coerced into a string and concatenated with the string `'Hello, '`.

## Null

Now let's talk about `null`, which represents the intentional absence of a value.

Unlike `undefined`, which is automatically assigned in certain cases such as uninitialized variables and missing function arguments, `null` must be explicitly set by a developer.

We use `null` to indicate that something has no value deliberately. 

Setting a value to `null` can be a way to communicate with other developers or ourselves that there's no value present.

For example, consider a video chat application where users can select from different video and audio sources.

When a user selects "no camera" or "no microphone," you might represent that choice with `null` to indicate the intentional absence of a value.

```javascript
let audioInputDevice = null;
```

By using `null` in this way, you make it clear that the absence of a value is intentional and not an oversight.

If the user selects a specific device, like the Blue Yeti microphone, we would then set the `audioInputDevice` to a non-null value.

```javascript
audioInputDevice = {name: "Blue Yeti Microphone"}
```

## Comparing `null` and `undefined`

When comparing `null` and `undefined`, it's important to note their differences.

### Comparing with Double Equals

If we use the double equal sign operator (`==`), `null` is equal to `null`, and `undefined` is equal to `undefined`.

```javascript
null == null // true
undefined == undefined // true
```


Because the double equals `==` coerces types, we can see that `null` and `undefined` are also equal to each other:

```javascript
null == undefined // true
```

### Comparing with Triple Equals

With triple equals (`===`), `null` is only equal to itself, and `undefined` is only equal to itself.

```javascript
null === null // true
undefined === undefined // true
```

In this case, `undefined` is not equal to `null` because they are different primitive values.

```javascript
undefined === null // false
```

### Checking with the `typeof` Operator

When using the `typeof` operator on `undefined`, we get the expected result: the string "undefined".

```javascript
typeof undefined // "undefined"
```

However, when using `typeof` on `null`, we get a string saying "object".

```javascript
typeof null // "object"
```

This is a weird quirk and a bug from the early days of JavaScript that still exists today.

## Determining Whether a Value is `null`

If you're trying to determine whether a value is specifically set to `null`, your best option is not to use `typeof` or `==`.

You should always compare to `null` with `===`.

For example `audioInputDevice === null` will only be true if `audioInputDevice` is actually `null`.

```javascript
const audioInputDevice = null;
audioInputDevice === null // true
```

## Conclusion

To wrap things up, `undefined` and `null` both represent the lack of a value in JavaScript.
Remember that `undefined` indicates that there's nothing there, while `null` is a value we use to deliberately indicate the lack of a value.

The null and undefined primitive values both represent the absence of value in their own ways.

Comparing null and undefined in JavaScript

[00:00] In this video, we'll talk about two very important special data types in JavaScript, null and undefined, what they are and how they are similar and how they're different. A lot of people mix them up when they're starting out with JavaScript. Both of them sound like they have to do with nothingness, or negativity, or emptiness, or something like that.

[00:18] But let's start by talking about undefined. So undefined is a primitive value in JavaScript, just like Boolean values, true or false, or numbers, for example, and it's spelled undefined and all lowercase. It's a value that represents the absence of a value or an uninitialized value.

[00:38] So it's the default value for any variables that we declare that do not have a value assigned, like let, I don't know, username. I'm not going to assign it a value. If I don't, its default value is undefined. It is the absence or the lack of a value.

[00:58] Now, I could explicitly set something to undefined too. Just so you know, it's still going to be undefined. But the default behavior is when you declare a variable with no value, you don't initialize it, it will be initialized to the value of undefined, which is a true value in JavaScript. Undefined, as I've mentioned, represents the absence of a value.

[01:17] A really common place where you'll run into this is if you try and access a non-existent property on an object. So if I have some object like person, and let's just say our person only has a name. Our person's name is Joaquin. So if I try and access a property that doesn't exist like age, I get undefined.

[01:37] It's the lack or absence of a value here. Similarly, if I call a function without providing a value for an argument, like this very simple greet function, it expects a name. If I provide a name like, I don't know, Tony, we get Hello Tony. It prints out Hello plus name. But if I don't provide a value for name,

[01:56] we'll get undefined. In this case, undefined was coerced into a string and concatenated with the string Hello comma space. So let's talk about null. Null is another primitive value. Just like undefined, it's a true value in JavaScript,

[02:14] and it represents the intentional absence of a value. So it's not automatically assigned like undefined has been. In these previous examples, undefined was automatically assigned as a value to a variable that I did not initialize with a value.

[02:30] Same thing when we try and access a property that doesn't exist in an object, when I call a function with a missing argument, that missing argument is automatically set to undefined. Null is the explicit and intentional absence of a value. We use this as developers when we want to indicate that something has no value.

[02:49] So we set values to null when we're trying to tell other developers or just ourself that there is deliberately no value present. So here's an example of when you might use it. Let's say I'm building a video conferencing application like Zoom or

[03:05] Google Hangouts where people can select from different video and audio sources. Anytime I go on Zoom, I usually have my microphone plugged in, which is a Blue Yeti microphone. I also have the MacBook microphone, maybe my headphones that have a microphone. I have to pick which audio input I want, and it often causes problems.

[03:23] So if I was building this software, you want to let a user also select no audio and turn it off at some point. So what we could do is have it, this is very simplified, but a variable called audio input device, it might start off set to the MacBook microphone,

[03:39] and then they could maybe toggle it and change it to whatever other devices they have. But then if our user decides they want to have no audio whatsoever, you could, I guess, set it to something like false or zero or an empty object. But the better option in a situation like this is to use null,

[03:59] which represents the explicit lack of a value. We deliberately set it to this value to tell ourselves, to tell other developers, there's nothing here. There is no audio input device. That is the only purpose of null. It is a value, a primitive value like undefined, that represents the explicit and intentional lack of a value.

[04:19] Whereas undefined is more of JavaScript's way of telling us there's nothing here. It's not defined. Null is us, the developer, saying there is definitely no value here, and we deliberately want there to be no value here. Then if a user then toggled in my hypothetical Zoom clone,

[04:37] they decided to select the Blue Yeti microphone, we would then set audio input device to have a value that was not null. Now, let's talk a little bit about comparing null and undefined. If we use the double equal sign operator, null is equal to null, and undefined is double equal to undefined.

[04:54] Then if I use the double equals between null and undefined, they're also considered equal when we use double equals. But remember, this coerces types. Now, let's talk about triple equals. Null is going to be triple equal to itself. Undefined is triple equals to itself.

[05:10] However, undefined is not triple equals to null. They are not the same primitive value. They are different values. Yes, they both represent the lack of something or emptiness, but they're not the same. I have a video on this website dedicated to the type of operator. If we use type of an undefined,

[05:30] we get an expected result, we get the string undefined. If I use type of on null, we get something that you may not expect or anticipate. We get a string saying object. This is just a weird quirk. It's basically a bug from the early days of JavaScript that is still here with us today.

[05:47] This means if you're trying to determine whether a value is specifically set to null, your best option is not to use type of, it's not to use double equals, but it's to compare it. So I have my audio input device, which I know is null, is to compare it with triple equals to the value of null. This will only be true if audio input device is actually null.

[06:07] So to wrap things up, undefined and null both represent the lack of a value. Undefined is JavaScript's way of telling us there's nothing here. We'll get undefined when we pass an empty argument to a function, when we try and access a property that doesn't exist in an object, and if we declare a variable without initializing it,

[06:27] it will be set to undefined. Null, on the other hand, is a value we use to deliberately indicate the lack of a value.

JavaScript's optional chaining operator was introduced as part of ES2020.

This operator allows developers to access deeply nested properties within objects while automatically handling any edge cases where a property may be `undefined` or `null`.

Consider an object called `movie`:

```javascript
const movie = {
  title: "Oppenheimer",
  director: {
    name: "Christopher Nolan",
    birthYear: 1970,
  },
};
```

It has a `title`, `Oppenheimer`, a `director` property, which is a nested object, and a `director` has a `name` and a `birthYear`.

In order to access `birthYear`, we could do `movie.director.birthYear` if we knew it was there:

```javascript
const birthYear = movie.director.birthYear;
// Output: 1970
```

However, let's suppose that we're working with some data where we're not exactly sure of the shape. In the real world, our data often is missing or incomplete or structured incorrectly.

For example, let's say that for some reason `Director` has a capital 'D', or it's just missing entirely.

Here we have a different movie, this time it's `Barbie`, and we assume that all movies have information about the director.

```javascript
const movie = {
  title: "Barbie",
};

const birthYear = movie.director.birthYear;
// Output: Uncaught TypeError: Cannot read properties of undefined (reading 'birthYear')
```

In this case, when we try to access the `birthYear` property, we get an error.

If we were to manually check for the existence of the `birthYear` property, we could do something like this:

```javascript
const birthYear = movie && movie.director && movie.director.birthYear;
```

However, this is pretty long and clunky.

## The Optional Chaining Operator `?.`

To handle this more smoothly, we can use the optional chaining operator `?.`.

Extracting the `birthYear` only if the `director` exists would look like this:

```javascript
const birthYear = movie?.director?.birthYear;
```

This code checks if `movie`, `movie.director`, and `movie.director.birthYear` all exist.

The optional chaining operator (`?.`) checks if the preceding value is `null` or `undefined`. If it is, the entire expression short-circuits, returning `undefined`.

For example, if the `movie` did not have a `director` at all, the expression would return `undefined`.

## Optional Chaining with Functions

The optional chaining operator can also be used when calling a function or method that may or may not exist.

Like before, you can use it by adding a question mark after the property name, followed by parentheses:

```javascript
const movie = {
  director: {
    birthYear: 1970,
  },
  getMovieData: () => "aksjdlkasjdlkas"
};

movie.getMovieData?.();
```

In this case, the `movieData` will give us the result of calling the `getMovieData` function if it exists.

If `movie` or `movie.getMovieData` are `null` or `undefined`, the whole expression short-circuits, and `movieData` will be `undefined`.


## Optional Chaining with Arrays

Say the `movie` has a property called `actors` with an array of actors:

```javascript
const movie = {
  // properties as before
  actors: ['RDJ', 'Cillian Murphy']
}
```

If we wanted to get the second element out of `actors`, we could do something like this:

```javascript
movie.actors[1]
```

However, if we're not sure whether `actors` exists or not, we can use optional chaining to avoid errors by adding the `?` after `actors`:

```javascript
movie.actors[1] // Output: Cillian Murphy
movie.actors?.[1] // Output: Cillian Murphy
movie?.actors?.[1] // Output: Cillian Murphy
```

Now, if we misspell `actors`, the optional chaining will prevent an error:

```javascript
console.log(movie.actrs?[1]); // Output: undefined
```

## Wrap Up

Optional chaining in JavaScript is a useful syntactic sugar that allows us to tentatively try and access properties off of objects that may or may not exist, making our code more safe and easier to read than handling edge cases manually.

Optional chaining (?.) in JS allows accessing deeply nested properties while handling cases where a property may be undefined or null.

Safely Access Nested Object Properties with Optional Chaining

[00:00] JavaScript's optional chaining operator, which was introduced as part of ES 2020, allows developers to access deeply nested properties within objects while automatically handling any edge cases where a property may be undefined or null. So I have a very simple object

[00:16] here called movie. It has a title, Oppenheimer, a director property, which is a nested object, and a director has a name and a birth year. So of course, in order to access birth year, if I knew for sure that it was in there, nested under director, I could do movie.director.birth

[00:33] year. But let's suppose that I'm working with some data where I'm not exactly sure of the shape. It's kind of silly when I have to find it right here for you, but in the real world, our data often is missing or incomplete or structured incorrectly. If I run this line,

[00:48] movie.director.birth year, we definitely get the correct answer, 1970. But let's say that for some reason, director has a capital D, or it's just missing entirely, right? We have a different movie. This time it's Barbie. And we assume that all movies have information about the director.

[01:07] But in this case, if I copy this and run it, we get an error, right? We get a type error. Cannot read properties of undefined because director is undefined. We can't do something like undefined.birth year. That generates a type error. So in the past, without the optional

[01:25] chaining operator, the way we would do this safely, if we wanted to extract birth year, only if director exists, would look something like this. This is one option, at least. Movie and and movie.director and and movie.director.birth year.

[01:44] And then I could save this to a variable. I'll call it year. And if we look at year, it's going to be undefined, but there's no error involved. This is totally valid. We're just using some basic Boolean logic. So if movie.director doesn't exist, like it doesn't here, right? This

[02:00] whole thing is now going to be false. And we'll end up with undefined as the return value that is stored in year. So this is kind of the old way of doing it. Now, to be clear, this right here does not protect against, let's do something that doesn't exist, like movie with a B. We'll still

[02:16] get a reference error here, because JavaScript doesn't know what this is referencing. So this is a pretty long and clunky way to safely access birth year. Enter the newish optional chaining operator, which is written with a question mark, followed by a period. So I could rewrite this line

[02:33] that you see here. I'll comment it out to look like this. Movie question mark, followed by a question mark, dot, director, question mark, and then dot, birth year. Let me expand this so you

[02:51] can see it on one line. The question mark dot is going to check to see if the preceding value is null or undefined. And if it is, the entire expression, short circuits, returning undefined. So in this case, movie has a title, and movie is defined, so this is fine. But then we get to dot

[03:09] director. Well, there is no director property, right? That evaluates to undefined, which will short circuit the whole thing, and year will be undefined. As you can see over here, it's set to undefined. Just like what we had here, but this is much shorter and much more intuitive. The question

[03:24] mark makes a lot of sense as a choice, right? We're questioning, is there director here? If so, let's get birth year. And again, if at any point, movie or movie dot director are null or undefined, the whole thing short circuits, and we end up with undefined. But if I restore this to have a

[03:42] director, I don't know Greta Gerwig's birth year, so I'm going to go back to Oppenheimer. And his birth year, Christopher Nolan, make sure I spell it correctly, was 1970. If I rerun this,

[03:58] now year is in fact set to 1970, because this evaluated not to be null or undefined. This evaluated not to be null or undefined, and then we access birth year, and that's going to give us 1970. We can also use the optional chaining operator when calling a

[04:13] function or method that may or may not exist. So I'll add a simple function in here called, I don't know, get movie data, and it will just return some nonsense. Okay, so if I want to call

[04:28] it, I could do movie dot get movie data, and just assume that it's always there. But of course, if it's not there, and then try and execute that as a function, I get a type error, right? That doesn't exist, undefined, it's not a function. So what I can do is put a question mark, and then a

[04:44] dot, and then follow it with the parentheses. So movie dot get movie data, does that exist? Is that thing not undefined and not null? If so, we'll try and execute it. If it is undefined or

[04:58] null, then don't execute it. So in this case, it works. I mean, why don't I console dot log, so you can just see that it does work. And we get our console dot log printing out. But if it doesn't exist, or it's misspelled, we don't get an error. And the same is true of working with

[05:18] arrays. So if I have an array in here called, I don't know, actors. And, oh gosh, who is in this movie? Robert Downey Jr. is in Oppenheimer. I'll just do rdj. What's his name? Killian Murphy. Let's just leave it at that. I don't know if I spelled his name correctly. Okay, if I want to

[05:38] access the second element out of actors, if I just assume that it exists, it would be something like this, right? Movie dot actors, and we get Killian Murphy. But if I'm not sure, movie dot actors exists, same exact syntax, question mark dot. And then if it does exist, it's not null, and it's not

[05:57] undefined, we'll access the first element out of the array. But if I misspell it, or it's not on my data, I'll instead end up with undefined instead of an error, which is what I get here. So optional chaining is super useful. It's a nice little piece of syntactical enhancement to JavaScript,

[06:16] or sugar. We use a question mark followed by a dot to tentatively try and access a property off of an object that may or may not exist. And it can simplify our code significantly. And remember that if at any point the value before question mark dot evaluates to null or undefined,

[06:34] the whole expression will short circuit and return undefined.

The **Set** is a specialized data structure in JavaScript that was added as part of ES2015. 

A Set is a collection of ordered values, kind of like an array.

The main differentiator is that values have to be unique.

## Creating a Set

Instead of using curly braces like an object or square brackets like an array, you create a set using the `new Set()` syntax.

```javascript
const users = new Set();
```

## Adding Values to a Set

In order to add a value to a set, we use a method called `add`.

For example, if you want to add a new user with the username `John23`, you would do the following:

```javascript
users.add("john23");
```

Now, if you inspect the `users` set, you'll see that it has `John23` in it:

```javascript
users; // Set(1) {"john23"}
```

Every value in a set is ordered by insertion order. So, if you add another user with the username `sasha99`, the set will now have two elements, ordered by insertion order:

```javascript
users.add("sasha99");

// Set(2) {"john23", "sasha99"}
```

## Sets Are Unique

The main feature of sets is that they only allow unique elements. So, if you try to reinsert a value that is already in the set, the set will remain unchanged.

For example, if you try to add `john23` again, the set will still only have two values inside of it (`john23` and `sasha99`).

```javascript
users.add("john23");

// Set(2) {"john23", "sasha99"}
```

Sets only allowing unique elements is a big part of what makes them useful when compared with an array.

There are many situations where you need values to be unique and don't want duplicates.

You could accomplish this functionality using an array, but it's harder and less performant because JavaScript would have to check every element in the array to see if "John23" is present.

## Checking for Values in a Set

When using a set, checking for duplicated values and the presence of a value is designed to be fast and efficient behind the scenes. Sets will operate in constant time compared to `O(N)` time when working with arrays.

To check if a value is present in a set, you use the `has` method.

For example, let's check to see if `john22` is present in our set:

```javascript
users.has("john22"); // false
users.has("john23"); // true
```

Remember, this is a constant time search operation, which means it's very fast.

## Iterating Over a Set

You can iterate over a set using the `forEach` method on set objects:

```javascript
users.forEach((user) => {
  console.log(user);
});
```

## Clearing a Set

To empty a set, you can use the `clear` method:

```javascript
users.clear(); // Now users is an empty set
```

## Set Size Property

Sets have a `size` property (instead of `length`) that returns the number of elements in the set:

```javascript
users.add("sasha99");
users.size; // Returns 1
```

## Using Sets to Remove Duplicate Values from an Array

One common use case for sets is when you have an array full of duplicate data and you want to get just the unique values.

For example, suppose we have an array with duplicated numbers:

```javascript
let duplicates = [2, 2, 3, 3, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9];
```

To remove duplicates, you can turn this array into a new set:

```javascript
let uniqueValues = new Set(duplicates);
```

Now, `uniqueValues` is a set with a size of 8, containing the unique elements 2, 3, 4, 5, 6, 7, 8, and 9.

Then you can turn the set back into an array using the spread operator:

```javascript
let uniqueArray = [...new Set(duplicates)];
```

## Sets for Managing Unique Data

Another use case for sets is managing unique data like user permissions. Since user permissions are unique, it's often easier and more performant to work with sets compared to arrays.

```javascript
const userPermissions = new Set(["create", "read", "edit", "delete"]);
```

For example, you can quickly add a new permission to a user, check for the presence of a permission, or revoke a permission using methods like `add`, `has`, and `delete`.

```javascript
userPermissions.add("newPermission");
userPermissions.has("delete");
userPermissions.delete("edit");
```

## Wrapping Up

Sets offer significant performance improvements over arrays when it comes to storing and searching for unique values. The speed improvement is especially noticeable when working with large sets.

They provide a faster and slightly better interface when working with unique data like user permissions.

So, next time you need to work with unique values, consider using sets for a more efficient and faster solution!

Learn how to create sets, add and search for values, and understand their performance benefits compared to arrays.

The Set Data Structure

[00:00] The set is a specialized data structure in JavaScript that was added as part of ES2015. And unlike other data structures like the array or an object literal where we have a nice shortcut syntax, we can use curly braces for an object, we can use square brackets for an array,

[00:16] with a set the only way to make a new set is to call new set just like this. I'll save this to a variable and I'll call this one users. Okay, so that's how you make a set. But before we do anything else, let's talk about the purpose of a set. A set is a collection of values, kind of like an array.

[00:35] It's ordered, but the main constraint, the differentiator, is that values have to be unique in a set. So let me show you that in action. In order to add a value to a set, we use a method called add. Now my set is called users. Maybe I'm making an online game where I have to have a bunch of users playing at the same time,

[00:53] but I can't have users that have the same username. So if somebody logs in, they're called, I don't know, John23. When I call add, you can see that my user set, if I inspect it here, now has John23 in the set.

[01:09] And every value in here, the whole set, is ordered by insertion order. Somebody else joins my online game, Sasha99, welcome to our game. We'll insert that username into the set and now we have two elements. Again, ordered by insertion order. But remember that sets are unique.

[01:25] So if I try and reinsert, how about John23? Somebody tries to join with the same username. If we look at our set, it's completely unchanged. It still only has two values inside of it. John23 appears once, followed by Sasha99.

[01:40] Sets only allow unique elements, and that's what makes them useful. Otherwise, if you just need a list of elements, you can use an array. But if you want a unique list of elements, that's where sets come in. So to make a new set, we call new set. And we've seen a single method called add, which inserts a new value into the set,

[01:58] assuming the value is not already present in the set. There are other methods we'll talk about in a moment. But first, let's talk about the utility here. There are lots of situations where you need something to be unique. You need values to be unique. You don't want duplicates. And you could accomplish this functionality using an array. It's just a little bit harder.

[02:17] It's harder as far as the work we have to do, but it's also less performant. For example, if I had John23 in an array, and then I have Sasha99 in the array, and then I want to add John23 into this array only if it doesn't already exist in the array,

[02:36] how would I go about doing that? It's a little bit more complicated. I have to first check, is John23 in this array? If it is, then don't insert him, or it. If it's not, then insert John23. But beyond that, it's actually not very performant to do so.

[02:52] Basically, JavaScript will have to check every element in the array to see if John23 is present. But when we use a set, it's much more performant. When checking for duplicated values, we're checking for the presence of a value, it's designed to be fast and efficient behind the scenes.

[03:08] Sets will operate in constant time compared to O of N time when we're talking about arrays. There are a handful of other set methods, including clear, which will empty the whole thing out, delete, which will delete a specific value, and then we also have has. And has is basically a search. It will check to see if a value is present.

[03:27] So let's check to see if John22 is present in our set. It is not. Is John23 present? It is. And remember, this is a constant time search operation. If you don't know about big O notation, it just means that it's fast. It's very quick. I won't demonstrate this, but you can iterate over a set.

[03:44] There's a for each method on set objects. And then I also mentioned there's a clear method, which just empties the entire set out. And now users is an empty set. Okay. Also, sets have a size property. It's not a length, but it's called size. So let's add somebody back in.

[04:02] If we look at our users.size, it returns one because there's one element in the set. Let's wrap up with some examples of where you could use sets. One of the simplest and most common use cases is when you actually have an array full of duplicate data. Suppose I have this array full of duplicated numbers.

[04:20] As you can see, there's a couple of twos, multiple threes, and so on. And I want to get it down to just the unique values, which is a pretty common thing to do when you're writing code, depending on the situation. The easiest way to do this is to turn this into a new set. When I create a new set, I can pass through an array.

[04:37] I'll pass through my duplicates array, and you'll see that this makes me a set with a size of eight. It has eight unique elements, two, three, four, five, six, seven, eight, and nine. For whatever reason, I decided to skip one.

[04:51] And then I can turn it back to an array if that's what I want by using the spread operator to spread my new set back into a new array. But it only contains the unique values from this duplicates array. So that's one use case. We're not actually doing much for the set. We're just creating a new one and then turning it back into an array.

[05:09] Another simple use case for sets is anytime you have unique data, it's often easier to work with sets, not to mention more performance compared to arrays. So an example would be user permissions. If you're trying to manage the permissions for a given user, those are going to be unique, right? Somebody can't have to create permission or the delete permission twice.

[05:28] But you want to quickly be able to add a new permission to a user, you know, user permissions or check to see for the presence. Can this user delete? If you use the has method that we already learned, it makes it very easy. And then we can also revoke that permission by using deletes.

[05:46] And let's remove the edit permission. Anyway, very simple stuff. You know, nothing revolutionary. Like I said, you can do this with an array, but it's just faster and a slightly better interface when you're doing it with a set. Of course, it only works with unique values.

[06:01] And then as far as performance is concerned, you really won't notice a difference on small sets like you see here or small arrays. But behind the scenes, sets are much more optimized and much faster to store unique values and search for unique values than arrays.

In JavaScript, error handling is an essential aspect of programming.
The `throw`, `try`, and `catch` constructs are vital for managing errors and providing a better experience for users and developers alike.

## Throw

The `throw` keyword allows developers to create custom errors and throw an exception. 

Technically, we can throw almost anything. For example, if you throw a string, you'll see a message that says "Uncaught whoops!" in the console. Similarly, you'd see an empty object if you threw an empty object.

```javascript
throw "whoops";
// Uncaught whoops!

throw {};
// Uncaught {}
```

However, it's most common to throw an `Error` object that contains a specific message:

```javascript
throw new Error("invalid data");

// Uncaught Error: invalid data
```

The most important thing to know about `throw` is that it will interrupt the flow of the code.

For example, if we have two `console.log` statements, they will both display as expected:

```javascript
console.log("FIRST");
console.log("SECOND");
```

If we `throw` something in between, only the first thing is printed out. As soon as JavaScript encounters the `throw`, it stops executing the code.

```javascript
console.log("FIRST");
throw "lol";
console.log("SECOND");
```

When the normal flow of the program is interrupted, the control is passed to the nearest error handling mechanism. However, we don't have any error handling mechanism in place right now. That will come later when we discuss `try` and `catch`.

## Divide Function Example

Consider a function called `divide` that takes two numbers, `a` and `b` and returns the result of dividing `a` by `b`. Here's the code for the function:

```javascript
function divide(a, b) {
  return a / b;
}
```

If we call the function with `divide(3, 5)`, we get the result `0.6`.

However, if we try to divide by 0, we get an unexpected result: `Infinity`.

This behavior is specific to JavaScript, as in many other programming languages, dividing by 0 would cause an error.

To avoid introducing the `Infinity` value into our code, we can add a simple check to see if `b` is exactly equal to 0.

Remember, using `console.log` to print a message is not sufficient as it doesn't interrupt the flow of the program.

We need to use the `throw` keyword to generate an error and interrupt the flow of the code:

```javascript
function divide(a, b) {
  if (b === 0) {
    throw new Error("division by zero is not allowed");
  }
  return a / b;
}
```

Now, if we try to divide by 0, our function will throw an error, preventing the `Infinity` value from being returned.

## Handling Errors with `try` and `catch`

When we throw an error, we usually want a way to handle it. This is where `try` and `catch` statements come into play.

## The `try` Block

The first thing to learn is how to write a `try` block.

A `try` block is not function. It is a block that looks similar to writing an `if` statement.
  
Inside of the block, you can write code that might result in an error.

```javascript
try {
  divide(3, 0)
}
```

However, a try block on its own doesn't really give us much. In fact, we'll get an error if we don't have a catch block after the try block.

## The `catch` Block

The `catch` block comes after our try block, and will handle any error that occurs in the `try` block.

```javascript
try {
  divide(a, 0);
} catch {
  console.log("error occurred");
}
```

In the above code, when the error occurs in the `try` block, the `catch` block handles it by logging "error occurred" to the console.

If the code inside the `try` block doesn't throw an error, the `catch` block is skipped, and the code continues executing normally.

The `catch` block can also take a parameter, which is usually called `error` or `err`. This parameter will hold the actual error object that we are catching.

We can then access the `message` property of the error object using `error.message`.

```javascript
function divide(a, b) {
  if (b === 0) {
    throw new Error("division by zero is not allowed");
  }
  return a / b;
}

try {
  divide(a, 0);
} catch (error) {
  console.log("error occurred", error.message);
}
```

For our `divide` example, we could get the error message:

```
error occurred division by 0 is not allowed.
```

Let's add some code that generates a different error.

For example, we can create a constant variable using `const`, then try to reassign it:

```javascript
try {
  const x = 10;
  x = 22;
} catch (error) {
  console.log("error occurred", error.message);
}
```

Now we get a different error message in the same `catch` block:

```
error occurred. Assignment to constant variable.
```

When an error occurs in a `try` block, it will be caught by the corresponding `catch` block. We can then handle the error differently if we want to. In this case, we're just printing the error message. 

## A Real-World Example

Here's a slightly more complicated example of how you could use error handling in the real world.

We have a basic function called `fetchURL` that takes a URL and makes a request to it. 

```javascript
async function getUrl(url) {
  try {
    // Try getting the data from the url
    const response = await fetch(url);
    const data = await response.json();
    console.log("HERE IS YOUR DATA", data);
  } catch (error) {
    // Handle the error or provide a fallback behavior
    console.error("Failed to fetch data:", error.message);
  }
}
```

This request may or may not work, depending on various factors such as the URL being invalid, the website being down, or the device having no internet connection. In such cases, error handling becomes essential to gracefully handle these exceptions

When we call `getUrl` a valid URL, we get the data back as expected:

```javascript
getUrl("https://jsonplaceholder.typicode.com/todos/1");

// Output:
// HERE IS YOUR DATA {userId: 1, id: 1, title: "delectus aut autem", completed: false}
```

Now, let's rerun the code with an invalid URL:

```javascript
getUrl("https://invalid-url.example.com");

// Output:
// Failed to fetch data: Failed to fetch
```

This time we get an error: "Failed to fetch data." The error message is printed out using `error.message`, which was caught in the `catch` block.

## Wrap Up

This error handling workflow is common.

Try something that may or may not cause an error. If it doesn't cause an error, great, everything works. If it does throw an error, catch that error and handle it.

In our examples, we catch these errors and handle them by logging the error message in the console using `console.error()`, which prints the message in red. In the real world, our error handling logic would probably be a bit more robust.

The big takeaway here is that `try`, `catch`, and `throw` are tools that can help you handle errors in your code effectively.

Learn how to use them to create custom errors, interrupt code flow, and handle errors gracefully for a better experience for both users and developers.

JavaScript Error Handling with throw, try, and catch

[00:00] In JavaScript, error handling is an essential aspect of programming. Throw, try, and catch are vital constructs for managing errors and providing a better user experience plus a better developer experience. We'll talk about all three, but let's start with throw.

[00:16] Throw allows us, developers, to create custom errors and throw an exception. Now, technically, we can throw almost anything. I can throw a string, like, whoops. And if I do this in the console,

[00:31] you'll see I get what looks like an error message saying, uncut, whoops. I can also throw an object if I wanted to. I'll just throw an empty object. But what's most common is to throw an error. So something like this, throw new error, and then in parentheses, any sort of error message.

[00:49] This will make an error object. So maybe I'll do something like, you know, invalid data, very nondescript error, or nondescriptive. But you can see we have a different message. It says, uncut error, invalid data.

[01:06] What's most important to know about throw, though, is it will interrupt the flow of my code. So if I have a console.log first, and then I console.log second, and in between, well, I'll just show, you know, both of those should print out.

[01:24] But if I throw something in between, throw LOL, only the first thing is printed out. And then as soon as JavaScript encounters the throw, whatever we're throwing, it doesn't really matter. The normal flow of the program is interrupted, and the control is passed to the nearest error handling mechanism,

[01:42] which we don't really have any error handling mechanism in place right now. That's later to come. Okay, so typically we will throw an error message. And I have a very simple, honestly contrived example, but I want to keep it simple. I have a function called divide. It takes two numbers. Why would you need a function to do this? You probably wouldn't.

[02:00] But imagine we're doing something more complex. I'll show a more complex example later. A and B, two numbers. We'll assume they're numbers. We return A divided by B. If I call divide with, I don't know, how about 3 and 5, I get 0.6. That's correct.

[02:18] And if I divide by 0, we get maybe an unexpected result. We get infinity, which is just how JavaScript works when you divide by 0. In many other programming languages, this actually causes its own error. So if I want to replicate that, I find this behavior confusing,

[02:34] and I don't want to introduce the infinity value into my code at any point. What I could do is very simple check. If B is exactly equal to 0, instead of just console.logging something, that's not going to stop the flow of this program. Whoops.

[02:53] Divided by 0, that's just going to be a little message that's printed out. And then the code keeps running, and we return infinity. Now I could probably gate this off and do an if else, but still, in the case of an error, when I want to generate an error and interrupt the flow of my code, that's not happening here.

[03:12] So instead, I can use throw. I'll throw a new error, and I'll say division by 0 is not allowed. And now if I try and divide by 0, if B is exactly equal to 0, we have an error. Division by 0 is not allowed. And then this code never runs.

[03:30] It stops the flow of our execution of the code and passes that error off to any error handling, but we don't have any error handling. That leads us to try and catch. When we throw an error, we usually want a way to handle it. This is where try and catch statements come into play.

[03:47] The first thing I'll show you is that we write a try block. A try block looks like this. I'll just do it down here. T-R-Y, and then a block of code. So it's not a function, it's a block. Like if we were writing an if statement, for example. We use curly braces to indicate the start and end of the block.

[04:05] Inside of this try block, we can write code that might result in an error. So a simple example that we know results in an error is something divided by 0. This divide function where B is 0 will throw a new error as we see over here. But a try block on its own doesn't really give us much.

[04:23] In fact, we'll get an error. If I save this code, it says missing catch after try. And that brings us to the catch block. So catch comes after our try block, and it will handle any error if an error occurs in the try block.

[04:40] So we know that this will result in an error right there. And then in here, I can handle it however I want. Maybe I'll just do something super simple like console.log error occurred. Okay, and you can see that error occurred is printed out.

[04:57] Again, very simple, probably not how we would actually handle errors in the real world, just printing them out to the console. But it allows us to intercept those errors that have been thrown, in this case, this error right here, handle it so that my code doesn't just stop running. Instead, I can do something with that error.

[05:16] And then, of course, if I have something that's valid, I'm going to console.log this. If I divide by, I don't know, 2, that's totally valid. We see 1.5 printed out. This code never runs.

[05:32] So the catch block only runs if an error was generated within try. Now, if none of this is in a try block, there's no catch. Both of these lines are going to run right now. But if I divide by 0, that throws an error. This does not print out.

[05:50] This does not print out because our error was never handled. It stops the execution of our code. So another thing that we can do with a catch block is actually add in a parameter here. Usually it's called error or E or E-R-R. I'll call it error.

[06:06] This will hold the actual error, the object that we are catching. And then I can access on that error, error.message. Sorry that this has collapsed onto two lines. Maybe I'm zoomed in too far.

[06:21] So whatever this error is, we're catching it, intercepting it, and then handling it. In this case, I'm just saying error occurred, and then I'm printing the error.message, which will be this message here. So let's try it again with dividing by 0, and we get error occurred. Division by 0 is not allowed.

[06:39] But then I might have some other code in here that generates a different error. For example, this is super simple, but let's make a variable using const. const x equals 10. And remember, const defines a constant, so I'm not supposed to change it. If I try and change it to 22, now we have a different message printed out.

[06:58] This threw its own error. Just JavaScript throws an error when you try and do this. Reassign a constant. We caught it. Any error that occurs in try will be caught right here. And then we have this error object, and we can handle things differently if we wanted to. In this case, I'm just doing the same thing, printing out error occurred with the error.message,

[07:17] and it says error occurred, assignment to constant variable. Here's a slightly more complicated example, still simplified, of how you could use this in the real world. So I have a basic function called the getURL, or maybe I should call it fetchURL. It takes a URL, and it makes a request to that URL.

[07:34] And it's okay if you're not familiar with fetch and await and async. That doesn't matter. But it's trying to send a request to whatever URL we pass in. And that may work. It may not work. It might be an invalid URL. The website might be down. There might be no Internet on this device. There's a lot of reasons it could fail.

[07:51] So we wrap the whole thing in a try block, and then we catch any errors, and we'll console.log any errors. So let me just show an example of this. This is a valid URL. I'm going to call getURL with this valid URL. And it says here's your data, and then it prints out my data. Very simple.

[08:10] So this line ran. Nothing went wrong. None of this code runs in the catch block. But now if I rerun it and I totally mess up this URL, this time we get an error. Failed to fetch data. And then it prints out the error message, error.message, that was caught.

[08:28] So we caught this error. We tried to make all this code happen, tried to get it to run. At some point, an error was thrown. And then when that was thrown, we caught the error. This is a super common workflow. Try something that may or may not cause an error. If it doesn't cause an error, great, everything works.

[08:45] If it does throw an error, then we can catch that error. Now, in this case, I'm not throwing the error myself. I showed an example of that earlier with the divide function. But instead, there might be an error thrown when we try and fetch or when we try and parse the JSON. Things can go wrong. JavaScript itself is throwing those errors.

[09:03] And then we can catch them and handle them. And the way I'm handling it for now is very basic. I'm just console.logging the – well, I'm actually console.erroring the error, which is just going to make it print out as red, basically, in the console. But in the real world, our error handling logic would probably be a bit more robust.

[09:19] So that's how try, catch, and throw can work together.

Let's explore some options to center an element in CSS both horizontally and vertically, which is a common situation you might encounter.


We'll start with by looking at a teal blue container box with a smaller green box inside it:

![](https://res.cloudinary.com/dwppkb069/image/upload/v1691098017/4_00-22000-and-i-would-like-to-center-this-box-inside-the-container_hvzbro.png)

The markup is straightforward: the container has an id of `#container` and the smaller box has an id of `#centerMe`:

```typescript
#container {
   background-color: #549fa2;
   width: 300px;
   height: 300px;
   border: 2px solid black;
}

#centerMe {
   background-color: #d2db89;
   width: 100px;
   height: 100px;
}
```

Our goal is to center the green box inside the blue container.

## Centering Horizontally Using Margin

The first option to center an element horizontally is to use margin.

Inside the style rules for `#centerMe`, we can set the margin using the shorthand. We'll provide a top and bottom value of 0 and use the special value of `auto` for the left and the right. This centers the element horizontally within its parent container:

```css
#centerMe {
   background-color: #d2db89;
   width: 100px;
   height: 100px;
   margin: 0 auto;
}
```

![Techniques for Centering with CSS](https://res.cloudinary.com/dwppkb069/image/upload/v1691097812/cbufdprnxqawyommfkvv.png)

However, this method only centers the element horizontally.

If we try to use `auto` for the top and bottom, it won't center the element vertically. 

We could add some margin to the top and bottom, for example a value of `margin: 20px auto;`:

![Techniques for Centering with CSS](https://res.cloudinary.com/dwppkb069/image/upload/v1691097813/no7j3uuwdnecnjdinevn.png)

You can see how calculating the exact center vertically can be a huge pain.

The margin technique is best for centering only horizontally.

## Centering Horizontally and Vertically with Flexbox

Let's look how to use Flexbox to center an element horizontally and vertically.

Flexbox can be a bit overwhelming for beginners, but we'll only focus on a few properties here.

Most Flexbox properties are set on the containing element itself.

We'll start by enabling Flexbox by adding a `display` of `flex` on the container div.

```css
#container {
   background-color: #549fa2;
   width: 300px;
   height: 300px;
   border: 2px solid black;
   display: flex;
}
```

You won't see much of a difference until we add a couple of different properties.

First, we'll add the `align-items` property and set it to `center`. This will center elements vertically:

```css
#container {
   /* existing rules above */
   display: flex;
   align-items: center;
}
```

![Techniques for Centering with CSS](https://res.cloudinary.com/dwppkb069/image/upload/v1691097814/olcuoznhpjoeuunqaaf1.png)

The alignment depends on the `flex-direction`. If you change the `direction` to a `column`, it will center the content horizontally.

Now if we add the `justify-content` property and set it to `center`, it will center the content horizontally and vertically within the container, regardless of the size of the container:

```css
#container {
   /* existing rules above */
   display: flex;
   align-items: center;
   justify-content: center;
}
```

![Techniques for Centering with CSS](https://res.cloudinary.com/dwppkb069/image/upload/v1691097815/ejousb4mwvedu1k68um2.png)

This method will center your content horizontally and vertically within the container, regardless of the container's size. If you change the height or width, the content will remain centered.

## Centering with CSS Grid

CSS Grid has its own set of properties that can be used to center elements.

First, set the `display` property of the `#container` element to `grid`:

```css
#container {
   /* existing rules above */
   display: grid;
}
```

Like before, this doesn't change much visually.

Next, we'll use the `place-items` property to center the content horizontally and vertically.

```css
#container {
   /* existing rules above */
   display: grid;
   place-items: center;
}
```

![Techniques for Centering with CSS](https://res.cloudinary.com/dwppkb069/image/upload/v1691097816/fwgtse69qgrqvyyimzwx.png)

The result is similar to Flexbox, but the `place-items` property is more straightforward than using `justify-content` and `align-items`.

Let's try changing the container dimensions to see how the centered element behaves:

```css
height: 200px;
width: 200px;
```

Like before, the element stays centered in the container, regardless of the container's dimensions.

## Wrap-Up

There are many other ways to center elements, including some less convenient ones like using positioning and `calc()` to perform math on the fly.

However, my preferred method is using `display: grid` with `place-items: center` since it makes centering elements simple and straightforward.

There are several options for centering elements in CSS, including using margin, Flexbox, and CSS grid. 

Techniques for Centering with CSS

[00:00] In this video, I'll run through some options that you can use to center an element in CSS, both horizontally and vertically. This is a super common situation. I have a very simple example where I have a blue box or a teal, what color is that, bluish, and then a smaller green box in the middle.

[00:18] And I would like to center this box inside the container. So my markup is very straightforward. I have a container, that's the blue thing, and then I have a div with the ID of center me, that's the greenish color, sort of a light puke color. So I want to center this.

[00:35] The first option I'll show you is how to center it horizontally using margin. This is very simple. Here's my div that I want to center. I can set the margin using the shorthand, which takes a whole bunch of different values, but I can provide a top and a bottom value of zero, or I could add some margin on the top and the bottom.

[00:54] And then a very special value of auto for the left and the right. And that centers the element horizontally within its parent container. Now it does not work if I try to do auto on the top and bottom. It only centers it horizontally. I could add in some margin, like 199 pixels on the top and the bottom.

[01:13] Well, this container is 200 pixels tall, so I don't think that's going to work. Maybe 20 pixels. You can see that I could do math and try and center it in the exact middle vertically, which is just a huge pain. This is a very quick and easy way to center something horizontally,

[01:29] but now let's talk about centering things vertically and horizontally. And the first option I'll show you is to use Flexbox. Flexbox can be a bit overwhelming if you're a complete beginner. I'm only going to show a handful of properties. The way that it works is that we actually set the properties, a lot of the properties, on the containing element itself.

[01:48] So the first thing I have to do is turn Flexbox on by setting display to flex. We won't really see much of a difference. Then there are two properties. The first one I'll show you is align items, and we can set that to center. And this will center elements, in this case, vertically.

[02:05] Technically, it depends on the flex direction, which is not something we're not going to get into that. But if I change the direction to a column, it will center it horizontally. It doesn't really matter, though, because if we add in the second property, justify content, and we set that to center,

[02:20] this will center our content horizontally and vertically within the container, regardless of the size of the container. So if I make it a lot taller, for example, like 500 pixels, it still stays centered. If I make the width 150 pixels, it still stays centered. Okay, so that's the Flexbox option.

[02:38] And for a while, that was the easiest thing we could do. We also have a CSS grid option. And just like with Flexbox, grid comes with a whole set of properties. It can get overwhelming if you're a complete beginner. The good news is it's super straightforward to center something vertically and horizontally.

[02:55] All we have to do is, on the containing element, turn on display to grid. I should mention, if you're new to grid, check out my free grid course on this very website. You can find a link in the top nav bar. It will teach you everything you need to know about grid. Anyway, I'll set display to grid. Don't see much of a difference.

[03:12] But then there's a very special property called place items. And if I set that to center, it centers my content horizontally and vertically, just like before with Flexbox, but now it's only two properties. You don't have to worry about, I mean, it's who can remember, justify content, align items. Those names are a little clunky.

[03:30] Place items center is pretty straightforward. So it doesn't matter how large. Let's change the height again. Let's go to 200 pixels tall for the container. Let's change the width to be 200 pixels wide. It still stays centered in that container.

[03:45] Now there are many other ways of centering elements, including some really clunky ones like using positioning and using calc and doing some math on the fly. It's not very fun. Now with place item center and display grid, it's super straightforward. This is my preferred approach. Flexbox is fine as well.

[04:03] And then if you're just centering something horizontally, margin auto, auto for the left and the right, makes it super simple with a single line.

Tips

A collection of programming tips for your daily workflow.