Immutability and Mutability in Javascript

Buari Bola Ahmed — Sun, 07 Jun 2020 22:57:53 +0000

I usually think that a variable is mutable only if its value can be changed. This may be true to some extent but I find it confusing. A quote from MDN about Mutable variable

/Mutable/ is a type of variable that can be changed. In JavaScript , only objects and arrays are mutable, not primitive values .

So, a number or string are immutable but array and objects are mutable. But also if I have a variable:

var number = 5;
var string = 'Bola';

console.log(number); // Outputs 5
console.log(string); // Outputs Bola

number = number + 1;
string = string + ' Buari';

console.log(number); // Outputs 6
console.log(string); // Outputs Bola Buari

This means the variable number was changed from 5 to 6 and the variable string was changed from Bola to Bola Buari.🤔

These variables were changed but that does not make them mutable. This means that when number and string was changed, they became a new value.

A good example to illustrate this is copying the variables and changing the copied variable. if the variable is mutable the original variable is changed, if it's immutable the original variable is not changed since chasing it creates a new variable of its own.

var originalNumber = 20;
var copiedNumber = originalNumber;
copiedNumber = copiedNumber + 10;

console.log(originalNumber); // Outputs 20 (Not changed)

var originalString = 'Bola';
var copiedString = originalString;
copiedString = copiedString + ' Buari';

console.log(originalString); // Outputs Bola (Not changed)

var originalArray = [1, 2];
var copiedArray = originalArray;
copiedArray.push(3, 4, 5);

console.log(originalArray); // Outputs [1,2,3,4,5] (Changed)

var originalObject = { name: 'Bola', gender: 'Male' };
var copiedObject = originalObject;
copiedObject.job = 'Developer';

console.log(originalObject); // Outputs {name: 'Bola', gender: 'Male', job: 'Developer'} (Changed)

As seen in the above examples, when copies of array and object are changed, the original variable is changed while for primitive types like string and number, the original variables are not changed.

What makes me understand immutability more clearly is this, immutable variables are variables that do not change when their copy is changed while mutable variables changes when their copy is changed.

Resources

Mutable - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Learning CSS-Box Shadow

Buari Bola Ahmed — Sun, 14 Apr 2019 12:48:13 +0000

CSS-Box Shadow

What did I want to learn and why

Am writing about the CSS shadow box I learnt about few days ago.
I got across this property while learning about CSS on freecodecamp.com before and had to implement it on a project I did both individually and with my coding partner at Microverse.

I was trying hard to understand what it does and how the values work. Like most other CSS property, the value was not consistent (varying number of value).

The values for the property can range from just one to six values and more if it is nested (shadow on another shadow)

Below are examples of the property value varying size which hard different effect:

.shadowone {
  box-shadow: 10px 10px;
}
.shadowtwo {
  box-shadow: 10px 10px 5px;
}

.shadowthree {
  box-shadow: 10px 10px 5px 5px;
}
.shadowfour {
  box-shadow: 10px 10px grey;
}

What I learned and built

The pattern I observed about the CSS box-shadow property is as follows:

When only one value is given, it is usually one of these global keywords

.shadow {
  box-shadow: initial;
}
.shadow {
  box-shadow: none;
}
.shadow {
  box-shadow: unset;
}
.shadowfive {
  box-shadow: 10px 10px 5px;
}
.inherit {
  box-shadow: inherit;
}

{box-shadow: inherit;} This value Inherits the box-shadow property from its parent element.
{box-shadow: initial;}, {box-shadow: none;} and {box-shadow: unset;} sets the property to its default value.

When two, three or four length values are given, the first two will represent the horizontal-offset and vertical-offset and the next two will represent the blur-radius and spread-radius. The other two values are optional, which are the inset keyword and color value. To specify multiple shadows, a comma-separated list of shadows can be provided to achieve this.

{box-shadow: horizontal-offset vertical-offset}
horizontal-offset - which is a length value for setting a horizontal distance from the element box.

.shadowsix {
  box-shadow: 10px 0px;
}

A negative value will set the shadow to the left of the element while the positive will set the shadow to the right of the element.

.shadowseven {
  box-shadow: -10px 0px;
}

vertical-offset - which is also a length value for setting a vertical distance from the element box.

.shadoweight {
  box-shadow: 0px 10px;
}

A negative value will set the shadow above the element while the positive will set the shadow below the element.

.shadownine {
  box-shadow: 0px -10px;
}

blur-radius - the third value in the diagram below is the blur-radius

.shadowten {
  box-shadow: 0px 0px 24px;
}

This shows that even if both offsets (first two values) values are zero the shadow is behind the element and still generates blur effects. This is also the same for spread-radius.

.shadoweleven {
  box-shadow: -10px -10px 24px;
}
.shadowtwelve {
  box-shadow: -10px -10px 48px;
}

The larger this value, the bigger the blur, so the shadow becomes bigger and lighter (or more blur) as shown above.

Negative values are not allowed for this value. This results in an error and invalidates the box-shadow property

spread-radius - This is the fourth length value.

.shadowfourteen {
  box-shadow: 0px 0px 0px 16px;
}

Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink as seen below.

.shadowfifteen {
  box-shadow: 10px 10px 5px 5px;
}
.shadowsixteen {
  box-shadow: 10px 10px 5px -5px;
}

If not specified as we have been seeing earlier it will be 0 and the shadow will be the same size as the element.

inset The inset keyword changes the shadow from being drop shadow to one inside the element box, above the background but below the content with respect to the length values as shown below:

.shadowseventeen {
  box-shadow: 10px 10px 5px -5px inset;
}

color
If the color is not specified as we have been seeing in earlier examples, the color used will depend on the browser - it is usually the value of the color property which is the default in the above examples.

.shadoweighteen {
  color: blue;
  box-shadow: 10px 10px 5px -5px;
}

Here the color property is set to blue and hence have the box-shadow color as blue as it is not specified, but when the color is specified as shown below, the box-shadow color changes to that value.

.shadownineteen {
  color: blue;
  box-shadow: 10px 10px 5px -5px green;
}

Common application of CSS box-shadow property

CSS box-shadow is used mostly for navigation bars and button. Examples of projects I applied box-shadow to is below:

New York Times Clone - Navigation bar - View in browser - View on Github
Mint.com’s signup page clone - Button - View in browser - View on Github
Footer link Hover effects - View in browser - View on Github

Here are some resources if you want to learn more...