DEV Community: James L

🎄JS Advent #7 - Destructuring 🎄

James L — Wed, 14 Dec 2022 20:55:10 +0000

For the month of December I have challenged myself to write 24 articles about some JS concepts up until Xmas.

The seventh installment in this series is about Destructuring.

You can use the destructuring assignment in JS to unpack objects and arrays.

For example:

var obj = {a: 10, b: 20};
const {a, b} = obj;

console.log(a); // 10
console.log(b); // 20

var arr = [10, 20, 30];
const [a,b,c] = arr;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

Any properties not present on the array or object will just be undefined:

var obj = {a: 10, b: 20};
const {c} = obj;

console.log(c); // undefined

var arr = [10, 20];
const [a,b,c] = arr;

console.log(c); // undefined

You can also have a default value for each variable which will be used if that property is not present:

var obj = { a: 10, b: 20, d: null };
const { a, b, c = 30, d = 40 } = obj;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30 - as c is not on obj
console.log(d); // null - will only set to the default if undefined

The spread syntax can be used also when destructuring

var obj = { a: 10, b: 20, c: 30 };
const { a, ...otherProperties } = obj;

console.log(a); // 10
console.log(otherProperties); // { b: 20, c: 30 }

var arr = [10, 20, 30, 40];
const [a, ...others] = arr;

console.log(a); // 10
console.log(others); // [20,30,40]

🎄JS Advent #6 - Host vs Native objects🎄

James L — Wed, 14 Dec 2022 20:47:30 +0000

For the month of December I have challenged myself to write 24 articles about some JS concepts up until Xmas.

The sixth installment in this series is about Host and Native objects.

What is a native object?

A native object is provided by Javascript itself. Their behaviour does not change based on the environment they are used in.
Some examples of native objects are String() Array Number(), true.

What is a host object?

A host object is an object provided by the environment Javascript is being executed in.
This will vary based on where the code is run.
Web browsers will allow you to access a window and console object, but these will not be available on a NodeJs server.

🎄JS Advent #5 - Strict vs loose equality🎄

James L — Tue, 06 Dec 2022 17:33:26 +0000

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The fifth installment in this series about strict and loose equality.

Double equals (loose equality)

The double equals will compare two values:

console.log('test' == 'test'); // true
console.log(1 == 1); // true
console.log(2 == 1); // false

This also will return true:

console.log('1' == 1); // true

Why is this?

The double equals (or loose equality) will perform a type conversion.
Strings are always converted to the Number type to be compared, so in this example the '1' string will be coerced to a Number type before the comparison.

Triple equals (strict equality)

The triple equals will again compare two values:

console.log('test' === 'test'); // true
console.log(1 === 1); // true
console.log(2 === 1); // false

But it will not perform a type conversion prior to the comparision:

console.log('1' === 1); // false

So to compare types always use the triple equals.

In general it is best practice to use the triple equals to avoid any unwanted behavior.

🎄JS Advent #4 - call() and apply() 🎄

James L — Sun, 04 Dec 2022 18:00:31 +0000

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The fourth installment in this series is about `call()` and `apply()`.

The call() function

The call method calls a function. It takes a this value as its first parameter and then optional arguments as a list for each parameters of that function.

Example:

//globalThis
x = 2; y = 3;

const obj = {
    x: 10;
    y: 20;
}

function add () {
    return this.x + this.y;
}

console.log(add.call(obj)); // 30

// 5 - globalThis is used (However in strict mode globalThis is not substituted so it would return NaN)
console.log(add.call());

Passing parameters as a list:

// globalThis
x = 2; y = 3;

const obj = {
    x: 10;
    y: 20;
}

function add (a, b) {
    return this.x + this.y + a + b;
}


console.log(add.call(obj, 20, 30)); // 80

// 55 - as null or undefined is converted to the globalThis object in non strict mode
console.log(add.call(null, 20, 30));

The apply() function

The apply method operates almost exactly the same as the call method except that it takes an array of parameters instead of as a list.

Example:

// globalThis
x = 2; x = 3;

const obj = {
    a: 10;
    b: 20;
}

function add (a, b) {
    return x + y + this.a + this.b;
}


console.log(add.apply(obj, [20, 30])); // 80
console.log(add.apply(null, [20, 30])); // 55

< JS Advent 3 - Object.hasOwnProperty()

🎄 JS Advent #3 - Object.hasOwnProperty()🎄

James L — Sat, 03 Dec 2022 17:53:12 +0000

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The third installment in this series is about Object.hasOwnProperty().

Object.hasOwnProperty() returns a boolean value if the provided property is present on the calling Object.

Example:

let obj = { name: 'Sarah', age: 20 };
console.log(obj.hasOwnProperty(name)); // true
console.log(obj.hasOwnProperty(job)); // false

Will still return true even if the value is null or undefined:

obj.property = undefined;
obj.anotherProperty = null;
console.log(obj.hasOwnProperty(property)); // true
console.log(obj.hasOwnProperty(anotherProperty)); // true

hasOwnProperty vs in vs dot/bracket notation

You can also check for a property on an object using the in operator or by using dot/bracket notation.

name in obj // true
!!obj.name // true
!!obj["name"] // true

Object.hasOwnProperty does not check for inherited properties, only direct properties. We know that most things in JS inherits from Object which has its own methods, one of which is toString().
Dot/bracket notation also checks for inheirited properties.

toString in obj // true
obj.hasOwnProperty('toString') // false
obj.toString // function toString()

Dot and bracket notation will coerce the value to truthy/valse value so if it is not set correctly it will return false.
Object.hasOwnProperty and in will still return true.

obj.value = 0;

// These blocks will not be executed as 0 is falsy
if (obj.value) { }
if (obj["value"]) { }

< JS Advent 2 - Mutable and Immutable methods

🎄JS Advent #2 - Mutable and Immutable methods 🎄

James L — Fri, 02 Dec 2022 12:40:56 +0000

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The second installment in this series is around Mutable and Immutable array methods.

What is a mutable method?

A mutable method is a method which changes the state of the array it is called on. eg. splice, pop, push, unshift, shift, reverse

What is an immutable method?

An immutable method is a method which does not change the state of the array it is called on and sometimes returns a new array instead. eg. concat, map, slice, filter

Examples of array mutation methods

pop:

let arr = [1,2,3,4];
console.log(arr); // [1,2,3,4]
arr.pop();
console.log(arr); // [1,2,3]

push:

// reset the array
let arr = [1,2,3,4];
arr.push(5);
console.log(arr); // [1,2,3,4,5]

reverse:

 // reset the array
let arr = [1,2,3,4];
arr.reverse();
console.log(arr); // [4,3,2,1]

unshift:

// reset the array
let arr = [1,2,3,4]; 
arr.unshift(1);
console.log(arr); // [1,1,2,3,4]

The value of the original array has changed in every instance.

Examples of array immutable methods

filter:

let arr = [1,2,3,4];
let newArray = arr.filter(el => el > 2);
console.log(arr); // [1,2,3,4]
console.log(newArray); // [3,4]

map:

let arr = arr.map(el => el * 2);
console.log(arr); // [1,2,3,4]
console.log(newArray); // [2,4,6,8]

concat:

let newArray = arr.concat([5,6,7]);
console.log(arr); // [1,2,3,4]
console.log(newArray); // [1,2,3,4,5,6,7]

slice:

let newArray = arr.slice(2)
console.log(arr); // [1,2,3,4]
console.log(newArray); // [3,4,]

The original array stays the same when the immutable methods are called on it.

Pure functions

A pure function is a function which as well as returning the same result every time it is executed with the same inputs also does not have any other side affects.
Using immutable array methods in functions contributes to this as they do not produce the side effect of changing the array.

< JS Advent #1

🎄JS Advent #1 - Truthy and Falsy values🎄

James L — Thu, 01 Dec 2022 00:32:03 +0000

For the month of December I have challenged myself to write 24 articles about some JS concepts up until Xmas.

The first installment in this series is around Truthy and Falsy values in Javascript.

What is a Truthy or Falsy value?

A truthy value is any value in Javascript thatr returns true when converted to a Boolean and a falsy value is any value in Javascript which is false when converted to a Boolean.

For example, a non-empty string is a truthy value as it returns true when comverted with the double NOT, whereas an empty string evaluates to false so it is a falsy value.

!!"test" === true;

!!"" === false;

And a slightly confusing example, even if the string contains a falsy value it will return true:

console.log(!!"0") // true
console.log(!!"false") // true

There are only a select few falsy values in Javascript. They are:

"", '', `` // empty strings
0 // zero (also minus 0)
null
NaN
false
undefined

All other values in Javascript are truthy. Including empty arrays and objects.

The double NOT operator (!!)

The double NOT operator will convert the value to a Boolean context and return a boolean value as in the examples above but can also be confusing.

For example then using on a Boolean value initially:

console.log(!!true);

This statement will negate true first to give us false and then negate false to give us true and then log that to the console.

So:

!!bVal === bVal

As an alternative you can also use the Boolean constructor:

const truthy = new Boolean("string");
console.log(truthy); // true

const falsy = new Boolean(0);
console.log(falsy); // false

AND and OR operators

You can also use the AND and OR operators with truthy and falsy values, as they will be converted upon evaluation.

!!({} && "") // returns false

!!({} || "") // returns true

JS Advent #2 >

Writing a roman numeral function in Javascript

James L — Fri, 19 Aug 2022 12:54:00 +0000

Problem statement

Write an algorithm which will return the roman numeral of a provided number.

Example:

roman(5) => V

Solution

First we will need a way to map numbers to a roman numeral.

We can use a simple object for this. The numbers we are mapping will be the most significant numerals and some numbers (such as 4) which are written in the format IV (1 before 5).

Our object will look like this where the key is the numeral and the value is the corresponding number:

const NUMERALS = {
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1
}

To determine the amount of numerals to add to our end string we need to find out how many times each number in our object goes into our argument and if needed append it to our roman numeral string.

Lets look at an example using the input number 15:

For the numbers 1000 to 40 in our object they do not go into the number 15 so nothing happens here. (eg. 15 / 100) = 0
When the loop reaches the value of 10 in our object, we divide 15 by 10 to get 1.5. Therefore the number 10 goes into 15 once (15 / 10 = 1.5), so we append an 'X' to our roman numeral string.
We need to then subtract 10 from 15 and continue with the loop, which leaves 5. Now the number being used for calculations with the values in our object is 5.
The next iteration of our object will use the value 9, 5/9 = 0.0... so that numeral is not appended.
When it reaches the next property on the object, the value is 5. So we divide by 5, append 'V' to the string and subtract which leaves 0.
The loop will continue to iterate over the last properties in the object. But there is no further numerals appended.

Writing our algorithm

Step 1:

Declare a blank string variable and write a loop block to iterate over all of the keys in our object:

var str = '';
for (var i of Object.keys(NUMERALS)) {
    ...   
}

Step 2:

Inside our loop we need to divide the number passed in by each numeral value:

   var q = Math.floor(number / NUMERALS[i]);

The Math.floor() function here will ensure the number is rounded down.

Step 3:

As q is the number of times the numeral value goes into our argument we need to multiply that by the numeral value and subtract from our number. For example, if we're using the numeral value of 10 in our loop from our object and our argument was 35:

var q = Math.floor(35/10) = 3;
number = 35 - (3 * 10) = 5;

So our next statement looks like this:

number -= q * NUMERALS[i];

Step 4:

Finally, we append the roman numeral the number of times the value occurs in our argument, using our example from Step 3, q is 3 (10 goes into 35, 3 times). So we need to append XXX to our string.

str += i.repeat(q);

All done!

Our completed function then looks like this. Outside of the for loop, we simply return the whole string to finish:

function roman (number) => {
    var str = '';
    for (var i of Object.keys(NUMERALS)) {
        var q = Math.floor(number / NUMERALS[i]);
        number -= q * NUMERALS[i];
        str += i.repeat(q);
    }

    return str;
}

Next steps:

Make our function more robust by adding type checks so it only allows a number input and adding a condition so it only accepts a positive number.
Writing a test for this function.

Thanks for reading :)

Undeclared, undefined and null in Javascript

James L — Sat, 06 Aug 2022 16:47:00 +0000

What is an undeclared variable?

An undeclared variable is created when you assign a value to an identifier which has not been previously created using var, let or const.
Are defined globally outside of the current scope.
Can only occur outside of strict mode. If enabled, strict mode will throw a ReferenceError instead.

// undeclared variable
// assigned global scope
x = 1;

console.log(x) // 1

'use strict'

// Throws ReferenceError: x is not defined
x = 1;

What is an undefined variable?

An undefined variable in Javascript is a variable which has been declared but has no value assigned to it.
It has the type undefined.

var x;

console.log(x) // undefined

What is the difference between null and undefined?

undefined is the value of a variable which has not been assigned a value.
null has to be assigned to a variable.
null has the type Object

var x; // x is undefined
var y = null; // y is null

console.log(x == y); // true
console.log(x === y); // false

Using the abstract equality operator ==, null and undefined will be equal.
Using the strict equality operator, ===, null and undefined are not equal as x is of type undefined and y is of type Object.

Writing a 2x2 inverse matrix function in JavaScript

James L — Mon, 01 Aug 2022 18:05:00 +0000

The steps to calculate the inverse of a 2x2 matrix such as:

are:

Swap the upper left and bottom right elements of the matrix
Negate the other two remaining elements
Calculate the determinate using the formula: (ad - bc)
Multiply each element in the matrix by 1 /determinate

So the inverse can be calculated as:

To implement as an algorithm, the matrix will be represented as an array of 2 arrays. For example: [[a,b], [c,d]]

The first step is to swap [0][0] and [1][1]:

let temp = [0][0];
matrix[0][0] = matrix[1][1];
matrix[1][1] = temp;

Then for step 2 we need to negate the last remaining elements which are [0][1] and [1][0]. We can negate them by simply multiplying them by -1.

matrix[0][1] *= -1;
matrix[1][0] *= -1;

a *= -1 is another shorter way of writing a = a * -1

Onto calculating the determinate using the formula ad - bc
This step is a simple calculation:

let determinate = (matrix[0][0] * matrix[1][1]) - (matrix[0][1] * matrix[1][0]);

The last step can be done easily multiplying each element by 1/determinate

matrix[0][0] *= (1/determinate);
matrix[0][1] *= (1/determinate);
matrix[1][0] *= (1/determinate);
matrix[1][1] *= (1/determinate);

We can refactor this step into a nicer few statements using the built-in map(), flat() and splice() functions:

const flatMapped = matrix.flat().map(el => el * 1/determinate);
matrix = [flatMapped.splice(0, 2), flatMapped.splice(0, 2)];

The first statement flattens the array from eg. [[a,b], [c,d]] to [a,b,c,d] and then multiplies each element by our determinate.
The second statement is a bit tricky to understand. The splice() function deletes elements from the array, taking as its first parameter a starting index and an optional delete count as its second parameter, and returns them as an array.
- In order to get it back into the [[a,b][c,d]] format we call splice() on the first 2 elements (starting at index 0) to remove them and add them to the matrix.
- However because the first call to splice() has removed elements a and b, only c and d are left (splice() is mutable), we call it again with the same arguments to get the last 2 elements and push them onto the matrix to be returned.

Now we can put all the steps together to create our function calculateInverse

function calculateInverse(matrix) {

    // Step 1 - Swap a and d
    let temp = [0][0];
    matrix[0][0] = matrix[1][1];
    matrix[1][1] = temp;

    // Step 2 - Negate b and c 
    matrix[0][1] *= -1;
    matrix[1][0] *= -1;

    // Step 3 - Calulate determinate
    let determinate = (matrix[0][0] * matrix[1][1]) - (matrix[0][1] * matrix[1][0]);

    // Step 4 - Multiply indices by 1/determinate
    const flatMapped = matrix.flat().map(el => el * 1/determinate);
    matrix = [flatMapped.splice(0, 2), flatMapped.splice(0, 2)];

    return matrix
}

Please note: This function will only work for a 2x2 matrix. There are additional requirements to calculate an inverse of a larger matrix.

Possible next steps to enhance our function:

Adding some checks to ensure the argument passed is an array which contains 2 arrays of 2 elements
Checking that the elements in the arrays are numbers
If the determinate is zero, the index has no inverse, a check could be added for this scenario.
Changing the function to allow the matrix indices to be passed as separate arguments (Hint: ...args)
Change Step 4 so the original array is not modified (Hint: slice)

Thanks for reading :)

Links:

DEV Community: James L

🎄JS Advent #7 - Destructuring 🎄

For the month of December I have challenged myself to write 24 articles about some JS concepts up until Xmas.

The seventh installment in this series is about Destructuring.

🎄JS Advent #6 - Host vs Native objects🎄

For the month of December I have challenged myself to write 24 articles about some JS concepts up until Xmas.

The sixth installment in this series is about Host and Native objects.

What is a native object?

What is a host object?

🎄JS Advent #5 - Strict vs loose equality🎄

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The fifth installment in this series about strict and loose equality.

Double equals (loose equality)

Triple equals (strict equality)

🎄JS Advent #4 - call() and apply() 🎄

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The fourth installment in this series is about call() and apply().

The call() function

The apply() function

🎄 JS Advent #3 - Object.hasOwnProperty()🎄

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The third installment in this series is about Object.hasOwnProperty().

hasOwnProperty vs in vs dot/bracket notation

🎄JS Advent #2 - Mutable and Immutable methods 🎄

For the month of December I have challenged myself to write 24 articles about JS up until Xmas.

The second installment in this series is around Mutable and Immutable array methods.

What is a mutable method?

What is an immutable method?

Examples of array mutation methods

Examples of array immutable methods

Pure functions

🎄JS Advent #1 - Truthy and Falsy values🎄

For the month of December I have challenged myself to write 24 articles about some JS concepts up until Xmas.

The first installment in this series is around Truthy and Falsy values in Javascript.

What is a Truthy or Falsy value?

The double NOT operator (!!)

AND and OR operators

Writing a roman numeral function in Javascript

Problem statement

Solution

Writing our algorithm

Next steps:

Links:

Undeclared, undefined and null in Javascript

What is an undeclared variable?

What is an undefined variable?

What is the difference between null and undefined?

Writing a 2x2 inverse matrix function in JavaScript

The fourth installment in this series is about `call()` and `apply()`.