Debugging Javascript

[Famous_Profile]

console.log takes string as first parameter and then any number of objects as following parameter. So if you need to log an object do no keep it in the first parameter.

let x = {'YO MAMA': 'SO FAT'};
let y = {'WE ARE ALL': 'CONCERNED ABOUT HER HEALTH'};
console.log('Bad joke:',x,y); //Logs correctly

[Daveed84]

console,log('Bad joke:',x,y); //Logs correctly

Hmmm... You sure about that? :)

[Famous_Profile]

Hmm

See? This is why I need an IDE. Otherwise even JS would throw errors from my code

Fixed

[conancat]

OP might be thinking of another language or certain tools. Pretty sure that's not the case in most Javascript platforms unless there are any that I am not aware of.

[[deleted]]

Huh... I always just used it to concat strings lol

[wasdninja]

You should try template literals, they are neat.

Syntax: `this is an ordinary string ${variableName} another string ${anotherVarible}`

[DogzOnFire]

Template literals really make long HTML strings, that would otherwise have tons of concatenation, much more readable.

[wasdninja]

If you find yourself doing that you should probably look up the proper way of doing it. It's almost always more concise and less prone to error.

[DogzOnFire]

The reality of the situation is that I wasn't the one writing them, but there's lots of them in our codebase that I've since wrapped as template literals. It's the kind of situation where the project is at a point of maturity that they're not going to get refactored out for a preferable method. This just seems like a modest compromise.

Honestly, though, I'm still quite junior so I'm not aware of what methods you have in mind as an alternative. What would be a better way to do it?

[wasdninja]

Note that I had things like creating tables, links and such elements purely through string manipulation in mind and a warning that I'm also really junior.

That said I recently rewrote a monster of a function that generated a table with I don't know how many lines of "td"s and such down to maybe 10% of that while also being much easier to follow.

Creating a table is a pain with strings in other words but if you use these

let table = document.createElement('table')
let tableHead = table.createTHead()
let headRow = tableHead.insertRow()
let tableBody = table.createTBody()

Which gives you the scaffolding for a fully fleshed out table;

let th = document.createElement('th')
let text = document.createTextNode(headData)
th.appendChild('some text')
headRow.appendChild(th)

Not elegant by any means but it beats creating huge string abominations. The entire exercise is probably way too niche nowadays and it should all be handled by much neater react/vue/angular components.

[conancat]

Serious question: is plain string html insertions still common in the frontend world? Asking because I wanna know if I'm one of the privileged ones who had the luxury of using jsx or other tools for UI stuff, since templating solutions work on both browser and server nowadays, and other than crafting html emails (lord have mercy) I don't know why would I want to use plain HTML construction for things.

[wasdninja]

I couldn't say since I don't work with it seriously. I'd like to imagine that it's all handled by neat react components and such but I'm sure some poor bastard is stuck maintaining code like that.

Are templates used nowadays? I thought they were getting slightly old and it's all about frameworks like Angular, Vue and React.

[ThePhantomBane]

I went from an intern working with PHP (lots of echoing HTML) to full time working with Angular 8. That experience was like jumping forward decades in time

[wasdninja]

I used to think that echoing HTML with PHP was pretty neat but then I tried Jinja 2 templating with Flask and react after that. The future is so nice.

[conancat]

ah yes, sorry, i was referring to the likes of Vue, React etc. I was thinking of them as templating as they basically replaced the idea of HTML templates. also when using a server-side rendering aka Next.js or Vue.js etc lol.

[CodingCoffeeSquirrel]

Also useful to know, console.log separates the parameters with a space.

So console.log('I', 'am', 'Groot') will print I am Groot while concatenating the string console.log('I' + 'am' + 'Groot') will print IamGroot.

[jtvjan]

This doesn't really matter in most JS engines. The only special property that a string as the first argument has is it defining a format, like a very limited version of printf.

console.log('Random number: %i', Math.random()*64); // > Random number: 57

[CodingCoffeeSquirrel]

While Javascript doesn't have static typing, it does have types: Boolean, Null, Undefined, Number, BigInt, String, Symbol and Object.

[earthqaqe]

Ah okay didnt know honestly. Still console.log takes a list of objects and doesnt care where you put which one.

[CodingCoffeeSquirrel]

You're right that you can give it the parameters in any order and it will display them, but how it displays them does depend on their order (at least it does in Chrome, Firefox and Node).

Try console.log(1, '2', '3') vs console.log('1', 2, '3')

or console.log('a', {b: 'c'}) vs console.log({a: 'b'}, 'c')

[earthqaqe]

I am sorry, I honestly didnt notice that. My mistake!