Created
January 30, 2026 14:01
-
-
Save withArtur/74e00c28f2298edfe180fd05a7e1174b to your computer and use it in GitHub Desktop.
.this /... spread operator / shallow copies
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| /* | |
| ======================================== | |
| 1️⃣ CONTESTI DI `this` | |
| ======================================== | |
| Il valore di `this` dipende da COME e DOVE | |
| una funzione viene eseguita. | |
| */ | |
| // ---------------------------- | |
| // this nel contesto globale | |
| // ---------------------------- | |
| console.log(this); | |
| // In strict mode: undefined | |
| // Senza strict mode (browser): window | |
| // ---------------------------- | |
| // this in una funzione standalone | |
| // ---------------------------- | |
| function funzioneStandalone() { | |
| console.log(this); | |
| } | |
| funzioneStandalone(); | |
| // strict mode → undefined | |
| // non strict → window | |
| // ---------------------------- | |
| // this come metodo di un oggetto | |
| // ---------------------------- | |
| const user = { | |
| name: "Artur", | |
| sayName() { | |
| console.log(this.name); | |
| } | |
| }; | |
| user.sayName(); | |
| // this → user | |
| // ---------------------------- | |
| // this perso (function reference) | |
| // ---------------------------- | |
| const ref = user.sayName; | |
| ref(); | |
| // this → undefined (strict mode) | |
| // ---------------------------- | |
| // this con bind | |
| // ---------------------------- | |
| const boundFn = user.sayName.bind(user); | |
| boundFn(); | |
| // this → user | |
| // ---------------------------- | |
| // this nelle arrow function | |
| // ---------------------------- | |
| const arrowExample = { | |
| name: "Arrow", | |
| normalFn() { | |
| console.log(this.name); // OK | |
| }, | |
| arrowFn: () => { | |
| console.log(this.name); | |
| } | |
| }; | |
| arrowExample.normalFn(); | |
| // this → arrowExample | |
| arrowExample.arrowFn(); | |
| // this → ereditato dal contesto esterno (global / undefined) | |
| // ---------------------------- | |
| // this negli event listener (browser) | |
| // ---------------------------- | |
| /* | |
| button.addEventListener("click", function () { | |
| console.log(this); // elemento DOM cliccato | |
| }); | |
| button.addEventListener("click", () => { | |
| console.log(this); // this esterno, NON il button | |
| }); | |
| */ | |
| // ---------------------------- | |
| // this nelle classi | |
| // ---------------------------- | |
| class Person { | |
| constructor(name) { | |
| this.name = name; | |
| } | |
| sayHello() { | |
| console.log(this.name); | |
| } | |
| } | |
| const p = new Person("Mario"); | |
| p.sayHello(); | |
| // this → istanza della classe | |
| // ---------------------------- | |
| // this in setTimeout | |
| // ---------------------------- | |
| setTimeout(function () { | |
| console.log(this); | |
| }, 100); | |
| // this → undefined (strict) / window (non strict) | |
| setTimeout(() => { | |
| console.log(this); | |
| }, 100); | |
| // this → contesto esterno | |
| /* | |
| ======================================== | |
| 2️⃣ SPREAD OPERATOR (...) | |
| ======================================== | |
| Espande array, oggetti o argomenti | |
| */ | |
| // ---------------------------- | |
| // Spread su array | |
| // ---------------------------- | |
| const nums = [1, 2, 3]; | |
| const numsCopy = [...nums]; | |
| console.log(numsCopy); | |
| // [1, 2, 3] | |
| // ---------------------------- | |
| // Concatenazione array | |
| // ---------------------------- | |
| const a = [1, 2]; | |
| const b = [3, 4]; | |
| const merged = [...a, ...b]; | |
| console.log(merged); | |
| // [1, 2, 3, 4] | |
| // ---------------------------- | |
| // Spread su oggetti | |
| // ---------------------------- | |
| const person = { | |
| name: "Anna", | |
| age: 30 | |
| }; | |
| const extendedPerson = { | |
| ...person, | |
| city: "Roma" | |
| }; | |
| console.log(extendedPerson); | |
| // { name: "Anna", age: 30, city: "Roma" } | |
| // ---------------------------- | |
| // Spread come argomenti di funzione | |
| // ---------------------------- | |
| function sum(x, y, z) { | |
| return x + y + z; | |
| } | |
| const values = [10, 20, 30]; | |
| console.log(sum(...values)); | |
| // 60 | |
| /* | |
| ======================================== | |
| 3️⃣ SHALLOW COPY (COPIA SUPERFICIALE) | |
| ======================================== | |
| Lo spread crea SOLO copie superficiali. | |
| I riferimenti annidati rimangono condivisi. | |
| */ | |
| // ---------------------------- | |
| // Shallow copy con array | |
| // ---------------------------- | |
| const originalArray = [ | |
| 1, | |
| { nested: "value" } | |
| ]; | |
| const copiedArray = [...originalArray]; | |
| copiedArray[0] = 99; | |
| copiedArray[1].nested = "changed"; | |
| console.log(originalArray); | |
| // [1, { nested: "changed" }] | |
| console.log(copiedArray); | |
| // [99, { nested: "changed" }] | |
| // ---------------------------- | |
| // Shallow copy con oggetti | |
| // ---------------------------- | |
| const originalObject = { | |
| name: "Luca", | |
| address: { | |
| city: "Milano" | |
| } | |
| }; | |
| const copiedObject = { ...originalObject }; | |
| copiedObject.name = "Marco"; | |
| copiedObject.address.city = "Roma"; | |
| console.log(originalObject); | |
| // { name: "Luca", address: { city: "Roma" } } | |
| console.log(copiedObject); | |
| // { name: "Marco", address: { city: "Roma" } } | |
| /* | |
| 👉 CONCLUSIONE | |
| - `this` dipende dal contesto di esecuzione | |
| - le arrow function NON hanno il proprio `this` | |
| - lo spread operator copia ed espande | |
| - lo spread crea SHALLOW COPY, non deep copy | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment