Kyle Simpson getify

In defense of blocks for local scopes (Part 2)

Some have leveled the criticism that "part 1" of this post is unnecessarily contriving a problem that doesn't really exist in "good code" -- if you really need to narrow a scope of some declarations in a function, then that function is too complex already and that bigger problem is what you need to fix.

Just to be extra clear: if a chunk of code is already reasonable to make a function, that's not the sort of code I'm talking about in either of these blog posts. If it's being called multiple times, or if it's completely independent and makes sense as its own logical chunk, make it a function. I'm talking about a different sort of code, a set of a few statements related to each other, that declare one or more variables, but which logically still belong inside another function. That's the context here.

OK, let's stop talking about this stuff abstractly.

A Real Example

In defense of blocks for local scopes (Part 1)

[EDIT: I've added a part 2 to this blog post, to address some of the feedback that has come up: https://gist.github.com/getify/706e5e10822a298375da40f9cc1fa295]

Recently, this article on "The JavaScript Block Statement" came out, and it received some good discussion in a reddit thread. But the general reaction seems to be against this approach. That saddens me.

I am often asked why I don't like a tool like TS (or Flow), and by implication, if I don't like it, the assumption is that I don't want any type aware tooling. That's not true, though.

I have many ideas for what I think type-aware tooling in JS could/should be, and they just happen to diverge significantly enough from TS/Flow that I can't bend into pretzels to fit into that mold.

Instead, I've worked on designing a tool I call TypL that I think addresses my concerns. It's in progress.

Here's my main list of motivations for designing TypL instead of TS/Flow:

I want a system that has both compile-time checking AND run-time checking. TypL's design is to compile away the stuff that it checks at compile time and can verify, and leave in the stuff that it knows needs run-time checking. That way, you don't have to write different sorts of type checking for compile-time and run-time. You get both from one set of typing annotation. It doesn't really seem tha

	function Identity(v) {
	return { val: v };
	}

	function chain(m,fn) {
	return fn(m.val);
	}

	// ^^^ that's it!

	// FORKED FROM: https://gist.github.com/cowboyd/74c0fd9e7aa3cccaeda0b84604c0136a
	//
	// using CAF instead of Effection.

	/**
	* Implements an operation to fetch the data as described in https://twitter.com/BenLesh/status/1455597411385098242
	* The "winner" is unambiguous. It is the request corresponding to the latest click, guaranteed.
	* Other important things to note:
	*
	* 1. The HTTP request is cancelled every time along with its containing task

	var filterReducer = pf => cf => (acc,v) => pf(v) ? cf(acc,v) : acc;
	var mapReducer = mf => cf => (acc,v) => cf(acc,mf(v));
	var compose = (...fs) => v => fs.reduceRight((r,f) => f(r),v);
	var concat = (acc,v) => [ ...acc, v ];
	var sum = (x,y) => x + y;

	// ************************************

	var onlyOdds = v => v % 2 == 1;
	var double = v => v * 2;

	function Article({ id }) {
	const [article, setArticle] = useState(null);

	useEffect(() => {
	let cancelToken = new CAF.cancelToken();

	let fetchData = CAF(function *fetchData(signal) {
	const article = yield API.fetchArticle(id);
	setArticle(article);
	});

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
	<title>Test Page</title>

	<script>
	// early compute the vw/vh units more reliably than CSS does itself
	computeViewportDimensions();

	convert("one hundred five"); // "105"
	convert("six hundred and fifty three"); // "653"
	convert("zero zero one two three"); // "123"
	convert("twelve o three"); // "1203"
	convert("thirteen zero nine"); // "1309"
	convert("fifteen sixteen"); // "1516"
	convert("fourteen ninety two"); // "1492"
	convert("nineteen ten"); // "1910"
	convert("twelve hundred"); // "1200"
	convert("twenty three hundred"); // "2300"

	processInvitations().catch(console.log);

	function delay(ms) { return new Promise(res => setTimeout(res,ms)); }

	async function processInvitations() {
	var cards = [...document.querySelectorAll("li.invitation-card")];

	var acceptCards = cards.filter(card => {
	var title = (card.querySelectorAll(".invitation-card__subtitle")[0] \|\| {}).innerHTML \|\| "";
	return accept(title);