Top 10 Javascript Tricks You Didn't Know!

[@cromrin]

0:00 Intro 0:45 Ad 1:38 Setup 1:46 Turnary Magic 6:19 Number To String 7:12 Fill Arrays 8:00 Unique Arrays 9:39 Dynamic Objects 11:33 Slicing Arrays 12:04 Slicing Arrays End 13:21 Object To Array 14:19 Performance 16:20 Outro 17:55 End

[@Microphunktv-jb3kj]

Ternary, not Turnary...

[@AhmedAli5530]

I already know Turnary Magic, Slicing Arrays, Object to Array

[@xurify]

@@AhmedAli5530 Nooice

[@ridl27]

same on css please, anyone :D

[@SirusStarTV]

Why *Dev Ed* didn't showed *Object.entries* for getting keys and values of object as array...

[@ngtyt]

pro tip : add "+" before a string to coerce it into a number, and use string literals for the opposite. example: typeof +"5" //returns number typeof `${5}` // returns string

[@theuseraccountname]

Interesting. Actually learned something new. Thanks!

[@jalalbmnf]

toString() best way

[@jaycee4738]

Why don't you just use parseInt or Number to convert string into number? as well as toString to convert it to string?

[@urfriendalex.y]

naming a constant variable “dynamic” is totally legit

[@secretagentx-9908]

The only constant is change.

[@jazzmaster89]

Lol

[@yousufhossain9768]

XD lol

[@vinayrwt]

A constant can't be variable🤐

[@urfriendalex.y]

@@vinayrwt that’s to add a little bit of spice

[@boblitex]

9:37 const unique = [... new Set(users)] even easier

[@und0]

Exactly my thoughts! Though for older browsers with polyfill for Set Array.from is better but in node js and electron I always like the three dots for both arrays and objects :)

[@tahasoft1]

Be careful about fill array with an object. I faced a problem at my work using it because it will fill it by a reference to the object, not value so if any change happens to the object the array will be changed. Example: const obj = { a: 1 }; const ar = Array(3).fill(obj); // ar = [{ 'a': 1 }, { 'a': 1 }, { 'a': 1 }]; obj.a = 0; // [{ 'a': 0 }, { 'a': 0 }, { 'a': 0 }];

[@labwax]

just do this const ar = Array(3).fill({...obj});

[@denoww9261]

Hey, about the ternary stuff: normally you wouldn't put whole statements in there. At least that's how it works in most languages, not sure about JS. Since they're all console.log() statements, you could write it as: console.log(age < 18 ? "Underage" : "Of age") This is mostly used for when you have some boolean that decides a small part of an output. For example: console.log("The time is " + settings.use_12_hour_time ? time_in_12_hour_format() : time_in_24_hour_format()); Of course the variable and function naming could use some work but you get the idea. And yes, I agree, chaining them looks pretty ugly in most cases.

[@gyohza]

Yeah, I absolutely would have done it this way. Not that unusual a trick, either.

[@theannoyingone110]

That is most thoroughly explained, thank you for sharing. I want to know if you can use *block statements* in a ternary operator using curly brackets. I'm going to test right now, though. Edit: truth is, you have to use Immediately Invoked Function Expressions (IIFE) to use multiple statements in a ternary operator body. This would be kind of useless information as you could just switch to an if...else statement, which provides a scope easily. If...else statements also can do similar of what a ternary operator can do, if you omit the curly brackets.

[@woket4730]

Top 10 React.js Tricks You Didn't Know! Please ;3

[@titivermeesch]

This would indeed be great!

[@hauphan917]

I just lost it at "unemployed techlead " lmao :)

[@mel-182]

it should be the millionaire techlead!

[@nickvledder]

@@mel-182 No, he lives in a shed. The (ex-Google!) tech-lead shows just another AirBnB...

[@jamesikubi6831]

😂😂 I immediately scrolled to the comments at that point to see reactions. Too bad traversy is off youtube though

[@adelm.3835]

@TechLead

[@freakinmonkey85]

Tip 10: use console.time(“My code timer”) //run code here console.timeEnd(“My code timer”) Much shorter, and you can create as many timers as you want by using different values

[@tiagocunhafernandes6607]

Ed, for performance you can use Console.time(“test”) before and Console.timeEnd(“test”) after and this show the time between time and timeEnd.

[@NoOne-ev3jn]

"name": "ed", "occupation": "sex model", "hobbies": "licking doors" lol u r crazy man but you know what, I really love you :) thanks for everything

[@georgenonis5967]

your personality makes your videos so approachable and no boring

[@StrangeIndeed]

I've something to say about the trick at 11:00. I'm new to JavaScript, but I've noticed that you don't have to write [dynamic], you can omit the square brackets. But you have to write brackets if you want to access a property of an object. For example: const user = { firstName: 'John', lastName: 'Doe' } const userWithReversedProperties = { [user.firstName]: 'firstName', [user.lastName]: 'lastName' } console.log(userWithReversedProperties) // {John: 'firstName', Doe: 'lastName'} You have to use square brackets, otherwise you'll get an error. And yeah, I could come up with better names in this example. And like I said, I'm a noob, so maybe there is more to this and I don't know about it.

[@charbelmedia3014]

I wanna to see Dev Ed Tech channel right here on KZbin!

[@AliRaza-kt2bb]

Like the way you talk! Just noticed something so sharing 5:25 It should log "You are 50 or below 50 " 5:37 It should log "You are between 50 and 70" By the way, I like the board in the background, "Gorgeous Friend" :)

[@tir3dnow792]

Only 40 seconds into the video and I already know why I subscribed to you. You are such breath of fresh air. Thank you for being you, and thank you for posting videos.

[@JamesWelbes]

I want a shirt with Ed's face on it that says WHY YOU DO DIS?!

[@incarnateTheGreat]

Great tips! Thanks for sharing! One thing: while the multiple Ternary example you did technically works, it tends to get messy to read and is somewhat discouraged. Usually, if the condition calls for a simple if/else, then a Ternary is ideal. Otherwise, it's probably worth writing out the old way.

[@unizfrhn2803]

Honestly one of the most enjoyable tips and tricks video I've seen. It's like hanging around with friends.

[@jthomasaurus]

Dammit you’re hilarious, devEd. One of the most engaging channels I watch on the KZbin

[@arhabersham]

9:19 Oh gosh... remember the classic interview question “Create a function that eliminates duplicates from an array”. Not anymore, I guess 😂

[@earlworth]

Also very useful: const objToArr = Object.keys( arr ).map( key => arr [key] )

[@fusehenry]

I've been doing JavaScript every day and night for a few months now, trying to really master it. Also purchased a couple of your course videos. Just wanted to say thanks for the crazy entertaining videos. Very fun and helpful! Even my wife is into JavaScript now. But one thing, how did you even know that we're gorgeous?! You're freakin psychic, my JavaScript brotha!

[@davivify]

Alot of stuff I hadn't seen before. If I may tweak your ternary operator example some: console.log( "You are " + age > 70 ? "getting really old" : age > 50 ? "between 50 and 69" : "below 50" ); This does two things. First it's a bit more concise than your version. But more importantly it illustrates the use of the ternary op where If/else is not allowed to go, like within function parameter lists. By the way, one super cool feature of JavaScript that I LOVE is the use of prototype functions to extend the basic types by, say, adding new functions. So instead of having to type [ var int = parseInt( str ) ], you could write: [ var int = str.i(); ] for example.

[@johnsamuel6096]

Javascript is magic for people who don't know the basic functionalities of every programming language

[@PaulMorarC]

Good content and keep up the good work. Instead of the ternary example(which ended up to be quite nasty), and highlighting another thing that people don't normally use, you could have highlighted the switch statements for ranges. switch (true) { case age > 70 // log something break; case age > 50 // log something else break; default // log the default

[@ciceroaraujo5183]

Your energy is always great.

[@r0x304]

“They were on drugs when they did this” lmao

[@braingamedotcom]

Dude, you're so funny! The video is great anyway but the little things you throw in there like 'stealing from shops, no, what other hobbies do I have.." just make me laugh so much and actually restore my faith in humanity. You're awesome bro! Keep on rocking :)

[@silenux7419]

If you want the keys and values of the object into an Array you can use Object.entries()

[@thedeveloper06]

I would like to meet u once in my life to say Thank You ur every video make my day awesome nd improve my knowledge in languages....really

[@appliedcomputerprogramming5206]

Like your knowledgeable humour filled lively presentations

[@bonzer1957]

your humour is what we all need.

[@timallenfanclubofficial]

I thought you would show the really short ternary code! I don't know all the ins and outs of it, but its something like, if you want an If statement that runs only 1 line on completion, instead of taking up three lines to write if (true) { executeMethod() } you can instead write true && executeMethod(); Or the inverse, if you want a false condition false || executeMethod(); Like I said, I don't know all the ins-and-outs of writing this, it only seems to work sometimes. Was hoping you'd provide more details! Love the video btw

[@EzequielRegaldo]

Thank you ! I learned something new :)

[@charbelmedia3014]

Thank You So Much Ed! I didn't know some of these so you helped me so much. :)

[@glennscott2168]

Thank U Brother Looking forward to 2020 to. and love to see @Dev Ed Tech, Love back End, T'c God bless u Brother From Australia;

[@Ginfio]

OMG, I was always confused how to use the short if, and I understood it on the first try I of you saying it.

[@kamleshpaul414]

array to object was awesome 😆👌

[@leutrimiTBA]

you are the best who makes it fun while learning in youtube

[@codewithpranavjeet]

Stealing from shops ... your video is too good ! loved it.

[@0bbie610]

Yes. Dev ed tech channel. I'd really love to see some game development though. I want to start developing some games but idk where to start haha

[@moshpat86]

I was waiting for this!!!

[@davidasiamah2898]

Good Job Ed, U are getting better every video. Keep it up.👍 And Oh "The Complicated Ternary Operator" with the accent cracked me up at even at 2:am🤣👍

[@donalfonsnisnoni2819]

also, add a string to an integer which is '2' - 0 will get 2 return as integer type

[@robertbornschein5583]

Dynamic Objects Are A Blessing!

[@DigitalMonsters]

0:00 Challenge Accepted... 1-9 ... *yawn* 10.. well sheeeet; didn't even know 'performance' was a word in js; i just use Date.now() on both ends. I mean it's not going to make a world of difference but for those wondering how it differs from using Date,now() the answer on the docs is the 'resolution'/'precision' Date is milliseconds and performance offers microsecond resolution.

[@8ack2Lobby]

That magic trick was sick!!!!!

[@MrMamate]

"traversy daddy" lamo

[@WeLoveScratchJr]

Unemployed tech lead nailed me:)

[@SirusStarTV]

*LAMO*

[@bloxzyo]

Me too...

[@JohnyMorte]

In turnary operators is wrong logging.. should be "You are bellow 50" and "You are between 50 and 70"

[@noobiebro7266]

I was searching for this comment after noticing the mistake... Btw why no one noticing it...

[@surelock3221]

I thought I went insane in the membrane for a minute there

[@rudyNok]

Nobody is going to point out how @ 5:35 he has the ages messed up and when the code says for the age of 60 that it is between 30 and 59 he says it works just fine? WTF?

[@proddirtneck]

I was looking for this comment that's like 5th grade math 😂

[@jermainejackson9683]

With the Turnary operator you didnt need to console log each time, the useful thing about the operator is that it returns the value each time. You can use them this way instead: let msg = age > 50 ? "you are over 50" : "you are under 50"; console.log(msg);

[@AnonymousUser-vd2st]

Thanks Ed! That was an interesting one! Well, noticed that your Spotify app is open always, what podcasts do you like to hear?

[@Hyuts]

It might be my Dunning Kreuger but I knew them all. Very reassuring though. Cheers.

[@Murphy5-5]

a cool thing with turnary stuff is asigning values like "let var = test ? valueWhenTrue : valueWhenFalse"

[@Iwtfgege]

Awesome Ed more like these pleaseeee thanksssss!

[@chiarazh4215]

please keep your word about game development!! sooo looking forward to it explained by Ed

[@Jsamir7]

I look forward to seeing a video about react hooks. I like the way you explained.

[@mrsasan9016]

Unique Arrays & Dynamic Objects was amazing :O Woow!

[@RahulAhire]

@ 0:25 when you switch speed settings from normal to 0.25, you will know all the magic secrets of Dev Ed

[@eric000]

thanks for pointing it out. I thought he stuffed his mouth and played it backwards. I was wrong.

[@RahulAhire]

@@eric000 you're welcome 🎩

[@javadmohammadi3943]

its good .but number 9 you can use Object.entries(obj)=>conver object to arry

[@dynamitedev3207]

love you brother

[@avi062]

Wow. Can't believe I knew all these and use all these tricks in everyday code.

[@burhanali9598]

Thank you sooo much for helping

[@flyinghead1147]

Gooo for it!

[@kttalkZ]

unemployed tech lead, travesty daddy !! lol lol lol I am laughing to death here. Nice one bro, I am sure it was all healthy humor. Love your energy - keep it up

[@developedbyed]

Of course, just poking fun a bit hehe

[@sadique_x_]

you're great dude!!

[@denzel420]

that is soo good mate!

[@taylortoast2]

And yes to Tech Channel. Any excuse for more awesome DevEd.

[@iwebChristophe]

Awesome as usual !

[@JamesWelbes]

Loved the tech lead reference

[@TheBorninmotion]

Thanks a lot ! More js and vuejs tricks please !

[@NNNedlog]

the card trick was really nice

[@ambinintsoahasina]

the introductory ad is lit ! XD

[@manishpraphu7819]

you are awsome bro, These JS tricks are very helpful. I have started watching all of your video series... unemployed techlead , hahaha..... ultimate :)

[@ritulakrabhojagi9925]

Knowledge blast with fun😄

[@xurify]

I love this guy

[@SeriesTube01]

Dude, you have such a psycho genius kind of vibe... I LIKE IT!!

[@dasdunetechnologies1695]

Dynamic object is great! thanks Ed.,Can we do the same in Python ?

[@SirusStarTV]

You can add key to a dictionary later like this: dictionary = {} dictionary[your_value] = "some value"

[@m.haydar.mosawi]

I wish to u all success dev ed and thanks from heart ❤

[@JohnRobsonBeInspired]

I really love listening to your voice :)

[@SergioArroyoSailing]

Thanks for sharing! much appreciated! and cool jacket! I lol'ed at your later object :D

[@EmsCode]

You were really really, really excited for this year lol

[@TROiKAS]

[dynamic]: "sleep" i love it!!!

[@Kaybarax]

I know all these stuff and have done them already!!! I'm good on my way!!!!

[@mohammedyoussef9793]

The coolest teacher ever... :)

[@CodingwithElias]

actually I know most them. good!

[@bdev5988]

And I'm second! Bought and love the course you made Ed!

[@AhmedAli5530]

super cool video in December

[@TakamakA88]

I love your videos Dev Ed =) One of the best web dev channel on KZbin =) I would like to see your tech channel next year =)

[@rajashekhar433]

Please make a video on JS algorithms and CACHE

[@codewithmarwan]

I love your videos, pretty good explanations as well

[@AnDi-tx2xh]

Merci Ed. Unele le stiam altele nu. Simple trucurile dar utile zic eu. Cel mai mult mi-a placut cel cu performance.now(). O sa abuzez de el si o sa plang la cat de incete sunt programele mele. XD

[@Ayntak]

Awesome, more more plx :)

[@dwikurniawan1376]

Thanks

[@darshitgajjar5199]

Great video make this typeof more video

[@Motivationwindow]

Hi sir Dev Ed, can we combine HTML and CSS files in the SVG file? if we can. please guide me. I will be very thankful to you.

[@taylortoast2]

Great video!

[@gouravkhator]

Learnt 1 trick from here that hobbies one in square brackets in the object and also one making object from array

[@catalinim4227]

Thanks, I didn't know that I combine multiple ternary ops