Master optional properties in TypeScript by exploring user profiles. Enhance your coding skills and effectively handle dynamic object types.

Optional Properties

[00:00] Alright. Let's jump into it. Let's make our type first. So it's gonna be type user profile. That's gonna have a name that's a string, an email that's a string, and both of those are required.

[00:09] But bio and website, these are optional. And so now we can specifically type Alice and Bob with those, with the that type and that can protect us against, making these silly mistakes here and there. And I should mention also that often I don't find myself explicitly typing things because usually, I'm gonna be passing this object to some, function that has a type definition, and we'll look at that when we get into the type safety stuff. But, and then I'll I'll catch the problem at that point. And so, while you'll be seeing me doing this a lot, in our exercises and things because the way things are structured, once you get into, real, TypeScript code bases, you'll find that TypeScript is actually really good at inferring what you're trying to accomplish.

[00:59] So I do definitely do this occasionally, but not as much as you might, assume based on what we're seeing in here. Alright. With that said, let's, talk about how we access these optional properties. So if I were to just say console dot log alice.bio dot to upper case, well, it auto completed for me. So let's get rid of that.

[01:22] Right here, we're going to have a possibly undefined error, and that is because Alice is typed as a user profile, which has an optional bio. And we if we were to switch over to Bob, we'd get the same problem because Bob also is a user profile and maybe does, maybe doesn't have a bio. Now, this is actually one of the reasons why I prefer to not have, this explicitly typed because you'll see that now TypeScript knows, oh, Bob has a bio. I can see Bob has a bio right there. That's like the way that Bob is structured.

[01:53] So it is properly inferring the types for both of these. But if we wanted to explicitly type these as user profiles, maybe these objects came as a function, parameter and so we don't really get to choose whether they have the bio or not. How would we access this in a safe way? And the way that you do that is with what is called the Elvis operator and I'm pretty sure that comes from his hair and the way that the question mark looks right there. You know how Elvis has curly hair.

[02:20] I don't know. Yeah. The Elvis operator. But, yeah. So what this, allow us it's the nullish coalescing operator.

[02:29] What this allows us or sorry. The optional chaining operator. Nullish coalescing is something else. We'll learn about that later. But, optional chaining operator is, effectively a way to say, hey.

[02:42] If bob. Bio exists, then call the to upper case on it. And if not, then what? Well, let's see. We've got software developer and typescript enthusiast, all two upper case.

[02:52] If we switch to Alice, then we're gonna get undefined. So that's basically what this is doing is it's saying, if this exists, then do that, and that's the value of my expression. If it doesn't then undefined. That's what's going on here. Don't don't call it.

[03:08] Don't whatever. And you can even do this with, functions like if a function exists or doesn't exist. So if it doesn't exist, then just undefined. If it does, then call it. I know that kinda looks funny, but that's that's what it looks like.

[03:22] It does look like a property access, just with the Elvis operator, the optional chaining. So very useful feature, right here. So we can use optional check, chaining or we can do a check if the user here. Actually, let's do, oh, you know what? I I skipped over the create a function part.

[03:41] Hold on. Let's make a function. That will make some of this a little bit more, useful here too, where the user, we accept a user profile, and then we get the name, the user, and the bio. Now here's something interesting. Here's the nullish coalescing thing I was talking about, which shows up right here in our version of the function.

[04:00] So do do do do do do. There we go. Excuse me. And, yeah, our AI agent wants to take the name and email and bio because that's all that we're using, which we can do it that way too. But in any case, we we know that the name is there.

[04:16] We know that the email is there and that's all good. Now, we just need to concern ourselves with, do we have a bio? And we can either do the knowledge coalescing or we could do this, user dot bio dot to upper case, and be fine and be fine with this no, optional chaining operator. Or, we could say if the user has a bio, then we can log their bio. And TypeScript is smart enough to know that if we made it into this if statement, then the user bio is definitely a string and, we can two uppercase it.

[04:50] And so we don't need to do the optional chaining or the nullish coalescing because by this point we know that it's a string. Now the tricky thing here is if you remember from our lessons about null truthy and falsy, you'll remember that a user with a bio that is empty, in this case is not going to get this logged. Even though they actually do have a bio, because the bio is an empty string, it's treated as falsy and so we won't end up in here. And so, yeah, a couple ways to solve for this. We could say if it's not undefined, or, we could say if it has a length that's greater than zero, so, it's a string with more than one character, then it will fall into here and we end up with the right thing.

[05:33] So here, let's do display user info for Alice and Bob. And here now, we're gonna see Alice email and then Bob and Bob's email and Bob's bio. Whereas, if we just went, with this or actually, here, let's go up, with, not equal to undefined. There we go. Then we're gonna get bio as an empty string for Alice, which, may be what you want, maybe is not.

[06:03] It's just good to understand how to do this. Okay. Great. So that is that. We we could also Earlier, we had this as user profile, so we could do it that way.

[06:15] Here's the other interesting thing about this, and this kinda goes back to what I was saying about this earlier where I don't typically do this. You can actually remove this now. And if you do have a mistake, we could do do whatever, then this actually is gonna pass because, Alice may not be a proper user profile. Like, if we were to throw a user profile back on here, Alice is gonna be like, woah, woah, woah, woah. But, Alice satisfies the properties that are required by a user profile when passing it to a function.

[06:47] So it may have more properties than it needs to, but that's fine. The function's gonna operate okay. So this is one of the reason why I kinda like not having to type it explicitly is because then I can have extra properties if I want. But, yeah. The other thing is, if it, if Alice doesn't have all the properties that I need or it has different properties, then I am still going to get a type error.

[07:09] And so I kinda get the benefits of both. I don't have to explicitly type it and I still get warnings when there's a problem and I can add extra properties if I don't want to. So I recommend that you play around with this a lot and just see what that experience is like. And the more and more you play with this, the more familiar you become. And I think that's a good thing.

[07:27] So that is all. Let's Just as a quick review, the the primary thing that we were focused on in this exercise step was about accessing like optional properties. So here's how you type that. That property may or may not be defined. So you don't have to define it here.

[07:46] And then to access it, you want to either check whether that property exists before you do anything with it or, you can do the, optional chaining. And then we also saw a little preview of the knowledge coalescing thing. But, yeah, optional chaining is good enough for here. K. Good job on that one.

[00:00] Alright. So sometimes you might have a type or an object that, has some versions of that have properties that are optional. So some might have it, some might not. So in our example of our user profiles, Alice has a name and an email, but not a bio and a website. So how do you type this and how do you, access those properties if they may or may not be there?

[00:23] That's what this exercise is all about and I think you're gonna enjoy it. So let's get right to it.

Real-world applications don't run on isolated strings and numbers. They run on users with profiles, shopping carts full of products, and lists of data that need to be searched, filtered, and transformed.

Without a solid grasp of how to structure and manipulate data, you'll constantly fight your own code. You'll write brittle programs that fall apart the moment requirements change. You'll loop through arrays manually when a single method call would do the job. And you'll create bugs that stem from not understanding how objects reference memory.

The Structured Data Workshop picks up right where Programming Foundations left off. You'll learn how to organize data using objects, arrays, and purpose-built data structures like Maps and Sets-- then master the patterns for manipulating that data efficiently.

This workshop is hands-on from the start. Every section builds on the last, taking you from creating your first object literal through chaining `map`, `filter`, and `reduce` to transform complex datasets in a single expression.

## Objects

Objects are the most fundamental data structure in JavaScript. You've been using one every time you type `console.log`-- console is an object and log is a property on it. But creating and working with your own objects is where things get interesting.

In this section, you'll build a user management system while learning how objects work from the ground up:

- Creating object literals with properties and values
- Accessing properties with dot notation and bracket notation
- Defining reusable object types in TypeScript
- Working with optional properties and the optional chaining operator
- Using dynamic keys with computed property names

## Arrays

If objects are baskets of named things, arrays are baskets of numbered things. They're everywhere in JavaScript-- lists of users, collections of products, sets of search results. Knowing how to create, access, and iterate over them is essential.

This section takes you from basic array creation through typed arrays of objects and multiple approaches to iteration:

- Creating arrays and accessing items by index
- Adding items with `push` and reading length
- Typing arrays with TypeScript generics (`Array<Product>`)
- Building arrays of objects and accessing nested properties
- Iterating with `for...of` loops and traditional `for` loops
- Filtering items into new arrays based on conditions

## Spread & Rest

Before spread and rest syntax existed, combining arrays and objects was tedious and error-prone. You'd have to manually index into arrays or copy properties one by one. Three little dots changed everything.

This is one of the most practical features in modern JavaScript. You'll use it constantly for merging configurations, copying objects, and writing flexible functions:

- Spreading object properties to create copies with overrides
- Understanding property order and which values win in conflicts
- Shallow copying vs. deep copying and the pitfalls of nested objects
- Accepting any number of arguments with rest parameters
- Spreading arrays into function arguments and new arrays
- Combining rest and spread for flexible utility functions

## Destructuring

Pulling values out of objects and arrays one property at a time gets old fast. Destructuring lets you extract multiple values in a single statement-- and it's especially powerful in function parameter lists where you can pluck off exactly the options you need.

Here you'll practice the patterns you'll use daily in real TypeScript codebases:

- Extracting multiple properties from objects in a single declaration
- Renaming properties with aliases during destructuring
- Setting default values for missing or undefined properties
- Destructuring directly in function parameter lists
- Array destructuring with positional variable assignment
- Using rest syntax (`...rest`) to collect remaining properties

## Array Methods: Map

Transforming data is one of the most common tasks in any application. The `map` method lets you take an array and produce a new array where every item has been transformed-- without mutating the original.

This section teaches you the most-used array method in JavaScript and the patterns that make it powerful:

- Mapping an array of objects to an array of specific properties
- Transforming values during iteration (formatting prices, extracting labels)
- Creating new objects from existing data with `map`
- Implicit returns with arrow functions and the parenthesized object expression trick
- When to use `map` vs. a `for` loop

## Array Methods: Filter & Reduce

Filtering narrows an array down to just the items you care about. Reducing collapses an entire array into a single value-- a total, a grouped object, or anything else. Together with `map`, they form the core toolkit for data transformation.

This section covers the remaining two powerhouse array methods and how to chain them together:

- Filtering arrays by property values, price ranges, and boolean flags
- Chaining `filter` and `map` for concise data pipelines
- Understanding `reduce` with the accumulator pattern
- Reducing arrays into totals, objects, and grouped categories
- When to reach for `reduce` vs. a `for...of` loop
- Passing `Boolean` to `filter` to strip falsy values

## Maps & Sets

Plain objects and arrays cover most situations, but JavaScript provides two purpose-built data structures for when you need fast lookups or guaranteed uniqueness. Maps let you use anything as a key-- not just strings. Sets automatically deduplicate your data.

In this section, you'll learn when and why to reach for these specialized structures:

- Creating a Map from an array of key-value pairs
- Looking up, checking, and deleting entries in a Map
- Using objects as Map keys for metadata storage
- Removing duplicates from an array with a Set
- Converting between Sets and arrays with `Array.from` and spread
- Understanding referential equality and why identical-looking objects aren't deduplicated

Programming Foundations

Structured Data

Type Safety

Object Oriented TypeScript

Advanced TypeScript

Practical TypeScript: Foundations to Fluency

Master structured data in TypeScript and JavaScript with hands-on exercises on objects, arrays, and powerful methods to enhance your coding skills.

Intro to Structured Data

Introduction to Structured Data

Master JavaScript objects by organizing data effectively, accessing properties, and leveraging optional properties for cleaner code in this engaging exercise.

Intro to Objects

Master object literals by creating user objects in a hands-on exercise, enhancing your web development skills and understanding of JavaScript syntax.

Object Literals

Master property access in JavaScript objects to enhance your coding skills and manipulate data efficiently. Dive into practical exercises now!

Property Access

Master object types by creating a type definition that enhances your coding skills. Dive in and elevate your development expertise today!

Object Types

Master dynamic keys in JavaScript by creating an error pages object with bracket syntax, overcoming syntactical limitations and enhancing your coding skills.

Dynamic Keys

Master object manipulation in programming and enhance your skills. Break down concepts and solidify your knowledge with engaging exercises and community support

Break Objects

1. Objects

Master arrays in TypeScript! Discover their structure, syntax, and how to ensure type safety while managing data efficiently in your projects.

Intro to Arrays

Master array fundamentals by building an inventory system. Interact with essential data structures and enhance your coding skills today!

Array Basics

Master array types in JavaScript by exploring objects within arrays. Enhance your coding skills and build dynamic applications with this engaging exercise.

Array Types

Master array iteration with hands-on exercises using loops. Enhance your coding skills by exploring array manipulation and discover new possibilities.

Iteration

Master array manipulation in JavaScript and TypeScript to enhance your coding skills, complete fun exercises, and boost your programming confidence.

Break Arrays

2. Arrays

Master JavaScript's rest and spread operators to effortlessly combine arrays and manage object properties, enhancing your coding efficiency and elegance.

Intro to Spread and Rest

Master object spread to seamlessly combine properties in JavaScript, enhance your coding skills, and boost your development efficiency today!

Object Spread

Master rest parameters to create flexible functions that accept any number of arguments, simplifying your JavaScript code and enhancing functionality.

Rest Parameters

Master the art of retention with Break Spread and Rest. Enhance your learning, boost memory, and prepare for your next development challenge!

Break Spread and Rest

3. Spread and Rest

Master JavaScript destructuring to simplify variable assignments, enhance function parameters, and streamline your coding workflow—boost your efficiency today!

Intro to Destructuring

Master object destructuring to simplify your JavaScript code. Transform property access into concise variable assignments with ease and efficiency.

Object Destructuring

Master array destructuring syntax, uncover its differences from object destructuring, and enhance your JavaScript skills with this engaging exercise.

Array Destructuring

Enhance your skills with effective retention strategies and discover how to apply your knowledge to real projects for greater success in web development.

Outro

4. Destructuring

Master essential array methods like map, filter, and reduce to transform data efficiently and unlock powerful JavaScript programming techniques.

Intro to Array Methods

Transform your arrays efficiently with the powerful map method. Discover how to reshape data and enhance your JavaScript skills today!

Master array filtering to streamline data manipulation. Enhance your coding skills by learning to efficiently extract and refine information with ease.

Filter

Master the reduce method by comparing it with for loops and map/filter techniques, enhancing your JavaScript skills and coding efficiency.

Reduce

Master array methods in JavaScript and TypeScript to enhance your coding skills. Gain confidence with practical exercises and engaging insights.

Break Array Methods

5. Array Methods

Master object methods in JavaScript to efficiently manipulate data. Discover keys, values, and entries to transform objects into arrays for powerful coding solu

Intro to .object-methods

Master object keys and values methods to enhance your JavaScript skills, streamline your code, and improve object manipulation efficiency.

Keys Values

Master object entries and from entries in JavaScript to transform arrays effectively. Enhance your coding skills and debug with confidence!

Entries From Entries

Master object methods in JavaScript and enhance your coding skills. Engage with interactive quizzes and retain key concepts effectively.

Break Object Methods

6. Object Methods

Master maps and sets in JavaScript to enhance data efficiency and eliminate duplicates. Unlock powerful data structures for smarter coding!

Intro to Maps and Sets

Master JavaScript maps by efficiently creating data structures to quickly access user information. Boost your coding skills and enhance your development toolkit

Maps

Explore the power of sets in programming, a unique data structure that enhances array management and optimizes data retrieval for faster performance.

Sets

Master the use of maps and sets in web development, enhancing your coding skills and optimizing data handling for your projects.

Break Maps and Sets

7. Maps and Sets

Wrap up your structured data journey with key takeaways, solidify your knowledge, and prepare to build amazing projects. Keep coding and exploring!

Structured Data

Structured Data

Transcript

Optional Properties

Transcript