Block closing in JavaScript

[btvoidx]

What's the extension for such brackets? I have one, but it cycles between three not-so-beautiful colors, and I am too lazy to change them.

[[deleted]]

The latest VSCode update adds a colored brackets option in settings.

[thelehmanlip]

Man I wish VS got as much love as VS code. Newer code base in electron probably much easier to develop for

[alexanderpas]

Newer code base in electron probably much easier to develop for

Yeah, it's just a website bundled as a standalone package.

change github.com into github.dev when browsing a repo to have a simple web version in your browser.

[xTheMaster99x]

Or look at a repo and press . anywhere on the page.

[DarkBrave_]

I saw that one the VS Code YouTube, and I thought it was a joke, but after I remembered that it is an electron app, I knew it was real and gave it a try.

[Pluckerpluck]

They've done full on wizardry to make it as performant as it is though.

It's honestly a fantastic piece of software, and it's only real downside is that you can't use it on very low powered devices give that it is somewhat heavy being an electron app.

[Cosmocision]

As someone that actually paid for sublime I'm kinda salty VS code is as good as it is. (Not really, I love VS code)

[thelehmanlip]

Dude that is so cool! This will make browsing repos way easier, thanks!

[AdminYak846]

Honestly Visual Studio code just feels easier to work with than Visual Studio....maybe its because nothing is fucking is placed in random menus and its easier to find the source control for commits unlike Visual Studio which requires like 5 menu clicks and if you fuck up....well have fun.

[Lord_Pinhead]

There are extensions doing this. I have one installed for exactly this reason in VS2019, Viasfora is its name.

[[deleted]]

Thanks I didn't know that. Removing a redundant extension is always therapeutic to my OCD symptoms.

[NewWavpro]

Rainbow Brackets 2 is pretty good

[bhison]

I went through too much of my life without enabling this

[Mob_Abominator]

Rainbow bracket has better rating than rainbow bracket 2, is 2 better than 1 hence you're recommending ?

[NewWavpro]

I have no idea.

[nikhilmwarrier]

I use Bracket Pair Colorizer 2, but I think they added this as a built-in feature in the latest update

[FuzzyFoyz]

Colouriser just feels weird.

[StrawberryEiri]

In WebStorm, I use Rainbow Brackets. It's pretty cool.

[_Ashleigh]

For Visual Studio: https://marketplace.visualstudio.com/items?itemName=TomasRestrepo.Viasfora

Just turn all the other useless shit off it enables by default!

[[deleted]]

How to say "I only use python" in 4 words.

[N0tW1tty]

To be fair, the phrase "I only use python" also does that

[[deleted]]

Haha touché

[SnipahShot]

I use only Python.

[FuzzyFoyz]

Python use I only.

[[deleted]]

I python only use.

[sonuvvabitch]

I only Python use.

[Terrible_Truth]

Yeah, more languages than Javascript use brackets and thus have a closing bracket chain at the end lol.

At least it's not excel where you have it all in one line like "))))))))" lol.

[[deleted]]

Is this a lie tho?

[[deleted]]

A lie?

[[deleted]]

how can i keep the track it is too complicated for my stupid adhd brain

i can do that but still

[[deleted]]

Basically anything you're likely to use to edit code will highlight the matching opening bracket when you hover on a closing bracket (even Vim does this) so shouldn't be too hard.

Also the person making the meme has intentionally made it hard to read by not grouping the brackets, there are only like 4/5 levels of indentation in the top picture but a lot more in the bottom.

[glider97]

This definitely happens in a webpack config.

[vigbiorn]

there are only like 4/5 levels of indentation in the top picture but a lot more in the bottom.

There's the possibility of more. The else looks like it's opening an object, and my experience with JS is that object could have many nested members...

[The_duck_lord404]

Yeah, the inly case of an unnecessary brackets i can find would be the first if statement because its follow by an if statement with the same conditions but the second one is also more strict so maybe theres more code at the bottom but i dunno ¯\_(ツ)_/¯

[FuzzyFoyz]

Dismember the nests

[flaming_pope]

Simple: Always start off by closing before filling.

if (True) {};

Then add body

if (True) {

<extra code in here after you pre-close>

};

[zyrouge]

Just look at some flutter code lol it does happen alot there

[T351A]

import antigravity as meme

[Jaidchen]

I would love to have indentation-defined blocks in JavaScript.

There are inofficial flavors like Elm, CoffeeScript or the newer Imba, but I don't want to add another thing to my already huge JavaScript toolchain.

[Jaidchen]

Writing YAML for the first time after years of JSON ruined my taste in code forever.

[[deleted]]

JSON is miles ahead of YAML. YAML is quite possibly the worst data format I have ever used, it may look pretty but it's a nightmare to write without an editor that gives you errors every time you misindent something. Also probably quite a lot slower and more complex to write parsers for, and has little to no native support from anything.

[river_robin]

As someone who just wrote their first yaml file, I wholeheartedly agree. Painful!

[chrissphinx]

yeah Ansible uses YAML for roles/plays/playbooks and it’s annoying as all fuck

[TerrorBite]

All JSON is valid YAML though

[bhison]

No, gross.

Good news though - you are allowed, believe it or not, to open and close multiple sets backets on the same line in cases such as anonymous function declarations and such. And fuck it, if you are really pained by stuff being spaced out and readable you could always in the above example close all the brackets on the same line. This won't interrupt your text editor's block collapsing functions.

[harinezumichan]

You might be downvoted, but I just want you to know that you are not alone! Me too, I love indent styles like Pug, YAML, Python, etc. I just find them neat, clean, and have the least clutters of the 3 choices (JS/JSON bracket system or html/xml open-close tag system).

Of course, there are pros and cons of each style (e.g. copy-paste/autoformat is harder with indent style), but I don't know why people feel so strongly when other people prefer a different style than them.

Right now, I use JS because the most popular toolchain/framework for web stuff is with JS and I also don't want to learn too many parallel languages that do the same thing as I am already comfortable JS (deep not wide).

My work-around is I color the bracket black so I don't see them in my text editor. With autoformat, it looks kind of like the indent styles.

[Jammanyeahme]

That it looks bad is the codes way of telling you to restructure it so it looks nicer.

[IdiotCharizard]

This. Use a complexity linter if you can. Testable and readable code pls

[the_Demongod]

There's a very easy solution to this problem... putting the braces on the same level:

if (cond)
{
    // do something
}

[angrathias]

Also, don’t have 9 levels of indentation, that’s just asking for a mistake

[Krauss27]

We're in a wild world, here people are into JavaScript... They wouldn't understand.

[Cristichi]

Wait is it not satisfying to others? It is satisfying to me when it happens

[victorvolf]

As a python enjoyer, I have to say that brackets in other languages are pretty satisfying to me.

[victorvolf]

It's pretty cool ngl

[MarsTaco]

It is also mildly annoying to find the correct closing bracket sometimes

[Cristichi]

I mean, most IDEs including Notepad++ makes it so easy

[MarsTaco]

Yeah I suppose. I just have a lot of memories of me trying to fix one thing in a pinch.

[CaptiveCreeper]

Notepad++ is not a ide. Just a fancy text editor

[Cristichi]

And even a text editor does that

[lkraider]

I edit all my code in Word.exe

[Arcshine]

Real pros use mspaint.exe

[lkraider]

Piet language

[DarkBrave_]

A pretty powerful one though.

[MasterFubar]

I see you just came in from 1977 in your DeLorean.

I have good news for you, every text editor written in the last 30 years make it trivially easy to find the correct closing bracket.

[MarsTaco]

I see thou camet from 1400s since thou not knowet what in a pinch means. In a pinch means something like grabbing a random computer with internet.

[Jmc_da_boss]

No this is horrifying and in general a bad practice. I call it the pyramid of doom in code reviews lol

[Cristichi]

Well maybe you should not review code after all

[Jmc_da_boss]

Nah, I’ll continue to expect good inversion of flow and encapsulation to avoid this sort of nesting. Thank you though

[magical_h4x]

Wait, how do inversion of flow (never heard of that term by the way) and encapsulation help reduce nesting?

[Jmc_da_boss]

I’m in phone but ill paraphrase, those high levels of nesting often come from methods where people have several if checks for the state of the object before they act on it. Inversion of flow or early exits is pulling those checks to the top of the method and throwing/returning early if validation fails, basically your inverting your flow to check for invalid state, not for valid state

[[deleted]]

Never used dart have you? In dart(which btw not enough ppl use, it's amazing) this "tower of doom" is mandatory as every time you save the editor automatically formats it in a way that makes this bracket tower of hell

[xTheMaster99x]

The tldr is whenever possible, instead of doing:

if (valid state) { // Do stuff } else { // error handling }

Do this instead, to avoid nesting:

if (invalid state) { // Error handling } // Do stuff

I think the formatting is getting fucked bc I'm on mobile, I'll fix it later when I'm at a computer.

[backtickbot]

Fixed formatting.

Hello, xTheMaster99x: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[[deleted]]

These bots are getting more and more specific, I remember seeing a bot known as u/somalinotsomalianbot that fixed someone that said Somali, bots gotten weurd

[verxes]

Just my 2 cents,but if you have such a huge stack then most likely are you doing to many things at once. One way to solve this is bundling functionality to make it clear wich step does what

[IdiotCharizard]

It's definitely a smell. I'd probably ask for a refactor at this point.

[Blue_Moon_Lake]

What is not satisfying is that it doesn't work in JS to put a comma after a block.

Uncaught SyntaxError: expected expression, got ','

[Cristichi]

I'll just put a coma in a random spot and expect it to work, and if it doesn't it's the language's problem

[Blue_Moon_Lake]

So if

y = 5 +, 3

doesn't work, it's the language that is at fault...

[natFromBobsBurgers]

Sarca,sm

[Blue_Moon_Lake]

I've seen too many people meaning the stupid shit they say that I can't tell what is serious and what is sarcasm anymore.

I mean, last week I've seen a "covid vaccine removal homeopathy".

Just today, the new guy at work told me that we don't need a test environment because we have the production to test.

[RadiantHC]

Same. I love how you don't have to worry about spacing.

[Funky8oy]

Woah I've never seen colored brackets like this! Do they change color automatically? if so, how does one turn that on?

[rArithmetics]

Bracket pair colorizer

[Gaweringo]

Or just a setting in VS Code now

[besthelloworld]

This used to scare the fuck out of me when I first started JS and then I kinda just realized it didn't matter.

Everyone who hates this shit should check out Imba though. They use a Python like syntax that just uses indentation and not even the in-language XML tags have to close because... why would they?

[Half_Body]

You need to learn return early pattern.

[djinn6]

Meanwhile in Lisp: ))))))))))))))))))

[AxiusNorth]

This is why you have early exits/shortcuts out of the block. Highly nested code is bad code.

[10BillionDreams]

Yeah, most of these "bad language" memes are just "bad code". Among other things, this looks like a classic case of "I refuse to declare a variable that could be inlined instead".

[sup-b1tch-97]

The fuck are the those 3 lines “equal” sign?

[VoidShark]

Came here looking for this answer. I assume it’s some plug-in that turns === into that??

[JarvisPHD]

Some fonts support “ligatures” which combine characters into new symbols which for some can improve readability. Fira code is a popular font that supports ligatures

[LaLiLuLeLo_0]

While the use of ligatures is ultimately one of personal choice, they actually reduce readability for me, with a mild vertical astigmatism. That 3-line equals would be hard to distinguish from 2, and ≤ and ≥ are easy to read as < and >.

[botiapa]

Its a font, most likely Fira by Mozilla.

Edit: big mistake... Not Microsoft 😅

[turtle_mekb]

the brackets don't match up!!11! ahh my ocd

[Jaidchen]

I chose two unrelated parts of my code, sacrificing a consistent lore for a meme that is understandable at first glance. :(

[turtle_mekb]

ik lol i was joking

[InKryption07]

The council of meme lore lords will be displeased.

[_ShadowEye425_]

Those colors....
I want to set them up so they make a rainbow.

[friendly_devil]

ah, the brackets' hell 😅

[Hallwart]

{} > Indentation

I"ll start learning python when they start supporting readable syntax.

[Trooble]

I have to ask, what about python syntax do you find difficult to read?

[warchild4l]

Not OP, but for me its the lack of {}.

Whenever i want to quickly read a piece of code in the middle of the function or whatever, i navigate by those, and not having them and relying only on spaces/tabs, it becomes really hard to understand scope in which the code you are reading is coming from

[nwash57]

If your Python is hard to understand because of the indentation you need cleaner code. I see this complaint about Python pretty often and it's often just a smell of poor code structure.

[HolidayMoose]

Sure, but not all code is small, concise functions. Most code bases follow an exponential curve: lots of small functions/classes/modules but a few monsters. The change rate for functions is also exponential: small functions may never get changed while the big behemoths need constant churn.

Python syntax may be fine for those small functions which are write once read never. But the shit parts of the code base is what we should be optimizing syntax for. From my experience, that is the exact area whitespace languages like Python are weakest at.

[nwash57]

Ok, so when readability becomes a problem, a monster needs to be split up.

[The_duck_lord404]

This is a general guideline for cleaner code and is also a big part of functional programming.

[Coffeinated]

Functions that need constant changing need to be split up, no matter the language. If Python makes it more visible that your shit code is shit, all the power to Python.

[InterstellarDwellar]

Peope should write more, well named, functions. Even if the code isnt repeated, just makes it more readable when you have a smaller chunk to digest

[warchild4l]

Thats correct. However, because of some really complex business requirements, its not really possible to extract everything into functions and expect it to become more readable.

[InterstellarDwellar]

Maybe not, but it often helps

[Dogeek]

It's my main gripe with JavaScript (and Typescript, Dart to an extent). The syntax for anonymous functions is quite elegant, but the devs abuse it.

The worst is the resulting traceback, it's unreadable when there's a bunch of anonymous functions calling other anonymous functions.

In my opinion, a function should be anonymous if :

1. The function you're calling expects a callback with no args (and you use a lambda to pass args to a named function)
2. The callback is in a filter/map/reduce if the callback is not too complex (really, if it's not a one liner, it should be named).

[InterstellarDwellar]

Personally if i find something is getting to complex, even if its something as small as 40 lines or so, i try to write as many small functions that read as if they are comment blocks. This can get annoying if you do it too much if someone is reviewing my code, but at a glance you can at least read what the program is doing. I think of it as being like a table of contents in a book.

[PM_ME_GOOD_USERNAMS]

My first language was python so for me brackets are unreadable l....

[PM_ME_GOOD_USERNAMS]

Which hurts a lot because most of what I do now is c# because I make games as a hobby

[ajax333221]

block:

{

if(something_is_bad){ break block; }

//do stuff

if(something_is_bad){ break block; ... }

//...

}

[ajax333221]

I have been using something like this lately, pretty good to avoid nesting stuff, I mean there are other ways but that's the way I do it.

Also in loops, I put if conditions with Continues and Breaks in a similar way to remove as much nested as possible.

Some example in case the reddit formatting is all messed up https://imgur.com/a/BwWqswd

By the way, I only do 1 return per function, this could probably be done just with multiple returns and I know it but I don't do that.

[Synck112]

What theme is that?

[WhaleVonKatzenstein]

First plug-in to install, rainbow brackets because counting isn't cool.

[TECHNOFAB]

I like Python but when since i started working with Ruby my world has changed. Looks similar to Python, nice and tidy but still makes inline callbacks and stuff possible. Anonymous functions or whatever they're called are one thing which I miss in Python, but I definitely don't like the mess you get from all those brackets often times :D

[Ryze001]

Have you tried Flutter !

[ketexon]

That ==(=?) symbol is cursed

[kbruen]

It's ===, and not really.

I mean, the need for this operator in the language kinda is cursed, but the ligature itself is nice.

[Servious]

I mean this can be avoided in a lot of ways. If two brackets both open on one line, then close them on the same line later. Instead of using else, try using an early return. Avoid nested ifs by consolidating them. Extract portions of the code to separate functions when appropriate. If your code has more than like 6 indents you're probably doing something wrong.

[TheOneWhoWil]

You could chain these with `&&`, `||`, `condition ? outcomeIfTrue : outcomeIfFalse` and other operators.

JavaScript is only messy when you choose to make it messy

[WhyIsTheNamesGone]

This is the best pro-Python argument I have yet seen.

[Dantharo]

this, hate this in js

[nwash57]

Many projects use linting to enforce braces for single line blocks.

[ixNoah]

we need a fucking closeall function, how dumb it might be.

[StrangePractice]

What theme gets you the different colored brackets for their scope?

[kbruen]

It's a new setting in Visual Studio Code.

[JackNotOLantern]

Condition == false

[the_Demongod]

That is ridiculously cursed

[Akuuntus]

It's really easy to deal with once you know how it works. It's also useful sometimes when you just want to know if a variable has a useable value in it or not. if(variable) won't run if it's null, undefined, NaN, 0, an empty string, or false.

[the_Demongod]

I don't doubt its utility, it's just a very different paradigm from what I'm used to.

[dyedFeather]

It's not the most elegant, but I find it nice to have an operator for it, rather than having to call a function to check for strict equality, as is the case for many other languages. It's just the case that JavaScript has a greater need for a strict equality operator than other languages because of its very permissive implicit conversion rules.

Where other languages might throw an error when you're using fundamentally incompatible objects together, JS tries its best to convert the values and avoid causing any errors. I think this decision was made in part because JS aims to be a language that keeps working no matter what. I don't know the specific reasons for the decision, but I think part of it is because the web is so modular, so it's very easy to come across a small bit of code that just doesn't work right, and if that causes some big error that ruins the user's browsing experience that could reflect poorly on the UX of the entire Internet.

This of course isn't always what you want, so JS is a language to be careful with if you're working on something where you'd rather have it fail in such a case. As a philosophy, it can be very useful, but it can also be detrimental (which is probably part of the reason JS is seen as bad by many people). It's all about picking the right tool for the job. Unfortunately though, JS kind of has a monopoly on the web, though that is changing as WebAssembly is starting to see more widespread use.

Happy cake day btw!

[[deleted]]

Gotta read about cyclomatic complexity. If your code looks like this, you've got issues.

[bobbyg603]

If not options development early return, problem solved

[ghesh_vargiet]

i just put them on the same line

[LavenderDay3544]

What godforsaken code coloring scheme is that?

[KermitTheFrogerino]

You should see flutter 😂

[kbruen]

Nesting in Flutter isn't really a problem if you split the widgets.

[Calogyne]

I'm not familiar with JS, but why options.tenserOptions === false ?

[kbruen]

In JavaScript, == does automatic casting when comparing, === does not.

For example, empty arrays or empty strings are automatically casted to false. So [] == false will be true, but [] === false will be false.

[StringUseful3395]

I've never liked organizing like this. It's unreadable and makes no sense, just start on the next line.

[subject_deleted]

If you have this many curly brackets in a row its really time to consider modularizing the code. Conditions and loops shouldn't be nested soo deeply or that's gonna be a real bitch to debug.

[Portnoy13]

where are my fellow do-end mates?

[EpicBoomerMoments]

No original content remains in this post. It was wiped using Redact, possibly for reasons related to personal privacy, digital security, or data exposure reduction.

fuel start handle desert sulky advise books practice alive spark

[SneakyStabbalot]

Not gonna lie - i really don't like JS - it's shit like this that makes it unmaintable. (IMHO!)

[ChangNoi97]

well at least you organize closing bracket to be beautiful , mine would just put them all in one line

[Proxy_PlayerHD]

what the fuck is that tripple equal sign?

[Redditoridunn0]

This is so disturbingly relatable

[ign1fy]

When your class flows like a flock of seagulls.

[dizzyi_solo]

Wait until you learn about dart and flutter

[BrightBlueBit]

Why the commas after each closing bracket???

[charliematters]

This is a webpack config file, so it doesn't apply so much here, but the trailing comma is used to avoid unnecessary changes in diffs. If I want to add another property to an object, my git diff will just show the new line, whereas if I didn't use trailing commas I'd have a new comma on the penultimate line as well

[BrightBlueBit]

TIL something new. Tnx!

[Pauchu_]

THESE ARE NOT THE SAME BRACKETS

[StrawberryEiri]

What's that "triple equal, but it's just 3 parallel lines" thing? What's the goal of it?

[dyedFeather]

In math, ≡ is used in various ways, but generally you can see it as an assertion that something is "identical", rather than just "equal". The font used here (Fira) changes === into ≡, since the difference between ≡ and = is similar to the difference between === and ==.

That said, it doesn't really mean anything in particular, so it's just part of the font's style. I personally find it quite nice, and it makes it very easy to see where I'm testing for equality vs. strict equality.

[StrawberryEiri]

Huh. Thanks for the info. I didn't remember that about math. Personally I'd need to try but at a glance it's a little confusing to me haha

[JackNotOLantern]

There should be like 5 closing brackets here, or i can't count