1. 1

2. Viktor Turskyi
● Non-executive Director at WebbyLab
● Founder at my-talks.net
● Senior Software Engineer at Google
● Open source developer
● More than 50 conference talks
● 20 years of experience in IT
● Delivered more than 80 projects of different
scale (including projects for 5 companies from
Fortune 500 list)
2/36

3. array.filter, array.map, array.reduce, array.forEach, array.indexOf
JSON.parse, JSON.stringify
Date.now
getters, setters
https://kangax.github.io/compat-table/es5/
JavaScript ES3 to ES5
3/36

4. Classes,
Spread parameters, rest operators
Destructuring,
const, let
Arrow functions,
Promise, Set, Map etc
https://kangax.github.io/compat-table/es6/
JavaScript ES5 to ES6
4/36

5. https://stackoverflow.com/questions/7937/how-to-solve-the-select-overlap-bug
-in-ie6
Asked 13 years, 3 months ago
How to solve the select overlap
bug in IE6?
5/36

6. Let’s learn a little bit of Perl

7. A little bit of typing?
7/36

8. Weak typing + Monomorphic operators
# Weak typing + Monomorphic operators
print 1 + 1;
print '1' + 1;
print '1' + '1';
print "1" + '1' == 2;
print 1 . 1;
print '1' . 1;
print '1' . '1';
print "1" . '1' eq 11;

9. Primitives
# Strings
print 'This is a test.';
print "Hi there!n";
# Variables, "$" = scalar
my $animal = "camel";
my $answer = 42;
# Arrays, "@" = array
my @numbers = (0..10_000); # ".." - sequence
my @animals = ("camel", "llama", "owl");
print $animals[0]; # prints "camel"
# Hashes, "%" = hash, "=>" is fat comma
my %fruit_color = ( apple => "red", banana => "yellow");
print $fruit_color{'apple'}; # prints "red"

10. Slices
# Slices
my @animals = ("camel", "llama", "owl");
print @animals[0, 2];
my %fruit_color = ( apple => "red", banana => "yellow");
print @fruit_color{'apple', 'banana'};

11. Context
# Context (scalar, list, void)
# for array
print @animals; # list context
my $animal_cnt = @animals; # scalar context
print scalar @animals; # forced scalar context
# for hash
my %fruit_color = ( apple => "red", banana => "yellow");
print %fruit_color; # list context
print scalar %fruit_color; # forced scalar context
# Default variable $_
foreach (@animals) { print "1: $_n" }
foreach my $a (@animals) { print "2: $an" }

12. Step 1: I show a task
Step 2: You try to solve it in JS
Step 3: I show solution in JS an Perl
Let’s play a game
12/36

13. https://paiza.io/en/projects/new?language=perl
https://paiza.io/en/projects/new?language=javascript
Playgrounds
13/36

14. Cases

15. Increment variable by 10000
Set variable to 10000 if contains falsy value, otherwise leave as is
Set variable to 10000 if it is node defined
Case 1: Logical assignment
15/36

16. JavaScript solution
let variable = 0;
variable += 10000;
variable = variable || 10000;
// ES2021
variable ||= 10_000;
variable ??= 10_000;

17. Perl solution
my $variable = 0;
$variable += 10_000;
$variable ||= 10_000;
$variable //= 10_000;

18. Merge objects o1 with o2 into o3
Case 2: Merge hashes
18/36

19. JavaScript solution
const o1 = {A: 1, B: 2};
const o2 = {C: 3, D: 4};
// With new method
const o3 = Object.assign({}, o1, o2);
// With new syntax
const o3 = {...o1, ...o2};

20. Perl solution
my %o1 = (A => 1, B => 2);
my %o2 = (C => 3, D => 4);
my %o3 = %o1, %o2;

21. const users = [
{id: 1, name: 'Viktor' },
{id: 2, name: 'John' }
];
{ '1': { id: 1, name: 'Viktor' }, '2': { id: 2, name: 'John' } }
Case 3: build lookup table
21/36

22. JavaScript solution
const users = [
{ id: 1, name: 'Viktor' },
{ id: 2, name: 'John' }
];
const usersById = Object.fromEntries( users.map(u => [u.id, u]) );

23. Perl solution
my @users = (
{ id => 1, name => 'Viktor' },
{ id => 2, name => 'John' }
);
my %users_by_id = map { $_->{id} => $_ } @users;

24. letters2codes = { a: “1”, b: "2" };
codes2letters = {“1”: "a", “2”: "b" };
Case 4: Swap keys and values in
object
24/36

25. JavaScript solution
const letters2codes = { a: '1', b: "2" };
const codes2letters = Object.fromEntries(
Object.entries(letters2codes).map(([k, v]) => [v, k])
);

26. Perl solution
my %letters2codes = (a => '1', b => "2");
my %codes2letters = reverse %letters2codes;

27. Sort array numerically
Sort array by value length (longest first), if the length is equal then
sort alphabetically (a to z)
Case 5: Sort array
27/36

28. JavaScript solution
const numbers = [10, 4, 3, 9, 8];
const sorted = numbers.sort((a,b) => a - b);
const words = ['cat', 'dog', 'cow', 'parrot', 'camel'];
const localCmp = (a, b) => {
// Ternary operator will make sorting "unstable"
if (a > b) {
return 1;
} else if (a < b) {
return -1;
} else {
return 0;
}
};
const sortedWords = words.sort((a, b) => {
return b.length - a.length || localCmp(a, b);
});

29. Perl solution
my @numbers = (10, 4, 3, 9, 8);
my @sorted = sort { $a <=> $b } @numbers;
my @words = ('cat', 'dog', 'cow', 'parrot', 'camel');
my @sorted = sort { length($b) cmp length($a) || $a cmp $b } @words;

30. const fruitColor = { apple: "red", banana: "yellow", kiwi: "green"};
[‘red’, ‘yellow’, ‘green’]
Case 6: List values from object by
keys sorted alphabetically
30/36

31. JavaScript solution
const fruitColor = { apple: "red", banana: "yellow", kiwi: "green"};
const values = Object.keys(fruitColor).sort().map(k => fruitColor[k]);

32. Perl solution
my %fruit_color = ( apple => "red", banana => "yellow", kiwi => "green");
my @values = @fruit_color{sort keys %fruit_color};

33. Questions?

34. Telegram: @JABASCRIPT
34/36

35. Follow me:
35/36
my-talks.net/viktor-turskyi

36. Email
viktor@webbylab.com
Website
https://webbylab.com
@koorchik
@koorchik
My contacts
29/29