JavaScript Optional Chaining in 5 Minutes (No more "cannot read property of undefined"!)

No video

JavaScript Optional Chaining in 5 Minutes (No more "cannot read property of undefined"!)

Рет қаралды 34,075

Күн бұрын

Save yourself some JavaScript code by using Optional Chaining. Optional Chaining can help you help work with data that might be inside of nested objects. You longer have to check that each object "along the chain" exists. This means no more "cannot read property x of undefined"....YAY!
Sign up for JavaScript Challenges course updates - www.jamesqquic...
Optional Chaining Docs - developer.mozi...
Other Optional Chaining Use Cases - javascript.inf...
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquic...
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquic...
Learn everything you need to know about Visual Studio Code - www.udemy.com/...
Build a Quiz App - www.udemy.com/...

Пікірлер: 76

@Icemourne_ 3 жыл бұрын

You are life saver i looked for something like this so many times and never found it

@pexeixv 3 жыл бұрын

How? How do you still not have 100k subs? How? Just love the quality Javascript videos you put out!

@JamesQQuick 3 жыл бұрын

Haha almost there :)

@pizzapanni 3 жыл бұрын

he's only like 3k short.

@shashanksalunkhe416 3 жыл бұрын

I was wondering when you’ll be talking about this topic. Thanks for bringing this up 👏🏻

@JamesQQuick 3 жыл бұрын

Yay :)

@nitinravi8400 3 жыл бұрын

I knew about this. But did not know the other use cases. Thank you!

@2penry2 3 жыл бұрын

So glad that is part of the spec now! or at least can be complied now. Seemed so alien coming from laravel/php where you can just do isset(object->path->anotherpath). Onwards and upwards with the Developer experience!

@MislimiRamo 3 жыл бұрын

Another way to make the code even prettier (according to me) is to use Short Circuit Conditionals. E.g. in your sendWelcomeLettersIfConfirmed function, you could just write: student.address?.confirmed && console.log(...) As I said, I find this prettier (and cleaner), but it's all relative to your coding style and/or your team's style guidelines.

@JamesQQuick 3 жыл бұрын

Ya i actually meant to show that! Great callout :)

@alinagy 3 жыл бұрын

I have been using javascript for 4 years now, did not know about this.

@hananfadah 6 ай бұрын

Thank you so much!

@mdridoy-ef2pw 3 жыл бұрын

been using this for a long time.Makes life a lot easier

@WillJohnsonio 2 жыл бұрын

This was helpful!

@JamesQQuick 2 жыл бұрын

Thanks Will!

@chrisdietrich1533 2 жыл бұрын

Thank you for your content!

@gauravjawalkar2863 2 жыл бұрын

Hell!! it really helped bro❤

@JenuelDev 3 жыл бұрын

Thanks for this tip! very useful

@jmartinez4906 3 жыл бұрын

Hi James, I found your channel very recently and I think it's pretty useful. As a suggestion, I reckon a video about promises and async/await could be cool. Anyway, thank you for your content. Cheers.

@agustinoperafan 2 жыл бұрын

Love you!

@damo190 2 жыл бұрын

I saw a short-circuiting evaluation example in MDN. Can I say, optional chaining operator, a short-circuit operator?

@dev-am1303 3 жыл бұрын

Thank you

@nemnoton 3 жыл бұрын

Wow , very useful!

@zenitzo Жыл бұрын

Hey what vs code theme is this, i love it ! (btw slytherin >>)

@manojsatwase 2 жыл бұрын

What is different between? And ?? Mark

@hari5732 2 жыл бұрын

Optional chaining is breaking when i save .js file in vscode..how to fix it?

@BattleGn0me Жыл бұрын

Thanks!

@JamesQQuick Жыл бұрын

AYYYY THANK YOU!

@BattleGn0me Жыл бұрын

@@JamesQQuick I'm picking through a GLTF model hierarchy to build a kinetic WebGl interactive with THREE.js. I've been iterating through model parts, but when I reference the geometry in code, I kept getting the error. It's a Mesh vs. geometry thing. after struggling with this thing for a while (too long) when i came across thid vidwo which really helped me break the log jam, And make my spaghetti code more legible. Reliable object isolation and verification is critical. I'm just a simple, lowly commercial artist, Not a front end dev/Software Engineer!

@Knards 3 жыл бұрын

How do you populate an object? For instance with a form or other means. I have only seen objects hard coded. Populating arrays is easy, but Objects?

@MominBinShahid 3 жыл бұрын

Thanks for the amazing content as always Just wanted to ask about the awesome font?

@JamesQQuick 3 жыл бұрын

Cascadia code :)

@MominBinShahid 3 жыл бұрын

@@JamesQQuick Thanks a lot

@donmikkodanm.olmillo8154 3 жыл бұрын

Can you also please about Nullish coalescing operator (??) pleeease thank you :)

@sparklite1015 3 жыл бұрын

I am having problem in HTML . My Image is not showing in browser (Firefox) when html file is opened through live server extension (VS code).It throws a Security error that html file can't link to image. I want to use image as background. My html file is folder in D: drive. Path = D:/myhtml/index.html And my image is in F: drive Path = F:/mountain.png my img tag is `````` But when I open html file directly from file explorer image shows up. Please help to solve this problem.

@sparklite1015 3 жыл бұрын

Can anyone help to solve this problem

@JamesQQuick 3 жыл бұрын

When using live server it’s only serving assets from that directory. You’ll need to copy your image into the same directory as your html

@sparklite1015 3 жыл бұрын

@@JamesQQuick thanks for your help 👍🏻👍🏻🙂🙂

@kiarabrown2608 Жыл бұрын

What's the name of the extension

@sneddonisaac 2 жыл бұрын

What do you use to search/as your clip board ?

@cyberlord6406 2 жыл бұрын

Hello I'm new to your channel, I'm facing this error for days now Uncaught TypeError: Cannot read properties of null (reading 'classList')

@deedee_31 2 жыл бұрын

pllllls how do u get to that sceern pls

@tippysvids 3 жыл бұрын

Thats tight!

@user-td4vz6th4t 2 жыл бұрын

i have it on phone.. what can i do??

@tim_t 3 жыл бұрын

firstComment ? "FIRST" : "not first" My mentor loves both optional chaining and nullish coalescing. We're in the process of refactoring as much ternary as possible in our codebase LOL.

@codingnolife28 3 жыл бұрын

!first

@rwxuniq32 3 жыл бұрын

what a theme you use? Thx ;)

@jonathanwang1356 3 жыл бұрын

May I know what is the intelligence that you are using to show computed hint?

@JamesQQuick 3 жыл бұрын

Quokka extension ;)

@sarmadbaloch3485 3 жыл бұрын

Could anyone please let me know how he opened his clipboard history? Is this a VS code specific plugin/extension or what? Looks kinda neat!

@JamesQQuick 3 жыл бұрын

I’m using an app called Raycast on Mac. I’m looking at it like an alfred replacement with lots of features including clipboard history :)

@sarmadbaloch3485 3 жыл бұрын

Darn, I use linux. Btw thank you for such quick response. I just saw your first video today & subscribed within first 2 minutes. You are doing great work, more power to you!🤞☮️

@11xmi16 3 жыл бұрын

In windows u can activate clipboard history by using keys windows + V .

@ahmadbagul2843 3 жыл бұрын

Nice

@jaymishra1781 3 жыл бұрын

I guess you 75% view's is from India isn't it? love you JS video's.

@nyarehd 3 жыл бұрын

Do you use hashnode?

@JamesQQuick 3 жыл бұрын

Yep :) it’s awesome!

@ducki8845 3 жыл бұрын

Can you make a vid about Proxy in JS?

@JamesQQuick 3 жыл бұрын

Can you clarify what you mean by Proxy?

@ducki8845 3 жыл бұрын

It's not necessarily in daily use, but sometime would be handful to know about it (e.g. kzfaq.info/get/bejne/bruhe6ajrMrcf4E.html from LiveOverflow)

@lekenn2920 3 жыл бұрын

OMG how is this avaible in Javascript

@markg5986 2 жыл бұрын

Suggestion from a novice developer: consider avoiding the use of "student" inside the "const students = [student]; array, because it can be confusing. Instead, maybe "firstStudent" or "student1"

@vvfly2009 3 жыл бұрын

student.address?.confirmed ?? false student.address?.streetName ?? '' also useful example of usage

@matthiaskolley1048 3 жыл бұрын

Apparently this does not work if `address ===null`. (Or am I wrong!?) Is there a similar solution for null-able values?

@matthiaskolley1048 3 жыл бұрын

@@agenticmark coming from java "null" makes more sense to me. Also: "null" is a definitive value where "undefined" is, well undefined :-D

@shardulbirje6379 2 жыл бұрын

for null values you should take a look at '??' (nullish coalescing operator) Also i guess you don't need to check address===null, you can simply say if(address) as null is a falsy value

@aleenshrestha8119 3 жыл бұрын

Theme

@yofi2614 Жыл бұрын

Im a huge fan of your channle and I have learn a lot from all your tutorials, but, something here just makes no sense. let assume the student DOESNT has an address, student.address will give you FALSE !student.address" will give you TRUE.. so when you write "if(!student.address?.confirmed)" Its exactly like asking someone if he own an house and after he replys with NO, you ask him what is the address. that means the student doesn have an address.. So why go and check the "confirmed"?