Zen of JavaScript

A long time has passed since JavaScript became mainstream. And despite multiple attempts, there is still no right single way to write code in this language. Everybody is using it in their own special way and most people still fill that they are failing to tame the language.

In this talk I will try to show you what the language has been trying to tell us for all these years, where the real path to enlightenment is, or at least we can have fun and look at things we know (or pretend to ūüėČ from an unorthodox point of view. ūüėČ

Prepare to meet JavaScript… again.

Something we’ve always enjoyed in the aftermath of Web Directions conferences is reading the blog posts and articles by attendees that follow. There’s always half a dozen or more, and they act not only as record of what took place that’s useful to those who didn’t attend, but also as a kind of a filter that lets us see our events through others’ eyes.

Most people outline broad conference highlights or focus on a handful of the presentations and the insights gleaned from them, but for many years now there has been this one post-conference blog post we‚Äôve all come to look forward to: Ben Buchanan‚Äôs Big Stonking Post‚ĄĘ.

Partly in acknowledgement of all those people who write about their experiences at our events, and partly in admission that our usual Wrap format just wouldn’t capture Dmitry Baranovskiy’s talk, we’re turning this one over to Ben, re-published with permission from  the 200ok weblog.

Dmitry Baranovskiy ‚Äď Zen of JavaScript

Dmitry is not about to tell us that everything you know about JavaScript is wrong… although it is…

Dmitry remembers when he first met JavaScript nobody called it JavaScript. When he was studying at university, he was told ‚Äúyou can use any language you want‚ÄĚ he chose JavaScript. It was 1997. People were laughing because it was ‚Äúnot serious‚ÄĚ.

The problem with JavaScript is¬†everybody knows it, nobody knows it.¬†People don’t pick up JavaScript so much as run into it.

JavaScript has long been considered a bit of a joke. People have bent JavaScript to meet what they expect ‚Äď you can tell JavaScript written by a Ruby guy or a Java guy. Even JavaScript developers layer on Angular and React and that changes the way you write.

But what is the JavaScript way of writing JavaScript?

There is no wrong way. JavaScript was written so that any way is the right way. ‚ÄúYou can still write shitty software, don’t worry…‚ÄĚ

Those who are unaware they are walking in darkness will never seek the light. – Bruce Lee

Zen has the well-known conundrum of ‘what is the sound of one hand clapping’‚Ķ in JS the question is probably ‘what number is not a number’. We are afraid of¬†NaN!

NaN.

What if¬†NaN¬†is there for a reason? What if we¬†used¬†it? If we have a function that returns a number but returns¬†null¬†if there’s an error‚Ķ why not return¬†NaN¬†instead of¬†null?

People are afraid of¬†NaN¬†because the first time you get¬†NaN¬†it’s because you fucked up. So from then on you think if you see¬†NaN¬†you did something wrong.

Accept¬†NaN. It’s there. It exists. You can use it.

Dmitry used¬†NaN¬†in real code twice last week‚Ķ he’s not saying his colleagues appreciated it.

Equality.

Is JavaScript good or bad at equality? Depends who you ask and how you look at it.

==¬†is hated‚Ķ why so much hate? Dmitry’s current team has a rule you cannot use ==. There are reasons for it. There are unexpected and confusing results when you use¬†==. So we use¬†===.

=== is a true friend, always telling you what you want to hear.

But¬†===¬†is not fixing the problem, it’s covering the problem.

What about¬†<=¬†>=¬†<¬†>¬†‚Ķ? Not using these is like hiding by covering your face. If you don’t understand what you’re doing, you are in trouble.

People look at JavaScript and come up with theories how it works, then they code according to those theories. Don’t make up stupid theories ‚Äď read the spec. There’s no mystery. It’s documented.

Acceptance.

JavaScript is very accepting. It accepts all your hate, all your blame. All your love.

.charAt()¬†doesn’t care what you pass in to¬†.charAt(). Be like¬†.charAt(). It always returns something. Exceptions? Why throw exceptions? Why be so rude?

It doesn’t care what it’s running on, either. Pass it a number, it returns a number. Pass it¬†NaN,¬†it returns a character from¬†NaN.

NaN.charAt()¬†‚Üí ‚ÄúN‚ÄĚ

Emptiness.

Emptiness is very important in Zen. JavaScript has three emptinesses: NaN null undefined

Undefined¬†isn’t even¬†null. It’s more empty than¬†null.

But JavaScript has something even more empty than that‚Ķ JavaScript can have a placeholder that returns undefined. But if there’s no placeholder, it’s not even undefined.

There is nothing new.

The ‚Äúnew‚ÄĚ keyword doesn’t smell like JavaScript. It was put in to smell like Java, which was fashionable at the time. As Java stopped being fashionable, people started leaving it out.

RegExp() and new RegExp() → the result is the same. Function() and new Function→ the result is the same

But then you have things like:

Date() is not equal to new Date(). Same for Number(), Set(), Symbol().

Date() is an alien function, not from JavaScript, it was brought in from Java.

JavaScript and exceptions are things from opposite universes.

42/0¬†in JavaScript doesn’t throw an exception. It returns¬†Infinity.

The five faces of function.

You can use Function five ways. You can call a function, you can return a function, you create contexts and closures with functions, you can use function as a constructor, you can call it with strings or numbers.

Forgiveness.

People write rubbish. JavaScript forgives you.

All your bad code. All your libraries. You want to run JavaScript on servers, on phones. JavaScript forgives you.

You want to put commas first? You want to omit semicolons? JavaScript forgives you. Dmitry doesn’t. But JavaScript does.

Is it a good thing, or a bad thing? Dmitry doesn’t know. But it’s how the language is written.

JavaScript is not a weak language, it’s a flexible language. It’s an encouraging language. You don’t have to follow the rules of Python or Java to write JavaScript, but you can. You can follow your own rules if you want to. It gives you that freedom.

And those who were seen dancing were thought to be insane by those who could not hear the music. – Nietzsche

Be the ones who hear the music.

Opening title¬†Next up we have someone¬†who’s been very dear to¬†the Web Directions world and family for many, many years.¬†So he first came to Web Directions¬†I guess probably around 2006 or seven,¬†certainly very early in the days of the conferences,¬†and I’m gonna let you in on a little secret.¬†At one point, Dmitry said, “I have this ambition.¬†“I want to speak on a Web Directions stage.”¬†Right?¬†So one of the things we used to do back in the day¬†was to have different people emcee different sessions¬†as an opportunity to get on stage.

We do lots of other things now.

We do, What Do You Know.

We run speaker development programs¬†and other things to help people get on stage.¬†And of course there are many more opportunities now.¬†Lots of different conferences and meet-ups¬†and all that sort of thing that really¬†didn’t exist back then.

But I remember that quite clearly.

Not only did Dmitry end up speaking at Web Directions, but he spoke on a number of occasions, and he spoke in fact, all over the world, and now he is a senior software engineer, sorry, senior computer scientist at Adobe working on some very interesting things there. You may know him from such amazing libraries as Rafael and Snap SVG.

He spends his days now importing and exporting SVG¬†or writing importers and exporters,¬†which I think he’s very excited about doing.¬†Many years ago I wrote an article called,¬†“A Dao of Web Design.”¬†And he has a presentation that he’s going to do called,¬†“The Zen of JavaScript.”¬†So the two seem to just go perfectly together.¬†So to finish off today would you please welcome¬†Dmitry Baranovskiy.

(audience applause) РOkay, so, yeah.

I’m probably, probably can win the contest for¬†the most awkward photo for the conference.

I think John just picked up the worse photo of me on the internet for the conference.

I’m pretty sure on purpose.

(scattered laughter)¬†Because if you just Google my name,¬†there’s like plenty of photos of me, and this.¬†(laughter)¬†I did it on–¬†I not always Google my name but when I do,¬†(laughter)¬†I search for the good photo of me.

(laughter)¬†It’s not actually as hot as you could think¬†by looking at my face.

(laughter) But John succeeded to find the worst.

If you been on the website and saw this.

Yeah.

That’s been said.

What I want to talk about.

The JavaScript.

I remember when I first met JavaScript nobody called it JavaScript.

I’m that old.

And when I was doing, back in the Union,¬†when I was doing some of the project,¬†and I was told, “You can use anything that you want.”¬†I decided to do it in JavaScript.

It was 1997, I think.

And everybody was laughing at me, like,¬†“Ha ha, JavaScript.

“What are they talking about?¬†“It’s not serious.”¬†And then I choose JavaScript later as my language of choice¬†and everybody was telling, “You should choose Java,¬†“Java is the language, Java is the thing.

“You should know Java.”¬†And then JavaScript. Then it was Ajax.

And then everybody jumped into JavaScript.

Then were not yet and now only lazy person¬†doesn’t code in JavaScript.

(laughter) Which in turn, sort of, people running into JavaScript.

They going through like,¬†“Yeah. Easy. I grab it. I get it.

Closures. Got it. Types. Got it. Prototypes. Got it.

That’s it, I can do it.”¬†Who knows JavaScript?¬†(laughter)¬†Okay.

See, see, see?¬†– We’ve seen it before.

(laughter)¬†– It’s a tricky question, right, when I’m asking it?¬†The problem with JavaScript,¬†everybody knows it, nobody knows it.

People treat it sort of in a rubbish way, I would say. And what I want to see is how the JavaScript, if you take everything off, what does it look like? Like, I saw so many times when people write JavaScript and they are Java developers.

It’s easy to see.

The function names a bit long.

(laughter) Or you can see it in person from Ruby writes JavaScript and especially uglies and person from PHP writes JavaScript, but what if somebody from JavaScript write JavaScript? What is the pure sense of JavaScript? JavaScript is very flexible, therefore you can write it in Java way, Ruby way, whatever way.

What is a JavaScript way? What about we stop for a moment thinking about the react and other shit like that and stop treat JavaScript as a job.

“Hey, JavaScript do this. JavaScript be like Ruby.

JavaScript be like Java. JavaScript do like classes.”

Just stop.

Say, “Hey JavaScript, what do you want?¬†(laughter)¬†“What do you want to do?”¬†And see what it will answer.

I’m not here to teach you how to write JavaScript, okay?¬†I don’t want to waste my time.

(laughter)¬†It’s not my job.

You can write JavaScript whatever way you like. You are writing it correctly.

It was done for you– it was built in such a way¬†that you cannot get wrong¬†in the way you’re writing.

You can still create shitty software, don’t worry.¬†(laughter)¬†But, there is no wrong way.

Any way is good.

I just want to give you little sparkle in your head maybe to bring you some ideas.

Those who are unaware they are working in darkness will never see the light.

Whose quote is that?¬†I should say I have a prize, but I don’t.

(laughter)¬†It’s Bruce Lee.

Bruce Lee.

Let’s try to bring some light¬†and talk about some necessary important things.¬†The very common concept in zen is the koans, zen koans,¬†and basically the question you ask¬†and then you spend 12 years meditating in a distant cave¬†and then you come when the answer gets enlightened.¬†One of the common occurrences,¬†what is the sound of one hand clapping?¬†If you translate it to JavaScript,¬†obvious translation would be¬†what is number which is not a number?¬†(laughter)¬†So, for example, if we have function like that,¬†see I have a code in my slides,¬†for example if there’s in range,¬†you pass a from two numbers¬†and if it’s a inside these numbers,¬†it will reach on your a,¬†otherwise it will reach on you null.

And then somewhere later in the code you have something like this.

If it’s in range, not equal to null,¬†then do something, something, something.

Instead of including null into all this and then checking for the null or not null, or something like that, why not reach on NaN and put NaN into the game.

People afraid of NaN.

It’s like– I understand why.

I know why.

Because first time you met NaN, it was because you fucked up.

(laughter)¬†Somewhere in your code,¬†you messed up and you had strings to numbers¬†and then it’s get NaN¬†and you get NaN as a result and you’re like, “Oh!”¬†And you’re avoiding it.

And every time you write in code, if you see NaN it means something wrong.

Accept it.

(laughter)¬†It’s there.

It’s in there.

You like it, you don’t like it.

It’s still there.

Why not embrace it, instead?¬†So if your function reach a NaN like this,¬†you can pass it over¬†and you don’t need to check for anything.

It’s a number.

You can still multiplicate by it.

You can still do some stuff.

At the end, you can check if it’s NaN and do something.¬†I’m not saying this is the right way¬†and you’re writing the wrong way.

Just think about it.

It’s there for a reason.

Why not to use what already exists in the language? Maybe this is the way of language.

Maybe this is the right way of using JavaScript. Maybe not.

Equality is very important topic in JavaScript.¬†In JavaScript, equality is–¬†it depends who you ask.

It’s either good implement, very well implemented¬†or it’s very bad implemented.

Depends how you look at it.

A most common and loved operator is double equal, right?¬†Everybody has love hate relationship with double equals.¬†(laughter)¬†I don’t know.

I like this operator.

Everybody trying like,¬†“Yeah, yeah, yeah.

“Don’t use it. Don’t use it because this.

“Object equals true? False.

“Object equals false? False”¬†Doesn’t make sense.

But if you put wel-dee off in the object which returns zero, object equals false? True.

But array equals false. Always true.

(laughter)¬†Here I’m pretending I don’t know why.

And of course, then equals null, false.

(laughter)¬†And when people are saying,¬†“Okay, this is rubbish, this insanity.

“Don’t use it.”¬†Let’s use triple equals.

This is our true friend.

He always tells you what you want to hear.

(laughter)¬†But using triple equals instead of double equals,¬†it’s like playing hide and seek¬†and just covering your eyes.

You’re like, “Oh you can’t see me,¬†“therefore I can’t see you, so you can’t see me.”¬†It’s very childish.

(laughter)¬†Because what about these guys?¬†Okay, you don’t use double equals anymore.

You ee-es-linked it all out from your code.¬†You don’t use this as well, right?¬†Because, you know what, they behave exactly the same way.¬†So if you get rid of double equals,¬†get rid of all his friends.

Let’s look, for example, at lesser or greater.¬†Less or equal.

Whatever this called.

(laughter)¬†I’ve seen it somewhere.

Object lesser equal true? False Object lesser equal false? False.

Oh my god, you do the same with the way you’re off¬†you had the rate, you have the same.

I showed it to friend of mine and he said,¬†“Yeah, I got it, I got it.”¬†It can slow or equal, it converts everything to number.¬†Look, look, look, look.

Object becomes NaN, two becomes one.

NaN always returning false.

In the second again, NaN zero false.

Then you get while the off it which on zero, zero and zero. True.

Array, array, array, Okay, array.

Array occurring the object to number,¬†it converted to primitive,¬†so it’s connected to string,¬†empty string, it becomes zero.

And forces zero.

Ah-ha!¬†It’s number.

It just works like with numbers.

That’s it.

No, not really.

(laughter) This is very common case.

People build theories.

Then they believe in their theories.

Then they code based on their theories.

And their theories are wrong.

Don’t build stupid theories.

(laughter) There are no secrets.

There is a specification.

It’s not very well written, but it’s not very terrible.¬†You can read it.

It’s written in English.

You should be able to read it.

This is not treated like numbers.

Why this is like that?¬†It’s your whole milk.

Acceptance. Very important.

It’s what language is built on.

It’s very good kind language.

It accepts anything.

All your hate, all your frustration, everything gets accepted.

When you write JavaScript,¬†if you want to write it in JavaScript way,¬†you don’t have to.

It accepts it, too.

But if you want to try to write acceptable code,¬†and when I say acceptable,¬†I’m not talking about accessibility¬†or stuff like that, be nice.

That’s what JavaScript trying to tell you all these years.¬†Be nice.

Look at charAt.

One of my favorite methods in JavaScript.

It’s a core method, fits in the JavaScript API,¬†so it’s not from DOM,¬†it’s not from anywhere in your library.

It exists in the core.

Let’s see how it behaves.

Well, charAt gives you a method of the string object and it gives you back the character in a particular place.

It doesn’t give a shit what you pass in.

You pass in string? It converts to number.

You pass float number.

It understands you mean integer part of it. You pass array, it converts to number.

You pass through, it converts it to number.¬†You pass nothing, it assumes it’s zero.

You pass NaN, it assumes it’s zero.

Because NaN doesn’t make sense here.

You pass negative, it just returns your empty string.¬†Exceptions?¬†Why be so rude?¬†Why exceptions?¬†(laughter)¬†Even more, you put this form string prototype¬†on number prototype, it doesn’t care.

It doesn’t care what the context it’s running in.¬†You put it on bullion.

Okay, bullion, whatever.

(laughter)¬†charAt doesn’t care what you’re passing in.¬†charAt doesn’t care what it’s running upon.¬†charAt just rocks.

Be like charAt.

(laughter)¬†It’s a life lesson here¬†in a couple lines of code.

There is very common, again, concept of zen called emptiness.

We, as a Western culture, always trying to fill the emptiness and fill the silence.

That’s what we’re living for.

In Asian culture,¬†they’re sort of embracing this emptiness.

I’m not sure is Brendan Eich is Asian,¬†but differently he has same thing for emptiness,¬†because JavaScript have many different emptinesses for you.¬†Well first of all, it’s zero, right?¬†I wouldn’t even mention it.

Then come two minds.

Then what is it? Nothing.

Now, even more nothing.

(laughter) Undefined. Not even now.

(laughter) As empty as it gets.

And you think okay, this is the bottom.

No.

Let’s see if even deeper emptiness in JavaScript.¬†Okay, pay attention from here.

In Sydney, I was stuck with people during this flight. Array of two, when you create array of two, is equivalent to creating array like this.

Undefined, undefined.

Basically if you write like this, it’s true.¬†Makes sense, easy peasy.

So we create a, which is array of two.

B, which is another way of creating array of two. Two undefines.

A of zero, triple equals–¬†I use triple equals for you guys¬†(laughter)¬†A of zero triple equals b of zero.

Yes.

A of one triple equals b of one.

Sure.

A length triple equals b of length.

Yes.

They are the same, right? Of course not.

(laughter) b.map alert, you have two alerts.

Undefined, undefined.

a.map alerts, no alerts.

Home come? Check a in a, one in a, false.

One in b true.

What that means? Well that means that in array b, you have array inside this array.

There are two place holders and in that place holders two values undefined and undefined.

Array a has just two place holders.

There is nothing in there.

(laughter) Not even undefined.

Okay? Zero. None, not even zero.

Null, not even none.

Undefined, not even null and this is not even undefined.¬†It doesn’t even have a name.

(laughter) The emptiness of emptiness.

And you tell me JavaScript is not a deep language. (laughter) This is some serious, deep shit here.

(laughter) Think about it.

As it’s said, there is nothing new in the world¬†and there is nothing new in JavaScript.

I’m pretty sure that key-vote new¬†was also added in JavaScript¬†just by the fashion thing.

As you know, JavaScript was named and created to look like Java because it was fashion, because for some reason in IT we pay more attention to fashion than functionality.

We like this crazy mixture of fashion and engineering, which looks like hipsters and stuff.

So we make things to look not necessarily good, but fashionable.

Big difference.

So JavaScript looks like Java.

And originally, there were times when people were writing and initiating objects in the race like that.

If you’re old enough, you remember.

Old coders remember.

Then people start doing this¬†and oh, you can do this instead of doing that.¬†Then some smart ass came over and like,¬†“Oh we can do this instead of that. Look at this.”¬†And that’s what prompted a new era in JavaScript coding,¬†because one day when Jason was born,¬†Jason Bourne.

(laughter)¬†I wasn’t preparing this one.

(laughter) So here the buttons sort of in JavaScript form, many native contructors, coding constructors result new give you exactly the same result as coding constructor recent new.

This is true for object.

This is true for array.

This is true for RegExp.

This is true for function.

There are exceptions, like date.

Date is an alien object in JavaScript.

It was copied from Java.

That’s why when you’re working as date,¬†it always looks like it has two left legs.

(laughter)¬†It’s very awkward.

Number and other primitive ropers they also look different when you code then as out new. Basically they work like in Java to convert one type into another.

Obviously, you don’t need this in JavaScript,¬†because there are other ways¬†to convert types into each other,¬†but nevertheless, that’s how it’s happening.¬†The guys who are writing ECMAScript 6,¬†it seems like they kinda lost the spirit of JavaScript.¬†They don’t understand what they’re doing,¬†what they’re talking about.

New things.

Set and new set.

Not only set is not equal to new set.

When you call set without new,¬†it’s throwing an exception.

Exception.

With symbol, it’s opposite.

If you call symbol recent new, it’s throwing an exception.¬†JavaScript and exceptions.

They’re not coming together.

These are two opposite things from two different universes.

JavaScript doesn’t give you exceptions.

Who knows what will be 42 divided by zero in JavaScript. Not exceptions.

No division by zero.

No, “Oh my god, you divided by zero.”¬†No, everything’s fine.

It’s JavaScript, relax.

(laughter)¬†It’s infinity.

(laughter) Infinity.

It’s all about acceptance.

It’s all about forgiveness.

There are also the concept of using the same thing for many different ways.

Like the function.

It’s obviously the influence of functional programming¬†and stuff, but JavaScript have five faces of function,¬†the five ways it uses function.

So it uses just a piece of code you can run these arguments and get some results.

You could also reach on or pass functions around¬†because it’s also an object.

Every time you create a function, you create different context.

Every time you create a function,¬†you create the closure¬†and I don’t want to go into what this is all about.¬†And obviously you can use function¬†as a constructor to construct new objects¬†and connect the prototypes¬†and you can call function with some numbers.¬†And you can do all the things with one object.¬†You can call it without new, you can call it with new.¬†You can react different ways.

This is the JavaScript way.

One of the aspects of JavaScript way.

You can fight it, or you can embrace it.

Choice is yours.

Forgiveness.

JavaScript forgives.

All the shit you’ve called, it forgives you.¬†All your hate, it forgives you.

All your libraries, it forgives you.

All your angular and reacts.

All other ways of destroying the language and bend it to your will.

It forgives you everything.

You still can code.

You can get away with anything.

It forgives your incompetence.

(laughter)¬†You can easily start writing your code¬†and get some results and say,¬†“Hey Ma, look. I used JavaScript.

“I can go find a job now.”¬†(laughter)¬†It forgives everything.

Everything.

Even it forgives you when you miss your semicolons. I am not.

(laughter) JavaScript forgives.

Is it a good thing?¬†Is it a bad thing?¬†I don’t know.

But, it’s how the language is written.

And it’s our job to, I believe,¬†to look into it and try to understand it¬†and predict it and be more like the language.¬†Be more like what it’s trying to teach us.

To get it.

To recognize it and to embrace it¬†instead of trying to make it look like your ex-girlfriend.¬†Don’t.

Another great quote as everything in my presentation,¬†“And those who are seen dancing were thought¬†“to be insane by those who couldn’t hear the music.”¬†I’m not saying the thing I showed today¬†is the way to do things.

I’m not saying that before you was doing wrong,¬†now you know how to do things right,¬†No, I just gave you a couple of notes of music I can hear.¬†Maybe I am insane.

Maybe it’s all bullshit.

Or maybe not.

And maybe you can use this to create your own music¬†and write the JavaScript the way¬†it’s supposed to be written.

Or maybe it’s not supposed to be written like that.¬†Maybe it’s not supposed to be written at all.¬†Nobody knows.

This is Friedrich Nietzsche who said this quotation. I like it.

Hear the music.

Be insane.

Be brave and forgive.

Thank you.