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.

Czym to jest czysta funkcja?

Czysta funkcja (ang.: pure function) jest to termin z programowania funkcjonalnego, który mówi, że funkcja jest "czysta" jeśli są spełnione następujące warunki:

1. Te same dane przekazane do funkcji zawsze dają taki sam wynik.
2. Funkcja nie tworzy efektów ubocznych.

Przyjrzyjmy się obu warunkom bliżej.

Dane na wejściu, wynik na wyjściu

Te same dane przekazane do funkcji zawsze dają taki sam wynik.

Czyli: dla taki samych parametrów funkcja zawsze powinna zwrócić ten sam wynik:

const multiply = (num, by) => num * by;

console.log(multiply(2, 3)); // 6
console.log(multiply(2, 4)); // 8
console.log(multiply(2, 3)); // 6

Podajemy dwa razy te same parametry: 2 i 3 i dostajemy ten sam wynik: 6. To jest czysta funkcja.

Inny przykład:

console.log(Math.random()); // 0.2755161550452777
console.log(Math.random()); // 0.5888948222087572
console.log(Math.random()); // 0.2976254575123847

To nie jest czysta funkcja! Dla tych samych danych wejściowych dostajemy różne wyniki. Pierwszy warunek nie został spełniony w tym przypadku.

Efekty uboczne

Funkcja nie tworzy efektów ubocznych.

To znaczy, że czysta funkcja nie zmienia stanu danych do niej przekazanych.

Przykład 1

const setProperty = (property, value, object) => {
  object[property] = value;
}

const obj = { name: 'Object' };
setProperty('size', 100, obj); // { name: 'Object', size: 100 }

console.log(obj);

Funkcja setProperty nie można nazwać czystą, ponieważ tworzy efekt uboczny. Zmienia stan obiektu, który jest przekazany do funkcji.

Poprawiona wersja:

const setProperty = (property, value, object) => {
	return ({
		...object,
		[property]: value
	});
}

const obj = { name: 'Object' };
const updatedObject = setProperty('size', 100, obj);

console.log(obj); // { name: 'Object' }
console.log(updatedObject); // { name: 'Object', size: 100 }

Przykład 2

Czysta funkcja nie polega na stanie z zewnątrz:

const counterValue = 10;
const updateCounter = (value) => value + counterValue;

console.log(updateCounter(5)); // 15
console.log(updateCounter(10)); // 20
console.log(updateCounter(10)); // 20

Tutaj niby wszystko jest ok. Daje takie same wyniki na przykład dla parametru 10. Problem jest taki, że działamy na zmiennej z zewnątrz.

A co jeśli zmienimy nieco kod:

let counterValue = 10;
const updateCounter = (value) => value + counterValue;

console.log(updateCounter(5)); // 15
console.log(updateCounter(10)); // 20
counterValue += 15;
console.log(updateCounter(10)); // 35

Ups... mamy już inne wyniki...