Sung M. Kim

Posted on Sep 4, 2018

What's wrong with this code?

#fun #javascript #nonsense

Photo by Caroline Attwood on Unsplash.

What's wrong with this code?

Can you find the logical error?
(⚠️ As the tag shows, it's a non-sensical/fun question)


const { flour, eggs, turkey } = groceries

Answer

.
.
.
.
.
.
.
.

You can't cook ingredients (as they are constant thus can't cook them) and have to eat'em raw 😛.

Background Story.

I was chatting with other developers and wanted to make sure if he understood JavaScript Object Destructuring concept correctly.

let { flour, eggs, turkey } = groceries

Someone suggested const instead of let promoting a better coding style.

And the first thing popped in my mind was that you can't eat a raw 🦃.

👋 Parting Words

Hope it funny enough 😎.

Latest comments (24)

Joe Zack • Sep 27 '18 • Edited

Came for the fun, stayed for the conversation. Love all the comments!

Sung M. Kim • Sep 27 '18

Yupz, it's awesome how you learn from different perspectives and finding out faults so we could all learn 😀

Adam Crockett 🌀 • Sep 5 '18 • Edited

Oh another thing, your destructuring references could be alphabetical.

Adam Crockett 🌀 • Sep 5 '18

🤣

Tobias SN • Sep 5 '18

You forgot a semicolon at the end.

Sung M. Kim • Sep 5 '18 • Edited

I've been waiting for someone to point that out as well 🤣

Sung M. Kim • Sep 5 '18 • Edited

Thanks Nick.

After reading your comment, I dug around and found this StackOverflow answer, which also explained using an example.

I wasn't aware that nested object could be modified even after being frozen.

Dave Cridland • Sep 4 '18

const. I hate const in Javascript, because it's not const at all - but final. In Kotlin, this'd be val instead of var - but even then, this is a fixed binding, and not an invariant.

So you can cook the turkey, for sure, you just can't change which turkey you're cooking.

In C++, on the other hand, const Turkey turkey means an invariant Turkey. const Turkey * turkey means a pointer to a constant Turkey. In either case, you couldn't call Turkey::cook(), but you could call Turkey::price() const, since that's a const method. But in the latter case, you could assign (or "rebind") turkey to point at a different instance. To prevent that, we can say const Turkey * const turkey, which is getting to be a mouthful. C++ also has references, which are non-rebindable pointers with easier syntax: const Turkey & turkey is equivalent to that last double-const pointer example.

Sung M. Kim • Sep 5 '18

All these headaches might be a good reason to learn Functional Programming... 🤔

Roger K. • Sep 5 '18

And now I'm reminded why I prefer to code in Python or JS. Listening to the C++ version hurts my brain. A fragile Front-End guy and I'm thankful to not be doing C++

JavaScript Joel • Sep 4 '18 • Edited

The reason to use const instead of let is because you want your code to be immutable. (just a note, const doesn't make object immutable, you have to freeze).

So how do you eat your groceries while being immutable?

Try to view immutable code as code with the added dimension of TIME!

// the past
const { flour, eggs, turkey } = groceries

// the present
const cookedEggs = cookEggs(eggs)

// the future
const cookTurkey = turkey => ({ ...turkey, cooked: true })

At any moment in our application we can go back and look at what the state was before.

So imagine at 12:00 you had raw turkey. then at 12:30 you had cooked turkey. This is how immutable code works.

With mutable code, you know you have cooked turkey, but your past is invisible to you. You can never look at a previous state.

Adarsh • Sep 5 '18

@joelnet I still don't need cookTurkey instead I can do turkey.cooked = true and so it doesn't matter whether I use const or let if my code is written keeping immutability in mind.

JavaScript Joel • Sep 5 '18

that is kind of why I mentioned '(just a note, const doesn't make object immutable, you have to freeze)' was to distinguish between const and immutable.

If you want a primitive value to be immutable, const is enough. If you want an object to be immutable, you have to freeze it as well.

So if we can assume groceries is immutable (which is should be).

const deepFreeze = require('deep-freeze')

const grocieries = deepFreeze({
  flour: {
    cooked: false
  },
  turkey: {
    cooked: false
  },
  eggs: {
    cooked: false
  }
})

Then your groceries will truly be immutable

const { turkey } = grocieries
turkey.cooked = true
//=> turkey({ cooked: false })

Adarsh • Sep 5 '18

Sorry. Misunderstood as the freeze wasn't mentioned in the previous code. Thanks for clearing it up! :)

Kushan Joshi • Sep 5 '18

const is a good practice, but you even continue using let with immutable code. Sometimes it’s easier and more readable to use let for an immutable object, to which you are going to apply transforms.

JavaScript Joel • Sep 5 '18

sure.

i just try my best to make everything immutable and handle mutable state separately, like in a redux store.

Sung M. Kim • Sep 5 '18

Thanks joelnet for following up with technical aspect of the code and the implication of using const.

Adrian B.G. • Sep 4 '18

Not really, the "turkey" is a pointer to the turkey instance/value, so even if the turkey changes its state, the turkey pointer will remain constant, pointing to the same turkey.

Sung M. Kim • Sep 4 '18

I had this imagination that, the 🦃 looks the same on the outside but cooked on the inside 😃.

Adam Crockett 🌀 • Sep 5 '18

Still not edible, take it back for a re-rest 😂

dukemai • Sep 4 '18

haha, it sounds reasonable :D

Adam Crockett 🌀 • Sep 4 '18

This is an interesting point. What if some of the groceries where constant, such as the old tins you'll have in your cupboard for years. Seriously though, you can only have all constant or all let.

Sung M. Kim • Sep 4 '18

Thanks Adam, you are right, I've realized that the syntax is for all || nothing

View full discussion (26 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

DEV Community

What's wrong with this code?

What's wrong with this code?

Answer

Background Story.

👋 Parting Words

Latest comments (24)

Read next

Node.js 20.6 adds built-in support for .env files

10 JavaScript Sites Every Web Developer Should Know

✨ AI Fairytale generator

Essential React js Shorthand Techniques