Top 10 Javascript Tricks You Didn't Know!

Click on the link below to get 2 months FREE access to Skillshare premium
skl.sh/deved12
In this episode we will cover 10 tips and tricks that you might not know you can do in Javascript. We will also take a look at a lot of tricks in javascript ES6 and also beginner level javascript tricks that you might've not know.
Get My latest HTML and CSS Course Here:
developedbyed....
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#programming #javascript

[@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

[@urfriendalex.y]

@TECH VINEYY that’s to add a little bit of spice

[@rajikkali]

@TECH VINEYY I learned from his JS course that it can if it’s an object or array. Only single values are actually constant when using a const. Weird, right?

[@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 :)

[@woket4730]

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

[@titivermeesch]

This would indeed be great!

[@phanthh]

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

[@DevNightly]

it should be the millionaire techlead!

[@nickvledder]

@@DevNightly 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

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

[@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

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

[@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});

[@georgenonis5967]

your personality makes your videos so approachable and no boring

[@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" :)

[@JamesWelbes]

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

[@charbelmedia3014]

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

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

[@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

[@jthomasaurus]

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

[@johnsamuel6096]

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

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

[@arhabersham]

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

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

[@bonzer1957]

your humour is what we all need.

[@unizfrhn2803]

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

[@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 :)

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

[@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 😂

[@ciceroaraujo5183]

Your energy is always great.

[@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!

[@earlworth]

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

[@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

[@r0x304]

“They were on drugs when they did this” lmao

[@8ack2Lobby]

That magic trick was sick!!!!!

[@youcefmouadboumazouza6720]

can u tell me what extension do u you use for making your code more cleaner plss

[@kamleshpaul414]

array to object was awesome 😆👌

[@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

[@codewithpranavjeet]

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

[@appliedcomputerprogramming5206]

Like your knowledgeable humour filled lively presentations

[@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🤣👍

[@SpacePulse-sp]

love you brother

[@Murphy5-5]

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

[@manishpraphu7819]

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

[@gooddeedsleadto7499]

I want to run JavaScript file placed within the script tag inside HTML file. I want to use VS code and google Chrome. Please list down the steps? Windows 10 Thanks

[@NNNedlog]

the card trick was really nice

[@chemedev]

Hi, with turnary is there any way to evaluate a single prompt() (instead of using a var) BUT more than 1 time?

[@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

[@sadique_x_]

you're great dude!!

[@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

[@silenux7419]

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

[@denzel420]

that is soo good mate!

[@Stefan98765]

Licking doors for a hobby got a whole new meaning now

[@Hyuts]

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

[@burhanali9598]

Thank you sooo much for helping

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

[@avi062]

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

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

[@charbelmedia3014]

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

[@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 🎩

[@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;

[@MrMamate]

"traversy daddy" lamo

[@WeLoveScratchJr]

Unemployed tech lead nailed me:)

[@SirusStarTV]

*LAMO*

[@bloxzyo]

Me too...

[@mahinqureshi5809]

hey Ed .. help me out. so i m building a e-commerce web application and i m kinda stuck in a point . so how can i store my "ORDER ITEM" page information , to "CART" page and then after confirming what the customer ordered it goes to DB . i can work with DB but i m stuck at taking "order information" to my "cart " page ..and i dont to use any temp DB for it . i m new in web development and i not using any JS Framework . and suck at explaining stuff .. hope you getting what i m saying

[@ambinintsoahasina]

the introductory ad is lit ! XD

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

[@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

[@leutrimiTBA]

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

[@donalfonsnisnoni2819]

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

[@EzequielRegaldo]

Thank you ! I learned something new :)

[@SergioArroyoSailing]

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

[@robertbornschein5583]

Dynamic Objects Are A Blessing!

[@idontwhy3132]

when would shortening arrays with manually assigning .length be an actual good idea? I feel like that introduces the possibility of janked up arrays that aren't acting as expected leftover by mutating like that. wouldn't you prefer .slice() to be more explicit about which cut of the pie you're accessing in all cases?

[@EmsCode]

You were really really, really excited for this year lol

[@fusehenry]

How do you set up Node JS to run the JavaScript in terminal? Does anyone know the exact steps to make it work?

[@faezix2124]

please somebody tell me how can I change my in-app terminal of VScode to whatever name I want or change the color like what Ed has done.

[@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"

[@ritulakrabhojagi9925]

Knowledge blast with fun😄

[@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

[@JacklapottTv]

Excited for the next year ? 2020 you mean ?

[@Yathavan5947]

Aged well right?😂

[@timlee9864]

What is your color theme? please

[@Iwtfgege]

Awesome Ed more like these pleaseeee thanksssss!

[@AhmedAli5530]

super cool video in December

[@mikeviverette5867]

For the number to string, wouldn't it be better to use myValue.toString() instead of concatenating a string to the number?

[@javadmohammadi3943]

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

[@TheBorninmotion]

Thanks a lot ! More js and vuejs tricks please !

[@flyinghead1147]

Gooo for it!

[@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);

[@mohammedyoussef9793]

The coolest teacher ever... :)

[@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 =)

[@taylortoast2]

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

[@chiarazh4215]

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

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

[@Jsamir7]

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

[@m.haydar.mosawi]

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

[@xurify]

I love this guy

[@moshpat86]

I was waiting for this!!!

[@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

[@charbelmedia3014]

What is your Wi-Fi speed Ed?

[@darshitgajjar5199]

Great video make this typeof more video

[@rajashekhar433]

Please make a video on JS algorithms and CACHE

[@waleedgrt4904]

Nice hobbies bro!!!

[@JamesWelbes]

Loved the tech lead reference

[@gddeufedhfezr1224]

Merry Christmas