This is a great video because it shows JS idioms that develop in teams that have to read and maintain code. So it emphasizes succinct code but not at the expense of readability. Its a great insight into how JS is done in real dev environment. Great job!
I've watched countless JS tricks videos and this is by far, the most impressive one. I actually didn't know you could double bang. Life changer! also the a-z!!!!!! WHAT!! Please do more!
Tru! Still learning my way around JavaScript here and I found this pretty helpful. It helps that you kinda gave examples of where you would use the code. That's where I have the most trouble. Figuring out what to write to make certain things happen. Can't wait to see more of this kind of content. I'm sure it takes more time to create but this is pure gold! Thank you !
Using destructuring and the spread operator together blew my mind 🤯. It's very similar to an elixir pattern that I had never thought to replicate in js. Super cool!
I love it! Thank you. quick tip, filter and map automatically skip undefined elements, eliminating the need for manual falsy checks. myName.filter(val=>val).join(' ') will produce the same results.
Came here to say the same. It's a bit confusing because the rest operator obviously looks the same but it almost doing the opposite, it's combining multiple values into one variable instead of spreading/separating one value into many.
In my brain a - b and a - z means the same thing in sort :D and b - a and z - a, guess we all think different. I usually use spread operator and set, and ?? and ? a lot actually. ? is great when checking for objects exist or not, so you dont get an error. object?.name?..surename for example. destructering I use it alot also in vector cordinatex [x,y,z] . . Array.from I use alot to get my set back to an array after removing duplicates :) never thought about the {length} in array.from, that was nice to learn thanks.
Really great and useful video! But certain things really deserve some notes. First, the main reason that you really don't want to do deduplication that first way you showed at 3:47 is simply efficiency (you did not mention this). Running the indexOf function on the original array in literally every iteration is unnecessary expensive. This matters a lot for very large arrays. When doing such an action, you would really run that function on the shorter, deduplicated array that you are creating instead. Next. I find the a - z approach for sort actually also confusing, because it kind of hides what is actually going on, which is that the callback function is really only comparing just 2 values next to each other, but simply repeatedly in a loop. Therefore I would rather to choose names like prev, next instead. In general I also recommend not using single letter names for things in most cases, or any kind of abreviations. Not ind, but index (what does ind mean? index, individual or independend). And not rec, but record or receiver (used in another video). Etc. Last nitpick, when working 1 single argument in an arrow function, you can just leave the brackets around it away.
Tru maybe you can help understand this probably simple concept. In the first example, you have const = filterMyName = myName.filter(name)..... I have never understood where "name" gets declared or how JS knows what "name" is. Can anyone help me with this? Like, none of the things in the array or anywhere else are given the label "name", so how does this get initialized and passed in? Thank you, glad to see your channel growing!
It's a parameter for the callback function used in the filter method. A parameter is basically a temporary variable used only in the function, and can be called anything, not specifically "name". A callback is a function that gets "called" by the method it is used in, in this case, it is called for each item in the array, and it passes the item as the first argument, which is then accessed/assigned to the first parameter "name" (could be called anything). A method is a function available to a certain type of object. In this case, the Array object, so all arrays can use .filter
I have a question... What techniques does Discord use to ensure that new features are consistent across all of its platforms, and how does it balance the need for platform-specific code with the goal of maintaining a common codebase for many of its features?
Hey,. awesome tips! =) Do you know if the JavaScript Set keeps the original order of the items? The Set as a data structure, as far as I know, does not guarantee that it will output the original order.
es increible como la voz de una mujer te permite concentrarte mejor por la sutileza y suavidad que transmite. Sueno como un simp asqueroso, pero es real jajajajajaja
Can you use the new Set() trick for not only a flat array of strings but one of objects even nested objects, where you guarantee that one property like "key" is unique? Would that still require a custom filter function on the array still?
I think I answered my own question but the docs have an iterable property to the Set constructor which I think could be used in this case. Pretty neat trick though!
@@51Grimz I had the same problem a while back, but I copied someone else code that I found :-) function getUniqueListBy(arr, key) { return [...new Map(arr.map(item => [item[key], item])).values()] } so then you pass in the array with objects, as arr, and select which key you want to remove duplicates on.
@@mewtru for sure, frankly there are tonnes of resources but people tend to be stuck in tutorial hell and a lot of resource quality is not really up to par saying things like: "This is state, its used for changing things." Frankly we have more resources than ever, but learning is probably as challenging as it used to be, particularly for shipping products, not just getting a job.
Can you make videos about react typescript libraries, and how to create reusable generic ones with type safe. These videos are great but so basics stuff, your design related videos and architecture discussions are more useful and interesting, anyways Thank you :)
Please, please do not use the `Boolean` object. 1. It creates an entire object in memory for no reason. Now, instead of a simple value of ‘true’ or ‘false’, you have an object storing true & false properties-and the names of those properties, and other metadata such as it’s own data type (`Object`), pointers to its prototype (it inherits from the “Object” prototype), plus the actual primitive Boolean-type value that you wanted to begin with. 2. The way JavaScripts type coercion already handles boolean checks behaves badly with the Boolean object, because Objects themselves are “truthy.” E.g. `const dontDoThis = new Boolean(false); dontDoThis ? true : false //returns true`
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
based
cringe use of "based"
@@JustSomeAussie1 were you here when the title was '7 based javascript tips'
love your examples and quiet, relaxed way of talking
This is a great video because it shows JS idioms that develop in teams that have to read and maintain code. So it emphasizes succinct code but not at the expense of readability. Its a great insight into how JS is done in real dev environment. Great job!
Thank you for the kind words 🥹
I use un sort a and d
a for ascendent and d for descendent
I've watched countless JS tricks videos and this is by far, the most impressive one. I actually didn't know you could double bang. Life changer! also the a-z!!!!!! WHAT!! Please do more!
Haha thank you!!! Glad you liked it :)
Tru! Still learning my way around JavaScript here and I found this pretty helpful. It helps that you kinda gave examples of where you would use the code. That's where I have the most trouble. Figuring out what to write to make certain things happen. Can't wait to see more of this kind of content. I'm sure it takes more time to create but this is pure gold! Thank you !
Using destructuring and the spread operator together blew my mind 🤯. It's very similar to an elixir pattern that I had never thought to replicate in js. Super cool!
Loved the video, especially that sorting trick, I always get confused wether its ascending or descending 😂😂
I love it! Thank you. quick tip, filter and map automatically skip undefined elements, eliminating the need for manual falsy checks.
myName.filter(val=>val).join(' ') will produce the same results.
So useful , of course this makes things much clearer .Thank you! 🌺
This video was amazing.Thank you. Please keep coming more. Would love more content on Typescript.
Thank you! Will do :) recording a “how to learn TypeScript as a JavaScript dev” type video
@@mewtru waiting
Cool! Thanks for sharing!!!
Thanks..didn’t know most of these and u explained well
This is really useful. Thanks Tru!
You are just the best!! Thank you so much ❤😊
Amazing tips!
I get confused a lot with the sort order. Sort tip is a save
in the array destructuring example [...rest] its rest operator not spread operator
Came here to say the same.
It's a bit confusing because the rest operator obviously looks the same but it almost doing the opposite, it's combining multiple values into one variable instead of spreading/separating one value into many.
You make great content! Thanks
Really great content, well done!!
Please make a video explaining promises with TS , Love your content keep it up 💪!
i really love your coding tutorials and it's really helpful and funny way you are teaching, but what is the name of theme you are using?
some method is hella useful
SOMEwhat useful 👀
Thanks Tru. great video
sort method with a- z is pretty helpful fr
I have an original Killer Instinct 2 arcade cabinet in my living room! Unite!
Cool 😎
In my brain a - b and a - z means the same thing in sort :D and b - a and z - a, guess we all think different. I usually use spread operator and set, and ?? and ? a lot actually. ? is great when checking for objects exist or not, so you dont get an error. object?.name?..surename for example. destructering I use it alot also in vector cordinatex [x,y,z] . . Array.from I use alot to get my set back to an array after removing duplicates :) never thought about the {length} in array.from, that was nice to learn thanks.
Thanks for sharing these dear
this is great, thank you :)
What's the VSCode theme you are using?
Always a pleasure to see a video of you :)
Really great and useful video! But certain things really deserve some notes.
First, the main reason that you really don't want to do deduplication that first way you showed at 3:47 is simply efficiency (you did not mention this).
Running the indexOf function on the original array in literally every iteration is unnecessary expensive. This matters a lot for very large arrays.
When doing such an action, you would really run that function on the shorter, deduplicated array that you are creating instead.
Next. I find the a - z approach for sort actually also confusing, because it kind of hides what is actually going on, which is that the callback function is really only comparing just 2 values next to each other, but simply repeatedly in a loop.
Therefore I would rather to choose names like prev, next instead.
In general I also recommend not using single letter names for things in most cases, or any kind of abreviations.
Not ind, but index (what does ind mean? index, individual or independend). And not rec, but record or receiver (used in another video).
Etc.
Last nitpick, when working 1 single argument in an arrow function, you can just leave the brackets around it away.
Wow this is so awesome
1:47 speaking of cleaner, please don't put "return" in filter function
Tru maybe you can help understand this probably simple concept.
In the first example, you have const = filterMyName = myName.filter(name).....
I have never understood where "name" gets declared or how JS knows what "name" is. Can anyone help me with this? Like, none of the things in the array or anywhere else are given the label "name", so how does this get initialized and passed in?
Thank you, glad to see your channel growing!
It's a parameter for the callback function used in the filter method.
A parameter is basically a temporary variable used only in the function, and can be called anything, not specifically "name".
A callback is a function that gets "called" by the method it is used in, in this case, it is called for each item in the array, and it passes the item as the first argument, which is then accessed/assigned to the first parameter "name" (could be called anything).
A method is a function available to a certain type of object. In this case, the Array object, so all arrays can use .filter
Her: "Do you know that?"
Me: *Pulls my note cuz I'm ready to know*
Learned a lot. Especially when and when not to use ?? and ||. Tbh, I barely use ??.
I have a question...
What techniques does Discord use to ensure that new features are consistent across all of its platforms, and how does it balance the need for platform-specific code with the goal of maintaining a common codebase for many of its features?
Hey,. awesome tips! =) Do you know if the JavaScript Set keeps the original order of the items? The Set as a data structure, as far as I know, does not guarantee that it will output the original order.
Why you don't open your coding course that dedicated js, typescript and react. I think it would be good idea. And I liked this content.
bonkers🚀
How did you learn JS. You so detailed
what theme? Loved the video
I use Moonlight!
I am React Developer and want to learn advanced concepts that you use while coding. What course I can follow?
es increible como la voz de una mujer te permite concentrarte mejor por la sutileza y suavidad que transmite. Sueno como un simp asqueroso, pero es real jajajajajaja
This is cool!
BASED
i really love you video keep it up buddy ........!!!!!!
Can you use the new Set() trick for not only a flat array of strings but one of objects even nested objects, where you guarantee that one property like "key" is unique? Would that still require a custom filter function on the array still?
I think I answered my own question but the docs have an iterable property to the Set constructor which I think could be used in this case. Pretty neat trick though!
To follow up again. Upon adding a new item to the set, I wonder how it could guarantee it's uniqueness via that same object property.
@@51Grimz I had the same problem a while back, but I copied someone else code that I found :-) function getUniqueListBy(arr, key) {
return [...new Map(arr.map(item => [item[key], item])).values()]
} so then you pass in the array with objects, as arr, and select which key you want to remove duplicates on.
Loved it
You mentioned on Twitter that you were thinking of doing a video on how to start in webdev if you would do it today. Is it still coming? :)
Yeah it’s been hard actually figuring out how I’d learn haha 😅 took me multiple years and a lot of resources most people don’t just have on hand
@@mewtru for sure, frankly there are tonnes of resources but people tend to be stuck in tutorial hell and a lot of resource quality is not really up to par saying things like: "This is state, its used for changing things."
Frankly we have more resources than ever, but learning is probably as challenging as it used to be, particularly for shipping products, not just getting a job.
Can you share your VSCode theme name?
based
Can you make videos about react typescript libraries, and how to create reusable generic ones with type safe. These videos are great but so basics stuff, your design related videos and architecture discussions are more useful and interesting, anyways Thank you :)
Yeah for sure! Got a little busy this last week so I had to do something quicker haha, but thanks for the idea!!
@@mewtru Thanks to you, for sharing your knowledge. Take your time, really appreciate your hard work.
nice vieo, thank you for the tips!
Which font you're using?
MonoLisa!
@@mewtru cool
=> { return !!name } sign you are psychopath 😂
👏👏👏
Nice 🤩
What font do you use?
so niceeee
👍🏿
i just got bAsEd
Finally, someone who speaks proper English and can provide meaningful context.
🤍🤍🤍
did you mean to say biased?
Nah haha
Please, please do not use the `Boolean` object.
1. It creates an entire object in memory for no reason. Now, instead of a simple value of ‘true’ or ‘false’, you have an object storing true & false properties-and the names of those properties, and other metadata such as it’s own data type (`Object`), pointers to its prototype (it inherits from the “Object” prototype), plus the actual primitive Boolean-type value that you wanted to begin with.
2. The way JavaScripts type coercion already handles boolean checks behaves badly with the Boolean object, because Objects themselves are “truthy.” E.g.
`const dontDoThis = new Boolean(false);
dontDoThis ? true : false //returns true`
that Array.from to create an array of numbers is sick 🔥
You look indian?
guess what ? i didn't understand 🤣
if you are not applying these tricks are you even a developer?
yes, just not a based one 😂
@@mewtru Facts.