JavaScript Best Practices and Coding Conventions

JavaScript Best Practices and Coding Conventions - Write Clean Code

Рет қаралды 81,059

Күн бұрын

❗ IMPORTANT:
Become a PRO at JavaScript: bit.ly/MasterJavaScript
Use the special promo code "JSM_YT_SQUAD" on checkout to save $50!
Free JavaScript Cheat Sheet: bit.ly/FreeJsCheatsheet
In this video we we look at some of the best practices and coding conventions for JavaScript. We're going to go through a number of rule that can help you write clean code. If you stick to the rules stated in this video and write clean JavaScript code, people will perceive your work differently.
Coding conventions secure quality, improve code readability and make code maintenance easier. They can be documented rules for teams to follow, or just be your individual coding practice.
Following coding conventions can help make your code more consistent, predictable and readable.
Writing clean code is a benefit both to you and your co-workers. Why? Can you remember a time when you carried out a code review and had to question what was happening in a specific function. If you have, then it means the code probably could’ve been cleaner. It’s something we should aspire to do.
If you found this video educational, a subscribe would mean a lot, a lot of interesting tutorials are coming - bit.ly/2ArnMyb.
GitHub Video - • Git Commands Tutorial ...
⭐ Kite is a free AI-powered coding assistant for Javascript that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it! www.kite.com/get-kite/?...

Пікірлер: 95

@huzaifahashmiofficial9851 2 жыл бұрын

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 2 жыл бұрын

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 11 ай бұрын

@@comicdev thanks

@sathvikmalgikar2842 11 ай бұрын

thanks

@ngtyt 4 жыл бұрын

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

@ahmetozdemir2207 3 жыл бұрын

Good point but that's not the point there.

@tony4540 3 жыл бұрын

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

@Seeking_Solace 3 жыл бұрын

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

@jggabayno 3 жыл бұрын

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

@fawazsullia5620 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

Happy to help!

@Roshen_Nair 4 жыл бұрын

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

@javascriptmastery 4 жыл бұрын

Appreciate it, thanks!

@salemabdulsamad7808 3 жыл бұрын

Thanks for your amazing efforts and it really helped me alot

@MrMiguelapb35 4 жыл бұрын

Good job man, thanks a lot

@TodorescuProgramming 4 жыл бұрын

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

@waleed28ful1 Жыл бұрын

Amazing tutorial

@tanvirshafi9212 4 жыл бұрын

thanks for teaching us

@zahidsaeed1994 4 жыл бұрын

Thank U for this

@sample1801 2 жыл бұрын

Thank you very much for this video

@wayandanyaeleco4969 3 жыл бұрын

Great video subbed

@MohammadBarghamadii 11 ай бұрын

Thank you 🎉🎉

@amrsalah3159 7 ай бұрын

Well explanation, Thanks

@golgothaaksanti4935 3 жыл бұрын

This is awesome!

@shirishdhotre9673 3 жыл бұрын

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...

@theegreatestever2420 3 жыл бұрын

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 3 жыл бұрын

It's built in

@bigvlogger2940 3 жыл бұрын

Best practices sir

@VenkiNagaraj Жыл бұрын

Thanks

@TheMrAlkotras 4 жыл бұрын

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

@praveenreddyadelli8094 4 жыл бұрын

Good job!

@javascriptmastery 4 жыл бұрын

Thanks!

@PabloMartinezfr 3 жыл бұрын

Congrats for good tutorial.

@javascriptmastery 3 жыл бұрын

Thanks!

@anuragsandhu9590 4 жыл бұрын

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

@ChristianHowell 3 жыл бұрын

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

@salvatoregurzi7094 3 жыл бұрын

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

@zero11010 7 ай бұрын

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.

@aacismaharjan 3 жыл бұрын

One JS tip a day, keeps bug away

@hamzaashraf9529 4 жыл бұрын

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

@AdityaVerma-fv5ne 3 жыл бұрын

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

@javascriptmastery 3 жыл бұрын

Thanks!

@abrarchowdhury5687 3 жыл бұрын

best!

@KrishnaKumar-jr7qq 2 жыл бұрын

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

@yanaokkulata4265 Жыл бұрын

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

@ichjeferson444 4 жыл бұрын

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

@javascriptmastery 4 жыл бұрын

Thanks, appreciate it!

@christianpaul5224 3 жыл бұрын

In 3:18 It is called Destructuring .

@onepiecefan3176 3 жыл бұрын

Nice video

@javascriptmastery 3 жыл бұрын

Thank you!

@felixbruggemann7458 2 жыл бұрын

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!'

@meszaroszoltan1773 4 жыл бұрын

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

@javascriptmastery 4 жыл бұрын

Bracket pair colorizer.

@omojjegomosc8211 4 жыл бұрын

what keyboard do you use? nice sound

@javascriptmastery 4 жыл бұрын

Vortex Gear Tab 75

@pusarlaaishwarya5035 2 жыл бұрын

any documentation for finding these tricks so i can download

@gsolano0625 Жыл бұрын

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

@asdzxcz1360 4 жыл бұрын

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 ??

@Irzani938 4 жыл бұрын

The retrivefinalvalue is a recursion?

@javascriptmastery 4 жыл бұрын

Exactly!

@mattshu 3 жыл бұрын

Why does my JavaScript have different syntax highlighting in vscode

@aarshingpt15 4 жыл бұрын

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

@javascriptmastery 4 жыл бұрын

It's just practice :)

@matrenitski 3 жыл бұрын

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

@jedrzejkuszewski79 3 жыл бұрын

ALT + left click in the place of the next cursor

@matrenitski 3 жыл бұрын

@@jedrzejkuszewski79 Thanks mate! Awesome!

@dangelodeniro7951 6 ай бұрын

What theme is this?

@asifpatel3907 Жыл бұрын

❤❤❤❤❤

@someonerandom704 2 жыл бұрын

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

@STEFAN9484 4 жыл бұрын

what you use , Atom ?

@javascriptmastery 4 жыл бұрын

VSC

@aymenelhani5898 4 жыл бұрын

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 4 жыл бұрын

You can do it in complex projects as well.

@Seeking_Solace 3 жыл бұрын

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.

@TodorescuProgramming 4 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

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 5 ай бұрын

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

@zero11010 7 ай бұрын

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.

@CastleShield 4 жыл бұрын

❄️

@javascriptmastery 4 жыл бұрын

❄

@13n1304 2 жыл бұрын

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.

@mikoutv1707 4 жыл бұрын

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.

@ignacioswboada660 3 жыл бұрын

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

@Seeking_Solace 3 жыл бұрын

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.

@JD-yz8cn 4 жыл бұрын

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

@javascriptmastery 4 жыл бұрын

It's a personal preference :)

@alessandrob.g.4524 3 жыл бұрын

The examples are really bad

@klasterdev154 3 жыл бұрын

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 3 жыл бұрын

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_ 3 жыл бұрын

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