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
@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?
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 :)
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 }];
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
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.
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.
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.
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.
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" :)
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.
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!
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.
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 :)
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?
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
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.
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
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);
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
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?
you are awsome bro, These JS tricks are very helpful. I have started watching all of your video series... unemployed techlead , hahaha..... ultimate :)
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
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
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
Ternary, not Turnary...
I already know Turnary Magic, Slicing Arrays, Object to Array
@@AhmedAli5530 Nooice
same on css please, anyone :D
Why *Dev Ed* didn't showed *Object.entries* for getting keys and values of object as array...
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
Interesting. Actually learned something new. Thanks!
toString() best way
Why don't you just use parseInt or Number to convert string into number? as well as toString to convert it to string?
naming a constant variable “dynamic” is totally legit
The only constant is change.
Lol
XD lol
@TECH VINEYY that’s to add a little bit of spice
@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?
9:37 const unique = [... new Set(users)]
even easier
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 :)
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 }];
just do this
const ar = Array(3).fill({...obj});
I just lost it at "unemployed techlead " lmao :)
it should be the millionaire techlead!
@@mel-182 No, he lives in a shed. The (ex-Google!) tech-lead shows just another AirBnB...
😂😂 I immediately scrolled to the comments at that point to see reactions. Too bad traversy is off youtube though
@TechLead
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
Top 10 React.js Tricks You Didn't Know! Please ;3
This would indeed be great!
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.
Yeah, I absolutely would have done it this way. Not that unusual a trick, either.
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.
"name": "ed",
"occupation": "sex model",
"hobbies": "licking doors" lol
u r crazy man but you know what, I really love you :) thanks for everything
Ed, for performance you can use Console.time(“test”) before and Console.timeEnd(“test”) after and this show the time between time and timeEnd.
your personality makes your videos so approachable and no boring
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.
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.
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" :)
I wanna to see Dev Ed Tech channel right here on UA-cam!
I want a shirt with Ed's face on it that says WHY YOU DO DIS?!
Dammit you’re hilarious, devEd. One of the most engaging channels I watch on the UA-cam
Honestly one of the most enjoyable tips and tricks video I've seen. It's like hanging around with friends.
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.
Javascript is magic for people who don't know the basic functionalities of every programming language
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!
“They were on drugs when they did this” lmao
your humour is what we all need.
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.
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 :)
Also very useful: const objToArr = Object.keys( arr ).map( key => arr [key] )
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?
I was looking for this comment that's like 5th grade math 😂
If you want the keys and values of the object into an Array you can use Object.entries()
Your energy is always great.
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
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
9:19 Oh gosh... remember the classic interview question “Create a function that eliminates duplicates from an array”. Not anymore, I guess 😂
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.
"traversy daddy" lamo
Unemployed tech lead nailed me:)
*LAMO*
Me too...
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
Of course, just poking fun a bit hehe
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);
Stealing from shops ... your video is too good ! loved it.
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
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
Like your knowledgeable humour filled lively presentations
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🤣👍
also, add a string to an integer which is '2' - 0 will get 2 return as integer type
can u tell me what extension do u you use for making your code more cleaner plss
Wow. Can't believe I knew all these and use all these tricks in everyday code.
Thank You So Much Ed! I didn't know some of these so you helped me so much. :)
you are the best who makes it fun while learning in youtube
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;
In turnary operators is wrong logging.. should be "You are bellow 50" and "You are between 50 and 70"
I was searching for this comment after noticing the mistake... Btw why no one noticing it...
I thought I went insane in the membrane for a minute there
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?
a cool thing with turnary stuff is asigning values like "let var = test ? valueWhenTrue : valueWhenFalse"
For the number to string, wouldn't it be better to use myValue.toString() instead of concatenating a string to the number?
What is your Wi-Fi speed Ed?
The coolest teacher ever... :)
Thank you ! I learned something new :)
That magic trick was sick!!!!!
its good .but number 9 you can use Object.entries(obj)=>conver object to arry
OMG, I was always confused how to use the short if, and I understood it on the first try I of you saying it.
Hi, with turnary is there any way to evaluate a single prompt() (instead of using a var) BUT more than 1 time?
love you brother
Dynamic Objects Are A Blessing!
please keep your word about game development!! sooo looking forward to it explained by Ed
It might be my Dunning Kreuger but I knew them all. Very reassuring though. Cheers.
@ 0:25 when you switch speed settings from normal to 0.25, you will know all the magic secrets of Dev Ed
thanks for pointing it out. I thought he stuffed his mouth and played it backwards. I was wrong.
@@eric000 you're welcome 🎩
Gooo for it!
array to object was awesome 😆👌
I was waiting for this!!!
you're great dude!!
Thanks Ed! That was an interesting one!
Well, noticed that your Spotify app is open always, what podcasts do you like to hear?
that is soo good mate!
you are awsome bro, These JS tricks are very helpful. I have started watching all of your video series... unemployed techlead , hahaha..... ultimate :)
"I'm very excited for next year" bro...
And yes to Tech Channel. Any excuse for more awesome DevEd.
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
I think console.time("took miliseconds") and console.timeEnd("took miliseconds") would be more accurate instead performance.now() calculation.
And I'm second! Bought and love the course you made Ed!
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.
Awesome Ed more like these pleaseeee thanksssss!
age > 50 ? console.log('Ok Boomer') : console.log('Ok Zoomer');
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
You were really really, really excited for this year lol
I know all these stuff and have done them already!!! I'm good on my way!!!!
8:41 how you did this please? Like from one line to multiple lines in VS code
its the prettier extension
Licking doors for a hobby got a whole new meaning now
Starts @2:16
Thank you sooo much for helping
Unique Arrays & Dynamic Objects was amazing :O Woow!
the introductory ad is lit ! XD
the card trick was really nice
I love this guy
I love your videos Dev Ed =) One of the best web dev channel on UA-cam =) I would like to see your tech channel next year =)
Excited for the next year ? 2020 you mean ?
Aged well right?😂
Awesome as usual !
Knowledge blast with fun😄
if(jumbo) then we go humbo 🤣🤣🤣
What is your color theme? please
[dynamic]: "sleep" i love it!!!
I look forward to seeing a video about react hooks. I like the way you explained.
What's your vscode theme?
I wish to u all success dev ed and thanks from heart ❤