CodiLime Tech Talk - Grzegorz Rozdzialik: What the java script

What the JavaScript
Grzegorz Rozdzialik

2
About me
https://github.com/Gelio/tslint-react-hooks
Grzegorz Rozdzialik
Senior Frontend Engineer @ CodiLime
Gelio
https://github.com/Gelio/tslint-import-group-ordering
Open source:

3
Agenda
● Various JavaScript (and not only JS) quirks
○ Numbers
○ RegExps
○ Variable declarations
○ Operators (void, ||, comma)
○ try … catch
○ Objects
○ Coercion
○ Functions
○ Prototypal inheritance

Various JavaScript (and not only JS) quirks

5
Inspiration/additional resources
dotJS 2012 - Brian Leroux - WTFJS What the... JavaScript? - Kyle Simpsons
https://github.com/denysdovhan/wtfjs

6
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Numbers

8
Working with decimals
const result = 0.1 + 0.2;
console.log(result === 0.3);

9
console.log(result === 0.3); // false

10
console.log(result === 0.3); // false

11
Numbers in JavaScript
● Follow the IEEE 754 standard (ﬂoating point
numbers)
● The same as in other programming languages (ﬂoat,
double, e.g. in C, C++, C#, Rust, go)
● Non-power-of-2 fractions have limited precision

12
numbers)

13
numbers)
0.25 = ¼ - power of 2

14
numbers)
● Same behavior as in other languages

15
Doubles in C++
int main()
{
cout << 0.1 + 0.2; // 0.3
return 0;
}
int main()
{
printf("%f", 0.1 + 0.2); // 0.300000
return 0;
}

16
Doubles in C++
int main()
{
double result = 0.1 + 0.2;
cout << (result == 0.3); // 0
return 0;
}
int main()
{
printf("%.17f", 0.1 + 0.2);
// 0.30000000000000004
return 0;
}

17
Special IEEE 754 values
● Non-number values have their own representation
○ NaN (Not a Number) - invalid operation, e.g. converting an object to a number
○ Positive/negative inﬁnity - division by 0 or the value was too large
● Present in the speciﬁcation
● https://en.wikipedia.org/wiki/IEEE_754-1985#Representation_of_non-numbers
● Consistent across all languages that use IEEE 754

18
Inﬁnities
console.log(1 / 0);
console.log(-1 / 0);
console.log(Number.MAX_VALUE * 2);

19
NaNs
console.log(Math.sqrt(-5)); // NaN
console.log(Number('abc')); // NaN

20
NaN type
console.log(typeof NaN);

21
NaN type
console.log(typeof NaN); // 'number'

22
NaN type

23
NaN type
NaN is a speciﬁc
number (as mentioned
in IEEE 754)

24
Comparing NaNs
console.log(NaN === NaN);
console.log(NaN == NaN);

25
Comparing NaNs
console.log(NaN === NaN); // false
console.log(NaN == NaN); // false

26
Comparing NaNs
console.log(NaN === NaN); // false
console.log(NaN == NaN); // false

27
Comparing NaNs in C++
int main()
{
double result = sqrt(-5);
cout << (result == result); // false
return 0;
}
Always false (not only
in JS)
Speciﬁed in IEEE 754

28
Checking if a value is NaN
console.log(isNaN(NaN));
console.log(isNaN({}));
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

29
console.log(isNaN(NaN)); // true
console.log(isNaN({}));

30
console.log(isNaN({})); // true

31

32
Checking if a value is precisely NaN
console.log(Number.isNaN({})); // false
// isNaN(x) = Number.isNaN(Number(x))
Number.isNaN (ES6)
https://developer.mozilla.org/
en-US/docs/Web/JavaScript/
Reference/Global_Objects/Nu
mber/isNaN
http://www.ecma-international.org/ecma-262/6.0/#sec-number.isnan

33
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

RegExps

35
Matching multiple times
const pattern = /a+b+/g;
const text =
'aabbababaaaaaaabbbbbb' ;
while (true) {
const match = pattern.exec(text);
if (match === null) {
break;
}
console.log(match[0]);
}

36
Matching multiple times
const text =
while (true) {
break;
}
console.log(match[0]);
}

37
State saved in `lastIndex`
const text =
while (true) {
break;
}
console.log(match[0], pattern.lastIndex);
}
https://developer.mozilla.org/en-U
S/docs/Web/JavaScript/Reference
/Global_Objects/RegExp/lastIndex

38
State saved in `lastIndex`
const text =
while (true) {
break;
}
console.log(match[0], pattern.lastIndex);
}

39
Change from where matching starts
const pattern = /a+b+/gi;
const text = 'aabbabABaaaaaaabbbbbb';
// 0123456789
pattern.lastIndex = 5;

40
Change from where matching starts
const pattern = /a+b+/gi;
const text = 'aabbabABaaaaaaabbbbbb';
// 0123456789
pattern.lastIndex = 5;
console.log(pattern.exec(text)[0], pattern.lastIndex); // AB, 8

41
Be careful with the global ﬂag
const pattern = /Java/g;
const text1 = 'JavaScript is the best programming language';
pattern.exec(text1);
const text2 = 'Java is the best programming language';

42
Be careful with the global ﬂag
const pattern = /Java/g;
const text1 = 'JavaScript is the best programming language';
const text2 = 'Java is the best programming language';

43
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Variable declarations

45
Variable scope - const, let
function foo() {
if (true) {
const a = 1;
let b = 2;
}
console.log(a, b);
}
foo();

46
Variable scope - const, let
function foo() {
if (true) {
const a = 1;
let b = 2;
}
console.log(a, b); // ReferenceError: a is not defined
}
foo();

47
Variable scope - var
function foo() {
if (true) {
var a = 10;
}
console.log(a);
}
foo();

48
function foo() {
if (true) {
var a = 10;
}
console.log(a); // 10
}
foo();

49
function foo() {
if (true) {
var a = 10;
}
}
foo();

50
Hoisting
function foo() {
console.log(a);
var a = 0;
console.log(a);
}
foo();

51
Hoisting
function foo() {
console.log(a); // undefined
var a = 0;
}
foo();

52
Hoisting
function foo() {
var a = 0;
}
foo();

53
Hoisting explained
function foo() {
var a;
console.log(a);
a = 0;
console.log(a);
}
foo();
https://developer.mozilla.org/en-US/docs
/Glossary/Hoisting
function foo() {
console.log(a);
var a = 0;
console.log(a);
}
foo();

54
Hoisting explained
function foo() {
var a;
a = 0;
}
foo();
https://developer.mozilla.org/en-US/docs
/Glossary/Hoisting
function foo() {
console.log(a);
var a = 0;
console.log(a);
}
foo();

55
Do not do this at home
function foo() {
a = 1;
var a = 0;
}
foo();

56
`var` scope
var foo = 1;
console.log(window.foo);

57
`var` scope
var foo = 1;
console.log(window.foo); // 1

58
`var` scope
var foo = 1;
console.log(window.foo); // 1

59
IIFE to the rescue
IIFE - Immediately Invoked Function Expression
(function() {
var bar = 1;
console.log(window.bar); // undefined
})();
https://developer.mozilla.org/en-US
/docs/Glossary/IIFE

60
… or use `let` and `const`
const baz = 1;
let abc = 2;
console.log(window.baz);
console.log(window.abc);

61
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Operators

63
`void` operator
console.log(void 0, void true, void undefined, void 'anything');
/Operators/void

64
`void` operator
console.log(void 0, void true, void undefined, void 'anything');
// undefined, undefined, undefined, undefined
/Operators/void

65
`void`’s usefulness
class Foo {
counter = 0;
setCounter = x => (this.counter = x);
}
const foo = new Foo();
console.log(foo.setCounter(50));

66
class Foo {
counter = 0;
}
console.log(foo.setCounter(50)); // 50

67
class Foo {
counter = 0;
safeSetCounter = x => {
this.counter = x;
}
}
foo.setCounter(50);
foo.safeSetCounter (50);

68
class Foo {
counter = 0;
safeSetCounter = x =>
void (this.counter = x);
}
foo.setCounter(50);
foo.safeSetCounter (50);

69
Overwriting undeﬁned
function example1(undefined) {
undefined = true;
if (undefined) {
console.log('Surprised?');
}
}

70
undefined = true;
if (undefined) {
}
}

71
undefined = true;
if (undefined) {
}
}

72
Restoring undeﬁned with void operator
undefined = true;
console.log({ undefined }); // { undefined: true }
undefined = void 0;
console.log({ undefined }); // { undefined: undefined }
}

73
Usage in TypeScript compiler
TypeScript compiler uses void 0 instead of undefined directly

74
Or (||) operator
Operands (and return type)
can be boolean...

75
Or (||) operator
… but do not have to be
Operands (and return type)
can be boolean...

76
Falsy values
Boolean(0);
Boolean('');
Boolean(undefined);
Boolean(null);
Boolean(NaN);
Boolean(false);

77
Or (||) operator - lazy evaluation
function getValue() {
console.log('This will not run, because 5 is truthy');
return 10;
}
console.log(5 || getValue());
Operands are evaluated lazily

78
Or (||) operator - default function parameter
function foo(arg) {
arg = arg || 10;
console.log(arg);
}
foo(1);
foo(5);
foo();
foo(0);

79
function foo(arg) {
arg = arg || 10;
console.log(arg);
}
foo(1); // 1
foo(5); // 5
foo(); // 10
foo(0);

80
function foo(arg) {
arg = arg || 10;
console.log(arg);
}
foo(1); // 1
foo(5); // 5
foo(); // 10
foo(0); // 10 (?)

81
function foo(arg) {
arg = arg || 10;
console.log(arg);
}
foo(1); // 1
foo(5); // 5
foo(); // 10
foo(0); // 10 (?)

82
A safe way to have default parameters
function safeFoo(arg = 10) {
console.log(arg);
}
safeFoo(0); // 0
Introduced in ES6

83
Fun fact - any param can have a default value
function safeFoo(arg = 10, arg2) {
console.log(arg, arg2);
}
safeFoo(undefined, 20);

84
Nullish coalescing operator
https://github.com/tc39/proposal-nullish-coalescing (stage 4)
Similar to ||,
but works with null and undefined only
function safeFoo2(arg) {
arg = arg ?? 10;
console.log(arg);
}
safeFoo2(0);

85
Tuples in JS?
const tuple = (1, 2, 3);
console.log(tuple);

86
Tuples in JS?
console.log(tuple); // 3

87
Tuples in JS?

88
Tuples in JS?
Similar behavior in other
languages, e.g. C, C++

89
Comma operator in C
int main()
{
int x = 10, y = 15;
printf("%d", (x, y)); // 15
return 0;
}

90
Comma operator
const doMultipleThings = (service) =>
(
service.doA(),
service.doB(),
service.doC()
);
Evaluates the expression on the left, returns the expression on the right
const boringDoMultipleThings =
(service) => {
service.doA();
service.doB();
return service.doC();
}

91
A side note on ASI
What happens if you don’t like semicolons?
(service) => {
service.doA();
}

92
A side note on ASI
(service) => {
service.doA();
}

93
A side note on ASI
What happens if you do not like semicolons?
(service) => {
service.doA()
return service.doC()
}

94
A side note on ASI
(service) => {
service.doA()
return
service.doC()
}

95
A side note on ASI
(service) => {
service.doA()
return
service.doC()
}
boringDoMultipleThings()

96
A side note on ASI
(service) => {
service.doA()
return
service.doC()
}
Not executed

97
A side note on ASI
ASI - Automatic Semicolon Insertion
(service) => {
service.doA()
return
service.doC()
}
(service) => {
service.doA();
return;
service.doC();
}
boringDoMultipleThings();

98
A side note on ASI
ASI - Automatic Semicolon Insertion
(service) => {
service.doA()
return
service.doC()
}
(service) => {
service.doA();
return;
service.doC();
}
boringDoMultipleThings();
Use a linter

99
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

try … catch

101
try … ﬁnally without catch
function throwWithNoReturn() {
try {
throw new Error();
} finally {
}
}
throwWithNoReturn();

102
try … ﬁnally without catch
function throwWithNoReturn() {
try {
throw new Error();
} finally {
}
}
throwWithNoReturn();

103
try … ﬁnally - return in ﬁnally
function throwAndReturnInFinally() {
try {
throw new Error();
} finally {
return 'I will be returned';
}
}
throwAndReturnInFinally();

104
try {
throw new Error();
} finally {
}
}

105
try {
throw new Error();
} finally {
}
}
Where is the error?

106
try … ﬁnally - returning
function returnsInTryAndFinally() {
try {
return 'I want to be returned';
} finally {
return "No, you won't";
}
}
returnsInTryAndFinally();

107
try {
} finally {
}
}

108
try {
} finally {
}
}

109
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Objects

111
Type of null
console.log(typeof null);

112
Type of null
console.log(typeof null); // 'object'

113
Type of null
console.log(typeof null); // 'object'

114
Type of null - explanation
https://v8.dev/blog/react-cliff
Similar to NaN for numbers
Source: v8.dev/blog/react-cliff

115
toJSON with JSON.stringify
const obj = {
a: 1,
b: 2,
toJSON: function() {
return 'definitely not an object';
}
};
console.log(JSON.stringify(obj));

116
const obj = {
a: 1,
b: 2,
}
};

117
const obj = {
a: 1,
b: 2,
}
};

118
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Coercion

120
Objects and == (for numbers)
console.log(foo == 1);
console.log(Number(foo));

121
Objects and == (for numbers)
const foo = {
counter: 0,
valueOf: function() {
return ++this.counter;
}
};

122
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Functions

124
Variadic functions
Variadic - take an arbitrary number of arguments (e.g. console.log)
sum(1, 2); // 3
sum(1, 2, 3, 4, 5, 6, 7); // 28

125
Variadic functions in ES6 (rest syntax)
function es6Sum(...args) {
return args.reduce((sum, x) => sum + x, 0);
}

126
Variadic functions in ES5
function es5Sum() {
let result = 0;
for (let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}

127
arguments - not a valid array
function invalidUse() {
arguments.forEach(x => {
// ...
});
}

128
arguments + Array.from = <3
function invalidUse() {
Array.from(arguments).forEach(x => {
// ...
});
}

129
Agenda
○ Numbers
○ RegExps
○ try … catch
○ Objects
○ Coercion
○ Functions

Prototypal inheritance

131
“Inheritance” in JavaScript
● Prototypal inheritance (not classical inheritance)
● Each object has a [[Prototype]] (another object or null)
● Prototype chain - multiple objects connected via prototype
● During property lookup, either:
○ Property exists on the object itself
○ The prototype chain is traversed to ﬁnd the property
● Can be confusing for programmers of other languages
● Dynamic - can be manipulated at runtime
Animal.prototype
Object.prototype
null
cat dog

132
Custom merge
function merge(dest, src) {
for (let property in src) {
if (
typeof dest[property] === 'object' &&
typeof src[property] === 'object'
) {
merge(dest[property], src[property]);
} else {
dest[property] = src[property];
}
}
}

133
Custom merge - happy scenario
const options = {
// default options
fetchNestedData: true,
pageSize: 10
};
const additionalOptions = JSON.parse(
'{ "fetchNestedData": false }' );
merge(options, additionalOptions );

134
Custom merge - prototype pollution
const options = {
pageSize: 10
};
const additionalOptions = JSON.parse('{ "__proto__": { "isAdmin":
true }}');
merge(options, additionalOptions);

135
const options = {
pageSize: 10
};
true }}');

136
const options = {
pageSize: 10
};
true }}');
More information:
https://codeburst.io/what-is-prototype-pollution-49482fc4b638
https://snyk.io/vuln/SNYK-JS-LODASH-450202

137
Monkey patching
console.log('test before patching' );
const originalLog = console.log;
console.log = function(...args) {
return originalLog.call(this, 'patched log', ...args);
};
console.log('test after patching' );

138
Monkey patching
console.log('test before patching' );
const originalLog = console.log;
console.log = function(...args) {
return originalLog.call(this, 'patched log', ...args);
};
console.log('test after patching' );

139
Monkey patching - polyﬁlling
Array.prototype.flat = function() {
return this.reduce((arr, element) => arr.concat(element), []);
};
[1, [2], [3]].flat();

140
Monkey patching - polyfilling
Array.prototype.flat = function() {
return this.reduce((arr, element) => arr.concat(element), []);
};
[1, [2], [3]].flat();
Careful
MooTools monkey-patched Array.prototype.flatten
https://mootools.net/core/docs/1.5.2/Types/Array#Array:flatten
https://github.com/mootools/mootools-core/blob/master/Source/Types/Array.js
#L132-L140
Result:
https://developers.google.com/web/updates/2018/03/smooshgate

141
Shortening property access
Source: https://www.omnicalculator.com/math/law-of-cosines
function calculateSideLength (a, b, alpha) {
return Math.sqrt(
Math.pow(a, 2) + Math.pow(b, 2) - 2 * a * b *
Math.cos(alpha)
);
}

142
with statement
Source: https://www.omnicalculator.com/math/law-of-cosines
function calculateSideLength2 (a, b, alpha) {
with (Math) {
return sqrt(pow(a, 2) + pow(b, 2) -
2 * a * b * cos(alpha));
}
}

143
with statement
function extractValuesFromSubarrays (array, indexOf) {
with (array) {
return map(subArray => subArray[indexOf]);
}
}
const array = [[1, 2, 3], [4, 5]];
extractValuesFromSubarrays (array, 1); // [2, 5] ?

144
with statement
with (array) {
}
}
const array = [[1, 2, 3], [4, 5]];
extractValuesFromSubarrays (array, 1); // [undefined, undefined]

145
with statement
with (array) {
}
}
const array = [[1, 2, 3], [4, 5]];
extractValuesFromSubarrays (array, 1); // [undefined, undefined]
Array.prototype.indexOf,
not the indexOf parameter

146
with statement
● Cannot be optimized by the compiler (depends on the runtime value)
● Not recommended
● Will throw an error in strict mode
More information:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Sta
tements/with

147
with statement
function extractValuesFromSubarrays (array, find) {
with (array) {
return map(subArray => subArray[find]);
}
}
const array = [[1, 2, 3], [4, 5]];
extractValuesFromSubarrays (array, 1);

148
with statement
with (array) {
}
}
const array = [[1, 2, 3], [4, 5]];

149
with statement
with (array) {
}
}
const array = [[1, 2, 3], [4, 5]];

150
with + Symbol.unscopables
/Global_Objects/Symbol/unscopabl
es
Symbol.unscopables - points
to an object with property names
that should not be scoped by the
with statement
Introduced in ES6

151
with + Symbol.unscopables
/Global_Objects/Symbol/unscopabl
es
find is not scoped,
but indexOf is
Symbol.unscopables - points
to an object with property names
that should not be scoped by the
with statement
Introduced in ES6

152
Other fun symbols
Well-known symbols:
● Symbol.iterator (used by for...of)
● Symbol.asyncIterator (used by for await...of)
● Symbol.hasInstance (used by instanceof)
● Symbol.toPrimitive
https://developer.mozilla.org/en-US/docs/Web/JavaScript
/Reference/Global_Objects/Symbol
Introduced in ES6

154
Summary
● Not all quirks are JavaScript-only (comma operator, IEEE 754)
● New features make it easier to avoid pitfalls (arrow functions, const,
let)
● Some features are very different than in other languages (prototypal
inheritance), so watch out

Thank you
Krancowa 5
02-493, Warsaw
Poland
+48 22 389 51 00
contact@codilime.com

CodiLime Tech Talk - Grzegorz Rozdzialik: What the java script

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à CodiLime Tech Talk - Grzegorz Rozdzialik: What the java script

Similaire à CodiLime Tech Talk - Grzegorz Rozdzialik: What the java script (20)

Plus de CodiLime

Plus de CodiLime (16)

Dernier

Dernier (20)

CodiLime Tech Talk - Grzegorz Rozdzialik: What the java script