Issue #543 (Grouping Operator, React, Git/CLI, Text Editors)12/14/23
The one operator that we rarely think much about in JavaScript is the grouping operator. This is a reference to the use of parentheses, which come in handy in a number of circumstances in JavaScript to make sure code evaluates the way we expect.
Many of you have probably used all the examples I'm going to show below, so there won't be anything too new here unless you're new to JavaScript. But it's nice to review some of the finer details as to why this operator is useful.
Let's start with an easy example. One common thing the grouping operator does is help evaluate mathematical expressions. Note the following code:
|
const a = 1;
const b = 2;
const c = 3;
console.log(a + b * c); // 7
console.log((a + b) * c); // 9
|
Besides the use of the parentheses for the console.log() calls, you'll notice how the use of the grouping operator (i.e. the parentheses around "a + b") changes the result of the expressions on the last two lines. In the first log, the multiplication gets evaluated first, providing a final value of 7. But in the next log, I've grouped the two variables added together, so they get evaluated before the multiplication occurs, which changes the result.
Another useful place where the grouping operator comes in handy is when using an immediately-invoked function expression (or IIFE). An expression statement in JavaScript cannot start with the keyword "function", so the following code is invalid:
|
function () {
// do something here...
} ();
|
The above is interpreted as the start of a function declaration, so it won't work. To get around this, you can use the grouping operator:
|
(function () {
// do something here...
})();
|
Notice the parentheses placed around the section starting with the function keyword up until the end of the curly braces. Again, nothing too groundbreaking here, and you've likely used something similar to this structure before. But maybe you didn't think specifically that this is happening due to the use of parentheses as a grouping operator.
Another use is maybe a little more obscure, but again some of you will likely have seen it before. As you might know, arrow functions can be used without the curly braces and without an explicit return statement, indicating that whatever is evaluated is returned. For example:
|
let myFunc = () => 2 + 3;
console.log(myFunc()); // 5
|
As you can see, no curly braces, no return keyword. Yet the evaluated expression is returned automatically. This is a characteristic of arrow functions.
But with that in place, what if you want to return an object literal? Well, it won't work like this:
|
let myFunc = () => { a: 1 };
console.log(myFunc()); // undefined
|
The above doesn't work as expected because the beginning of the object literal (the opening curly brace) is interpreted as the start of the function body for the arrow function (you can use curly braces for arrow functions).
To get around this, we come back full circle to our grouping operator:
|
let myFunc = () => ({ a: 1 });
console.log(myFunc()); // object as expected
|
The simple addition of the parentheses helps the code to be parsed correctly and now the object literal is returned as expected.
That's a brief overview of the grouping operator, something you've most definitely used but maybe didn't think too much about.
There are other uses for the grouping operator, one or two that I've discussed before in other tips. You can check out all of those in my newsletter archives or if you want all my tips in an easy-to-read format, you can buy my JavaScript e-books bundle to support this newsletter.
Now on to this week's tools!
|
React Tools
@beautiful-tree/react
A lightweight and flexible library to draw tree diagrams as SVG images, compatible with ESM, CJS, and UMD, with support for CSS styling.
react-verification-input
A customizable, masked input that can be used for security codes for two-factor authentication (or other similar uses), with customizable styling.
usePHP
A React hook for running PHP in a Netlify Edge Function and uses php-wasm to execute the PHP.
Build with the Power of Code — Without Writing Any
Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers. SPONSORED
React Google Maps
A React wrapper for the Google Maps JavaScript API that makes using the API in React applications easy.
React Glow
A React component that adds a mouse-tracing glow effect to a component on the page when hovering the mouse over it.
useWhisper
A React hook for OpenAI's Whisper API with speech recorder, real-time transcription, and silence removal built-in.
next-flat-routes
A CLI tool to simplify Next.js routing by allowing developers to work with a flat route structure.
react-datasheet-grid
A feature-rich Airtable- or Excel-like component to create beautiful spreadsheets in React apps, with support for smooth animations, copy/paste from external sheets, keyboard navigation, and lots more.
Garlic
React component that provides a simple, fast and secure way to protect your website from being scraped by bots. Also has Astro support.
On the Release Radar:
|
Git, GitHub, and CLI Tools
GQL
Git Query Language, an SQL-like query language to perform queries on .git files with supports for most SQL features (e.g. grouping, ordering, etc).
Better Commits
A CLI for writing better commits, following the conventional commit guidelines.
Watermelon
An open-source copilot for code review to preview GitHub PRs by understanding code context and conducting static code analysis. Use LLMs to spot errors and provide an initial health check for the PR.
Refined GitHub Notifications
An opinionated userscript that enhances the GitHub notifications page, making it more productive and less noisy.
Try Imprint, Google's Best App of 2023!
Imprint is a brand new way to learn the world's most important knowledge that's visual and interactive. Master essential topics in psychology, business, science, technology and more in bite-sized lessons. Named Best App of 2023 by Google! SPONSORED 
Tech Stack File
A single file that lists the entire tech stack of a Git repo, with metadata about each technology, free for open-source projects.
NostrGit
A censorship-resistant alternative to GitHub that doesn't rely on any trusted central server.
sshx
A secure web-based, collaborative terminal that lets you share your terminal with anyone by link, on a multiplayer infinite canvas.
 |
routes-gen
a framework-agnostic CLI tool for routes parsing and generation of a type-safe helper for safe route usage, like Prisma, but for routes.
Lefthook
A Go-based, cross-environment, Git hooks manager for Node.js, Ruby and other types of projects.
|
VS Code and Text Editor Tools
Terraform Live Graph
A VS Code extension that allows you to generate a live Terraform graph as you code, to better understand your infrastructure, relationships between resources, etc.
VS Code Extension Samples
From the VS Code team, a repository featuring sample code that illustrates the VS Code extension API, with each sample explaining functionality, demoing usage, etc.
Easytables
A Neovim plugin to easily insert and edit Markdown tables using Neovim with a live preview and useful helpers.
Try Imprint, Google's Best App of 2023!
Imprint is a brand new way to learn the world's most important knowledge that's visual and interactive. Master essential topics in psychology, business, science, technology and more in bite-sized lessons. Named Best App of 2023 by Google! SPONSORED
GitPoet
A VS Code extension, powered by ChatGPT, that suggests accurate and meaningful commit messages based on your git diff.
Writerside
From JetBrains, a new authoring environment for technical writers and developers, for producing documentation. Kind of like an IDE made for docs.
Flexoki
A nice color scheme that's available for use in a variety of tools and IDEs, including VS Code. There are links to the config files that you can add to your settings for whatever IDE you're using.
Rust Playground
An online code sandbox for Rust that provides the top 100 most downloaded crates from crates.io, the crates from the Rust Cookbook, and all of their dependencies.
 |
Git History Diff
VS Code extension to view Git history, diff of committed files, git blame info, stash details, and more.
GitHub Actions
Official GitHub Actions extension that lets you manage your workflows, view the workflow run history, and helps with authoring workflows.
📰 ICYMI, I also do a short weekly newsletter on VS Code, where I share tools like the ones above, a weekly VS Code tip, articles, videos, and more.
|
|
Commercial Apps and Classifieds
FlyCI – Unleash the power of Mac runners on your GitHub Actions workflows.
|
|
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs. AD
|
Moropo – Build, run, and scale open-source test scripts without writing code.
|
|
Pullpo – Keep your team's code reviews organized, track your efficiency goals, ship faster.
|
|
Releases – Changelog and release notes to announce product updates, new features, bug fixes.
|
crowd.dev – Combine data from GitHub, etc., to understand which companies engage w/ your product.
|
|
|
An X Post for Thought
And on the topic of Kids Say the Darndest Things About React...
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
If you enjoy murder-mystery types of games, here's a few AI-based ones you'll want to check out: Death by AI, which is kind of like an AI-based Jackbox party game, and Solve the Murders, a chat-based mystery game.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
