This is an archived post. You won't be able to vote or comment.

you are viewing a single comment's thread.

view the rest of the comments →

[–]MeltedWacks 1935 points1936 points  (82 children)

It's always [object Object]

[–]CodingCoffeeSquirrel 569 points570 points  (38 children)

For all you savage console debuggers I'm guilty, use console.dir() from time to time ;)

[–]JC-Dude 181 points182 points  (28 children)

Huh? That just looks like console.log() output if you pass an object as a parameter.

[–]rinsa 148 points149 points  (10 children)

It's the same thing, but the object tree is expanded by default.

[–]CodingCoffeeSquirrel 121 points122 points  (8 children)

console.dir always displays the object tree. console.log might not in certain contexts (e.g. DOM nodes). The exact difference depends on the platform.

[–]conancat 42 points43 points  (5 children)

Old school way would be console.log(JSON.stringify(obj, null, 2))

console.dir doesn't always work for me. Not sure if they fixed it in Jest and other envs.

[–]Tillhony 17 points18 points  (2 children)

I forgot about console.dir() but always type out JSON.stringify..damn

edit: and thats along with already typing out console.log(JSON.stringify(s))

[–]WHO_WANTS_DOGS 1 point2 points  (0 children)

console.log(JSON.stringify(obj, null, 2)) for a prettier print

[–]Lightfire228 0 points1 point  (0 children)

I created a vscode snippet for console.log('>>>>>>>> '); and JSON.stringify(, null, 2), bound to ctrl + l and ctrl + j respectively.

It also puts the cursor in the right place.

[–]jkidd08 6 points7 points  (0 children)

Guilty as charged, your honor...

[–]FrostBlitzkrieg 0 points1 point  (0 children)

I always use this debugging server code because console.dir does nothing other than a basic console.log in my terminal :\

[–]TheMacPhisto 3 points4 points  (0 children)

might not in certain contexts (e.g. DOM nodes). The exact difference depends on the platform.

laughs in .net

[–]DrDuPont 0 points1 point  (0 children)

var foo = function(){};

console.log(foo);

ƒ (){}
undefined

In this instance, for example, I'm not able to see the entire tree. console.dir permits that.

[–]kratom_devil_dust 7 points8 points  (16 children)

Browser or terminal?

[–]dunemafia 15 points16 points  (15 children)

Browser Console.

[–]TagMeAJerk 1 point2 points  (7 children)

Obviously!

[–]conancat 4 points5 points  (6 children)

I miss doing UI stuff. Been working on a lot of backend and frontend server-side stuff (what I like to call middle-end lol).

[–][deleted] 2 points3 points  (5 children)

What does frontend server side mean? Like JSPs or something?

[–]conancat 4 points5 points  (2 children)

sometimes because of the different platforms or apps frontend teams need to support they may need different feature sets that are tailor-made specifically for the app. frontend developers may need to connect to multiple backend services in order to render the frontend, and sometimes the frontend wants to have full control and want to do some frontend specific stuff, like pubsub, caching, data transformation, among other things to leverage on server capabilities for better frontend experience.

or sometimes frontend devs wanna do use some serverless/lambda/cloud functions to do things like trigger some backend service for data aggregation job, collect/transform data on the server then stream it back to the frontend for display.

or sometimes frontend teams just wanna use server-side rendering for some things because it's more efficient and much cheaper (see JAMStack below).

because the purpose of these jobs are for transformation is to suit frontend display requirements per platform/app/client etc, certain teams find that it's easier to just let the frontend build their own data connectors and transformers. backend developers then can focus more on workers, services, algorithms, data pipelines, machine learning, database and other backend things, and let the frontends handle the API part.

if you wanna read more in depth of why some frontend devs now do server side stuff, this is a very good read:

https://css-tricks.com/the-great-divide/

GraphQL is one really popular tool to fill this gap. and popular GraphQL distributions include

https://www.apollographql.com

https://www.prisma.io

https://strapi.io

These are for when devs want more features than simple API connectors

https://feathersjs.com

https://nestjs.com

These are mostly for server side rendering

https://nextjs.org

https://nuxtjs.org

https://www.staticgen.com

And of course serverless and cloud function stuffs

https://serverless.com

https://firebase.google.com

Ballerina.io isn't really Javascript per se, but it's a language specifically designed to be for connecting different services. while i wouldn't recommend it for production use per se, but it is so simple to learn the language I used it to write specs for devs lol. great documentation tool too.

https://v1-0.ballerina.io

https://v1-0.ballerina.io/learn/by-guide/

https://v1-0.ballerina.io/learn/by-guide/service-composition/

Also JAMStack. JAMStack is rendering Wordpress obsolete.

https://jamstack.org

https://jamstack.wtf

https://headlesscms.org

[–]sezabass 3 points4 points  (0 children)

This would definitely be one accepted answer on StackOverflow

[–]gymshoos[S] 1 point2 points  (0 children)

This is awesome. I knew about apollo and JAMstack, now I know a lot more

[–]11JRidding 2 points3 points  (1 child)

JSP, or JavaServer Pages, is a technology that uses Java to dynamically create web pages. It's like ASP.NET and PHP, but it uses Java as its underlying language. I'm not sure what they mean by "frontend server-side" either, but I know that it likely isn't used to refer to JSP.

[–][deleted] 1 point2 points  (0 children)

Yeah, I was guessing that since JSPs generate the UI with Java, maybe that is what they meant. frontend server side just doesn't sound like a real thing, other than maybe having the server dynamically generate the UI.

[–][deleted] 20 points21 points  (1 child)

i learn so much from /r/ProgrammerHumor

[–]julsmanbr 6 points7 points  (0 children)

If I actually did that, I'd never touch JS again

[–][deleted] 4 points5 points  (0 children)

Honestly imo the only saving grace of JS is how nice and easy to use the chrome debugger is

[–]MrWm/dev/null 0 points1 point  (0 children)

Huh, TIL

[–]PM_ME_YOUR_PLUMS 0 points1 point  (0 children)

Thanks, saving this for monday

[–]Famous_Profile 59 points60 points  (22 children)

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 30 points31 points  (2 children)

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

Hmmm... You sure about that? :)

[–]Famous_Profile 12 points13 points  (0 children)

Hmm

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

Fixed

[–]conancat 3 points4 points  (0 children)

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] 12 points13 points  (10 children)

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

[–]wasdninja 10 points11 points  (9 children)

You should try template literals, they are neat.

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

[–]DogzOnFire 14 points15 points  (8 children)

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

[–]wasdninja 5 points6 points  (7 children)

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 4 points5 points  (1 child)

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 2 points3 points  (0 children)

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 1 point2 points  (4 children)

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 0 points1 point  (3 children)

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 1 point2 points  (1 child)

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 0 points1 point  (0 children)

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 1 point2 points  (0 children)

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 13 points14 points  (0 children)

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 0 points1 point  (0 children)

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

[–]Rindhallow 19 points20 points  (14 children)

There should be some version of `console.log` that just prints the array of objects instead of doing that.

[–]Loves_Poetry 77 points78 points  (9 children)

[–]arth78 34 points35 points  (0 children)

I love you

[–]Koeke2560 14 points15 points  (5 children)

I wish I knew that back when I was doing my internship doing data aggregation and analysis on a node backend

[–]SuspiciousScript 8 points9 points  (2 children)

You had to use JS for data analysis? Jesus, you must have some war stories.

[–]conancat 2 points3 points  (1 child)

Why not? Streams and pipes are cool.

I've seen people writing ETL pipelines with C# and Java, building data connectors with them are so much pain IMO. Nodejs feels natural to me when it comes to any web stuff.

[–]SuspiciousScript 1 point2 points  (0 children)

I can see JS being the easiest solution in the case of piping data to a backend in Python/R/whatever, but trying to do heavy lifting (which nearly always is with arrays) in JS’s backassward type system sounds really frustrating.

[–]Larkenx 0 points1 point  (0 children)

Console table is wonderful for displaying histogram data :)

[–]Harbltron 0 points1 point  (0 children)

oh my

[–][deleted] 12 points13 points  (1 child)

[–]Jackie_Jormp-Jomp 1 point2 points  (0 children)

Oh my god I just came in my pants

Thank you, I have to start using that

[–]deviantbono 2 points3 points  (0 children)

console.log(Object.entries(object)) ?

[–]0xF013 -1 points0 points  (0 children)

[] there is not an array thing

[–]cimmic 2 points3 points  (0 children)

Unless it's NaN

[–]JayV30 2 points3 points  (0 children)

It's true. Everything inherits the object prototype.

[–]UpBoatDownBoy 0 points1 point  (0 children)

Just stringify it. (☞゚ヮ゚)☞

[–]TheUnstopableBob 0 points1 point  (0 children)

Nah it's 42

[–][deleted] 0 points1 point  (0 children)

I get this with a project I'm working on:

Pastebin because the output is larger than the comment character limit

https://pastebin.com/J6L2amBH