darkmage

Posted on Mar 29, 2019

Finding Bugs in Languages/Frameworks You Don't Know: node.js

#javascript #node #webdev #json

I am helping my first node.js student. He's writing a server in node.js and I helped him find a missing parenthesis, curly-bracket, and semi-colon.

I don't know node.js, but I know enough Javascript to help.

Am I qualified to find problems in node.js projects now?

Can I put this on my resume?

How is this possible?

Questions that I asked myself during the session in order to help them:

How to check if an object is an array?
How to check if an object is a dictionary?
How to verify if a function callback occurs?
How do I access values in a dictionary?
Do semi-colons matter in Javascript?
How do I handle the POST request body in Node.js?

1. How to check if an object is an array?

This one is easy. There is a built-in method for this:

isArray = Array.isArray(someArray);

2. How to check if an object is a dictionary?

This one isn't so straight-forward, but if you know the keys that should be on it, you can try to access them.

v = someDict["someKnownKey"];

If a value exists for a known key, then the object is a dictionary.

I should go into further detail on this one...it is not sufficient or always possible to know the keys ahead of time.

3. How to verify if a function callback occurs?

I like to use alert() if possible, but otherwise console.log() will suffice.

4. How do I access values in a dictionary?

v = someDict["someKey"];

5. Do semi-colons matter in Javascript?

Originally, I thought "nah" but...

https://stackoverflow.com/questions/11978698/do-we-need-a-semicolon-after-function-declaration?lq=1

Turns out they do!

Just like in C, a function definition does not need them:

function test() {
    // ...
}

But, if you're assignment a function to a variable:

var f = function test() { 
    // ...
};

THEN, it matters.

6. How do I handle the POST request body in Node.js?

https://itnext.io/how-to-handle-the-post-request-body-in-node-js-without-using-a-framework-cd2038b93190

At the top of your file, add this line:

const { parse } = require("querystring");

Then, you can parse a POST body like this:

parsedData = parse(postData);

The returned object is a JSON dictionary, so you can access values on it in the same way.

I managed to help my student work through every single bug we encountered in 90 minutes, and managed to solve all of the problems that they had.

It is funny how I have virtually zero experience working with node.js, and yet I was able to dig through the problems that they were having, identify syntax errors using simple indentation procedures to line-up code blocks, ask some basic questions about the intended operation of the program, verify assumptions about the state of objects/variables, and move things from previously-broken to currently-working.

This is a thought-process that exists throughout the tech world, and is the driving factor by which progress is made and how things are discovered and built. Just ask questions. Once you have worked with so many languages and frameworks you get a general feel for all of them, which broadens your ability to identify problems in both small and large contexts.

If you need a Computer Science tutor, code reviewer, or just someone to pair program with, hit me up

Top comments (15)

JavaScript Joel • Mar 29 '19 • Edited

Do semi-colons matter in Javascript?

The examples you gave for #5, are valid with and without a semi-colon.

// ✅ OK
var f = function test() { 
    // ...
};

// ✅ OK
var f = function test() { 
    // ...
}

// ✅ OK
var f = () => {}

// ✅ OK
var f = () => {};

The times when you might require a semi colon are with naked expressions.

// ✅ OK
[1, 2, 3].map(x => x * 2)

// ❌ FAIL
[1, 2, 3].map(x => x * 2)
[1, 2, 3].map(x => x * 2)
//=> Cannot read property 'map' of undefined

In this instance you would have to use a semi-colon to implicitly separate the expressions.

// ✅ OK
[1, 2, 3].map(x => x * 2);
[1, 2, 3].map(x => x * 2);

darkmage • Mar 30 '19

Oh snap! Seems that Stackoverflow post needs updating ;)

Sébastien Vercammen • Mar 31 '19 • Edited

Oh snap! Seems that Stackoverflow post needs updating ;)

...No. This is the point where you need to know more JavaScript to know why this is happening, and when just getting by on assumptions and previous experience doesn't work.

This needs a semicolon:

const f = function(a) {
  return a;
}

Because e.g. build processes combine JS files. And this as a second file:

(function() { return 1; })()

Leads to a combined file of:

const f = function(a) {
  return a;
}(function() { return 1; })()

Which gives you the following result:

f = 1

Instead of defining a function f that could later be executed, and a separately defined IIFE (Immediately Invoked Function Expression) that would just be invoked in normal circumstances, the lack of a semicolon causes the result of the IIFE to be seen as the parameter for the invocation of function f:

const f = function(a) {
  return a;
}(1)

Add a semicolon and the statements are properly separated.

JavaScript Joel • Mar 31 '19

This needs a semicolon:

const f = function(a) {
return a;
}

I'm still standing by my statement as this does NOT need a semicolon.

I write semicolon-less code like this daily. Some projects for node, some for the browser, some projects for babel and some for webpack+babel.

I would need to see this reproduced in a repo to believe it. As it currently works fine for me projects without semicolons.

I have yet to see a scenario where that function expression requires a semicolon.

Except in the instance where a naked expression follows.

Cheers!

Sébastien Vercammen • Mar 31 '19 • Edited

Except in the instance where a naked expression follows.

So because there's only one situation that breaks the whole thing, you personally feel it's unnecessary.

That might be your personal opinion, but as a standard you should add a semicolon to prevent everything from breaking. If you enjoy having your own websites break, that's your own pleasure to enjoy.

It's a common scenario in build processes that include 3rd party libraries, since you might have no idea at all how that library's code starts. And updates to it can introduce an IIFE. IIFE's are also extremely common for scoping in libraries and browser extensions.

An application injecting an IIFE at the wrong place in your webpage = also breaks everything. Lots of companies do this to add functionality or scrape data, e.g. Pinterest does it in their WebView to discover pinnable content.

JavaScript Joel • Mar 31 '19 • Edited

as a standard you should add a semicolon

This is also an opinion.

Semicolons are absolutely optional.

The first thing I do in a new project is install prettier and set the semi option to off. This ensures that there are no semi colon in my projects.

I'll trying to tell you that it works because I am currently doing it.

You can look at this repo for a real world semicolon-less project. github.com/joelnet/MojiScript

The way you describe the build process is not how they work. You will never run into that scenario because they all handle semicolon-less code without issue.

It will work in webpack.
It will work in Babel.
It will work with roll-up.

So exactly which build process do you refer to?

Try to build a project yourself. You will find that it works. I guarantee it!

Sébastien Vercammen • Mar 31 '19 • Edited

I feel like you're having me repeat myself:

you personally feel it's unnecessary.

You realize that the world doesn't run on your personal build preferences, and that every third party library you're describing is not a language feature, right?

Requiring external dependencies is not a solution.

It's also not because you personally have a different build process, that the problem doesn't exist.

JavaScript Joel • Mar 31 '19

Since your theories are in direct conflict with my real world experience, and you refuse to actually run a real test to see what I am saying is correct, I don't see how this conversation can continue.

I feel like you're having me repeat myself:

Instead of continuously repeating yourself, if you were to attempt to actually create a repo you would see this for yourself.

One of us is correct and one of us is wrong. People reading this thread can test this for themselves to see who it is.

But I'll repeat myself for the final time for any other person's that stumble across this thread in the future and want the correct answer.

Since I started writing JavaScript, back from 1996 to today, with or without a build system, semi-colons are completely optional. with the exception of naked expression example mentioned in my original comment.

Cheers!

darkmage • Apr 1 '19

Let me ask you this, Joel:

Is there any security implication from omitting semicolons? Is it safer to use semicolons? I do not know the answer right now, or whether or not it matters, but I think this is something worth exploring.

JavaScript Joel • Apr 1 '19

Not that I am aware of. But if there were, it would be a game changer in the semi vs no semi debate. So I think if one was found, it would make big news.

If you minify your code, or webpack or roll-up, or Babel, then semi-colons will be added to the dist bundle anyway.

So develop in the style you prefer, use prettier and ESLint to enforce your chosen style and don't stress about it 😁

Cheers!

Sébastien Vercammen • Apr 1 '19 • Edited

Since your theories are in direct conflict with my real world experience

I've seen this problem happen in production with actual clients.

Since I started writing JavaScript, back from 1996

...ok. I'll leave you to your mental masturbation. We were talking about language implementations of semicolons, not how old you are.

For anyone that reads this thread: Know the language's implementation and consequences. It's a reasonable thing to expect you to know, and it might come up in an interview. Personal opinions don't matter much if you're asking for the answer to 1 + 1. Toolset iterates constantly and tools disappear sooner rather than later - it's JavaScript that stays. Learn from first principles.