Dmitry Baranovskiy: Zen of JavaScript | JSConf EU 2015


Thanks. All right. So, my name is Dmitry,
and I am a JavaScript developer. And I guess — who is not JavaScript developer here?
There are a few actually. What are you doing here? (Laughing) Well, the JavaScript is kind
of funny language, and we all know this, and we all know the quirks and tricks. And there’s
plenty of presentations with people just showing some cool JavaScript features and then saying
like, Look, you need to know that. I know since I’m smarter than you. And all these
talks are kind over boring because they’re not kind of useful. My talk will be sort of
similar (Laughing), but I want to give a big message. The history of the software, which
was how I come with the idea of talking about this stuff, is I had a conversation with a
friend of mine and we were looking at some code from different people and he said, Look,
you can always see if some JavaScript developer wrote some JavaScript code. It’s very visible,
right? Or PHP developer. And I asked him, So what do you think, how is Java code written
by JavaScript developer will look like? And it made him think and made me think. How is
JavaScript code written by JavaScript developer would look like? What is the pure JavaScript
style? We all know, we all came to JavaScript from different backgrounds and me, personally,
I was, like many, studying Basic, Clascall ###check### C++ and then jump to JavaScript,
and obviously when I came to JavaScript, I had a very good understanding of how the code
should be written and I was completely wrong. And JavaScript hit me in the back many, many
times before I finally understood. And even now, I’m not sure I understand JavaScript
completely. Who actually think they know JavaScript very well? Okay, a couple misguided people,
(Laughing) that’s good. But most people actually not so confident, which is, I mean, maybe
a good thing. So, what I want you to think, just stop for a moment, forget about React
and Angular and think about pure JavaScript. What should it be like? What is the proper
way? JavaScript is very flexible as we all know, we can all write it in many different
ways. And I’m not here to teach you how to write JavaScript the right way. There is no
right way. That’s why there is the Zen of JavaScript. JavaScript is a very Zen‑based
language. Sometimes I think the Brandan Eich is actually a Zen monk in this guise because
it’s crazy, right. So, I like to say that JavaScript is a Bruce Lee of JavaScript language,
of programming languages because it’s flexible. It’s powerful. And it changed the whole picture.
I hope he wouldn’t die young. And, I like this quote of Bruce Lee, and I want to sort
of point you to some of the things in JavaScript which you maybe haven’t seen before and maybe
didn’t think about this from this direction. So this is a very popular concept of Zen Buddhism:
What is the sound of one hand clapping? The answer (snaps fingers) like this is a smartass
answer is not the correct one. There is lots of emptiness concept in the Zen. And there’s
lots of emptiness concept hidden in JavaScript, and I want to show you some of them. Of course,
obvious answer when you come into these questions, what is the number which is not a number?
So let’s assume you have a function, something like that, something simple. You passed me
a number and range and if it’s inside this range, I return you this number, if it’s not,
I return you ‑‑ well basically people put ‑‑ if I don’t know what to return,
I return null. And then you check, like oh, if this is isn’t reg null equals null, do
something, do something, but it will be much more JavaScript way, I would say, if this
function will return you NaN; people are afraid to use NaN. I’ve never seen anyone embrace
NaN in their code. I assume it’s because that when people met NaN, the first time when
you know concatenate the string and you have a suddenly you have this NaN, NaN, NaN on
the screen and you’re like, Oh, shit, this NaN again. And then everytime you see Nan,
you’re like, Oh! I don’t want to see this thing, it doesn’t exist. (Chuckles) Now if
I close my eyes it will disappear. What if — NaN exists, I’m sorry, it does exist.
And it’s actually a cool feature, right. What is cool about NaN is that you can have multiple
functions which work with numbers and they use each other together and instead of rejoining
now or something then check if something, you can just return NaN, keep going, keep
going, still number, still number, but at the end it will be NaN if anything was wrong.
You just don’t need to worry about this stuff. It’s kind of useful. I’ve never ever seen
somebody actually typing NaN, like in their code, because, because, I don’t know because
why. Why you didn’t use NaN? You don’t know. Nobody does. I think it’s ‑‑ this is
one of the JavaScript way, the NaN exists there for a reason, so maybe you shouldn’t
be afraid of it, maybe you should think how you can actually embrace it, it’s there. It’s
like, you know, living in a four bedroom apartment with two bedrooms locked. And just, you know
… you can do that. Why? Maybe you don’t there are doors. Maybe … I don’t know. Let’s
talk about equality. It’s a favorite topic for everybody, right. Favorite operator in
JavaScript. Everybody loves it. It’s crazy. Douglass Trockford ###Check### likes it most
of all. So what is with double equals? So object double equals true. No, object double
equals false? No. Like, what the heck? It doesn’t make any sense. Well, no, it’s how
things are. But if you have object which has value of, then suddenly it could be equal
to false or to true. So it’s not always not equal to true and false. And, ### arrays
equals to false, right, and obviously NaN is equal to NaN. And when you look at this,
this is crazy, this is madness, this is not right, and I will never know how it will all
work, so rather, I will use triple equals and be safe. And this is the right way. And
I use triple equals all the time, no matter what, and I’ll be happy. This is not the Zen
way, this is not the JavaScript way. Why? Because what about these guys? You’re not
going to use them as well? Because they behave pretty much the same. Let’s look at this one
as a separate example. This is still true. This is still true. So using triple equal
wouldn’t really save you from the problems. It will just delay the day when you will face
it, and you will say, Holy crap, what is this? How it works? So some people could say, well,
it’s with less than it’s much easier, because it kind of work with numbers, so basically
converts everything to number, and then does a comparison, and then it all makes sense
objects converted to numbers and NaN, so NaN is not equal to true, not equal to false,
and true and false become zero, one and everything else is kind of holding space, everything
good. I will just remember this works just like numbers; all good. Not really. So if
you have object, and you put object less than or equal to object, it will be true, because
object equal to itself, so it’s not really converted to number. What is my point? Well,
maybe my point is learn the language and instead of trying to avoid problems try to go through,
accept it, embrace it, take it, learn it. You’re writing this language anyways. See
avoiding the problems not works all the time. So you can avoid the with operator, you can.
Avoiding double equal with triple equals, it’s a false path of, you know, later disappointment.
Don’t disappoint yourself and me. So talking about acceptance. It’s really great to look
at some of the native functions, which inside Vanilla GS and look how they behave. And the
API of JavaScript is actually pretty great. And I actually surprised that when people
writing their own APIs for the libraries and stuff, for some reason they ‑‑ instead
of copying the JavaScript, they try to copy, I don’t know, some other languages, some
other concepts, some other things. JavaScript is very pretty. My favorite function is Jar
add, don’t ask me why, I just like it. What I like about Jar add. Don’t ask me why.
I just like it. What I like about Jar add it’s very acceptable. It accepts anything,
you can pass any shit inside, it will give you the answer (Laughing). No matter what,
it will just ‑‑ yeah, whatever, I don’t accept you to pass me the number. Pass me
something, I’ll deal with it. (Laughing) So it doesn’t like a string. Is it like flawed
number, is it array? Is it true? I will do it. Pass me nothing, I assume it’s zero. Pass
me NaN, I assume it’s zero. Important. It’s so cool. Minus two, I will give you character
minus two, no exceptions, no null rejoin. I will join you the empty character; what
did you expect? (Laughing) It’s the perfect answer to what is the character? This character.
Not like no character; what are you talking about? There is no character. What are you
doing? This is a character, empty character. This is so awesome. I mean, seriously, this
is the poetry of the language. This is the JavaScript at its best. That’s not the finish
of the jar add. It’s not only acceptable to the argument you’re passing in, it’s also
acceptable to the “this”, to the context of it. We change the ‑‑ put it on the
number prototype. And you say NaN jar add and give you “N”, boom. Boolean? Yep.
How awesome was it with that, seriously? (Laughing) Guys, this is a JavaScript. Please, welcome.
And, when you write your code in JavaScript, it should look just like that. It should be
just like that. Your functions should be just like that. Like in grab your function, use
it the way I want, like this, like that, whatever and it should work. And it shouldn’t really
care. Because JavaScript is a careless language. You should care less. Users of your API should
care less. You know, it’s like a software kind of language. It doesn’t really care.
It just does it business. Now I start talking about emptiness in the beginning. The JavaScript
is seriously about emptiness. It has many ways to express emptiness. How many other
languages could give you so many ways to say this is empty? There is nothing there. It’s
— nothing exists. Well, the three obvious candidates is NaN, null and undefined. So
NaN is kind of empty number, not zero, empty number. Not a number. The concept of NaN is
kind of funny in itself, like, number which is not a number but still number. It’s like,
this is so philosophical, you should sit and meditate on it like in a Lotus pose for a
while. What is null? It’s like, not object, it’s empty but it’s not really empty because
it’s null. The undefined is the next level of null. It’s like it’s not even null. (Laughing)
It’s not defined, but it is ‑‑ it has a value. (Whispers) Holy shit. (Applause)
This is so awesome just stop, stop rushing writing your code and working with Shadow
DOM, just stop. Look at the beauty in your hands. Look at this like, oh my God, this
is so cool. You think this is all about emptiness? JavaScript has more to tell you about emptiness.
Let’s say we have two arrays. One we create like array of two and another we create like,
well, using the brackets and undefined, undefined. And these arrays are equal, not equal like
this, but let’s say equal like that. Okay. So they are the same. Okay. So if we say,
we create variable ‘a’ equals to array, created like array of two, variable two equals
array of undefined; a of zero equals to b of zero, yes; a of one equals b of one, yes;
a length equals b length, yes. So they are the same, right? Of course not (Laughs). Of
course not. We call b.map allot, we have two alerts undefined. We have a.map alert and
there no alerts, nothing happens. What, what one in a false, one in b true. So, array b
has two values which are equal to undefined. Undefined is a value. And array a has two
slots for values. And they are empty. (Laughter) Yeah…getting there? This is a true emptiness.
They’re not even there. When you’re asking for it, ask for a value, undefined, but this
value is not in the array. Baaaaahhhh…the emptiness. How then and philosophical is this,
damn it?! This is, I just showed you, emptiness, saying nothing. And as always there is nothing
new, and obviously, I want to say a bit about the new operator. I personally always feel
that the new operator is sort of added there as a way to please Java developers so they
feel, oh, this is just like Java… (Whispers) … nothing like Java. And to confuse the
shit out of everybody. I personally like, I use new operator when I need to create some
prototype of thing and want to create some internal, I don’t like to call them classes,
but apparently they are. And, but, I hate the APIs which tell you, you have to use “new”
something like what was this? My favorite one was … damn, I forgot the name. You know,
when the physics imitator, and you have to create new rectangle where you pass new point
X Y comma new point X Y, like what the hell is that? Why you create objects for everything?
With “new” it’s like, it’s a Java, it smells like Java, and I don’t like the smell.
I think the new ‑‑ like your API shouldn’t tell people to use “new”. I created the Raphael,
and I had the mistake to call it from the capital letter because it’s old library, and
I saw some people write new Raphael instead of Raphael. The thing is nothing happens.
And I just tired of correcting them, like, okay, if you feel like this makes you feel
more safe to write “new” in front of, write it, but you don’t have to. In fact, many places
in JavaScript you don’t have to. Who remember seeing code like this? Who is old enough?
(Laughs) It was like the trade mark of a loser (clicks tounge). You write new object already,
and everybody is like, oh, look at this, so lame. And then people like, yeah, this is
the cool way. This is like, it was like a club people who write like this and people
who write like that. Nowadays nobody writes the first way. Is anybody ‑‑ nobody will
accept any way. If you’re a Java developer, maybe writing the object is more convenient
for you and more easy to grasp, but, actually, there’s a better way. And it’s almost true
for everything. It’s a very common concept, very common pattern in JavaScript itself having
SomeConstructor, calling as a function is absolutely equal calling new Someconstructor.
It’s true for object, it’s true for array, it’s true for RegEx, it’s true for Function.
JavaScript kind of giving you a hint, like, you know, maybe, eh, maybe you shouldn’t do
… whatever. There are exceptions. The date object. The date object always looks like
an alien inside the JavaScript because it’s copied from the Java as much as it possibly
can. That’s why it’s so ugly, but it’s very useful, so we have to use it. But it’s so
ugly, oh, my God. The some constructor, number, Boolean and string, because they’re wrappers
for native primitive types. They behave differently when you code then without new; they just
convert something to the primitive. The new ES6 have constructors like set, map and weak
map. I don’t know who wrote this rule inside them, but he’s definitely not a JavaScript
Jedi, because if you call Set without new, it’s not just behave differently it throw
you bloody exception in your face. What the hell?! JavaScript doesn’t throw exceptions
unless there is a very serious reason for that. I don’t see serious reason for calling
Set without new. Amateurs. Of course they are like functions, and functions are a big
deal. And I wanted to tell if you wanted to know more about functions you could watch
the talk, about functional programming, but unfortunately it happens right now. So if
you want the learn more about functions, you chose the wrong talk, congratulations. There
are five faces of the function. And this is sort of also very JavaScript way that the
functions, anything could be anything, anything could be used in the many different ways.
You could wrap it in different positions. Functions has different positions too. So,
if you create a function, which reference some variables outside the function, you create
the closure, and you all know this, and it’s boring, I know, but I have to tell it, maybe
somebody doesn’t. It’s writing code like this to make it more obvious. You’re already seeing
like already three phases of functions right here. So function. Create a scope. Functions
create the closure. And you can rejoin functions, because function is also an object. I know
I have a thing like Captain Obvious right now, but bear with me. You can also use functions
as a constructor to create new objects, and you can use the function as a, basically,
just subroutine, which you can call with arguments and return or something. This is, these are
obvious things, what I’m trying to point is that it’s the function itself is having so
many roles, and you can use it in so many ways. This is truly a JavaScript way of doing
things. And it’s not just the only way of doing things. There are other languages that
do the same thing like Lisp or Luna, like, whatever. It’s important to embrace it and
not trying to avoid it and trying to say, okay, I will write a different way. I will
just use this two bedroom instead of one. And there is a JavaScript paradox function
constructor is a function and function constructor is a function, so it’s like the movie Inception
where they go up the stairs and coming back to wherever they started going. So, what I’m
trying to say apart from show that I read the spec and found some interesting parts
of JavaScript. What I’m trying to say is that JavaScript has it’s own way, and instead of
trying to do it in this or that way, how about you step back, look, and I just scratch the
surface here. It’s a very short talk. You could find more interesting features of JavaScript,
which you probably haven’t seen before, and try to think, what would JavaScript do? You
know, when I was a kid and I have coming to a hard situation, I would think, what Bruce
Lee would do, and then act like Bruce Lee. Sometimes it helped, sometimes not (Laughing),
but … what will JavaScript do? When you write your code, don’t think, oh, what I want.
What is the JavaScript way to do this thing? What would be the JavaScript ‑‑ what
if this will end up inside the JavaScript language just like functions like parse in
or jar add or something like that joined. What would ‑‑ how would I write this
function? Do it this way and be truly enlightened JavaScript developer. And …
don’t just sit and think about it. Open console,
read it, dig inside it, become the wizard. I don’t know, maybe be a master Yoda of JavaScript.
And thank you very much. (Applause)

Tags:, ,
9 Comments

Add a Comment

Your email address will not be published. Required fields are marked *