loading
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
//Basics
let mutate = 10;

function impureFunctionAdd(newValue) {
  return mutate += newValue;
}

impureFunctionAdd(5);

console.log('this is the mutated value: ', mutate);


let dontMutate = 20;

function pureFunctionAdd(newValue) {
  return dontMutate + newValue;
}

console.log('\npureFunctionAdd returns new value: ', pureFunctionAdd(22));

console.log('\nHowever, the variable remains unmutated: ', dontMutate);


//Append to Array

let mutateArray = [0, 1, 2];

function impureAppend(newValue) {
  return mutateArray.push(newValue);
}

impureAppend('mutated');

console.log('\nimpureAppend function mutated the value ', mutateArray);

let dontMutateArray = [3, 4, 5];

function pureAppend(newValue) {
  return [
      ...dontMutateArray,
      newValue
  ];
}

console.log('\npureAppend returns new value: ', pureAppend('new value'));

console.log('\n...while keeping the variable unmuated: ', dontMutateArray);


function pureAppendConcat(newValue) {
  return dontMutateArray.concat([newValue]);
}

console.log('\npureAppendConcat does the same thing: ', pureAppendConcat('new value'));

console.log('\n...see? -> ', dontMutateArray);



//Inject to Array

let mutateInjection = [5, 6, 7];

function impureInject(index ,newValue) {
  return mutateInjection.splice(index, 0, newValue);
}

impureInject(2, 'mutate!');

console.log('\nimpureInject function mutated the value ', mutateInjection);


let dontMutateInjection = [6, 7, 8];

function pureInject(index,newValue) {
  return [
    ...dontMutateInjection.slice(0, index),
    newValue,
    ...dontMutateInjection.slice(index)
  ];
}


console.log('\npureInject returns new array ', pureInject(1, "Injected!"));

console.log('\n...while keeping the array the same: ', dontMutateInjection);


//Objects

let objImpureDelete = {
  'a': 1,
  'b': 2
};

delete objImpureDelete['a'];

console.log('\nobjDelete: ', objImpureDelete);

let objPureDelete = {
  'a': 1,
  'b': 2,
  'c': 3,
  'd': 4
};

//Editing Objects

let dontMutateObject = {
  'one': 1,
  'two': 2
};

function pureInsert(newObj) {
  return Object.assign({}, dontMutateObject, newObj);
}

console.log('\nnew object: ', pureInsert({tre: 3}));


console.log('\noriginal object: ', dontMutateObject);


console.log('\nspread operator', {
  ...dontMutateObject, 'tre': 3
});

console.log('\ndont mutate obj', dontMutateObject)

//Editing Object

let dontEditObject = {
  'a': 1,
  'b': 2
};


console.log('\ncreate', {...dontEditObject, 'b': 'new value'});

console.log('\noriginal object: ', dontEditObject);


const { a, b, d } = objPureDelete;

const deleteA = {b, d};

console.log('\ndelete a: ', deleteA);

console.log('\nobjPureDelete: ', objPureDelete);



Native Browser JavaScript