JavaScript Best Practices and Coding Conventions - Write Clean Code

[@huzaifahashmiofficial9851]

3:18 we can do, so called, array destructurong to get the value in nested array. The code for that will be, let exampleArray = [[["value"]]]; let [[[a]]] = exampleArray; console.log(a); The above code will store the value inside 'a' variable which can then be used anywhere inside our program

[@comicdev]

If it doesn't matter how the values are set, you can just call .flat() on it, which will just convert e.g [ [ 'a', 'b' ], 'c' ] to ['a', 'b', 'c']

[@sathvikmalgikar2842]

@@comicdev thanks

[@sathvikmalgikar2842]

thanks

[@ngtyt]

4:29 one liner solution : exampleArray.flat(Infinity)[0]; //return "value";

[@ahmetozdemir2207]

Good point but that's not the point there.

[@tony4540]

you could also try exampleArray[0][0][0]; //returns "value"

[@Omar_Al_Seddik]

@@tony4540 That assumes that the array is 3D though. It's not as modular.

[@fawazsullia5620]

A looot of senior devs suggest having comments because there's only so much self explaining a code base can be. Idk why people are against comments, they make other's life simple

[@laurelineparis5407]

Thanks so much for thoses conventions asserting my daily use choice. I have no senior JS around so it's great to double check and see others are confirming one's approach.

[@javascriptmastery]

Happy to help!

[@QvsTheWorld]

I think it's more appropriate to say that i in for loops stands for 'iterator' as oppose to 'index' since for loops can be used on things other than arrays.

[@felixbruggemann7458]

1:43 "Do you have any idea what this means" Me *who has a trauma working with Dates*: "Hell i know this man as if it was my brother!'

[@TheMrAlkotras]

Guys, be carefully! On 3:59 screamer. I became blind XD

[@TodorescuProgramming]

also for the MakeCar example, it's ok to use CarMaker or CarFactory, which produces a new Car object in a certain way

[@salvatoregurzi7094]

10:48 Which shortcut do you use to do those modifications with just in one click?

[@Roshen_Nair]

Saved for future reference! Thanks for making these awesome videos, keep it up . 👏🏽👏🏽👏🏽

[@javascriptmastery]

Appreciate it, thanks!

[@aacismaharjan]

One JS tip a day, keeps bug away

[@ChristianHowell]

This is sorely needed for most devs.. Don't use str_ or m_ or _var.. Use highestValueCalculator or addInputs...

[@AdityaVerma-fv5ne]

You are not a teacher , you are a master ! (master means expert in english and Teacher in hindi and you are both)

[@javascriptmastery]

Thanks!

[@jggabayno]

its useful to follow the ff convention to avoid headache in the future. thank you for the ff example to clarify all possible scenario.

[@KrishnaKumar-jr7qq]

That recursion function to retrieve the element was Awesome Man..

[@yanaokkulata4265]

Well… but what if my array has more than one element 😂

[@christianpaul5224]

In 3:18 It is called Destructuring .

[@amrsalah3159]

Well explanation, Thanks

[@gsolano0625]

You have an error on the class definition when adding the equal `=` character

[@theegreatestever2420]

This is some great content man wow! I am sad I didnt know about you earlier but I am super happy that I am here now and I can learn all these. I wanted to ask though : which vs code extension are you using for replacing words by clicking?

[@javascriptmastery]

It's built in

[@zero11010]

Destructuring is really important. But, it’s not really an issue of code duplication. It’s certainly code consolidation. It’s reducing the lines a thing appears on. But, you’re still doing the exact same thing. In memory or time it’s the same. If you’ve taken a block of code and duplicated it you’ve bloated your code to some extent. At a certain point with destructing each individual thing you destructure will be on a separate line. At a certain point it’s basically taking up the same number of lines (imagine destructuring 20 variables). In that case destructuring is still best practice but in general it’s just a style thing. Failing to adhere to DRY principles with duplicated code can readily cause bugs if needs change and some parts get updated and others do not.

[@waleed28ful1]

Amazing tutorial

[@pusarlaaishwarya5035]

any documentation for finding these tricks so i can download

[@MohammadBarghamadii]

Thank you 🎉🎉

[@sample1801]

Thank you very much for this video

[@hamzaashraf9529]

Please make a video on MERN Project With Login, Logout, JWT, Mongo, with Add Post like post delete post comments etc.

[@salemabdulsamad7808]

Thanks for your amazing efforts and it really helped me alot

[@MrMiguelapb35]

Good job man, thanks a lot

[@Irzani938]

The retrivefinalvalue is a recursion?

[@javascriptmastery]

Exactly!

[@omojjegomosc8211]

what keyboard do you use? nice sound

[@javascriptmastery]

Vortex Gear Tab 75

[@wayandanyaeleco4969]

Great video subbed

[@tanvirshafi9212]

thanks for teaching us

[@dangelodeniro7951]

What theme is this?

[@PabloMartinezfr]

Congrats for good tutorial.

[@javascriptmastery]

Thanks!

[@matrenitski]

8:40 😱 What a sorcery is this? How do you do that?

[@jedrzejkuszewski79]

ALT + left click in the place of the next cursor

[@matrenitski]

@@jedrzejkuszewski79 Thanks mate! Awesome!

[@loljackpot]

This is awesome!

[@shirishdhotre9673]

Very well explained with to the point! If video screen have been split with console could have much better for result as well... also as mention by @Tudor instead of get prefix fetch will add better definition to variable.. Nice and Thanks a ton! Saved for future reference...

[@zoltan_meszaros]

Very useful video! May I ask you what VS Code addon do you use for the colored indents?

[@javascriptmastery]

Bracket pair colorizer.

[@zahidsaeed1994]

Thank U for this

[@mattshu]

Why does my JavaScript have different syntax highlighting in vscode

[@ichjeferson444]

Great content. This video will be useful to anyone who wants to be a professional programer..

[@javascriptmastery]

Thanks, appreciate it!

[@VenkiNagaraj]

Thanks

[@praveenreddyadelli8094]

Good job!

[@javascriptmastery]

Thanks!

[@someonerandom704]

Nah bro my comments are beautiful, I go full stream of consciousness on it, and then I write a fuckin book about each method in my javadoc

[@aarshingpt15]

How do you type so fast, or you record it at higher speed?

[@javascriptmastery]

It's just practice :)

[@asdzxcz1360]

Yeah, but what about nesting functions. What if we have functions that are part of something bigger and are only related to that bigger function ? Isn't better to keep those functions private for encapsulation purposes instead of polluting global scope and keeping them flat outiside ?? Like in this example function "addMultiplySubstract", would consist 3 functions tied to it, why drag them outside to global scope ?? We could have a project with like 5 main functions that consist more functions lexically scoped inside, but with flat outside approach we would have like 20 functions on the same level with potential of names colliding, harder to get what helper function is related to which main function. Isn't better to keep related functions closed in bigger functions ??

[@bigvlogger2940]

Best practices sir

[@onepiecefan3176]

Nice video

[@javascriptmastery]

Thank you!

[@STEFAN9484]

what you use , Atom ?

[@javascriptmastery]

VSC

[@anuragsandhu9590]

nice, please keep doing............

[@TodorescuProgramming]

I don't agree using "get.." for all of the functions.... example of get/set should be used on a datastructure, however if we get data from the db or API, we should use fetchUsers, instead of getUsers, that way we know what's happening .... also the object that's calling the method should explain the context... example database.getUsers() isn't as clear as database.fetchUsers() , however if it's userList.getUsers() we understand it's coming from a datastructure, and we shouldn't use fetch

[@MichaelSalo]

Interesting point here. Different verbs imply different situations. ‘Fetch’ makes me think of a network call. ‘Select’ makes me think of a database. ‘Get’ could mean a data structure... though it’s also a REST verb.

[@Mico605]

A lot of useful stuff, but for "no comments" rule i think this is largely inapplicable in real world, especially if you work on a large project with a lot of other people. Also some companies have rules that require you to document your code so others know what you actually did without having to "read the code".

[@ahndeux]

I disagree with the issue with adding comments. Comments allow you to come back to your code years later and be able to get to the core of the code. Sure, you can spend 5 more minutes to look through the code to figure it out, but why bother when a simple comment on what that value or section makes it easier to find. I also write some comments on the input to functions if it uses enumeration. Your use of the recursive function sounds great, but if there was a problem with troubleshooting, you will need to spend a few minutes to even figure out what that code does or why you need it. You don't have to go crazy and comment everything, but a few comments could mean the difference between having to go through and figure out the code vs get to the problem areas right away. The main benefit is when you have to trouble shoot a problem.

[@superLuigi675]

no comments?! your coworkers must hate you lmao

[@aymenelhani5898]

Thanks for the video but, your examples are very simple and it's hard to do that in "real life" in a big project with a very complex code.

[@javascriptmastery]

You can do it in complex projects as well.

[@Omar_Al_Seddik]

Uh... What? You can (and should) follow these practices in all of your projects. Good practices are especially important for complex code. Watch the video, you will learn why.

[@abrarchowdhury5687]

best!

[@mikoutv1707]

Your solution and explanation of "avoid deep nesting" is very off. The problem lies with an architecture requiring 3-dimensional matrices which are, especially when created manually, very unreadable. The solution is to avoid these situations and use encapsulation and seperation to create an environment where deep nesting is unnecessary. Creating functions to facilitate your deep nesting issue is just prolonging the issue.

[@asifpatel3907]

❤❤❤❤❤

[@13n1304]

Comments are okay if they provide further value to understand and read code but should not be used to "fix" hard to understand code. Do write comments to explain decisions. Especially when fixing bugs it can be worthwhile to explain misconceptions somebody made in the past assuming the root cause of the misconception can't easily be fixed. edit when I'm saying "assuming the root cause of the misconception can't easily be fixed" this means you need to look at what caused the misconception. Is it hard to read/understand code? Then fix the code. Is it because it's logically unintuitive or requires special knowledge? Then it can be ok to write an explanation.

[@zero11010]

The bit about nested arrays seems problematic for other reasons. I don’t think this was an ideal example. With the example you provided the original code wouldn’t work all the time. Forget about it being badly formatted. The original code you wrote took an array that always had one element. That element was always an array with one element. That element was always an array that had some elements. Each of those deeply nested items was interacted with. Using the standard technique to flatten an array is cool. But if your structure was [ 1, [ [ “example”] ] ] The element 1 would cause problems. This is what you started with. So, the initial code just didn’t work. And ALSO was formatted poorly. There certainly are times where you work with deeply nested data. In this case you either account for less nested data with a flatten, as you’ve done (which again means your original code wasn’t a great example), or you pass in arr[0][0] to pass in the specific array you’re looking for (and a variable to make that clear wouldn’t be a bad idea). Your use case entirely changes based on these criteria.

[@ignacioswboada660]

These are just best practices in general, it has nothing to do with javascript in particular...

[@Omar_Al_Seddik]

Well... That's mostly true. He's using some ES6 features that have their own usage conventions which aren't available in older languages like C.

[@enemy-of-fanatics]

😮.😊

[@CastleShield]

❄️

[@javascriptmastery]

❄

[@JD-yz8cn]

Saying not to use comments is a bad idea in my opinion... Especially in the case of esdoc

[@javascriptmastery]

It's a personal preference :)

[@alessandrob.g.4524]

The examples are really bad

[@klasterdev154]

Recursive call instead of nested cycle? Recursive call is worse than hell, do not do it. You could separate nested cycles in different functions, but you made recursive function, that is very inobvious

[@klasterdev154]

Northern Wealth Anarchy Perimeter sorry, I mean “when it is possible, use cycle instead of recursive call”, cause recursive call is very hard at debugging and testing (sory for my English)

[@cardbored_]

@@klasterdev154 how is it hard to debug? Use breakpoints.