Skip to content

Instantly share code, notes, and snippets.

@hellatan

hellatan/optionalchaining-nullcoalescing.md

Last active June 10, 2021 16:41
Show Gist options
  • Save hellatan/dd09d25fe2b1bf99f8dcd5136898ba10 to your computer and use it in GitHub Desktop.
Save hellatan/dd09d25fe2b1bf99f8dcd5136898ba10 to your computer and use it in GitHub Desktop.
Download ZIP
optional chaining / nullish coalescing tanspilation
Raw
optionalchaining-nullcoalescing.md

Try to assign the closest parent when using optional chaining. If the closest parent is not, then something like the following will be output:

// original - multiple defintions of a comment parent `viewer?.user?.curatedFolderActivity?.edges?.[0]?.node`
const elementId = viewer?.user?.curatedFolderActivity?.edges?.[0]?.node?.serviceId;
const folderPk = viewer?.user?.curatedFolderActivity?.edges?.[0]?.node?.anchors?.[0]?.source?.serviceId;
const folderUrlLabel = viewer?.user?.curatedFolderActivity?.edges?.[0]?.node?.anchors?.[0]?.source?.name;
const repName = viewer?.userRelationships?.[0]?.userDataB?.[0]?.displayName;	
const imageSrc = viewer?.user?.curatedFolderActivity?.edges?.[0]?.node?.anchors?.[0]?.source?.firstItemImage || '';

outputs (scroll left -> right to see full output)

var _viewer, _viewer$user, _viewer$user$curatedF, _viewer$user$curatedF2, _viewer$user$curatedF3, _viewer$user$curatedF4, _viewer2, _viewer2$user, _viewer2$user$curated, _viewer2$user$curated2, _viewer2$user$curated3, _viewer2$user$curated4, _viewer2$user$curated5, _viewer2$user$curated6, _viewer2$user$curated7, _viewer3, _viewer3$user, _viewer3$user$curated, _viewer3$user$curated2, _viewer3$user$curated3, _viewer3$user$curated4, _viewer3$user$curated5, _viewer3$user$curated6, _viewer3$user$curated7, _viewer4, _viewer4$userRelation, _viewer4$userRelation2, _viewer4$userRelation3, _viewer4$userRelation4, _viewer5, _viewer5$user, _viewer5$user$curated, _viewer5$user$curated2, _viewer5$user$curated3, _viewer5$user$curated4, _viewer5$user$curated5, _viewer5$user$curated6, _viewer5$user$curated7;

var elementId = (_viewer = viewer) === null || _viewer === void 0 ? void 0 : (_viewer$user = _viewer.user) === null || _viewer$user === void 0 ? void 0 : (_viewer$user$curatedF = _viewer$user.curatedFolderActivity) === null || _viewer$user$curatedF === void 0 ? void 0 : (_viewer$user$curatedF2 = _viewer$user$curatedF.edges) === null || _viewer$user$curatedF2 === void 0 ? void 0 : (_viewer$user$curatedF3 = _viewer$user$curatedF2[0]) === null || _viewer$user$curatedF3 === void 0 ? void 0 : (_viewer$user$curatedF4 = _viewer$user$curatedF3.node) === null || _viewer$user$curatedF4 === void 0 ? void 0 : _viewer$user$curatedF4.serviceId;
var folderPk = (_viewer2 = viewer) === null || _viewer2 === void 0 ? void 0 : (_viewer2$user = _viewer2.user) === null || _viewer2$user === void 0 ? void 0 : (_viewer2$user$curated = _viewer2$user.curatedFolderActivity) === null || _viewer2$user$curated === void 0 ? void 0 : (_viewer2$user$curated2 = _viewer2$user$curated.edges) === null || _viewer2$user$curated2 === void 0 ? void 0 : (_viewer2$user$curated3 = _viewer2$user$curated2[0]) === null || _viewer2$user$curated3 === void 0 ? void 0 : (_viewer2$user$curated4 = _viewer2$user$curated3.node) === null || _viewer2$user$curated4 === void 0 ? void 0 : (_viewer2$user$curated5 = _viewer2$user$curated4.anchors) === null || _viewer2$user$curated5 === void 0 ? void 0 : (_viewer2$user$curated6 = _viewer2$user$curated5[0]) === null || _viewer2$user$curated6 === void 0 ? void 0 : (_viewer2$user$curated7 = _viewer2$user$curated6.source) === null || _viewer2$user$curated7 === void 0 ? void 0 : _viewer2$user$curated7.serviceId;
var folderUrlLabel = (_viewer3 = viewer) === null || _viewer3 === void 0 ? void 0 : (_viewer3$user = _viewer3.user) === null || _viewer3$user === void 0 ? void 0 : (_viewer3$user$curated = _viewer3$user.curatedFolderActivity) === null || _viewer3$user$curated === void 0 ? void 0 : (_viewer3$user$curated2 = _viewer3$user$curated.edges) === null || _viewer3$user$curated2 === void 0 ? void 0 : (_viewer3$user$curated3 = _viewer3$user$curated2[0]) === null || _viewer3$user$curated3 === void 0 ? void 0 : (_viewer3$user$curated4 = _viewer3$user$curated3.node) === null || _viewer3$user$curated4 === void 0 ? void 0 : (_viewer3$user$curated5 = _viewer3$user$curated4.anchors) === null || _viewer3$user$curated5 === void 0 ? void 0 : (_viewer3$user$curated6 = _viewer3$user$curated5[0]) === null || _viewer3$user$curated6 === void 0 ? void 0 : (_viewer3$user$curated7 = _viewer3$user$curated6.source) === null || _viewer3$user$curated7 === void 0 ? void 0 : _viewer3$user$curated7.name;
var repName = (_viewer4 = viewer) === null || _viewer4 === void 0 ? void 0 : (_viewer4$userRelation = _viewer4.userRelationships) === null || _viewer4$userRelation === void 0 ? void 0 : (_viewer4$userRelation2 = _viewer4$userRelation[0]) === null || _viewer4$userRelation2 === void 0 ? void 0 : (_viewer4$userRelation3 = _viewer4$userRelation2.userDataB) === null || _viewer4$userRelation3 === void 0 ? void 0 : (_viewer4$userRelation4 = _viewer4$userRelation3[0]) === null || _viewer4$userRelation4 === void 0 ? void 0 : _viewer4$userRelation4.displayName;
var imageSrc = ((_viewer5 = viewer) === null || _viewer5 === void 0 ? void 0 : (_viewer5$user = _viewer5.user) === null || _viewer5$user === void 0 ? void 0 : (_viewer5$user$curated = _viewer5$user.curatedFolderActivity) === null || _viewer5$user$curated === void 0 ? void 0 : (_viewer5$user$curated2 = _viewer5$user$curated.edges) === null || _viewer5$user$curated2 === void 0 ? void 0 : (_viewer5$user$curated3 = _viewer5$user$curated2[0]) === null || _viewer5$user$curated3 === void 0 ? void 0 : (_viewer5$user$curated4 = _viewer5$user$curated3.node) === null || _viewer5$user$curated4 === void 0 ? void 0 : (_viewer5$user$curated5 = _viewer5$user$curated4.anchors) === null || _viewer5$user$curated5 === void 0 ? void 0 : (_viewer5$user$curated6 = _viewer5$user$curated5[0]) === null || _viewer5$user$curated6 === void 0 ? void 0 : (_viewer5$user$curated7 = _viewer5$user$curated6.source) === null || _viewer5$user$curated7 === void 0 ? void 0 : _viewer5$user$curated7.firstItemImage) || '';

vs

// using a commone parent
const node = viewer?.user?.curatedFolderActivity?.edges?.[0]?.node;
const elementId = node?.serviceId;
const anchor = node?.anchors?.[0]
const folderPk = anchor?.source?.serviceId;
const folderUrlLabel = anchor?.source?.name;
const imageSrc = anchor?.source?.firstItemImage || '';
// can't do much about this one since you're only using this object once
const repName = viewer?.userRelationships?.[0]?.userDataB?.[0]?.displayName;

outputs (scroll left -> right to see full output)

var _viewer, _viewer$user, _viewer$user$curatedF, _viewer$user$curatedF2, _viewer$user$curatedF3, _node$anchors, _anchor$source, _anchor$source2, _anchor$source3, _viewer2, _viewer2$userRelation, _viewer2$userRelation2, _viewer2$userRelation3, _viewer2$userRelation4;

var node = (_viewer = viewer) === null || _viewer === void 0 ? void 0 : (_viewer$user = _viewer.user) === null || _viewer$user === void 0 ? void 0 : (_viewer$user$curatedF = _viewer$user.curatedFolderActivity) === null || _viewer$user$curatedF === void 0 ? void 0 : (_viewer$user$curatedF2 = _viewer$user$curatedF.edges) === null || _viewer$user$curatedF2 === void 0 ? void 0 : (_viewer$user$curatedF3 = _viewer$user$curatedF2[0]) === null || _viewer$user$curatedF3 === void 0 ? void 0 : _viewer$user$curatedF3.node;
var elementId = node === null || node === void 0 ? void 0 : node.serviceId;
var anchor = node === null || node === void 0 ? void 0 : (_node$anchors = node.anchors) === null || _node$anchors === void 0 ? void 0 : _node$anchors[0];
var folderPk = anchor === null || anchor === void 0 ? void 0 : (_anchor$source = anchor.source) === null || _anchor$source === void 0 ? void 0 : _anchor$source.serviceId;
var folderUrlLabel = anchor === null || anchor === void 0 ? void 0 : (_anchor$source2 = anchor.source) === null || _anchor$source2 === void 0 ? void 0 : _anchor$source2.name;
var imageSrc = (anchor === null || anchor === void 0 ? void 0 : (_anchor$source3 = anchor.source) === null || _anchor$source3 === void 0 ? void 0 : _anchor$source3.firstItemImage) || '';
var repName = (_viewer2 = viewer) === null || _viewer2 === void 0 ? void 0 : (_viewer2$userRelation = _viewer2.userRelationships) === null || _viewer2$userRelation === void 0 ? void 0 : (_viewer2$userRelation2 = _viewer2$userRelation[0]) === null || _viewer2$userRelation2 === void 0 ? void 0 : (_viewer2$userRelation3 = _viewer2$userRelation2.userDataB) === null || _viewer2$userRelation3 === void 0 ? void 0 : (_viewer2$userRelation4 = _viewer2$userRelation3[0]) === null || _viewer2$userRelation4 === void 0 ? void 0 : _viewer2$userRelation4.displayName;

You should also try to stick with traditional type checking instead of trying to use optional chaining:

const arr = [];

if (arr?.length) {
	console.log('optional chaining');    
}

if (arr.length) {
	console.log('normal');
}

outputs

var arr = [];

if (arr === null || arr === void 0 ? void 0 : arr.length) {
  console.log('optional chaining');
}

if (arr.length) {
  console.log('normal');
}

For nullish coalescing, try to avoid using it if you're only looking for falsey values since the transpiled code will also be slightly bloated:

function nullish(falsey) {
	return falsey ?? 'nope';
}
    
function noNullish(falsey) {
	return falsey || 'nope';
}

outputs

function nullish(falsey) {
  return falsey !== null && falsey !== void 0 ? falsey : 'nope';
}

function noNullish(falsey) {
  return falsey || 'nope';
}

This babel repl can be used to test your output. These options are pretty close to the actual 1D babel config.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment