DEV Community

8 Ridiculously Simple Javascript Tricks Not Taught on Tutorials

Vaibhav Namburi on May 07, 2020

I've been a little busy building cenario over the past few months and shining my coding skills again. During this period I remembered/learnt a lot...

Read full post

Amit Thakkar • Jun 1 '20

for validations, do explore object proxies.

developer.mozilla.org/en-US/docs/W...

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  }
};

const person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = 'young';    // Throws an exception
person.age = 300;        // Throws an exception

Vaibhav Namburi • Jun 2 '20

Proxies are not talked about enough!

Thanks for this!

Easton Altman • May 7 '20

Nice tricks!
But why did you put screenshots of code instead of blocks of code?

See markdown cheatsheet here.

I'll get back to this article in a few days and I'm sure I'll see at least one comment from an "experienced" developer about how this code is not readable and how junior developers should not try this.

That "experienced" developer is usually someone who has been working in the same company for the last 3 years, which is also probably the only company where he worked at.

That person is probably also very vocal about how amazing Java is and how horrible PHP is.

Vaibhav Namburi • May 7 '20

Hey mate!

Thanks for the comment, honestly I was just exploring different styles of writing this blog. If you have a chance of checking out the previous blogs I've used the markdown approach 😀

That's fair but I tried being very particular about those tricks, and ensuring these are just good practices as well as be "tricks" at the same time.

So lets hope someone like that isn't too unimpressed with this 😉

Thanks again, hope you have a fantastic day!

Jake Varness • May 7 '20

This decade-old engineer approves.

Ioannis Potouridis • May 7 '20 • Edited

In addition to 'Reallocating variables', object-like destructuring of arrays is a trick I don't see that often.

const people = [
  {
    age: 33,
    name: 'John',
  },
  {
    age: 29,
    name: 'Helen',
  },
];

const { 1: secondPerson } = people;

console.log(secondPerson); // prints { age: 29, name: 'Helen' }

Or to make it even more ridiculous, you may want to destructure just the age of the secondPerson, but also keep the secondPerson object as a whole.

const { 1: secondPerson, 1: { age: secondPersonsAge } } = people;

console.log({ secondPerson, secondPersonsAge });
// prints { secondPerson: { age: 29, name: 'Helen' }, secondPersonsAge: 29 }

Vaibhav Namburi • May 7 '20

Jesus Christ, at this point I would probably have just done it in a non destructured way haha.

Pretty neat though

Ilya Nevolin • May 7 '20

The correct name for your null checker is optional chaining. And beware, its not supported on mobile browsers and IE.

developer.mozilla.org/en-US/docs/W...

Vaibhav Namburi • May 7 '20

Using the Babel preset will be sufficient enough

Ilya Nevolin • May 7 '20

not everyone uses babel

Vaibhav Namburi • May 7 '20

Fair play - will update the article to reflect :)

Manuel Ojeda • May 7 '20

You can remove items from an array by using the filter function by giving the desire value comparing the difference

const array = [1, 2, 3, 4, 5]

// Let's remove 3
console.log(array.filter((item) => item !== 3))
// [1, 2, 4, 5]

Vaibhav Namburi • May 7 '20

Yeah but this is a O(n) complexity, array.length = whatever is O(1) :)

Unless we're talking about two different things ofc 😂

Madza • May 7 '20

I always have to look up slice vs splice, lol xdd

Vaibhav Namburi • May 7 '20

The one I almost always forget I'd the argument structure of reduce 🤣

Ngan B. Nguyen • May 7 '20

May I ask what's the difference between { date: objDate } = obj vs. objDate = obj.date?

Vaibhav Namburi • May 7 '20

Literally nothing, its just a pattern some people use. I try not to always do destructed reassignment because it looks "messy" but sometimes I inherit projects where destructuring is used across the project and to stay consistent i keep with this pattern