`const` was a mistake

couple weeks ago I filmed a video All About con versus let because well it's an interesting topic to me and I have a stance which is that both are fine I tend to use con when I can there's a phenomenal blog post by Jamie builds builds ghost Jamie Kyle whatever you want to call him from a couple years ago it's actually quite a bit longer than that that I've used as a reference for a while and that's what I used in the video it's not that const means something it's that let means something and when you're using let it should be with some type of intent and it should communicate something to your team right before I put out that video I went to to Epic webc I did not expect for Ryan Florence to be there much less to give a talk much less for that talk to be cons versus let which immediately sparked the debate up once again I could have published the video I already recorded but so much has happened since and we've had so much discourse and even people I did not expect like leer Rob moving over to the let side of camp that I felt we needed to re-record and make a new video All About cons versus let but if you are interested in that other video I'll have the whole thing up on the Theo throwaways Channel if you don't know about that it's all the videos I don't really know how to make a thumbnail or title for or don't think fit here check it out anyways let's get into this wonderful debate of cons versus let and maybe even bring up some be as I said this Ryan Florence talk was what started the debate again so it only is fair if I dive in hi that's an interesting opening slide oh boy as my five minutes started I'm just getting trolled verion all right my name's Ryan and I'm not going to talk about remix um we're going to talk about Dynamite real quick Dynamite was created for mining but what did people use it for to kill other people in Wars much to the Chagrin of this man Nobel that's his last name very interesting analogy I I'm sure this isn't going to be used for a reach of any form youve probably heard of the Nobel Prize specifically the Nobel Peace Prize so he was probably pretty upset that his invention was not used for the thing he wanted it to be used for anyone good at chemistry you know what this is water that's LSD for some people it might be [Music] water this is the guy take enough LSD and I'm sure that looks like water guy who invented it there's no like prize named after him so I can't remember his name it's like Albert or something like that Hoffman okay we got LSD fans here I love the chatter who immediately knew who it was um I don't even drink coffee so like this is as far away from anything that I'm putting in my body so he was trying to create a compound to treat ADHD a central nervous system stimulant or something like that is what it was I was trying to like treat ad ADHD and like hyperventilation from like panic attacks he was trying to help people right and uh I don't know I guess maybe some people micro do LSD and they say it helps them but uh it's pretty Undisputed that LSD has wrecked many this supposed to be a five minute thing and we're almost a minute in and he's talked so far about dynamite and LSD many lives so I don't I don't I don't mean to say that too jokingly but this is kind of a fun talk and uh he he invented LSD and got used for things he didn't intend uh reading his Wikipedia page he continued to take LSD his whole life um and uh kept trying to find a different use for it and never did this is the guy who invented Q-tips I'm one of the few people who uses Q-tips for a lot of things like computer cleaning and they're very useful but fair I'm I'm excited to see how this ends up in cons versus Le right now I feel like iated my audience this isn't even my talk he's like it's it's for cleaning your ear yes but not that part it just makes it worse when you just keep like shoving the thing into your ear right so like and they got all over the warning but like Has anyone used a Q-tip for anything this is why we don't agree Ryan because I'm I'm always the person who actually uses the thing in this intended way but yes I use Q-tips in a lot of intended ways cleaning all sorts of really nice besides trying to get ear wax out no it's the only thing we do with it here's another guy who created something Dave Herman um some of you who were old hats like me remember him uh 10 years ago es6 was all the rage JavaScript was it was like JavaScript puberty it was like coming of age and it could actually the good HTML 5 es6 wave good times like do cool things now and we're taking a very serious react hit the scene and we're building really interesting websites and um so the language needed to get a little bit better and um Dave Herman was someone who was really instrumental in pushing the language forward and he's a hero of mine he's one of my web Heroes um some other people obviously were involved too um but Dave was talking a lot about uh es6 and some of its features and here is one of his talks little screenshot notice that it says let is the new VAR yeah it says that because VAR isn't replaced by const VAR in its intended use cases has been replaced with let because it's a variable it's meant to change let is letting it change oh boy what's missing from his slide const is missing you can go and search all of his es6 talks and slides and comments doesn't talk about const so I wonder what he has to say about it the guy who gave us let and const I wonder if he's like the guy who gave us dynamite and LSD and Q-tips or maybe he loved it so Pamela Fox another we hero of mine I'm this close to holding a company meeting about when we should use let versus const anyone had that meeting in your is this kind of that meeting God are you playing this video in that meeting oh no I I am so sorry either way no we don't even do that anymore right we just use const Dave Herman I'm sorry why cats Yehuda cats I didn't actually know this that Dave Herman regretted const oh boy this is going to be interesting warn me const was a mistake for this exact reason and I don't take it I didn't take it seriously enough one of my main es6 regrets the guy who gave you const regrets giving you const does he just feel bad or like did this ruin him PSA const is short for constant not functional programming this is a personal attack I'm offended I see how it is y'all think you're B immutability I use con I'm I'm going to learn o camel one day I do intend to learn oaml one day but that has nothing to do with what we're talking about here Ryan I understand cons is not proper immutability and I understand wanting to learn o camel kind of makes me a tool these are two separate unrelated things JS con should never be used for anything but constants using cons to mean the variable happens to not be reassigned makes your code less readable not more you can this is another one of those remove the art from the artist moments isn't it we're not going to agree are we Dave I am so sad the list grows one longer clap John just let's just do one clap though because that's how it feels being a fan of let it's like it's you and everybody else I'm going to do a second edition of effective JavaScript just to shoot post about constant print and inight Flame wars in the Amazon reviews thanks foring it PG ran I might be a jerk but I don't swear I got the important things down didn't know that Ryan didn't swear makes sense uh sorry for the con tweets folks I'm feeling much better now we we actually like we ruined this man this tweet has nothing to do with my talk but look at the time stamp when you're sleep deprived to keep trying to stay awake in the night you might think you can accomplish the things but it turns out in such situations lack of resources gives you many troubles with accomplishing the things it turns out this is his last tweet he hasn't tweeted in a full gestation period and his tweets before that like were sparse too like all those tweets I showed you before this all like 2017 15 14 and then he just kind of like tapered off like we we wrecked him so how did this happen how did we get here why is everyone doing const everywhere or or sorry rather so what is it for Yuda cats also was instrumental in es6 and he says the T LR for that meeting that pamelo was asking about is Con for top level module scope constants only and screaming case only otherwise let and call it a day so the people who put this into the language think you're all crazy these are the people who made JavaScript I think between the people who made JavaScript and the people who use JavaScript we can all agree which one is more crazy right right we're talking about the same programming language right now correct anyways so how did we get here that wasn't intentional but that is how I feel when I see an an Airbnb es link config in a project yep good old Airbnb es link config wait no oh no I just realized where this is going is he going to link the existence of the es lint config to the General Industry preference towards using const because I don't like those things being linked that makes me uncomfortable I was at Airbnb giving them a workshop with our company react training and uh this came up the es the Airbnb es link config and they all like started laughing like oh we don't use that here so the people enforcing this thing don't even use it either yeah no one no one uses this that that gets it including Airbnb which is hilarious this config is such a mess it's so awful please if you're actually using this still for some reason throw it away just throw it the away using all the built-in eslin typescript stuff is so much better the typescript recommended eslin config is really good just use that but you're still doing it right it's very important that I know when my variables are reassigned okay that's fine if you want to use if you want to if you want to use Le or cons instead of lead all over the place I'm not going to tell you what to do but there are a couple of things that I want you to understand about what you're doing so if you ask the question how should we do variable assignment that is an invalid question because conss are constant they're not variables they don't change so you can't say to your coworker like oh what's the value in this variable you need to say What's the value in this constant you're going to find this very difficult because you're calling all of your conss very might I remind you in this wonderful language that we are discussing here there's a lot of things you can do with both const and let like if I have a function here do some work let do some work equals async this is totally valid too what is this variable cuz let means variable right no in this case let happens to mean a function and this is also a very dangerous one because this function can now be rebound where I could set do some work equal to console.log do some work and I just broke everything what's this even mad about oh cuz the type is a promise so I have to make this async for the types to match still oh the input type's not the same either so form data form data can I get this to be honored return void just void no you get the point typescript is saving us from doing a really stupid thing here it really doesn't want us to which is good because this is really stupid the idea that we could have a function that's exported or used like this God forbid this is being exported from one file to another file and now we can override it not good and just changing this to const fixes that now we're going to get an error that is cannot reassign to do some work because it's a constant should we be using constant let for functions depends there's Arguments for both there's arguments against both but hopefully when you say we should use let not const because it's a constant not a variable that you don't have a single Arrow function in any of your code because if you're saying that let is for variables and con is for constants then you're ackn you're just not acknowledging the existence of eror functions at all so yeah that that one was a little Bullit variables and they're not variables they're constants mutation is difficult to manage in the large and deserves careful annotation const doesn't help with this arrays you can push into it objects you can assign to them cons didn't help you with mutation yes but you can't replace the element you can't make a new brands array which I think is a really important detail like if I have con Brands equals sure and in here I want to have different brands I can't just change Brands to like Nike Adidas Puma reok because it's a constant and ideally if you wanted these here doing brands. popop like while brands. length is greater than zero brands. pop and then brands. push for all of these because this would be the alternative. map brand like could you brute force this reassignment with something like this sure this is a much bigger code smell than Brands equals Nike Adidas pumar rebok for again like sure you can make changes to Brands but at least the changes seem more deliberate and require more work and it's less likely someone accidentally reassigns the thing you don't even catch it which by the way once you've exported this if this is export let Brands good luck and have fun here which is why we use const right so if you're going to use const I insist that you also use object freeze because you're saying I want to indicate intent here I'm not going to mutate this so you got to freeze the object uh we're a bunch of react developers probably in here or like either happily or unhappily or something in between like me whoops um so you're going to actually do it like this right oh I better memorize it because I bet object object freeze is expensive and then it's like ah but I got that dependency array so I got to freeze that one oh and Brands is an object so I got to freeze that too so if you actually want to protect yourself from mutation this is what your coat's going to look like this is The Logical conclusion of what the goal was never to protect us for mutation it's to give the semantic indication again like this is the issue I brought up in the original video that probably is on the second Channel might be here who knows where it ends up the core Point I've made is that it's not that const means something specific it's that let means something specific when we use let the intention is to replace the element it's that we put let here because this might get reassigned at the root level somewhere let is a very explicit specific thing that we're doing and we're doing it for a reason for those C and C++ engineers in chat I have a tweet I made Let's see if I can find it that I think summarizes this really well from a memory point of view much like Ram JavaScript objects can't be immutable what a banger yeah con is star let is star star was the point I made here which if you're not familiar star is to assign of a pointer which means instead of just having a value it points to a part of memory which you can't change you can change what's in memory there but you can't change which spot in memory it's pointing to star star is a pointer to a pointer which means we can change where it points so if we want to reassign the value to another value somewhere else we can if we want to change which pointer it's pointing at we can and that's the difference with cons versus let is that cons points at one specific object you can't change what it points to but you might be able to change the contents of what it points to if you want to change which object the variable points to that's when let is useful and this is a meaningful difference like imagine if in C++ people said never use pointers always use double pointers and I think we can all agree that would be kind of insane and that's why I feel so gaslit by this I don't know if it's cuz I did my days in C++ or what anyways what you're doing bad news when you pass that object to a function those ratings this one that we were just looking at it's memorized it's it's got all the tricks in it right we've Frozen everything in it it's memorized you pass it to a function that's reassign oh what am I touching oh it's this I'm gonna oh they turned it off I was gonna do a little Tom Mel but you can reassign that like you cannot make a parameter to a function a Conant so there comes a point where you can't keep doing what you're trying to do to like tell yourself that you're protecting your code from something so there's there's just you can't freeze can't freeze your parameters so I asked chat GPT has using con everyone JavaScript instead of let ever prevented a bug in any real code in production said no though using constant instead of let in JavaScript as a common practice it has never prevented a bug in any software that I've been trained on it's typically recommended by people who need easy to follow rules to feel like their code is good unfortunately it is a confidence boosting distraction from the real work of building a great user experience I we have to has using const everywhere in JavaScript instead of let ever prevented a bug in any real code in production is that right real code in production yeah apparently it's spelled wrong so it's almost certain that this is a this is real in the same sense that the blog posts I read that tell you to subscribe to me are real which word was type out on here by the way what's spelled wrong oh the ER Cod is good yeah very likely fake because there are typos here which chpt is not known to do much of like the same way sometimes my blog posts when I'm reading them tell you to subscribe to me speaking of which our response seems to think you should sub on YouTube so if you haven't the sub button is right below it's free feel free to subscribe we do lots of content like this I think it's a fun Channel and even chat gbt seems to think you should subscribe crazy I know but uh yeah you get the idea that's like that is all of human knowledge came up with this answer for us okay and if you're still not convinced oh this argument the pronunciation is this mic working we're going to talk about acoustic phonetics we've got plosives like explosive like t t c so your tongue hits somewhere and then a bunch of air comes out right we call the these stops also we've got fricatives so that's like you make a small hole and push air through it S S and F and we've got nasals like n and M where we move air through our nose we've got liquids for L and R we make a shape with our tongue and then we let air flow around to oh and then we've got vowels where you just kind of open up and like let your vocal cords vibrate right so let's walk through let let let what do we got we've got a liquid at first and then we've got a vowel and you think we have a stop with the T right but we don't say let we say let like a Utah person says Mountain it's it's just let there's no te then so God my Boston accent's going to be real rough here H yeah this part's a bit for sure I I appreciate the bit the fact that the pronunciation matters which for him makes sense but I I think there's three places where these things matter yeah const versus let I think there's three areas where you'll think about these things one is writing code two is reviewing code and three is talking about code and you know what I'll cave I think in case three which is the case Ryan spends a lot of time doing I'm not saying this an insulting way I'm honestly getting closer and closer to this point as well talking about code dropping cost and just saying let makes life much easier I can actually see that and you can convince me of that argument writing code code perhaps you could convince me as well that writing code is simpler in the process of writing it if you just have the one way to define things but this in between here reviewing code that's where I really think const helps a lot and I'm not the only one who thinks that this is Malta who is one of like the wizard engineers at Google back in the day that now is the CTO of her cell team con for Life declarations tell me there won't be a reassignment game changer for comprehension speed when reading code that's the big deal here that the object itself will not be reassigned the same way when you see a pointer versus a double pointer you don't have to be as thorough with the review you know what it's doing it has a value it's pointed at and it can change the thing that it's pointed to but it can't change where it is pointing very important and someone in chat also made a fair point which is don't forget maintaining code I would put that under reviewing in a a more long-term sense I almost put reviewing and maintaining here which I think is fair because reviewing and maintaining code trying to figure out what this was supposed to do that is huge and again if we put something like let here what I'm immediately going to do is when I read this code or I'm dealing with this in the future I'm going to try and figure out all the places that touch this to make sure none of them are modifying it and if I have some crazy bug where Brands is changing at some point during a render now I have to go audit every instance where this is used instead of the easy thing we would do here which is look for all instances of brands. push and if there's none in our code base it's probably fine now that you have to worry about it being assigned via equals things get a hell of a lot Messier very quickly it's also a bit of a noobu if you're doing like the basic counter component example and react so if I make a new counter. TSX everyone's favorite use client function counter I could make this and believe me it's tempting to make this an arrow function but I'm going to resist the urge and we have this function counter the easy mistake that new devs will make especially if they're familiar with JS but not react is this which won't work because we're not actually updating the state and if you were to fix that by doing count equals count plus one you immediately get an error cannot assign to count because it is a constant correct you shouldn't be able to assign to count because it is a constant you should have to call set count which you can fix very quickly by doing that these little things add up and it makes it way more likely you don't make those types of mistakes both as an educator teaching somebody the basics of something like react also as a person maintaining this code over time or coming back to it months if not years later and once again this isn't because const means constant it's because let means mutated if when let is used I know the reason is because equals is used at some point let indicates to me that this value that is assigned here can change and will change that's when let becomes useful because it's indicating to me by the way later on either in this file or somewhere else this value can be reassigned it sucks that you can reassign keys in a constant I think you should have to clone the object personally con means the the thing doesn't get reassigned let should mean the thing does get reassigned if the only reason you use let in your code is because a reassignment happens suddenly let has a really powerful meaning of look out for the equals look out for where this changes I would make the argument that let is better and let is more valuable if you use const because the reality is you'll have a lot fewer lets than consts here's the code base for the upload thing infrastructure let's take a look at all the instances of let in here we got about 25 and a handful of these are in copy too so we got about 23 instances total of let in the infrastructure code base for upload Thing versus 1,239 for const that means these lets communicate something very specific which is very useful very useful here we see let URL is window. origin plus path name and if search params is search pams two string we do more things to the URL in this condition or here let Handler is the Hano s Handler and we replace this Handler with a different versioned Handler if you're on a different version by putting let here we're indicating that this initial value is going to be different and reassigned as we go down these are the things that let is really nice for because it tells you very specifically this thing gets reassigned ideally and often directly below the issue isn't that const means constant and we're not following the rule the issue is the opposite is that let should represent something very specific which is this thing with will change and if we use const that enables us to use let in this way I think there's three types of variables to once again say there's three things there are actual constants there's constant references and there is variable references an actual constant is a value that never changes which in this case would be something like a string so if we had go back to the code like const server URL equals sure like that it pulled up from the package Json God super Maven so smart I think this is great there's other types of constants you can have too some of them were shown there like cost Brands we work with and here I would actually object. freeze this because we want to be sure this never changes but what if Brands might have things appended and removed but we never reassign it to something else at any point con Brands equals this ideally something like that so I have the constant Brands reference here where I clone this and now I have a new thing that I can modify do stuff to this to me indicates that I don't have to look for equals it's a constant reference this will always reference the same thing most of the time this will be changed via some function somewhere but it is a constant reference and I can't reassign it to something else to a different array I can change the array that it is pointing at but this is pointing at a thing I saw that there was a really good diagram here in the Josh W comeo post I was considering reading through this whole thing but work I'll link it in the description regardless because it is really good if we Define fruits with let and it's pointing here we're able to change what it points to I'm assuming he made these clickable yes we can change what fruits is pointing at because it's a let def definition but if it's const we can't change it it always points to this array that is a meaningful difference that is a different thing that should be treated as such the issue I have with this talk and about the hatred of let is that it's effectively pretending this doesn't exist it's pretending that there is no need for a constant reference to a thing which is saying that there's no need for traditional pointers inside of C++ if you told any C++ Dev no need for Star you can just star star or pointers are fake because you can change the value it points to you'd be laughed out of the room CU that's a funny thing to say would it make sense to call a pointer a constant in C++ no probably not I don't think the name is great but it's not a constant value it's a constant reference the thing it points at stays constant so if that thing is a you can't change the string if that thing's in Array you can make changes to the array but you can't change which array it points to this is a meaningful difference and I don't know why we pretend otherwise I think the solution here is very simple I think for actual constants we should do the thing that was recommended which is const use camel case I think camel case is a great solution when you want to have an actual constant that can't be changed if you want to use a constant reference which is pretty common const some variable just const way and if you want the variable itself to be able to change and be reassigned let some variable I think this convention makes code very readable makes things very clear yeah not camel case it's this screaming case right there's another term for that but yeah you get the idea all caps for actual constants some variable const without the all caps for constant references and then variable references let some variable go nuts with a let I'm not against let I just want to be very very clear about the differences between these things because I feel like we pretend part of this doesn't exist whenever we get into these debates and I am tired of pretending constant references don't exist because there's plenty of reasons that you'd want to point to something where the thing underneath can change without changing what it points to in the first place in fact most values are arguably that and this is again my issue I think variable references where reassignment is a thing let should be strongly indicative of that behavior and if you're using let everywhere you're making let meaningless and I like a world where let means something which is arguably the funniest irony of all of this is the people who are really pret and really anti-c const their argument is that con is meaningless but by pushing this argument they're making let meaningless instead I think let should have a meaning I'm actually very fond of let having a meaning and what I'm realizing now is I'm actually one of the bigger fans of let that's why I think we should use const the only reason you would say to never use con is because you don't actually respect let so let me know what you think in the comments cuz I'm sure this is going to be a spicy one and until next time peace nerds this just got linked in chat and I have to add it well it wasn't linked it was mentioned that dreambird has four kinds of variables there are four types of declarations constant constants can't be changed in any way so a const const can't be changed a const v can be where you can make changes to name so the variable can be changed but you can't reassign name variable constants can be reassigned but not edited so you can't pop or change the content of name like you can't make Luke different but you can reassign it to Lu but variable variables can be reassigned and edited this is kind of like how they work in JavaScript where you can change it in both ways and you can push and do all of the following too where things get way more fun is immutable data which obviously we want to make sure it's properly immutable mutable data is an anti pattern so if we use con con const keywords to make a constant constant constant its value will become constant and immutable and it will never change please be careful with this keyword is it is very powerful and it will affect all users globally Forever Wait they have emojis for variable definitions this might be my new favorite language what the is this perfect programming language is the description here I can confirm this is incredible so he said search class name for maximum compatibility with other languages you can alternatively use the class name keyword when making classes this makes things less complicated class names and dreambird keyword so you can't use that either instead you can use the HTML class name a tribute what the is this this is incredible it uses negative 1 based indexing some language arrays start at zero which could be unintuitive for beginners some start arrays at one which isn't representative of how the code actually works dreambird does The Best of Both Worlds arrays start at negative one this is incredible holy I'm in love oh

Channel: Theo - t3․gg

Views: 117,574

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: dqmtzHB2zTM

Length: 31min 49sec (1909 seconds)

Published: Sun May 19 2024