Tip of the day - JavaScript

Un trucchetto al giorno per mantenerti allenato o per conoscere qualcosa di nuovo sul magico mondo di JavaScript.

23

Quick ways to clone objects

2021-02-24 - JavaScript

1// JS Tip of the Day
2// Quick ways to clone objects 
3
4const hero = { name: 'Batman', weapon: 'Batarang' };
5
6// Spread Operator - Shallow Clone - ES2015/ES6
7const newHeroSpread = { ...hero };
8
9// Rest Operator - Shallow Clone - ES2015/ES6
10const { ...newHeroRest } = hero;
11
12// Object.assign - Shallow Clone - ES2015/ES6
13const newHeroAssign = Object.assign({}, hero);
14
15// JSON methods - Deep Clone (without function or Symbol properties)
16const newHeroJSON = JSON.parse(JSON.stringify(hero));
17
18// Native deep cloning (only Node.js)
19const v8 = require('v8');
20const deepClone = obj => {
21  return v8.deserialize(v8.serialize(obj));
22};
23
24const newHeroV8 = deepClone(hero);
25
26// or Deep Clone with Underscore, Lodash, Ramda, your Custom Function, ...
#JStipoftheday
22

Get the last item(s) in an array

2021-02-23 - JavaScript

1// JS Tip of the Day
2// Get the last item(s) in an array
3
4const heroes = ['Batman', 'Superman', 'Wonder Woman'];
5
6console.log(heroes.slice(-1)); // ['Wonder Woman']
7console.log(heroes.slice(-2)); // ['Superman','Wonder Woman']
#JStipoftheday
21

Checking if a key exists in an object

2021-02-22 - JavaScript

1// JS Tip of the Day
2// Checking if a key exists in an object
3
4const hero = { name: 'Batman', weapon: 'Batarang' };
5
6// hasOwnProperty
7console.log(hero.hasOwnProperty("vehicle")); // false
8// in operator
9console.log('name' in hero); // true
10// Get elements (brackets style)
11console.log(hero["vehicle"]); // undefined
12// Get elements (object style)
13console.log(hero.vehicle); // undefined
14
#JStipoftheday
20

Convert a String to a Number

2021-02-19 - JavaScript

1// JS Tip of the Day
2// Convert a String to a Number
3
4let intStr = '42';
5let floatStr = '42.24';
6let nanStr = 'Hitchhiker';
7
8// with Number() constructor
9console.log(new Number(intStr)); // Number {42}
10console.log(new Number(floatStr)); // Number {42.24}
11console.log(new Number(nanStr)); // Number {NaN}
12
13// with parseInt function
14console.log(parseInt(intStr)); // 42
15console.log(parseInt(floatStr)); // 42
16console.log(parseInt(nanStr)); // NaN
17
18// with parseFloat function
19console.log(parseFloat(intStr)); // 42
20console.log(parseFloat(floatStr)); // 42.24
21console.log(parseFloat(nanStr)); // NaN
22
23// with Math.floor or ceil methods
24console.log(Math.floor(intStr)); // 42
25console.log(Math.floor(floatStr)); // 42
26console.log(Math.floor(nanStr)); // NaN
27
28// with Multiply by 1 
29console.log(intStr * 1); // 42
30console.log(floatStr * 1); // 42.24
31console.log(nanStr * 1); // NaN
32console.log('42' * 1); // 42
33console.log('42.21' * 1); // 42.24
34
35// with Unary operator
36console.log(+intStr); // 42
37console.log(+floatStr); // 42.24
38console.log(+nanStr); // NaN
39console.log(+'42'); // 42
40console.log(+'42.24'); // 42.24
#JStipoftheday
19

Custom Events with detail information object

2021-02-18 - JavaScript

1// JS Tip of the Day
2// Custom Events with detail information object
3
4// Create Custom Event with detail object
5const customEvent = new CustomEvent('batsignal', { detail: { hero: 'Batman!' } });
6
7// Add a valid event listener
8document.addEventListener('batsignal', (event) => console.log(event.detail.hero));
9
10// Dispatch the Custom Event
11document.dispatchEvent(customEvent);
12
#JStipoftheday

Preferisci ricevere i tips via mail? Iscriviti alla newsletter.

Iscriviti alla newsletter

Tip of the day - JavaScript

Hai in mente un progetto e vorresti realizzarlo?
Sei interessato a migliorare le tue competenze o quelle del tuo team in ambito di programmazione e sviluppo?

Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.