Javascript Review January 2025

Object shorthand logging

In a fast-faced situation like a DSA interview or on a tough day where you are having trouble sorting through your logs to the console, it can be helpful to do this instead:

console.log({someVal})
// someVal: 4

This technique quickly prints both the variable name and value of an object so you don’t need to write i manually, and can easily be used to spit out a bunch without getting confused:

console.log({name, address, phoneNum})

Nullish Coalescence vs Logical Or

Because mixing these up can break an entire program, I am constantly looking this one up.

0 ?? 'zero!'
// 0

0 || 'zero!'
// 'zero!'

Where ?? is known as the nullish coalescence operator and || is the logical OR operator, their names are the key.

Nullish coalescence evaluates to the righthand operand only when lefthand operand is null or undefined.

Logical OR on the other hand evaluates to the righthand operand in all falsy cases '', 0, [], false, null, undefined, trump's moral consciousness.

The name makes it easy to remember. Logical OR has to do with logic, true and false. In Javascript, any value that evaluates to false will trip a Logical OR.

Nullish Coalescence is more particular, and doesn’t really have to do with the logic of true or false. It’s only concerned with strict nullness.

Nullish coalescence can be really helpful when dealing with dynamic data or algorithms that may evaluate to 0 or empty arrays at some point.

String value returned by the in operator

It’s really tempting to use the in operator all the time as if it were the same as a for... loop in Javascript. But there’s a really important difference.

The for loop: for (let i = 0; i < something; i__) is dealing with integers. i is of type Number.

Whereas for (i in something (maddeningly) deals in strings. The i here is of type string.

Especially in typescript, this is a good enough reason to use the traditional for... loop whenever you are going to use indexes as indexes.

Deconstruction in loop headers and parameters

Deconstruction can be really helpful right in a loop:

for (const {first, last} of people){
	console.log(`Mr. ${last} is my father's name, you can call me ~~${first}~~ Muad'Dib`)
}

Or when iterating through an object in another way:

people.map(({first, last})=>{
	console.log("AYE BUB! YEH YOU")
}

And can also be useful when iterating through other data structures:

const moose = new Map()
moose.set('jo', 'McMoose')
[...moose].map(([key, value])=>console.log(key, value))
jo moo

Optional Chaining

I think everyone knows this yet still I often forget to use it when it could help me drop an if statement.

&& as a sort of optional execution

It can be helpful to know that something && go() often evaluates to if (something) go() for truthiness conditions. This is notably a common pattern for conditional rendering in react.

Just be careful of order - execution left of && ends up executing.

Loop-specific techniques

Usefulness of in as an expression

There is another type of in that is well-known to pythonistas but I rarely remember. It is less versatile than in python though.

It works for objects:

const nicknames = {
	aang: "twinkle toes",
	katara: "the painted lady",
	sokka: "captain boomerang"
}

console.log('aang' in nickames)
// true

And technically arrays, but only for index name so not really how I would want or expect personally:

const aminals = ['sqrl']
console.log('sqrl' in aminals)
// false

const aminals = ['sqrl']
console.log('0' in aminals)
true

const aminals = ['sqrl']
console.log('2' in aminals)
false

Throwback to while loops

for loops are still really useful, but sometimes while (i < something.length) will cut it when all you need is i as a number, no special conditions, and you trust yourself to remember adding i++ into your loop manually.

Handling index edge cases in for loops

The middle expression of for loops is more flexible than its everyday usage. More nuanced checks can help to add in bounds checking for more complex cases:

(let j = 0; j < 4 && i + j < s.length; j++)