Tari Ibaba

Tari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.

Resolve a promise from outside in JavaScript: practical use cases

It’s one of those “cool” things you can do in JavaScript that are actually immensely powerful when put to good use.

JavaScript
let promiseResolve; let promiseReject; const promise = new Promise((resolve, reject) => { promiseResolve = resolve; promiseReject = reject; }); promiseResolve();

Powerful practical use cases

Action B waiting for action A

A is ongoing but the user wants to do B but A needs to happen first.

Example: Social app where users can create, save, and publish posts. Like Medium.

HTML
<p> Save status: <b><span id="save-status">Not saved</span></b> </p> <p> Publish status: <b><span id="publish-status">Not published</span></b> </p> <button id="save">Save</button> <button id="publish">Publish</button>
A simple app where users can create, save and publish posts.
Publish doesn’t happen until after save.

What if the user wants to publish the post when it’s saving?

Solution: Ensure the post is saved before publishing happens.

JavaScript
saveButton.onclick = () => { save(); }; publishButton.onclick = async () => { await publish(); }; let saveResolve; let hasSaved = false; async function save() { hasSaved = false; saveStatus.textContent = 'Saving...'; // ✅ Resolve promise from outside await makeSaveRequest(); saveResolve(); hasSaved = true; saveStatus.textContent = 'Saved'; } async function waitForSave() { if (!hasSaved) { await new Promise((resolve) => { saveResolve = resolve; }); } } async function publish() { publishStatus.textContent = 'Waiting for save...'; await waitForSave(); publishStatus.textContent = 'Published'; return; }
Post is saved before publish happens.

It gets even better when you abstract this logic into a kind of Deferred class:

JavaScript
class Deferred { constructor() { this.promise = new Promise((resolve, reject) => { this.reject = reject; this.resolve = resolve; }); } } const deferred = new Deferred(); // Resolve from outside deferred.resolve();

Refactoring✅:

JavaScript
// ... const deferredSave = new Deferred(); let hasSaved = false; async function save() { hasSaved = false; saveStatus.textContent = 'Saving...'; // ✅ Resolve promise from outside await makeSaveRequest(); saveResolve(); hasSaved = true; saveStatus.textContent = 'Saved'; } async function waitForSave() { if (!hasSaved) await deferredSave.promise; } async function publish() { // ... }

And it works exactly like before:

The functionality works as before after the refactor.

Deferred is much cleaner, which is why we’ve got tons of NPM libraries like it: ts-deferred, deferred, promise-deferred

Promisifying an event stream

It’s a great setup I’ve used multiple times.

Doing an async task that’s actually waiting for an event stream to fire, internally:

JavaScript
// data-fetcher.js const deferred = new Deferred(); let dataDeferred; function startListening() { dataDeferred = new Deferred(); eventStream.on('data', (data) => { dataDeferred.resolve(data); }); } async function getData() { return await dataDeferred.promise; } class Deferred { constructor() { this.promise = new Promise((resolve, reject) => { this.reject = reject; this.resolve = resolve; }); } } // client.js const { startListening, getData } = require('./data-fetcher.js'); startListening(); const data = await getData();

Final thoughts

Resolving promises externally unlocks powerful patterns.

From user actions to event streams, it keeps your code clean and flexible. Consider libraries like ts-deferred for even better handling.

The 5 most transformative JavaScript features from ES9

JavaScript has come a long way in the past 10 years with brand new feature upgrades in each one.

Let’s look at the 5 most significant features that arrived in ES9; and see the ones you missed.

1. Async generation and iteration

Async generators was a powerful one from ES9.

Just like normal generators but now it pops out the values after asynchronous work like a network request or something:

JavaScript
function* asyncGenerator() { yield new Promise((resolve) => setTimeout(() => resolve('done this ✅'), 2000) ); yield new Promise((resolve) => setTimeout(() => resolve('done that ✅'), 3000) ); }

So when we call .next() we’ll get a Promise:

JavaScript
const asyncGen = asyncGenerator(); asyncGen.next().value.then(console.log); asyncGen.next().value.then(console.log);

It’s such a powerful tool for streaming data in web app in a structured + readable manner — just look at this function that buffers and streams data for a video-sharing app like YouTube:

JavaScript
async function* streamVideo({ id }) { let endOfVideo = false; const downloadChunk = async (sizeInBytes) => { const response = await fetch( `api.example.com/videos/${id}` ); const { chunk, done } = await response.json(); if (done) endOfVideo = true; return chunk; }; while (!endOfVideo) { const bufferSize = 500 * 1024 * 1024; yield await downloadChunk(bufferSize); } }

And now to consume this generator we’ll use for await of — async iteration:

JavaScript
for await (const chunk of streamVideo({ id: 2341 })) { // process video chunk }

I wonder if the actual YouTube JavaScript code uses generators like this?

2. Rest / spread operator

No doubt you’ve stumbled upon the modern spread syntax somewhere.

A genius way to rapidly and immutable clone arrays:

JavaScript
const colors = ['🔴', '🔵', '🟡']; console.log([...colors, '🟢']); // [ '🔴', '🔵', '🟡', '🟢' ]

We never had it before ES9, and now it’s all over the place.

Redux is big one:

JavaScript
export default function userState(state = initialUserState, action){ console.log(arr); switch (action.type){ case ADD_ITEM : return { ...state, arr:[...state.arr, action.newItem] } default:return state } }

And it works for objects too:

JavaScript
const info = { name: 'Coding Beauty', site: 'wp.codingbeautydev.com', }; console.log({ ...info, theme: '🔵' }); // { name: 'Coding Beauty', // site: 'wp.codingbeautydev.com', // theme: '🔵' }

Overrides props:

JavaScript
const langs = { j: 'java', c: 'c++', }; console.log({ ...langs, j: 'javascript ' }); // { j: 'javascript ', c: 'c++' }

This makes it especially great for building upon default values, especially when making a public utility.

Or customizing a default theme like I did with Material UI:

With the spread syntax you can even scoop out an object’s copy without properties you don’t want.

JavaScript
const colors = {   yellow: '🟡',   blue: '🔵',   red: '🔴', }; const { yellow, ...withoutYellow } = colors; console.log(withoutYellow); // { blue: '🔵', red: '🔴' }

That’s how you remove properties from an object immutably.

3. String.raw

When I use String.raw I’m saying: Just give me what I give you. Don’t process anything.

Leave those escape characters alone:

JavaScript
// For some weird reason you can use it without brackets // like this 👇 const message = String.raw`\n is for newline and \t is for tab`; console.log(message); // \n is for newline and \t is for tab

No more escaping backslashes:

JavaScript
const filePath = 'C:\\Code\\JavaScript\\tests\\index.js'; console.log(`The file path is ${filePath}`); // The file path is C:\Code\JavaScript\tests\index.js

We can write:

JavaScript
const filePath = String.raw`C:\Code\JavaScript\tests\index.js`; console.log(`The file path is ${filePath}`); // The file path is C:\Code\JavaScript\tests\index.js

Perfect for writing regexes with a stupid amount of these backslashes:

Something like this but much worse:

From this✅:

JavaScript
const patternString = 'The (\\w+) is (\\d+)'; const pattern = new RegExp(patternString); const message = 'The number is 100'; console.log(pattern.exec(message)); // ['The number is 100', 'number', '100']

To this✅:

JavaScript
const patternString = String.raw`The (\w+) is (\d+)`; const pattern = new RegExp(patternString); const message = 'The number is 100'; console.log(pattern.exec(message)); // ['The number is 100', 'number', '100']

So “raw” as in unprocessed.

That’s why we have String.raw() but no String.cooked().

4. Sophisticated regex features

And speaking of regexes ES9 didn’t disappoint.

It came fully loaded with state-of-the-art regex features for advanced string searching and replacing.

Look-behind assertions

This was a new feature to make sure that only a certain pattern comes before what you’re searching for:

  • Positive look-behind: Whitelist ?<=pattern
  • Negative look-behind: Blacklist ?<!pattern
JavaScript
const str = "It's just $5, and I have €20 and £50"; // Only match number sequence if $ comes first const regexPos = /(?<=\$)\d+/g; console.log(str.match(regexPos)); // ['5'] const regexNeg = /(?<!\$)(\d+)/g; // ['20', '50' ] console.log(str.match(regexNeg));

Named capture groups

Capture groups has always been one of the most invaluable regex features for transforming strings in complex ways.

JavaScript
const str = 'The cat sat on a map'; // $1 -> [a-z] // $2 -> a // $3 -> t // () indicates group str.replace(/([a-z])(a)(t)/g, '$1*$3'); // -> The c*t s*t on a map

So normally the groups go by their relative position in the regex: 1, 2, 3…

But this made understanding and changing those stupidly long regexes much harder.

So ES9 solved this with ?<name> to name capture groups:

JavaScript
const str = 'The cat sat on a map'; // left & right console.log(str.replace(/(?<left>[a-z])(a)(?<right>t)/g, '$<left>*$<right>')); // -> The c*t s*t on a map

You know how when things break in VS Code, you can quickly Alt + Click to go to the exact point where it happened? 👇

VS Code uses capture groups to make the filenames clickable and make this rapid navigation possible.

I’d say it’s something like this:

JavaScript
// The stupidly long regex const regex = /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/gi; // ✅ String.raw! const filePoint = String.raw`C:\coding-beauty\coding-beauty-javascript\index.js:3:5`; const extractor = /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/i; const [path, lineStr, charStr] = filePoint .match(regex)[0] .match(extractor) .slice(1, 4); const line = Number(lineStr); const char = Number(charStr); console.log({ path, line, char }); // Replace all filePoint with <button> tag // <button onclick="navigateWithButtonFilepointInnerText">{filePoint}</button>

5. Promise.finally

Finally we have Promise.finally 😉.

You know how finally always run some code whether errors are there or not?

JavaScript
function startBodyBuilding() { if (Math.random() > 0.5) { throw new Error("I'm tired😫"); } console.log('Off to the gym 👟💪'); } try { startBodyBuilding(); } catch { console.log('Stopped excuse🛑'); } finally { console.log("I'm going!🏃"); }

So Promise.finally is just like that but for async tasks:

JavaScript
async function startBodyBuilding() { await think(); if (Math.random() > 0.5) { throw new Error("I'm tired😫"); } console.log('Off to the gym 👟💪'); } startBodyBuilding() .then(() => { console.log('Started ✅'); }) .catch(() => { console.log('No excuses'); }) .finally(() => { console.log("I'm going!🏃"); });

The biggest pro of Promise.finally() is when you’re chaining lots of Promises:

It also works well with Promise chains:

JavaScript
getFruitApiUrl().then((url) => { return fetch(url) .then((res) => res.json()) .then((data) => { fruits.push(data); }) .catch((err) => { console.error(err); }) .finally(() => { console.log(fruits); }); });

Brought forth by ES9.

Final thoughts

ES9 marked a significant leap forward for JavaScript with several features that have become essential for modern development.

Empowering you to write cleaner code with greater conciseness, expressiveness, and clarity.

I found a massive remote job site for software developers ($300K+ per year)

Job searching with sites like LinkedIn and Indeed can be really frustrating, especially if you’re self-taught, just out of college, or spent months looking for work.

Especially if you’re self-taught or you don’t have much “professional” experience.

Luckily today we’ll dive deep into Wellfound (formerly AngelList), a powerful way to get freelance and full-time jobs without much work experience quickly.

A way others have used and found massive success:

With Wellfound you gain access to tens of thousands of remote jobs from the world’s hottest startups.

Rising startups are much more willing to hire you than the huge, well-established FAANG companies. You’ll get to have a significant impact on the company at the critical formative stages.

And don’t think this means they pay low. Many of them pay from $100k to $220k and above — Some as high as $300K.

They’re swimming in investor money and expanding quickly, which means they need as many hands as they can get.

Their rapid growth also means you stand to gain a lot with their lucrative stock options.

How to apply for remote jobs at Wellfound

Once you go to wellfound.com/remote you’ll see a massive number of well-paying remote tech & startup jobs.

Right now you can see they’re almost 50,000 jobs! Not enough people to fill them — something I heard is pretty common for tech jobs.

Serious opportunity here…

Look how detailed the information is for each job; Here we have GitLab a powerful GitHub alternative.

We see they have 3 juicy jobs all over $150,000, their actively hiring, they’re wildly acclaimed, they’ve got strong financial backing, and a great work-life balance.

That’s a lot of information in one go.

You can use the right side pane to narrow down your search to specific roles like the full-stack engineer role, for full-stack web developers.

Look it’s Calm, a wildly popular meditation and sleep app with over 50 million downloads on the Play Store alone.

To apply you’ll fill out a bunch of fields to create your Wellfound account and upload your resume.

Full name, email, password, location, years of experience, desired salary, cover letter, CV, and more.

That’s definitely a lot, but don’t worry: Once you create an account all the information you entered will be used for every successive application.

So you’ll just have to enter one or two details, like the cover letter.

The best companies to target if you have no experience

If you don’t have any professional experience then you’ll have much higher success targeting those seed to mid-size startups just getting started and in incredibly high demand for employees.

So maybe not Calm. Perhaps something like…

Xverse – less than 50 employees.

Or Sprinter Health – early and growing fast!

You’ll take on such a powerful and influential role at these crucial growing stages in the company lifetime.

Tips for writing a good application letter

1. Tailor it to the job

Don’t use a generic cover letter.

Look at the job description closely and identify the skills and experience they’re looking for to write something personalized to the role.

2. Hook them early

Start with a strong opening that grabs their attention.

Talk about how excited you are for the position and highlight a relevant accomplishment or two. If you don’t have much of that, then focus more on your zeal to make a difference and your desire to learn as much as possible.

3. Solutions over features

Focus more on how you can solve the problems the role demands, not just your skills and experiences.

4. Keep it clear and short

Go straight to the point with 3-4 paragraphs. Don’t try to show off your vocab – they don’t care. Use conversational language.

Final thoughts

Wellfound offers a goldmine of high-paying remote jobs at exciting startups. Skip the brutal FAANG competition and make a real impact with companies overflowing with opportunity.

Don’t let a lack of experience hold you back – target fast-growing startups for your big break. With Wellfound, your dream remote job is just a click away.

5 unnecessary VS Code extensions you should uninstall now (#2)

EVERY new extension you add to VS Code increases the memory and CPU power it gobbles up:

We need to keep this number as low as possible to minimize this resource usage — and stop these extensions from clashing with one another or with native functionality.

And you know, there’s a significant number of extensions in the Marketplace that provide functionality VSCode already has built-in.

Usually they were made when the feature wasn’t added yet; but once that happened they became largely redundant additions.

So below, I cover a list of these integrated VSCode features and extensions that provide them. Uninstalling these now dispensable extensions will increase your editor’s performance and efficiency.

1. HTML tag auto-renaming

A powerful feature I didn’t discover for months after I started using VS Code!

You just start editing the starting tag and the ending tag auto-updates to match:

Extensions for this

  • Auto Rename Tag (17.7M downloads): “Automatically rename paired HTML/XML tag, same as Visual Studio IDE does”.

But feature already built-in

I use this setting to easily get tag auto-rename without installing anything:

  • Editor: Linked Editing: “Controls whether the editor has linked editing enabled. Depending on the language, related symbols e.g. HTML tags, are updated while editing.” Default is false

2. Auto-trim trailing spaces

This handy feature removes ending whitespace from all the lines of your file to maintain consistent formatting.

Extensions for this

  • Trailing Spaces (2.0M downloads): “Highlight trailing spaces and delete them in a flash!”.
  • AutoTrim (35.4K downloads): “Trailing whitespace often exists after editing lines of code, deleting trailing words, and so forth. This extension tracks the line numbers where a cursor is active, and removes trailing tabs and spaces from those lines when they no longer have an active cursor”.

But feature already built-in

VSCode has a built-in setting that can automatically remove trailing spaces from a file.

It automatically trims the file when it is saved, making it a background operation you no longer have to think about.

Trailing spaces are removed from the file on save.
Trailing spaces are removed from the file on save.

Here’s the setting:

  • Files: Trim Trailing Whitespace: “When enabled, will trim trailing whitespace when saving a file”. It’s false by default.
The auto trimming setting in the VSCode Settings UI.
The auto trimming setting in the Settings UI.

Add this to your settings.json file to enable auto trimming:

settings.json

JavaScript
{ "files.trimTrailingWhitespace": true, }

You might want to turn this setting off for Markdown files since you have to put two or more spaces at the end of a line to create a hard line break in the output, as stated in the CommonMark specification. Add this to your settings.json file to do so.

settings.json

JavaScript
{ "[markdown]": { "files.trimTrailingWhitespace": false } }

Alternatively, you can simply use a backslash (\) instead of spaces to create a hard line break.

3. HTML tag auto-wrapping

I can’t count how many times I’ve needed to wrap one HTML element in a new one — usually a div.

With this feature I can instantly wrap the <p> tag in a <div> without painfully inserting one <div> above and one </div> below.

Extensions for this

  • htmltagwrap (674K downloads): “Wraps selected code with HTML tags”.
  • html tag wrapper (458K downloads): “wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too”.

But feature already built-in

Thanks to the built-in Wrap with Abbreviation command I can rapidly wrap a tag in any tag type.

Did you see how the new wrapper’s name changed according to your input?

4. Colorful indentation

Indentation guides make it much easier for you to trace out the different indentation levels in your code.

Extensions for this

  • Indent Rainbow: “This extension colorizes the indentation in front of your text, alternating four different colors on each step”

But feature already built-in

So yeah, once again VS Code has this as a built-in feature.

We just change the Editor > Guides: Bracket Pairs setting from active to always show the colorful indents.

To go from this:

To this✅:

Beautiful.

5. NPM integration

In every serious project you’ll probably have tools to automate testing, linting, building, and other tasks.

So this feature makes it easier to start those tasks with as little as the click of a button. No need to switch context whatsoever.

Extensions for this

  • NPM (6.8M installs): “This extension supports running npm scripts defined in the package.json file”. I always saw this as a recommended extension after opening any project with package.json

But feature already built-in

With the built-in NPM scripts view I can easily see all the scripts in my project’s package.json and run any I want:

Ugh, but now you have to drag your mouse all the way over there just to run a simple task.

So much better to go with the Tasks: Run Task command:

“Tari it’s still too slow!!”

Alright fine, if you know the exact script you want, then just Ctrl + ` to open the built-in terminal and feed your CLI desires:

Final thoughts

These extensions might have served a crucial purpose in the past, but not anymore for the most part, as much of the functionality they provide have been added as built-in VSCode features. Remove them to reduce the bloat and increase the efficiency of Visual Studio Code.

You don’t actually need if statements (EVER)

Sure they’re a nice and easy way to create control flow, but you can write many billions of lines of conditional JS code without a SINGLE if statement.

And there are many situations where a different construct shows what you wanna do way more clearly — something we can’t ignore as long we write code for humans. Not to mention lower verbosity and shorter code.

So: let’s look at some powerful if statement upgrades.

1. The AND (&&) operator

The && operator, unique to JavaScript.

We it I quickly go from this:

JavaScript
function visitSite(user) { if (user.isLoggedIn) { console.log(`You are ${user.name}`); } console.log('Welcome to Coding Beauty.'); }

To this:

JavaScript
function visitSite(user) { user.isLoggedIn && console.log(`You are ${user.name}`); console.log('Welcome to Coding Beauty.'); }

I’ve eradicated the nested and compacted the branching logic into a one-liner.

You want to use this when there’s an if but no matching else; especially when the if block has only one line.

Even if there are multiple lines you can abstract them into a separate function and apply && again. After all the console.log() in our example is an abstraction itself.

So this:

JavaScript
function visitSite(user) { if (user.isLoggedIn) { console.log(`Welcome back, ${user.name}!`); console.log( `Your last login was on ${user.lastLoginDate}` ); console.log(`Your account type is ${user.accountType}`); } console.log('Welcome to Coding Beauty.'); }

Transforms to this:

JavaScript
function visitSite(user) { user.loggedIn && handleUser(user); console.log('Welcome to Coding Beauty.'); } function handleUser(user) { console.log(`Welcome back, ${user.name}!`); console.log( `Your last login was on ${user.lastLoginDate}` ); console.log(`Your account type is ${user.accountType}`); }

2. Ternary operator

Ternary operators let us compact if-else statements into a one-liner.

They’re great if-else replacements when all conditional cases only involve assigning a value to the same variable.

Here’s an example:

JavaScript
let word; if (num === 7) { word = 'seven'; } else { word = 'unknown'; }

Even though the DRY principle isn’t a hard and fast rule, for this instance things will be much cleaner if we used ternaries to avoid writing the variable assignment twice:

JavaScript
const word = num === 7 ? 'seven' : 'unknown';

Now we can even use const to keep things immutable and pure.

Nested ternaries

And when we have 3 or more branches in the if-else statement or we nest ifs, the cleaner ternary replacement will contain inner ternaries.

So this:

JavaScript
const getNumWord = (num) => { if (num === 1) { return 'one'; } else if (num === 2) { return 'two'; } else if (num === 3) { return 'three'; } else if (num === 4) { return 'four'; } else return 'unknown'; };

Becomes:

JavaScript
const getNumWord = (num) => num === 1 ? 'one' : num === 2 ? 'two' : num === 3 ? 'three' : num === 4 ? 'four' : 'unkwown';

Some people do cry about nested ternaries though, arguing that they’re complicated and cryptic. But I think that’s more of a personal preference, or maybe poor formatting.

And it’s formatting, we have tools like Prettier that have been doing this job (and only this job) for centuries.

Ever had code this badly formatted?

As long as there’s sufficient indentation you should have no problems with readability. If the branching gets much more complex than above you probably want to move some of the lower-level logic into preceding variables or tiny functions.

Speaking of readability, Prettier is changing their nested ternary style; they’ve come up with something quite unique.

The current style uses a clever combination of flat and tree-like nesting; adding further indentation for nested ternaries in the truthy branch, but keeping things flat for those in the in the falsy branch.

JavaScript
const animalName = pet.canSqueak() ? 'mouse' : pet.canBark() ? pet.isScary() ? 'wolf' // Only nests this because it's in the truthy section : 'dog' : pet.canMeow() ? 'cat' : pet.canSqueak() // Flat because it's in the falsy section ? 'mouse' : 'probably a bunny';

But very soon Prettier will format the above like this:

JavaScript
const animalName = pet.canSqueak() ? 'mouse' : pet.canBark() ? pet.isScary() ? 'wolf' : 'dog' : pet.canMeow() ? 'cat' : pet.canSqueak() ? 'mouse' : 'probably a bunny';

The main change is the ?‘s are all now at the ending of the same line of its ending, instead of the next one.

3. Switch statement

You will find this in C-style languages like Java, C#, and Dart — and it looks exactly the same in those languages with a few semantic differences.

If ternaries are best for generating output for one variable, then switch statements are best for processing input *from* one variable:

JavaScript
function processUserAction(action) { switch (action) { case 'play': // if (action === 'play') console.log('Playing the game...'); startGame({ mode: 'multiplayer' }); break; case 'pause': // else if (action === 'pause') console.log('Pausing the game...'); pauseGame(); break; case 'stop': console.log('Stopping the game...'); endGame(); goToMainMenu(); break; case 'cheat': console.log('Activating cheat mode...'); enableCheatMode(); break; default: // else console.log('Invalid action!'); break; } }

The unique power of switch statements comes from being able to omit the break at the end of each case and let execution “fallthrough” to the next case:

JavaScript
// Generate a random number between 1 and 6 to simulate rolling a dice const diceRoll = Math.floor(Math.random() * 6) + 1; console.log(`You rolled a ${diceRoll}!`); switch (diceRoll) { case 1: console.log('Oops, you rolled a one!'); console.log('You lose a turn.'); break; case 2: console.log( 'Two heads are better than one... sometimes' ); case 4: case 6: // else if (diceRoll === 2 || diceRoll === 4 || diceRoll === 6) console.log('Nice roll!'); console.log('You move forward two spaces.'); break; // ... default: console.log('Invalid dice roll.'); }

Most other languages with switch-case allow this, with the notable exception of C#.

4. Key-value object

Key-value objects let us declaratively map inputs to outputs.

JavaScript
const weatherActivities = { sunny: 'go to the beach', rainy: 'watch a movie at home', cloudy: 'take a walk in the park', snowy: 'build a snowman', }; const weather = 'sunny'; console.log(`Okay, so right now it's ${weather}.`); console.log(`Why don't you ${weatherActivities[weather]}?`);

I found this invaluable when creating screens in React Native apps – each with its own loading, error and success states. Here’s a snippet of a screen in one of our apps:

JavaScript
// screens/course-list.tsx // ... import { ActivityIndicator, Text // ... } from 'react-native-paper'; type ViewState = 'loading' | 'error' | 'data'; export function Courses({ route, navigation }) { const [viewState, setViewState] = useState<ViewState>('loading'); const state = useAppState(); const courses = state?.courseList; // ... const contentDict = { loading: <ActivityIndicator />, error: <Text>Error</Text>, data: <CourseList courses={courses} />, }; const content = contentDict[viewState]; return ( <View> <StatusBar /> {content} </View> ); } // ...

Final thoughts

So if statements aren’t bad at all and are great for writing conditional logic in an easily understandable way. But it’s important to consider alternative approaches to make code shorter, clearer and even more expressive. It’s not about eliminating if statements entirely, but rather adopting effective techniques that make our code more efficient and elegant.

You can actually stop a “forEach” loop in JavaScript – in 5 ways

Can you break out of a “forEach” loop in JavaScript?

It’s an amazing question to challenge just how well you really know JavaScript.

Because we’re not talking for loops — or this would have been ridiculously easy: you just break:

But you wouldn’t dare do this with forEach, or disaster happens:

What about return… mhmm.

What do you think is going to happen here:

return should easily end the loop at 5 and take us to the outer log right?

Wrong:

Remember: forEach takes a callback and calls it FOR EACH item in the array.

JavaScript
// Something like this: Array.prototype.forEach = function (callback, thisCtx) { const length = this.length; let i = 0; while (i < length) { // 👇 callback run once and only once callback.call(thisCtx, this[i], i, this); i++; } };

So return only ends the current callback call and iteration; doing absolutely nothing to stop the overall loop.

It’s like here; trying to end func2() from func1() — obviously not going to work:

5 terrible ways to stop a forEach loop

1. Throw an exception

You can stop any forEach loop by throwing an exception:

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; try { nums.forEach((num) => { if (num === 5) { throw new Error('just to stop a loop?'); } console.log(num); }); } catch { console.log('finally stopped!'); }

Of course we’re just having fun here — this would be horrible to see in real-world code. We only create exceptions for problems, not planned code like this.

2. process.exit()

This one is extreme:

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; nums.forEach((num) => { if (num === 5) { process.exit(0); } console.log(num); });

Not only are you ending the loop, you’re ending the entire program!

You won’t even get to the console.log() here:

3. Array some()

This is bad.

It works and some people recommended it for this; but this lowers readability as it’s clearly not what it’s meant for.

This is what it’s meant for:

JavaScript
const nums = ['bc', 'bz', 'ab', 'bd']; const hasStartingA = nums.some((num) => num.startsWith('a') ); const hasStartingP = nums.some((num) => num.startsWith('p') ); console.log(hasStartingA); // true console.log(hasStartingP); // false

4. Set array length to 0

But here’s something even more daring: Setting the length of the array to 0!

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function myFunc() { nums.forEach((num) => { if (num === 5) { nums.length = 0; } console.log(num); }); console.log('it worked!'); console.log(nums); } myFunc();

Setting the array’s length completely destroys and resets it — EMPTY array:

5. Use Array splice()

Things get even weirder when you use Array splice() to stop the foreach loop, deleting slashing away elements mid-way!

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function myFunc() { nums.forEach((num, i) => { if (num === 5) { nums.splice(i + 1, nums.length - i); } console.log(num); }); console.log('spliced away!'); console.log(nums); } myFunc();

3 great ways to stop a loop

1. Do you really need to break?

Instead of using the terrible methods above to stop a forEach loop…

Why not refactor your code so you don’t need to break at all?

So, instead of this:

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; try { nums.forEach((num) => { if (num === 5) { // ❌ break at 5 throw new Error('just to stop a loop?'); } console.log(num); }); } catch { console.log('finally stopped!'); }

We could have simply done this:

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; nums.forEach((num) => { if (num < 5) { // ignore 5 or more console.log(num); } }); console.log('no need to break!');

2. Use for of

But if you really want to jump out of the loop early then you’re much better of with the for..of loop:

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; try { for (const num of nums) { if (num === 5) { break; // 👈 break works } console.log(num); } } catch { console.log('finally stopped!'); }

3. Use traditional for

Or with the traditional for loop, for more fine-grained control:

JavaScript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; try { for (let i = 0; i < nums.length; i += 2) { // 👈 jump by 2 const num = nums[i]; if (num === 5) { break; } console.log(num); } } catch { console.log('finally stopped!'); }

Final thoughts

So there are ways to “break” from a forEach loop, but they’re pretty messy and insane.

Instead try refactoring the code to avoid needing to break in the first place. Or switch to for and for..of for a cleaner, readable approach.

How to HACK JavaScript with Well-Known Symbols (5 ways)

They call them well-known symbols – even though most developers have never used them or even heard of them.

They’re a really cool feature you can use to make magic like this happen:

Use well-known symbols to magically redefine JavaScript's core functionalities to behave in unique and delightful ways.

You’ll see how we built the List class with a well-known symbol to do this.

They’re all about completely customizing the normal behavior of built-in operations like for..of. It’s like operator overloading in C++ and C#.

Also all static methods of the Symbol class.

1. Symbol.hasInstance

So first up we have Symbol.hasInstance: for easily changing how the instanceof operator behaves.

JavaScript
const person = new Person({ name: 'Tari Ibaba', at: 'wp.codingbeautydev.com', }); // Because of Symbol.hasInstance console.log(person instanceof Person); // ❌ false (!!) console.log('Tari Ibaba' instanceof Person); // ✅ true console.log('Person' instanceof Person); // ❌ false

Normally instanceof is all about checking if a variable is an instance of class.

JavaScript
class Person { constructor({ name, at }) { this.name = name; this.at = at; } } const person = new Person({ name: 'Tari Ibaba', at: 'wp.codingbeautydev.com', }); console.log(person instanceof Person); // ✅ true console.log('Person' instanceof Person); // ❌ false console.log(person instanceof String); // ❌ false

This is as it should be. Pretty standard stuff.

But with Symbol.hasInstance we can completely transform how instanceof works:

JavaScript
class Person { constructor({ name, at }) { this.name = name; this.at = at; } static [Symbol.hasInstance](obj) { const people = ['Tari Ibaba', 'Ronaldo']; return people.includes(obj); } }

Now a Person is no longer a Person, as far as instanceof is concerned.

JavaScript
const person = new Person({ name: 'Tari Ibaba', at: 'wp.codingbeautydev.com', }); console.log(person instanceof Person); // ❌ false (!!) console.log('Tari Ibaba' instanceof Person); // ✅ true console.log('Person' instanceof Person); // ❌ false

What if we don’t want to completely override it, but instead extend it in an intuitive way?

We can’t use instanceof inside the symbol because that’ll quickly lead to an infinite recursion:

Instead we compare the special constructor property of the object to our own:

JavaScript
class Fruit { constructor(name) { this.name = name; } [Symbol.hasInstance](obj) { const fruits = ['🍍', '🍌', '🍉', '🍇']; // this == this.constructor in a static method return obj.constructor === this || fruits.includes(obj); } } const fruit = new Fruit('apple');

If you’re just hearing of .constructor, this should explain everything:

JavaScript
String.prototype.constructor.prototype.constructor === String // true

2. Symbol.iterator

Our next hack is Symbol.iterator, for totally altering how and if loop works on an object.

Remember this:

We did this thanks to Symbol.iterator:

JavaScript
class List { elements = []; wordEmojiMap = { red: '🔴', blue: '🔵', green: '🟢', yellow: '🟡', }; add(element) { this.elements.push(element); return this; } // Generator *[Symbol.iterator]() { for (const element of this.elements) { yield this.wordEmojiMap[element] ?? element; } } }

We see generators crop up once again.

Any time we use for..of

JavaScript
const numbers = [1, 2, 3]; for (const num of numbers) { console.log(num); } /* 1 2 3 */

This happens behind the scenes:

JavaScript
const iterator = numbers[Symbol.iterator](); // for..of: Keep calling .next() and using value until done console.log(iterator.next()); // Object {value: 1, done: false} console.log(iterator.next()); // Object {value: 2, done: false} console.log(iterator.next()); // Object {value: 3, done: false} console.log(iterator.next()); // Object {value: undefined, done: true}

So with Symbol.iterator we completely changed what for..of does with any List object:

JavaScript
class List { // ... *[Symbol.iterator]() { for (const element of this.elements) { yield this.wordEmojiMap[element] ?? element; } } }
JavaScript
const colors = new List(); colors.add('red').add('blue').add('yellow'); const iterator = colors[Symbol.iterator](); console.log(iterator.next()); // { value: '🔴', done: false } console.log(iterator.next()); // { value: '🔵', done: false } console.log(iterator.next()); // { value: '🟡', done: false } console.log(iterator.next()); // { value: undefined, done: true }

4. Symbol.toPrimitive

With Symbol.toPrimitive we quickly go from this:

To this:

We did this by overriding Symbol.toPrimitive:

JavaScript
class Person { constructor({ name, at, favColor }) { this.name = name; this.at = at; this.favColor = favColor; } [Symbol.toPrimitive]() { return `I'm ${this.name}`; } }

Now we can use a Person object anywhere we use a string for interpolation & concatenation:

JavaScript
const str = 'Person: ' + person; console.log(str); // Person: I'm Tari Ibaba

There’s even a hint parameter that makes an object act like a number, string, or something else.

JavaScript
class Money { constructor(amount, currency) { this.amount = amount; this.currency = currency; } [Symbol.toPrimitive](hint) { if (hint === 'string') { return `${this.amount} ${this.currency}`; } else if (hint === 'number') { return this.amount; } else if (hint === 'default') { return `${this.amount} ${this.currency}`; } } } const price = new Money(500, 'USD'); console.log(String(price)); // 500 USD console.log(+price); // 500 console.log('Price is ' + price); // Price is 500 USD

4. Symbol.split

Genius well-known symbol for turning your custom objects into string separators:

JavaScript
class Greedy { [Symbol.split](str) { return `Me: ${str}, you: 0`; } } class ReadableNumber { [Symbol.split](str) { return str.split('').reduceRight((acc, cur, index, arr) => { return index % 3 === 0 && index < arr.length - 1 ? cur + ',' + acc : cur + acc; }, ''); } } console.log('1-000-000'.split('-')); // [ '1', '000', '000' ] console.log('1000000'.split(new Greedy())); // Me: 1000000, you: 0 console.log('1000000'.split(new ReadableNumber())); // 1,000,000

5. Symbol.search

Just like Symbol.split, transform your custom objects into sophisticated string searching tools:

JavaScript
class Topic { static topics = { 'wp.codingbeautydev.com': ['JavaScript', 'VS Code', 'AI'], }; constructor(value) { this.value = value; } [Symbol.search](where) { const topic = this.constructor.topics[where]; if (!topic) return -1; return topic.indexOf(this.value); } } const str = 'wp.codingbeautydev.com'; console.log(str.search(new Topic('VS Code'))); // 1 console.log(str.search(new Topic('Economics'))); // -1

Final thoughts

From looping to splitting to searching, well-known symbols let us redefine our core functionalities to behave in unique and delightful ways, pushing the boundaries of what’s possibly in JavaScript.

10 amazing web development tools you need to know (#2)

10 more amazing web dev tools to boost your workflow and make development more enjoyable.

From stunning animations to rapid API creation & documentation, these tools will help you get things done faster than ever.

1. Heat.js

Create stunning heat maps and charts with this incredible UI library.

Like this:

GitHub-like heatmap.

Very similar to my GitHub profile (but with way more greens of course):

No external libraries needed, it’s dependency-free.

Customize every detail with a wide range of settings, or choose from over 10 pre-made themes in 40+ languages. Get ready to bring your data to life.

2. Postman

Simply the best for creating and testing APIs.

If you still use curl then you must living in the stone age. Or maybe you have some sort of CLI superiority complex.

Just making a simple POST request is pain; Stressful editing, strict formatting requirements that don’t even stay consistent with the OS and terminal.

1st one works on Linux, 2nd on Windows CMD (I guess), 3rd on Powershell…😴

Why go through any of that when you have a nice and easy GUI with none of these problems?

Body data is easy, query params are easy.

It even has built-in support for testing APIs from Paypal and Google.

3. React Toastify

By far the easiest way I found to add toast notifications to your React app.

All you need is this simple code:

JavaScript
import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function App(){ const notify = () => toast("Wow so easy!"); return ( <div> <button onClick={notify}>Notify!</button> <ToastContainer /> </div> ); }

Look it even has all sorts of colorful progress bars to show how much time left before it goes away 👇

And dark mode of course. And different themes for different purposes.

4. GitLens for VS Code

VS Code source control on steroids.

Packed full with tons of views with essential repo data and current file info: file history, commits, branches, remotes, and more.

Even history of particular line in the file, with valuable related data and actions.

5. Palettify

Craft stunning UI color schemes in real-time with Palettify.

That H1 font is awesome by the way.

Play around with shadcn-ui components, toggle light/dark mode, then grab the the CSS theme code with a single click.

Several themes to choose from:

Wiza theme:

6. LinkPreview

I use this to easily get a preview image from a URL.

Like Notion does for their Bookmark block:

Better than depending on unreliable web scraping libraries, or rigid 3rd-party Link Preview UI components.

You just make an API request to this URL:

Plain text
https://api.linkpreview.net/?q=your_url_to_preview

And you easily get your image, along with relevant information for preview.

If we go to the image URL we’ll see it’s the same exact one Notion showed:

7. Lottie

Breathe life into your apps with Lottie.

Lottie takes the magic from Adobe After Effects and brings it straight to your mobile and web apps.

Imagine the experience needed to create this 👇 Then imagine recreating it with raw CSS.

So no more hand-coding – Lottie uses a special plugin to turn those After Effects animations into a lightweight JSON format that works flawlessly on any device.

8. Free Icons

Unleash your creativity with a treasure trove of over 22,000 icons!

Dive into a world of beautiful and free SVG icons, all meticulously tagged and ready to be discovered at your fingertips.

Including dinosaurs like Internet Explorer.

Simply type in a keyword and browse through countless icons to find the perfect visual match for your project.

9. jwt.io

I use this often when having nasty bugs with JSON web token from Firebase Auth or some stuff.

You just paste your token on the left and you instantly see the decoded value on the right.

And using this got me confused at first; I thought JWT was like an encryption where only the receiver could know what was there with the secret?

But no; it turned out JWT is for verifying the source of the message, not hiding information. Like in crypto wallets and transactions private and public keys.

10. TypeSpec

Use this to stop wasting time manually documenting your API for public use.

Describe your data once, and TypeScript magically conjures up everything you need: schema, API specifications, client / server code, docs, and more.

Final thoughts

Use these awesome tools to upgrade your productivity and make development more fun.

Why coding is power

Coding is the art of bringing thoughts into digital and physical reality.

I love this definition; so many gems to unpack from 1 concise statement.

With coding we wield the power to shape the digital realm according to our imagination and needs.

Picture this: You’re sitting in front of a blank canvas, armed with nothing but your thoughts and a bunch of dev tools.

With a few lines of code, you summon objects into existence, breathe life into algorithms, and orchestrate systems that operate with precision and purpose.

In this digital realm you are the architect, the creator, the god of your own universe. Every line of code is a brushstroke, painting the landscape of your creation.

You design the story of execution, from the inception of an idea to its realization, with the potent aid of lightning-fast computers that transform your commands into tangible results.

Coding is a force amplifier.

Thanks to iteration, recursion, and more, tiny scripts can easily complete unbelievable amounts of work in fractions of a second; work that no one on their own could possibly hope to finish in 10 life times.

Or operating continuously, 24/7, even when everyone is asleep, and throughout all seasons and holidays.

You breathe life into those inert lines of text, imbuing them with functionality and purpose. Bringing forth programs and applications that serve myriad functions; from simplifying mundane tasks to revolutionizing entire industries.

The mere challenge of carefully constructing a complex software system from the growing gives you a strong sense of self-accomplishment, achievement and inner power.

Even going beyond ourselves, coding is a gateway to solving real-world problems that surround us. From streamlining business operations to revolutionizing healthcare, coding empowers us to tackle challenges with efficiency and innovation.

Coding enables us to innovate continually, pushing the boundaries of what is possible and driving progress forward. Whether it’s developing groundbreaking applications, pioneering new technologies, or optimizing existing systems, coding empowers us to make an impact on a global scale.

Consider the countless innovations that have reshaped our world: from social media to e-commerce to the AI tools many of us have gone crazy about; each breakthrough stems from the minds of individuals who dared to dream and had the skills to code their visions into reality.

Apps that never once existed; now brought into existence with the power of thought; now installed in the devices of billions across all the nations of the globe; now influencing lives every single day.

In our information age being able to code is like possessing a superpower—an ability to wield technology as a force for good, to shape the world in ways previously unimaginable. With coding we have the power to improve the quality of life for billions, to democratize access to information and opportunity, and to pave the way for a brighter, more connected future.

Coding is more than just a technical skill—it is a catalyst for change, a tool for empowerment, and a gateway to infinite possibilities. With it we can shape a future that’s not only technologically advanced but also as close to utopia as we can get.

Simply put: Coding a better world into existence for all, enjoying every step along the way.

Stop using nested ifs: Do this instead

Typical use case for nested ifs: you want to perform all sorts of checks on some data to make sure it’s valid before finally doing something useful with it.

Don’t do this! 👇

JavaScript
function sendMoney(account, amount) { if (account.balance > amount) { if (amount > 0) { if (account.sender === 'user-token') { account.balance -= amount; console.log('Transfer completed'); } else { console.log('Forbidden user'); } } else { console.log('Invalid transfer amount'); } } else { console.log('Insufficient funds'); } }

There’s a better way:

JavaScript
// ✅ function sendMoney(account, amount) { if (account.balance < amount) { console.log('Insufficient funds'); return; } if (amount <= 0) { console.log('Invalid transfer amount'); return; } if (account.sender !== 'user-token') { console.log('Forbidden user'); return; } account.balance -= amount; console.log('Transfer completed'); }

See how much cleaner it is? Instead of nesting ifs, we have multiple if statements that do a check and return immediately if the condition wasn’t met. In this pattern, we can call each of the if statements a guard clause.

If you do a lot of Node.js, you’ve probably seen this flow in Express middleware:

JavaScript
function authMiddleware(req, res, next) { const authToken = req.headers.authorization; if (!authToken) { return res.status(401).json({ error: 'Unauthorized' }); } if (authToken !== 'secret-token') { return res.status(401).json({ error: 'Invalid token' }); } if (req.query.admin === 'true') { req.isAdmin = true; } next(); }

It’s much better than this, right? :

JavaScript
function authMiddleware(req, res, next) => { const authToken = req.headers.authorization; if (authToken) { if (authToken === 'secret-token') { if (req.query.admin === 'true') { req.isAdmin = true; } return next(); } else { return res.status(401).json({ error: 'Invalid token' }); } } else { return res.status(401).json({ error: 'Unauthorized' }); } };

You never go beyond one level of nesting. We can avoid the mess that we see in callback hell.

How to convert nested ifs to guard clauses

The logic for this for doing this is simple:

1. Find the innermost/success if

Here we can clearly see it’s the cond3 if. After this, if we don’t do any more checks and take the action we’ve always wanted to take.

JavaScript
function func(cond1, cond2, cond3) { if (cond1) { if (cond2) { if (cond3) { console.log('PASSED!'); console.log('taking success action...'); } else { console.log('failed condition 3'); } } else { console.log('failed condition 2'); } } else { console.log('failed condition 1'); } }

2. Invert the outermost if and return

Negate the if condition to put the else statements’ body in there and add a return after.

Delete the else braces (keep the body, it still contains the formerly nested ifs, and move the closing if brace to just after the return.

So:

JavaScript
function func(cond1, cond2, cond3) { if (!cond1) { // 👈 inverted if condition // 👇 body of former else clause console.log('failed condition 1'); return; // 👈 exit on fail } // 👇 remaining nested ifs to convert to guard clauses if (cond2) { if (cond3) { console.log('PASSED!'); console.log('taking success action...'); } else { console.log('failed condition 3'); } } else { console.log('failed condition 2'); } }

3. Do the same for each nested if until you reach the success if

And then:

JavaScript
function func(cond1, cond2, cond3) { if (!cond1) { console.log('failed condition 1'); return; } if (!cond2) { console.log('failed condition 2'); return; } // 👇 remaining nested ifs to convert if (cond3) { console.log('PASSED!'); console.log('taking success action...'); } else { console.log('failed condition 3'); } }

And finally:

JavaScript
function func(cond1, cond2, cond3) { if (!cond1) { console.log('failed condition 1'); return; } if (!cond2) { console.log('failed condition 2'); return; } if (!cond3) { console.log('failed condition 3'); return; } console.log('PASSED!'); console.log('taking success action...'); }

I use the JavaScript Booster extension to make inverting if statements in VS Code much easier.

Here we only had to put the cursor in the if keyword and activate the Show Code Actions command (Ctrl + . by default).

Check out this article for an awesome list of VSCode extensions you should definitely install alongside with JavaScript Booster.

Tip: Split guard clauses into multiple functions and always avoid if/else

What if we want to do something other after checking the data in an if/else? For instance:

JavaScript
function func(cond1, cond2) { if (cond1) { if (cond2) { console.log('PASSED!'); console.log('taking success action...'); } else { console.log('failed condition 2'); } console.log('after cond2 check'); } else { console.log('failed condition 1'); } console.log('after cond1 check'); }

In this function regardless of cond1‘s value, the 'after cond1 check' the line will still print. Similar thing for the cond2 value if cond1 is true.

In this case, it takes a bit more work to use guard clauses:

If we try to use guard clauses, we’ll end up repeating the lines that come after the if/else checks:

JavaScript
function func(cond1, cond2) { if (!cond1) { console.log('failed condition 1'); console.log('after cond1 check'); return; } if (!cond2) { console.log('failed condition 2'); console.log('after cond2 check'); console.log('after cond1 check'); return; } console.log('PASSED!'); console.log('taking success action...'); console.log('after cond2 check'); console.log('after cond1 check'); } func(true);

Because the lines must be printed, we print them in the guard clause before returning. And then, we print it in all(!) the following guard clauses. And once again, in the main function body if all the guard clauses were passed.

So what can we do about this? How can we use guard clauses and still stick to the DRY principle?

Well, we split the logic into multiple functions:

JavaScript
function func(cond1, cond2) { checkCond1(cond1, cond2); console.log('after cond1 check'); } function checkCond1(cond1, cond2) { if (!cond1) { console.log('failed condition 1'); return; } checkCond2(cond2); console.log('after cond2 check'); } function checkCond2(cond2) { if (!cond2) { console.log('failed condition 2'); return; } console.log('PASSED!'); console.log('taking success action...'); }

Let’s apply this to the Express middleware we saw earlier:

JavaScript
function authMiddleware(req, res, next) { checkAuthValidTokenAdmin(req, res, next); } function checkAuthValidTokenAdmin(req, res, next) { const authToken = req.headers.authorization; if (!authToken) { return res.status(401).json({ error: 'Unauthorized' }); } checkValidTokenAdmin(req, res, next); } function checkValidTokenAdmin(req, res, next) { const authToken = req.headers.authorization; if (authToken !== 'secret-token') { return res.status(401).json({ error: 'Invalid token' }); } checkAdmin(req, res, next); } function checkAdmin(req, res, next) { if (req.query.admin === 'true') { req.isAdmin = true; } next(); }

In a way, we’ve replaced the if/else statements with a chain of responsibility pattern. Of course, this might be an overkill for simple logic like a basic Express request middleware, but the advantage here is that it delegates each additional check to a separate function, separating responsibilities and preventing excess nesting.

Key takeaways

Using nested ifs in code often leads to complex and hard-to-maintain code; Instead, we can use guard clauses to make our code more readable and linear.

We can apply guard clauses to different scenarios and split them into multiple functions to avoid repetition and split responsibilities. By adopting this pattern, we end up writing cleaner and more maintainable code.