JavaScript on Much Ado About IT

How to reliably detect the object type of a JavaScript variable?

Julian Knight — Sun, 07 Jun 2020 14:30:54 +0000

The nature of JavaScript means that everything is treated as an object (sort of). It can be remarkably hard to reliably detect what type of object something is and there isn't a single function in JavaScript that can be used in all cases. So how do we do it? Here are some options

The “official” way is to use Object.prototype.toString.call(objectToTest). This will work no matter what the object is, even null or undefined. However, it is relatively quite slow.

A quicker way is probably to use objectToTest.__proto__.constructor.name. However, note that this will fail (as do many other methods) if the object is null or undefined.

Simple function

This simple function provides an easy to use way to return the object type and a list of simple type ENUM’s to compare against.

Note that using Object.prototype.toString.call(prop) is a fairly slow operation and therefore this should be avoided when maximum performance is required.

var types = {
 'get': function(prop) {
 return Object.prototype.toString.call(prop)
 },
 'null': '[object Null]',
 'object': '[object Object]',
 'array': '[object Array]',
 'string': '[object String]',
 'boolean': '[object Boolean]',
 'number': '[object Number]',
 'date': '[object Date]',
}

Used as:

if(types.get(prop) == types.number) {
 // ...
}

It can, of course, be extended with your own bespoke object types.

This is taken from an answer to the StackOverflow Question: The most accurate way to check JS object’s type?.

Creating a notification in the Admin UI

Julian Knight — Sun, 16 Jun 2019 19:22:16 +0000

Node-RED's admin UI has a built-in notification (toast) pop-up message feature. This article explains how to use it when creating custom nodes as it isn't currently well documented.

RED.notify('Your message here', options)

This can be called from the script in your admin ui code <nodeName>.html.

By default, the notification will disappear after a few seconds.

Options

type: {success|warning|error=} Adds style to the message box.
fixed: {boolean=false} Defaults to false, the notification will auto-remove after a few seconds.
modal: {boolean=false} If true, no other user interactions are allowed until the notification has cleared.
timeout: {ms=5000}: Specify the time in milliseconds a non-fixed notification will be displayed for.
id: {string=} Allows a notification to be updated.
width: {px=} Desired width in pixels. (Will be limited to the parent width)

Methods

.close(): Close the notification (useful if fixed option is true).
update
hideNotification
showNotification

Example

let myNotification = RED.notify('My message in a box', {
 modal: true,
 fixed: true,
 type: 'warning',
 buttons: [
 {
 'text': 'cancel',
 'click': function(e) {
 myNotification.close()
 }
 },
 {
 'text': 'okay',
 'class': 'primary',
 'click': function(e) {
 myNotification.close()
 },
 },
 ],
})

References

https://discourse.nodered.org/t/node-red-admin-ui-display-message-to-user/12290
https://github.com/node-red/node-red/blob/ccc3809daa3b03e7171cb6f4ccf4d6e0f1188bef/packages/node_modules/%40node-red/editor-client/src/js/ui/notifications.js#L16
https://github.com/node-red/node-red/wiki/API-Reference (old but has some things not documented elsewhere)

Cleaning up npm package install problems

Julian Knight — Wed, 05 Jun 2019 07:05:39 +0000

Node-RED uses npm to manage package installations such as its nodes. Sometimes, you can get into a situation where you start getting lots of npm installation or removal issues and it feels like you are going round in circles trying to fix things. If so, time to call it a day and to get drastic! Here, I try to explain an easy way to fix things quickly and completely without side effects.

Node-RED is built over Node.js which uses npm as its library (AKA package) manager. It is great to have a standard mechanism to manage libraries but the complexities of managing JavaScript based packages sometimes trips things up.

Once you’ve tried for a bit to understand what the issues are, it may be time to call time and get drastic.

The following commmands will clean out the packages installed for your live instance of Node-RED - assuming you have it installed via the “standard” default method. If not, you will need to adjust the folder you operate in.

cd ~/.node-red
rm package-lock.json
rm -R node_modules
npm install

That will cleanly reinstall all of the packages marked in your package.json file. So make sure that is correct first. Every time you install a package (as long as you have reasonably up-to-date versions of Node.js and npm) whether from the NR admin ui or command line, it gets added to package.json.

I now always remove the lock file as well if I’m having issues as that can be the cause of some issues. The lock file isn’t generally needed in NR installations.

Note, as always, I’ve assumed you have a “standard” install of Node-RED which puts your userDir as ~/.node-red (and the equivalent on Windows). If you use an installation scheme like mine, it will be in a different place as noted by the command used to start NR.

Analysing the Performance of Node-RED

Julian Knight — Fri, 19 Apr 2019 13:23:06 +0000

Node-RED is a powerful platform for prototyping and rapid development but it is complex. It has a lot of moving parts and it can be hard to know what might be causing performance bottlenecks. This article tries to give some hints and tips about analysing those bottlenecks and how to resolve them.

Sorry, this is draft and far from complete. Please leave comments if you have something useful to add. Thought I would publish anyway in case anyone finds it useful. I will try to come back to it in the future. If you leave a comment, it will remind me. :-)

Platform

Before starting more detailed analysis, the first thing to do is to look at the platform being used to run Node-RED.

Often, something like a Raspberry Pi or other single-board computer (SBC) is being used. They have very limited resources and often slow storage (e.g. SD-Cards). So it is very easy to overload them and kill performance.

To analyse this, you need to use a tool such as top. Better still, get something a bit more comprehensive such as glances. Either way, these will tell you how much CPU and memory (RAM) is being used and by what. Start by looking at the three ’load’ values, these should all be fairly low, if they are going over about 2-3 regularly then you have an issue.

Next look at the ‘swap’. If this is being used regularly, you will have a performance bottleneck because memory (RAM) is being overused. To fix this, you have to unload some services. If using the glances tool, it will show a warning if the memory is swapping.

The easiest way to remove load is likely to be turning off the ‘desktop’. This gives you a GUI that you directly interact with via keyboard and monitor. Removing this will remove lots of load on memory and CPU. Have a look at articles that explain how to run your device ‘headless’. You will need to be able to connect to your device over the network from another device.

After that, if there are still issues, you need to look at taking off services that you don’t actually need running.

Finally, if you still have issues, you will need to think about splitting services between multiple devices or using a more powerful device.

Back End (server)

Using Node.JS `--inspect` option

Front End Browser (Node-RED Admin UI)

For any browser performance issues, you firstly need to ensure that the problem is actually coming from something related to Node-RED. So you should turn off any browser extensions before continuing. An extension such as SimpleExtManager for Chromium browsers will assist with easily turning on/off extensions.

Browser Performance Profiling

Using your browser’s developer tools, you are able to record and analyse a performance analysis. The Chromium developer tools have three tabs to help with this. Performance, Memory and Application.

The Performance tab is perhaps the easiest to get going with. Click on that tab and then start profiling. Leave that for an amount of time that you estimate will let you see any ongoing performance issues. That might be just a few seconds or a few minutes. You will want to tick the “memory” option and probably don’t need the “Screenshots” option.

The thing to look at first is likely to be the memory utilisation. There is a graph 1/2 way down the display that shows you some important metrics including the “JS Heap”. See how big that is getting by hovering over the line. Also look at how fast it is growing. You should see that the heap reduces periodically as the JavaScript engine does a ‘garbage collection’.

You can also do multiple recordings and compare the heap over a longer period.

Front End (Dashboard, uibuilder, http-in/-out nodes, etc.)

How to take control of JavaScript console output

Julian Knight — Sat, 02 Feb 2019 00:52:46 +0000

All browsers have the console object that lets you output to the developer console log. But in production, you don't want this output, only in development. So here is the easiest way I've found to take control.

This is a simple example and really needs expanding to be more general purpose.

It uses a global debug variable to control output. If debug is false, no output will occur.

All functions of the console object are taken over by this function.

Code

/** Debugging function
 * @param {string} type One of log|error|warn|info|dir, etc
 * @param {...*} msg Msg(s) to send to console
 * WARNING: ...args is ES6, it doesn't work on IE11
 * @since 2019-02-01 Apply any number of args
 **/
//myDebug = function (type, ...args) {
myDebug = function () {
 if (!debug) return

 var type = arguments[0]

 //console[type](...args)
 console[type].apply(undefined, [].slice.call(arguments, 1))

} // --- End of debug function --- //

What JavaScript versions are there and how do they map to Node.JS versions?

Julian Knight — Fri, 04 Jan 2019 20:03:59 +0000

There are now far too many versions of JavaScript. Worse, there are several ways to refer to a JavaScript version. Then we have Node.JS which has its own versioning. This post tries to summarise it all.

This is just a summary for my own reference. See References below for more details.

Please let me know if there are any errors. I will update the table periodically.

ECMA-262 Version	ECMAScript Year Version	Publish Date	Node.JS Version
5	N/A	2009-12
6	ES2015	2015-06	6.5.0+
7	ES2016	2016-06	7.0.0+
8	ES2017	2017-06	8.10.0+
9	ES2018	2018-06	10.0.0+

Notes:

Versions of Node.JS prior to those shown are likely to support some features of newer JS versions. The versions shown are those that support virtually all of the features.
Some JavaScript features may not be implemented in Node.JS.
Node uses the V8 JavaScript engine. Also used by the chromium browser (which underpins Vivaldi, Google Chrome, Opera and many others. Soon to be used by Microsoft Edge as well).

References

Wikipedia ECMAScript Article
Kangax’s JavaScript Compatability Table
Node Green - Maps Node versions to JavaScript versions and shows what is supported in each version. Uses Kangax’s table.
Mozilla Developer Network (MDN) - Details each aspect of JavaScript as a reference, each page has a compatibility table showing browsers support. Uses Kangax’s table.

How to loop over JavaScript arrays and objects

Julian Knight — Fri, 04 Jan 2019 20:00:07 +0000

JavaScript can be a pain at times. Loops are a fundamental part of all computer languages but in JavaScript, there are some oddities. This post is a summary of the different loop features and when to use them. It is likely to be updated from time-to-time as the standards are still changing.

This is a personal, and incomplete reminder about doing efficient loops in JavaScript.

Of course, you should generally start with whatever is simplest. Generally you should not attempt to optimise too soon.

Arrays

Objects

The old fashioned way still works & is still generally the fastest.

var keys = obj.keys().sort()
for (var i = 0; i < keys.length; i++) {
 console.log(i, obj[keys[i]])
}

Somewhat faster version of the above (the length is not calculated on each loop and prefix iterator is slightly faster than postfix).

var keys = obj.keys().sort()
for (var i = 0, len = keys.length; i < len; ++i) {
 console.log(i, obj[keys[i]])
}

From JS v5, you can use a combination of Object.keys() and Array.prototype.forEach().

Object.keys(obj).forEach(function(key) {
 console.log(key, obj[key])
})

In addition, Object.values(obj) does what you’d expect.

for ... in (MDN) - includes non-own properties.

From JS v6 (ES2015), you can use for...of.

for (const key of Object.keys(obj)) {
 console.log(key, obj[key])
}

In JS v8 (ES2017), Object.entries() was added which avoids having to look up each value in the original object.

Object.entries(obj).forEach(
 ([key, value]) => console.log(key, value)
)

Object.keys() and Object.entries() iterate properties in the same order as a for...in loop. However, they ignore the prototype chain. Only the object’s own enumerable properties are iterated.

References

How to get the properties of a JavaScript object without errors

Julian Knight — Thu, 03 Jan 2019 13:53:38 +0000

You cannot natively request chained properties of a JavaScript object without the possibility of an error. This utility function allows you to get any properties, no matter how they are nested.

Let’s say that we have an object like that shown in the example.

We can use the function to get any property, including nested properties and property names with spaces very simply. We can use both dot and bracket notation as shown in the tests.

The function will always either return the value of the given property or undefined. It will not return an error.

Example Object

We can use this for reference

{
 "a":"fred",
 "b":"yup",
 "c": {
 "c1":1,"c2":2
 },
 "d":{
 "d 1":1,
 "d 2": {
 "d 2a":"a",
 "d 2b":"b"
 }
 }
}

Code

/** Get a nested property from an object without returning any errors.
 * If the property or property chain doesn't exist, undefined is returned.
 * Property names with spaces may use either dot or bracket "[]" notation.
 * Note that bracketed property names without surrounding quotes will fail the lookup.
 * e.g. embedded variables are not supported.
 * @param {object} obj The object to check
 * @param {string} prop The property or property chain to get (e.g. obj.prop1.prop1a or obj['prop1'].prop2)
 * @returns {*|undefined} The value of the objects property or undefined if the property doesn't exist
 */
function getProp(obj, prop) {
 if (typeof obj !== 'object') throw 'getProp: obj is not an object'
 if (typeof prop !== 'string') throw 'getProp: prop is not a string'

 // Replace [] notation with dot notation
 prop = prop.replace(/\[["'`](.*)["'`]\]/g,".$1")

 return prop.split('.').reduce(function(prev, curr) {
 return prev ? prev[curr] : undefined
 }, obj || self)
} // --- end of fn getProp() --- //

Tests

const testObj = {"a":"fred","b":"yup","c":{"c1":1,"c2":2},"d":{"d 1":1,"d 2":{"d 2a":"a", "d 2b":"b"}}}
let x = getProp(testObj, 'b')
console.log( 'getProp: "b" ', x )
console.assert(x==='yup', 'Expected b === "yup"')

x = getProp(testObj, 'e')
console.log( 'getProp: "e" ', x )
console.assert(x===undefined, 'Expected e === undefined')

x = getProp(testObj, 'b.b1')
console.log( 'getProp: "b.b1" ', x )
console.assert(x===undefined, 'Expected b.b1 === undefined')

x = getProp(testObj, 'c')
console.log( 'getProp: "c" ', x )
// console.assert doesn't seem to work for comparing objects
//console.assert(x==={"c1": 1, "c2": 2}, 'Expected c === {c1: 1, c2: 2}')

x = getProp(testObj, 'c.c1')
console.log( 'getProp: "c.c1" ', x )
console.assert(x===1, 'Expected c.c1 === 1')

x = getProp(testObj, 'c["c1"]')
console.log( 'getProp: "c["c1"]" ', x )
console.assert(x===1, 'Expected c["c1"] === 1')

x = getProp(testObj, 'd.d 1')
console.log( 'getProp: "d.d 1" ', x )
console.assert(x===1, 'Expected d.d 1 === "b"')

x = getProp(testObj, 'd.d 2.d 2b')
console.log( 'getProp: "d.d 2.d 2b" ', x )
console.assert(x==='b', 'Expected d.d 2.d 2b === "b"')

x = getProp(testObj, 'd["d 2"].d 2b')
console.log( 'getProp: "d["d 2"]d 2b" ', x )
console.assert(x==='b', 'Expected d["d 2"]d 2b === "b"')

How to walk through a JavaScript object in sort order

Julian Knight — Mon, 31 Dec 2018 13:44:45 +0000

Using a JavaScript object like a keyed array, what is the simplest way to walk through the object?

Let’s say that we have an object like that shown in the example.

How do we output the content, ordered by key?

The code creates an array from the primary keys of the object, sorts the array and then walks through each entry.

Example Object

We can use this for reference

{
 "Pi3NR-LIVE": "Online",
 "Pi2NR-LIVE": "Online",
 "D1M04":"Online"
}

Code

const myObj = {
 "Pi3NR-LIVE": "Online",
 "Pi2NR-LIVE": "Online",
 "D1M04":"Online"
}

Object.keys(myObj).sort().forEach(function(key) {
 console.log( `${key} : ${myObj[key]}` )
})

/**
 * Will output (note the reordering):
 *
 * D1M04 : Online
 * Pi2NR-LIVE : Online
 * Pi3NR-LIVE : Online
 *
 **/

Download a GitHub Repository using Node.JS

Julian Knight — Sun, 30 Dec 2018 22:03:07 +0000

Downloading a repository from GitHub using Node.JS should be really easy. But it isn't! This KB post reminds us of the tricks required.

We have to be careful with the source URL names when working with GitHub as the URL’s generally exposed on the web interface are not the actual URL’s. The Node.JS http/https get() functions don’t handle redirections well.

#!/usr/bin/env node
'use strict'

/**
 * Install the Node-RED alternate installation template
 *
 * Author: Julian Knight (Totally Information), Jan. 2019
 * License: MIT
 */

const fs = require('fs')
const https = require('https')

function download(url, dest, cb) {
 const file = fs.createWriteStream(dest);
 const request = https.get(url, function (response) {
 response.pipe(file);
 file.on('finish', function () {
 file.close(cb); // close() is async, call cb after close completes.
 });
 }).on('error', function (err) { // Handle errors
 fs.unlink(dest); // Delete the file async. (But we don't check the result)
 if (cb) cb(err.message);
 });
};

// Download latest archive from GitHub to temp folder
const dest = './alternate-node-red-installer.zip'
const url = 'https://codeload.github.com/TotallyInformation/alternate-node-red-installer/zip/master'
download(url, dest, function(){
 console.log('Done')
})

Obviously, it would be better to add proper error traps and messaging.

GitHub URL’s

As mentioned, most of the exposed GitHub URL’s actually redirect which upsets Node’s built-in get functions. The downside of using the direct URL’s is that they may change format from time-to-time. If you can, use a 3rd-party library such as request which handles http vs https and redirects without additional programming.

The format for the actual repository archives (in zipped form) is:

https://codeload.github.com/<userOrOrgName>/<repoName>/zip/<branch>

Where: <branch> is either ‘master’ or a git tag ID (e.g. ‘v1.2.3’) or other git branch ID.

For an individual file from the repository, use:

raw.githubusercontent.com/<userOrOrgName>/<repository>/<branch>/<filename>

https://raw.githubusercontent.com/TotallyInformation/alternate-node-red-installer/

References

Node.JS and JavaScript

Julian Knight — Sun, 30 Dec 2018 21:58:14 +0000

Node.JS allows JavaScript to be used as a server-side (back-end) programming language.

References

Knowledgebase Articles

Diigo Bookmarks 05/12/2011

Julian Knight — Thu, 12 May 2011 12:31:08 +0000

<p class="diigo-description">
&#8220;Jash is a DHTML-based window that gives you command-line JavaScript access to the current browser window. With this console you can quickly debug scripts, manipulate the DOM, view the current page&#8217;s objects, functions, and variables, execute arbitrary Javascript, enter new CSS (in IE, Firefox, Opera, and Safari), and much more.&#8221; &#8211; A useful tool to execute JavaScript, make live (temporary) CSS changes to a page, discover the page structure, etc. for developers. Written totally in JavaScript so can be used on any platform with any browser. Include in your own pages for debugging or load via a bookmarklet to run on any page.
</p>
<p class="diigo-tags">
<span>tags:</span> <a href="http://www.diigo.com/user/knightnet/javascript">javascript</a> <a href="http://www.diigo.com/user/knightnet/programming">programming</a> <a href="http://www.diigo.com/user/knightnet/development">development</a> <a href="http://www.diigo.com/user/knightnet/bookmarklet">bookmarklet</a>
</p>
<ul class="diigo-comments">
<li>
Jash is a DHTML-based window that gives you command-line JavaScript access to the current browser window. With this console you can quickly debug scripts, manipulate the DOM, view the current page&#8217;s objects, functions, and variables, trace the execution stack, execute arbitrary Javascript, enter new CSS (in IE or Firefox!), and much more.<span class="diigo-post-by"> &#8211; post by <a href="http://www.diigo.com/user/ycc2106">yc c</a></span>
</li>
</ul>

JavaScript on Much Ado About IT

How to reliably detect the object type of a JavaScript variable?

Simple function

Creating a notification in the Admin UI

Options

Methods

Example

References

Cleaning up npm package install problems

Analysing the Performance of Node-RED

Platform

Back End (server)

Using Node.JS --inspect option

Front End Browser (Node-RED Admin UI)

Browser Performance Profiling

Front End (Dashboard, uibuilder, http-in/-out nodes, etc.)

How to take control of JavaScript console output

Code

What JavaScript versions are there and how do they map to Node.JS versions?

References

How to loop over JavaScript arrays and objects

Arrays

Objects

References

How to get the properties of a JavaScript object without errors

Example Object

Code

Tests

How to walk through a JavaScript object in sort order

Example Object

Code

Download a GitHub Repository using Node.JS

GitHub URL’s

References

Node.JS and JavaScript

References

Knowledgebase Articles

Diigo Bookmarks 05/12/2011

Using Node.JS `--inspect` option