Unethical JavaScript - Giorgio Natili - Codemotion Rome 2017

Unethical JS
JS Misconceptions and Errors

UnethicalJavaScript
IMAGE
2
@giorgionatili
On paper, Giorgio Natili is an engineering lead
at Akamai Technologies where he spearheads
the implementation of the new web apps for the
security products line of Akamai
On the job, Giorgio is a strong proponent of
agile development practices whose passion for
usable, maintainable and testable code is only
surpassed by his determination to make things
work.

@giorgionatiliUnethical JavaScript3
Agenda
Review the knowledge base that is behind
this presentation
Deﬁnitions
An overview of the hidden gems of JavaScript
and V8
Misconceptions
A couple of recommendations to write
effective and maintainable JavaScript
Conclusions
An overview of effective plain JavaScript code
style and techniques
Ethical JavaScript

UnethicalJavaScript4
Intro
Unethical, maintainable and readable are three
important adjectives, let’s review them in the context
of JavaScript

Topics
General deﬁnition and how it
is applicable to the context of
JavaScript
Unethical
U The main principles of
maintainable code, and how to
apply them in JavaScript
Maintainable Code
M Readable code is the main
key to write scalable softwares
Readability
R

Unethical
Lacking moral principles; unwilling to adhere to proper rules of conduct
General Deﬁnition
Not conforming to approved standards of social or professional behavior
More in Context
Corrupt, illegal, improper, unfair, unprofessional, unscrupulous, wrong, etc.
Synonyms

Which is the ﬁrst step to make
JavaScript Ethical?

Maintainable Code
Code should not be rigid and not easy to change, even more, changes should be predictable
Not Rigid
Maintainability is inversely proportional to the amount of time it takes a developer to make a change and the risk that change
will break something
Measurable
At the heart of maintainability is carefully constructed code that is easy to read
Long Story Short

Readability Principles
Give your objects and methods names that truly reﬂect the concept they are modeling, any nontechnical member of the team
should be able to understand the object
Intention-Revealing Interfaces
Calling a function should have a single outcome that is predictable due to the object’s Intention-Revealing Interface
Side-Effect-Free Functions
Avoid to modify the same data structures from different parts of the code, try to minimize race conditions
Immutability
Standalone objects are ideal because they are not coupled to any other code and they can be understood in isolation
Standalone Objects

Unreadable Code
const getAction = (newPayload, isRejected) => ({
type: `${type}_${isRejected ? REJECTED : FULFILLED}`,
...newPayload ? {
payload: newPayload
} : {},
...!!meta ? { meta } : {},
...isRejected ? {
error: true
} : {}
});

Please, Meet the  
Maintainer

More Readable
const getAction = (newPayload, isRejected) => ({
type: `${type}_${isRejected ? REJECTED : FULFILLED}`,
...( newPayload ? { payload: newPayload } : {} ),
...( !!meta ? { meta } : {} ),
...( isRejected ? { error: true } : {} )
});

Know your enemy and you can ﬁght a
hundred battles without disaster Breath…

Inconsistency
JavaScript is inconsistent by default, it’s one of the
most misunderstood languages and it wasn't
designed with the goal of being one of the most
diffused programming language

Topics
JavaScript is a language
designed in few days and with
different goals, hereby there
are design ﬂaws
Design Flaws
D The dynamic nature of the
language creates interesting
side effects when types get
converted
Types Conversion
T A deep dive into one of the
most ambiguous “data type”
ever invented
Truthy & Falsy
W
Operator overloading can be
dangerous, the + operator in
JavaScript is a clear
demonstration
The Plus (+) Operator
P How the value of the this
keyword changes, it is a
reference to the object that
“owns” the executing code
Execution Context
EDifferences, similarities and
gotchas of the two most
important JavaScript’s data
structures
Objects & Arrays
O

Design Flaws
If someone forgets to declare a variable as local before using it, subtle gremlins can pop up in a program
Variables are global unless declared local
Types are coerced unexpectedly by smart and fast run times
Messy Type Handling
Null belongs to a kind of object [Object], mean the object is empty; undefined is a data type, that is not deﬁned
null and undeﬁned

Type Conversion
Type conversion behaves differently according to the type the interpreter is expecting and to the operator in the expression
Automatic Type Conversion
Most arithmetic operators in Javascript convert their arguments to numbers, the exception is the plus operator
Addictive Overload

Conversion Madness
let pi = Math.PI,
str = ""+ pi, // to string
int = ~~pi, // to integer
float = 1 * str, // to float
bool = !!pi, // to boolean

Truthy & Falsy
Like most computer languages, JavaScript supports Boolean data types
Boolean Data Types
In addition, everything in JavaScript has an inherent Boolean value, generally known as either truthy or falsy
JavaScript Madeness
When a value is truthy or falsy in JavaScript, it doesn’t mean that the value is true or false; it means that the value coerces to
true or false when evaluated in a boolean context
Practically Speaking

Falsy Values
false
void
0 (zero)
"" (empty string)
null
undefined
NaN

Comparing Falsy Values
false == 0; // true
false == ""; // true
0 == ""; // true
null == false; // false
null == null; // true
undefined == undefined; // true
undefined == null; // true
NaN == null; // false
NaN == NaN; // false

The Falsehood of false
let hello = (value) => {
if (!value) {
return `Bye ${value}`;
}
return `Hi ${value}`;
}
hello(false); // 'Bye false'
hello(null); // 'Bye null'
hello([]); // 'Hi '
hello(new Boolean(false)); // 'Hi false'

Say it again, please…

Write safer code by using the strict
comparison operator (===)

The Plus (+) Operator
This operator is used to concatenate strings or sum the numbers
Concatenate and Sum
Considering that only strings and numbers can be added, the runtime apply data type conversions to keep the values around
the operator consistent
Automatic Conversion

Automatic Conversion
let a = "12";
+a; // -> Number(a) -> 12
a + "hello"; // -> String(a) + "hello" -> 12hello
"hello" + a; // -> "hello" + String(b)
a + 6; // -> Number(a) + 6
6 + a; // -> 6 + Number(b)
let b = "wtf";
a + b; // -> ToPrimitive(a) + ToPrimitive(b) -> 12wtf

ToPrimitive
ToPrimitive(input, PreferredType?)
• If input is primitive, return it as is
• Otherwise, if input is an object, calls obj.valueOf(); if the result is
primitive, return it
• Otherwise, call obj.toString(); if the result is a primitive, return it
• Otherwise, throw a TypeError

Unexpected Behavior
[] + []; // -> ''
[] + {}; // -> '[object Object]'
{} + {}; // -> NaN
{} + []; // -> 0
[1, 3, 5] + 1; // -> "1,3,51"
10 + true; // -> 11
8 + null; // -> 8
12 + undefined; // -> NaN

Where is this?
let obj = {
name: 'giorgio',
sayHi: function(msg) {
console.log(`Hi, I'm ${this.name}`, msg);
}
}, otherObject = { name: 'mario' };
let speak = obj.sayHi;
speak('nice to meet you'); // -> Hi, I'm nice to meet you
speak.call(otherObject, 'nice to meet you'); // -> Hi, I'm mario nice to meet you
speak.apply(obj, ['nice to meet you']); // -> Hi, I'm giorgio nice to meet you

Object and Array
Every object in JavaScript is an associative array whose keys are strings; when an object other than a string is used as a key
in JavaScript, no error occurs
Objects are Associative Arrays
Arrays are a type of object (off course!) for storing multiple values in a single variable where each value gets numeric index
Arrays
Array-like objects look like arrays, they have various numbered elements and a length property; but that’s where the
similarity stops (aka document.forms)
Array-like Objects

Unexpected Behavior
let foo = new Object();
let bar = new Object;
let map = {};
map[foo] = "foo";
map[bar] = "bar";
console.log(map[foo]); // -> "bar"

WTF ?!?

Do you not destroy your enemies when you
make them your friends?

Plain JavaScript
An overview of data structures, loops, execution
context and hidden gems of JavaScript and its
runtimes

Topics
Implementing hash tables in
JavaScript using ES6 API
Hash Tables
H Exploring the nasty truth about
Arrays in JavaScript
Arrays
A Gotchas and improvements of
loops in JavaScript
Loops
L

Hash Tables
In JavaScript, all non-scalar objects behave as associative arrays; the object can use other objects or strings as keys
Hash Tables in JavaScript
The truth is that hash tables don’t exist in JavaScript because an object by default inherits the methods of the Object data
type
Inheritance Issue
Creating an object with a null prototype is a solution to mitigate the inheritance issue
Mitigation

Objects Based Hash Tables
let hash = {};
hash['name'] = 'giorgio';
hash['surname'] = 'natili';
for(let i in hash) {
console.log(`${i} ${hash[i]}`);
}
console.log(typeof hash); // -> object
console.log(hash.hasOwnProperty('surname')); // -> true
console.log(!!hash['surname']); // -> true

ES6 Hash Tables (Map)
let map = new Map()
map.set('name', 'giorgio');
map.set('surname', 'natili');
map.forEach((item) => { console.log(item); })
console.log(map.get('name')); // -> giorgio
console.log(map.get('surname')); // -> natili

Wait a minute, are you forgetting about Set?

ES6 Hash Tables (Set)
let set = new Set(['giorgio', 'natili'])
.add(42);
for (let x of set) {
console.log(x);
}

Jenniffer W. DoeMinimal X Template41
Map & Set
There is a strong symmetry between Map and
Set, but these data structures should be used
in the right scenario
Same same, but different
Map and Set constructors and methods are
both chainable
Chainable
Both Map and Set are available in a weak
ﬂavor that facilitate garbage collection and
prevent potential memory leaks
Weak Collections
Both Map and Set get designed with the
iteration use case in mind, the entries()
and values() methods represent the
standard way to iterate over collections
Iterable

Hash Tables still not exist, but at least
collections are predictable

Arrays
In JavaScript, there isn’t an Array datatype, the result of the comparison typeof [] == 'object' is true
Existence
The numeric keys used to access the elements of an Array are strings
Keys
The length property is not read only, by incrementing or decrementing it, you actually change the data structure
Length

Array Length
let data = ['First', 'Second', 'Third'];
console.log(data.length, data); // -> 3, ["First", "Second", "Third"]
data.length--;
console.log(data.length, data); // -> 2, ["First", "Second"]
data.length++;
console.log(data.length, data); // -> 3, ["First", "Second", undefined]

Looping and Iterating
The for-in statement by itself is not a "bad practice", however it can be mis-used, for example, to iterate over arrays or
array-like objects data rather than on their properties
Looping Over Properties
The for-of is the most concise, direct syntax for looping through array and array-like objects elements; it avoids all the
pitfalls of for–in and works with break, continue, and return
Looping Over Data
The map(), filter(), and reduce() methods are a key element to get a cleaner syntax to ﬁlter data structures
Mapping and Filtering

The for-in & for-of
let array = ['First', 'Second', 'Third'];
array.name = "Cool!";
for (let p in array) {
console.log(p); // -> 0, 1, 2, name
}
for (let p of array) {
console.log(p); // -> "First", "Second", "Third"
}

Not so bad

Poor Naming
Poor naming is a cross language issue, anyway,
JavaScript dynamic nature deeply inﬂuence naming
conventions.

Topics
Poor variable names are one
of the root causes of bugs and
regressions
Variables
V A function is an action, poor
function names make your
code difﬁcult to understand
Functions
F Classes try to group traits and
behaviors of a software, poor
naming brings to
unmaintainable models
Classes
C
Modules are another tool to
group reusable code, poor
modules naming seriously
impact code readability
Modules
M

Variables
let data = ['First', 'Second', 'Third'];
let total = data.length;
let that = this;
let e1, e2;
e1 = document.getElementById('value1').innerHTML;
e1 = document.getElementById('value2').innerHTML;
if (e1 > e2) {
// Do something
}

Functions
function showFailureTextDiv(flag) {
if (parseInt(flag) == 0) {
document.getElementById('FailureTextDiv').style.display = "block";
}else {
document.getElementById('FailureTextDiv').style.display = "none";
}
return;
}

Classes

Modules
import { utils } from 'utils/utils.js';

Somewhere During Code Review

Ethical JS
Writing idiomatic JavaScript is the ﬁrst step to write
ethical code, on top of this it’s mandatory to apply
best practices and master the platform
ethical

Topics
Review in practice how to
master the execution context
of JavaScript
Execution Context
M
Rethink how use a function,
return always a value and
minimize side effects
Functional
F
Evolve the code base to have
a more manageable software
ESNext API
A Code readability starts with
good names, and a clean
syntax
Clean Syntax
D
A quick overview of a couple
of libraries that can help
improving your JavaScript
Libraries
L

Mastering Execution Context
Never pass the context around by trapping it in variables that get enclosed in a closure, use the Function and Reflect API
instead
Take Advantage of the Context
Be accurate when passing arguments to functions executed within a different context, avoid null values proliferating around
the code base
Arguments

Execution Context
let func = () => {
return arguments.length;
}
func.apply(void 0, null); // -> 0
Reflect.apply(func, void 0, null); // -> TypeError
let obj = document.createElement('object');
typeof obj; // -> "function", can be called
obj.apply; // -> undefined, no Function.prototype
Reflect.apply(obj, thisArg, argList); // -> works properly

Reflect vs Object
The Reflect module is a more natural place for many of the reflection methods previously defined on Object
Reflection
Many operations in Reflect are similar to ES5 operations defined on Object, such as
Reflect.getOwnPropertyDescriptor and Reflect.defineProperty; anyway, the return value is usually more
meaningful
Return Values

Clean Syntax
Never pass the context around by trapping it in variables that get enclosed in a closure, use the Function and Reflect API
instead
Use the Context
Be accurate when passing arguments to functions executed within a different context, avoid null values proliferating around
the code base
Arguments
The map(), filter(), and reduce() methods are a key element to get a cleaner syntax to ﬁlter data structures
Mapping and Filtering

Parens, Braces, Linebreaks
// Examples of really cramped syntax
if(condition) doSomething();
while(condition) iterating++;
for(var i=0;i<100;i++) someIterativeFn();
// Use whitespace to promote readability
if ( condition ) {
// statements
}
while ( condition ) {
// statements
}
for ( var i = 0; i < 100; i++ ) {
// statements
}

Assignments, Declarations, Function
// Bad
var foo = "",
bar = "";
var qux;
function foo() {
// some statements here
var bar = "",
qux;
}
// Good
var foo = "";
var bar = "";
var qux;
function foo() {
var bar = "",
qux;
// all statements after the variables declarations.
}

Early Returns
function returnLate( foo ) {
var ret;
if ( foo ) {
ret = "foo";
} else {
ret = "bar";
}
return ret;
}
function returnEarly( foo ) {
if ( foo ) {
return "foo";
}
return "bar";
}

Mastering Coercions
// coercions
string === number; // -> false
string === number + ""; // -> true
+string === number; // -> true
bool === number; // -> false
+bool === number; // -> true
bool === string; // -> false
bool === !!string; // -> true
// evaluate truthiness
if ( array.length > 0 )
if ( array.length ) // -> Better
if ( array.length === 0 )
if ( !array.length ) // -> Better
if ( string !== "" )
if ( string ) // -> Better

Be Functional
It’s not a buzzword, it’s a true different way to think about data structures and functions
Buzzword
Functions are side effects free and always return a value
Functions
Threat your model as a single source of truth
Immutability

Plato

RxJS
RxJS is an implementation of the Observer pattern on steroids, it hides the complexity of loops and observing / subscribing
Hide Complexity
It provides built in operators to debounce, take, throttle, etc. data streams
Built-in Operators
By hiding the complexity, RxJS provide a pragmatic approach to declarative programming
Declarative Approach

Declarative Programming
const task_stream =
// Makes a stream of all the tasks in the database
getTasks().
// Get tasks only for this user
filter((task) => task.user_id == user_id).
// Get tasks that are uncompleted
filter((task) => !task.completed).
// Only get name of task
map((task) => task.name)

Conclusions
ethical

Always write code as the maintainer is a
psychopath that knows where you live

Try to oversimplify modules, and to keep the
code simple

Never ﬁght for a standard, ﬁght only for
maintainability and readability

Write easy to test code, when tests get
complicated there are design ﬂaws

When there’s no way to avoid complexity,
hide it with an abstraction layer

Thanks!
Write Ethical JS Modern API Track the Tech Debt Remove Unneeded Code
There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult..
-C.A.R. Hoare

Unethical JavaScript - Giorgio Natili - Codemotion Rome 2017

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Unethical JavaScript - Giorgio Natili - Codemotion Rome 2017

Ähnlich wie Unethical JavaScript - Giorgio Natili - Codemotion Rome 2017 (20)

Mehr von Codemotion

Mehr von Codemotion (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Unethical JavaScript - Giorgio Natili - Codemotion Rome 2017