Top 10 Javascript Tricks You Didn't Know!
HTML-код
- Опубликовано: 29 сен 2024
- 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
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...
I look forward to seeing a video about react hooks. I like the way you explained.
Dude, you have such a psycho genius kind of vibe... I LIKE IT!!
I wish to u all success dev ed and thanks from heart ❤
Wait!! Let's start with that card trick, how did you do that?
13:25 lamo have anyone noticed at that users object XD
Occupation : sex module
Working : licking door
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
Top 10 React.js Tricks You Didn't Know! Please ;3
This would indeed be great!
naming a constant variable “dynamic” is totally legit
The only constant is change.
Lol
XD lol
A constant can't be variable🤐
@@vinayrwt that’s to add a little bit of spice
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?
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 :)
I want a shirt with Ed's face on it that says WHY YOU DO DIS?!
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});
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.
"traversy daddy" lamo
Unemployed tech lead nailed me:)
*LAMO*
Me too...
I wanna to see Dev Ed Tech channel right here on RUclips!
"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.
“They were on drugs when they did this” lmao
age > 50 ? console.log('Ok Boomer') : console.log('Ok Zoomer');
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
"traversy daddy" & "the unemployed tech lead" ......ahem ahem **it's getting controversal!!(cleaver DevEd)
9:19 Oh gosh... remember the classic interview question “Create a function that eliminates duplicates from an array”. Not anymore, I guess 😂
I literally knew all of those, none of this is remotely advanced or obscure, what a waste of time.
if(jumbo) then we go humbo 🤣🤣🤣
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" :)
Dammit you’re hilarious, devEd. One of the most engaging channels I watch on the RUclips
"I'm very excited for next year" bro...
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
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
Can you make a site that make a site and site make another site ....
Hi, my age is 60. BUT, I'M BETWEEN 30 & 59
😂😂😂
Javascript is magic for people who don't know the basic functionalities of every programming language
It's called "ternary", not "turnary" operator. And it's ternary, cause it's not binary, though probably Mr. Turner was a fine mathematician. :)
I REALLY dont recommend using the ternary operator as shown in the video, it makes the code pratically unreadable and really hard to maintain, stick with plain old if statements
Agreed; hate to see nested ternary statements.
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 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.
I think console.time("took miliseconds") and console.timeEnd("took miliseconds") would be more accurate instead performance.now() calculation.
Nobody : ....
Ed: Sex Model, licking doors ?
Please don't use ternary operator in not ternary way ?????...
It's a not a good practice to combine two ternary operators.
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 😂
It should be 10 Tricks everyone knows
At the end when he said:
"Im really excited for next year..."
Oh boi u were wrong.....
By the way, amazing video!
In Real won't talk to you. because you are very talkative with another kind of expression 😂
"I cant wait for next year" heh
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
Is unemployed tech lead is ex Google and Facebook tech lead? 😜😃
"Top 10 Javascript Tricks You Didn't Know!
" But I knew all of these... jokes aside this video is good for beginners I'll be sure to link this to those who have chosen the dark side
Stealing from shops
Oh dear... well that didn’t age well...
Ed: I’m really excited for next year
2019: bah hahah, here’s 2020
1.) BTW, it's ternary. Also, the output is wrong. But I guess for the sake of showing it's ok.
2.) It's ok but I don't recommend it.
5.) I'm not sure if that's what you called a dynamic object.
Or you are just naming a key
6.) Also not recommended.
I think the only Idk is the last one.
If you are a javascript programmer for a while, you must know all of these. Or at least know it's possible.
5:34 Wait a minute, how am i between 30 and 59 when im 60 :D ?
It looks like Ed had the number 30 stuck in his head, though none of the conditional test for 30 😂
At 16:32, that didn't age well
lol.. i'm always extra surprised by the fact this guy is a "programmer".. his logic is a kind of lady like.. all around with no clearance or bite.
For example.. no sense what so ever in his if else statements in this video.. (i lasted to 5.33)
If you are less than (
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.
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.
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
he was hyped for corona
I knew All these tricks since the 90's, when Michael Jackson was at his prime, shamona!!
You are showing a misusage of the ternary operator. There's nothing complicated on it. It is called operator since it returns a *result* . You should have shown the real usecase `const ageClass = age < 14 ? 'child' : age < 18 ? 'youth' : 'adult';`
5:34 "If you say you're ah... 60.. hit save.. run this again... «You are between 30 and 59» All right!" 🤣 But I'm jk, it's a great video. Thanks!
thx dude didn't know about perfomance thing. Thought about what is the analogy of timeit of Python in JS, thx.... And...about 2020, u were wrong
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
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
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;
The 7th one where you play with array size, is just bad programming, don't ever do that. It might look neat here in a two-liner example, but in a project it's just bad, breaking all kinds of patterns and just NO
you are awsome bro, These JS tricks are very helpful. I have started watching all of your video series... unemployed techlead , hahaha..... ultimate :)
If you want the keys and values of the object into an Array you can use Object.entries()
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
noob tricks🙃
@Traversy daddy 😄😄😄 , but he is still young and if he wants then get marry again.....😉😉, Btw great maan...
Using tErnary operator like this is bad practice. Better learn yourself how to use every feature before teaching it to someone else. That's a shame that people nowadays doesn't now what is the ternary operator used for and it looks exotically for them.
Excited for the next year ? 2020 you mean ?
Aged well right?😂
I WANNA SEE THAT TECH CHANNEL! // AND PLEASE TELL ME YOUR VS CODE EXTENSION FOR CODE FORMATIING (beautifyin)
15:50 Dev Ed: "took milliscensds to exouigew"
Me: I thikn tehre's a probleml wtih yolr keybaurd
const number = 20 + "";
it's not ambigous? 😂😂😂
with
const number = (20).toString();
Hey Bro... I'm one of your subscribers... and your content is the best... How can I get you to write a javascript code for my new website
I feel smart because I know all of these. Too bad I didn't learn anything lol
@ 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 🎩
Ternary operator with sugar:
const age = 30;
console.log(
age >= 30?
age >= 70?
"You are getting really old":
"You are between 30 and 69":
"You are below 30");
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.
I am glad I found you...[they must have been on drugs when making literals haha]
How dare you?! You have desecrated the *ternary* operator! The ternary operator was not designed to be used in such an . . . unnatural way! You pervert!
a cool thing with turnary stuff is asigning values like "let var = test ? valueWhenTrue : valueWhenFalse"
Brother I only trust your skills... I wont go to noone else..but you... I put a little money to the side for you.. and ill pay upfront for what I want...
Also very useful: const objToArr = Object.keys( arr ).map( key => arr [key] )
How do you set up Node JS to run the JavaScript in terminal? Does anyone know the exact steps to make it work?
Instructions unclear. Stealed from shops and cop.slice() didn't help. What to do?
during the magic trick, reduce the speed to 0.25x, the way he shoved it in, LOL
It might be my Dunning Kreuger but I knew them all. Very reassuring though. Cheers.
he said he would prefer the if / else statement after he introduced a better clean way of using the statement. this makes me so confused.
how about console.timeStart and console.timeEnd instad of 10 trick ?
BECAUSE PF JAVASCRIPT I LOST MY PLAYFUL IN ROBLOX AND ALMOST GOT HACKED SMH
its good .but number 9 you can use Object.entries(obj)=>conver object to arry
Thank You So Much Ed! I didn't know some of these so you helped me so much. :)
8:33 it was probably the unemployed TechLead ..
If you could only see into the future, you would have realized that 2020 is a toilet.
new String( number ) / `${ number }` seems a bit more readable in my opinion
Wow i successfully wasted 8 mins to watch those very important tricks.