W sierpniu opublikowałem 9 wpisów:

RxJS:

1. Operator filter

Webstorm:

1. Jak zlokalizować nieużywany kod w projekcie?

Inne:

1. Ubuntu: Jak sparować słuchawki Airpods Pro?

JavaScript:

1. Jak zapobiec zmianie wartości tablicy?
2. Czym jest czysta funkcja?
3. Jak stworzyć głęboką kopię zagnieżdżonego obiektu?
4. Jak pominąć niektóre właściwości obiektu?

Narysowałem dwa komiksy:

1. Big problem, small steps
2. "Is task ready?" Driven Development

Przeczytałem cztery książki:

1. Marsjanin - Andy Weir
2. Projekt zdrowie - Anders Hansen, Carl Johan Sundberg
3. Zemsta najlepiej smakuje na zimno - Joe Abercrombie
4. Legenda o samobójstwie - David Vann

Przesłuchałem cztery audiobooki:

1. Czarny dom - Stephen King, Peter Straub
2. Ta druga - Therese Bohman
3. How to Have a Beautiful Mind - Edward De Bono
4. Norwegian Wood - Haruki Murakami

Załóżmy, że mamy obiekt jak poniżej:

{
	name: 'Some product',
	price: 100,
	currency: 'PLN',
	weight: 1.5,
	size: 'L'
}

I chcielibyśmy pobrać większość właściwości tego obiektu, ale pozbyć się niektórych. Na przykład chcemy pominąć: weight i size. Jak rozwiązać ten problem?

Możemy użyć operatora spread: .... Przykład

const obj = {
	name: 'Some product',
	price: 100,
	currency: 'PLN',
	weight: 1.5,
	size: 'L'
};

const { weight, size, ...newObj } = obj;

console.log(newObj);

Wynik:

{
	name: 'Some product',
	price: 100,
	currency: 'PLN'
}

Kopiowanie obiektu

Stworzenie kopii obiekt jest proste:

const originalObj = {
	title: 'Foo',
	value: 100,
	tags: ['a', 'b', 'c']
};

const copyObj = {
	...originalObj
};

copyObj.title = 'Bar';
copyObj.value = 50;
copyObj.tags.push('d');

console.log('originalObj: ', originalObj); // { title: 'Foo', value: 100, tags: ['a', 'b', 'c'] }
console.log('copyObj: ', copyObj); // { title: 'Bar', value: 50, tags: ['a', 'b', 'c', 'd'] }

Za pomocą operatora spread: ... tworzymy kopię obiektu. Następnie zmieniamy w skopiowanym obiekcie jego parametry. Oryginał się nie zmieniał. I tak miało być :)

Niestety to nie zadziała dla obiektu zagnieżdżonego.

Kopiowanie obiektu zagnieżdżonego

Najpierw przykład:

const originalObj = {
	name: 'Janusz Kowalski',
	age: 57,
	address: {
		city: 'New York',
		street: '99 East Golf Street'
	}
};

const copyObj = {
	...originalObj
};

copyObj.name = 'Grażyna Kowalska';
copyObj.address.city = 'Chicago';
copyObj.address.street = '3109 15th St';

console.log('originalObj: ', originalObj); 
/* 
originalObj: 
{
  name: 'Janusz Kowalski',
  age: 57,
  address: {
    city: 'Chicago',
    street: '3109 15th St'
  }
}
*/

console.log('copyObj: ', copyObj);
/*
copyObj:
{
  name: 'Grażyna Kowalska',
  age: 57,
  address: {
    city: 'Chicago',
    street: '3109 15th St'
  }
}
*/

Kopia została stworzona, ale nie dla zagnieżdżonej części obiektu jak: address. Po zmianie danych w kopii zmieniły się też dane w oryginale!

Jak sobie z tym poradzić?

const originalObj = {
	name: 'Janusz Kowalski',
	age: 57,
	address: {
		city: 'New York',
		street: '99 East Golf Street'
	}
};

const copyObj = JSON.parse(JSON.stringify(originalObj))

copyObj.name = 'Grażyna Kowalska';
copyObj.address.city = 'Chicago';
copyObj.address.street = '3109 15th St';

console.log('originalObj: ', originalObj); 
/* 
originalObj: 
{
  ...,
	address: {
		city: 'New York',
		street: '99 East Golf Street'
	}
}
*/

console.log('copyObj: ', copyObj);
/*
copyObj:
{
  ...,
  "address": {
    "city": "Chicago",
    "street": "3109 15th St"
  }
}
*/

Kombinacja: JSON.parse i JSON.stringify rozwiązuje ten problem.

To rozwiązanie nie zadziała jeśli obiekt zawiera funkcje. Funkcje nie zostaną skopiowane.