Forem: Joey

Dusting Off the Keyboard: My Pivot from Software Development to Project Management

Joey — Tue, 10 Mar 2026 10:20:52 +0000

It’s been a couple of years since I last posted on here. If you visit my profile you'll find my early days as a software developer, back when i was posting JavaScript and CSS crash courses and tutorials.

I’ve been away from the keyboard in terms of blogging and from software development. Recently, I’ve decided to make a major career transition: I’m moving from Software Development into Project Management. That does not mean i won't be posting software development/tutorials posts again

Why I am pivoting?

For a long time, I focused on honing my skills and my ultimate goal was to become a great developer. However, I eventually realized
that technical expertise is only a part of the bigger picture.I wanted to understand why we are building something and how we can get it into the hands of users efficiently. the planning, the scope management, and the alignment. I’m moving into Project Management to lean into these strengths. I found myself interested in how to act as the primary operator for projects, making sure that expectations are managed, obstacles are cleared, communication is clear.

In this new series, I’ll be documenting:

I’m treating this career shift like an open-source project. I’m not just going to read books, articles or just go through resources, I’m going to share the experiments, projects be it case studies or web/software development projects, the tools, and the mess i might make during this period.

Why sharing is important

I’m a big believer that you don’t truly understand a concept until you write about it. By documenting the steps i take I’m holding myself accountable and pushing myself to keep going. Pivoting is big step and demands huge amounts of effort and by building in public i will provide myself the momentum needed to keep going and build a documented roadmap, maybe someone will benefit from this experiment.

Finally

one of my main goals for this series is to keep my technical edge sharp, a PM is only as effective as their ability to understand the code they are managing. As I've previously mentioned I’ll continue to post tutorials right alongside my PM experiments.

JavaScript: 6 types of Loops you should know about.

Joey — Wed, 23 Aug 2023 16:33:37 +0000

For any programmer, being able to use loops effectively is a fundamental skill. In order to improve the effectiveness, readability, and capacity of your code to handle repetitive tasks without the need for writing redundant code, loops are an essential tool.
When specific conditions are met, loops can even be used to perform a series of tasks while iterating over values of an array.

The most common type of loops that you've probably already seen are for, while and do while that you've probably already encountered are covered in this article along with 3 other types of loops:

For loop
while loop
do while loop
for-in loop
for-of loop
break statement
continue statement
labeled loop

For Loop

The for loop allows you to run a block of code over and over for a specified amount of iterations. It is especially useful When you know exactly how many times you want the loop to run.

The for loop structure

The structure of a for loop is made up of 3 parts:

initialization : The initialization is a variable that gets initialized to keep track of the number of iteration (cycle) we're at. This is commonly used as a counter.
condition: this is a condition that is checked at the beginning of each iteration (cycle). As long as the condition is true, the loop continues to execute.
increment and decrement: After each iteration, the increment or decrement change the loop control variable(which is a variable inside the loop that instructs the loop whether to stop or continue executing), to make the condition false and end the loop.

for (initialization; condition; increment/decrement) {
    // Code 
}

Let's print the number 1 through 5 in our console using the for loop

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
/*
1
2
3
4
5
*/

In this example :

The i variable is initialized to 1.
The loop will keep running as long as i is less than or equal to 5.
After each iteration, i is incremented by 1. The loop will print the numbers 1 through 5.

Let's take another example, this time using an array.

const foods = ['ice cream', 'cheese', 'milk', 'bread', 'chocolate'];

for(let i=0; i<foods.length; i++){
   console.log(foods[i]);
}
/*
ice cream
cheese
milk
bread
chocolate
*/

In the example above:

The i variable is initialized to 0.
The loop will keep running as long as i is less than the length of food which is 5.
After each iteration, i is incremented by 1. The loop will print each value in the array foods.

foods[i] might seem a bit unclear, remember the i represent a counter, so at 0 you're printing foods[0] which is ice cream then i++ will increment i by 1 which makes i=1, so now what is being printed is foods[1]

While loop

The while loop executes a block of code repeatedly if the condition that was passed to it is true. Unlike the for loop, only a single condition is provided to it which is evaluated before each iteration (cycle).

Syntax of a while loop

let counter = 0;
while(condition){
  //code
}

Let's reprint the numbers 1 through 5 again this time using while loop.


let counter = 1;

while(counter<=5){
    console.log(counter);
    counter++;
}
/*
1
2
3
4
5
*/

In the example above we initialized a counter outside the while loop and set it to 1.
Then we passed the condition counter<=5 to the while loop to be evaluated. So as long as the counter is less than or equal to 5 the while loop will keep executing.
We console.log(counter) to the console which will print the numbers from 1 to 5.
the counter++ is where we increment the counter variable and this is a very important step.

If you forget to increment the counter variable you will have something called an infinite loop which means your program will run indefinitely causing your program to become unresponsive and crash.

Let's use our foods array example with a while loop now.

const foods = ['ice cream', 'cheese', 'milk', 'bread', 'chocolate'];

let counter = 0; 

while(counter<foods.length) {
    console.log(foods[counter]);
    counter++;
}
/*
ice cream
cheese
milk
bread
chocolate
*/

In this example we declared a variable counter outside the while loop (you can name the variable whatever you'd like).
We passed the condition counter<foods.length to the loop which basically means that, as long as the counter is less than 5 print the values inside the foods array.
Then we incremented the counter counter++.

The Do...while loop

The do...while loop is the same as the while loop with only one difference is that the condition is checked after the block of code is run whether the condition was met or not.

Let's look at an example where the condition evaluates to false to understand how this works.

let i = 12; 
do {
    console.log(i); //12
    i++;
}
while(i<=5);

In this example, 12 gets printed to the console then the do...while loop stops executing because i<=5 evaluates to false.

let i = 1; 
do {
    console.log(i);
    i++;
}
while(i<=5);

Here the loop will print the numbers from 1 to 5.

For...in loop

The for...in loop is usually used to iterate through the properties of an object Which we'll be seeing in an upcoming article.
For the sake of this tutorial we'll demonstrate the use of the for...in loop using an array but it is not recommended doing so because it can lead to some unexpected behavior.

const fruits = ["apple", "banana", "orange"];

for (const index in fruits) {
    console.log(index, fruits[index]);
}
/*
0 apple
1 banana
2 orange
*/

In the example above the fruits is the array that we're iterating over and index is the current element of the fruits array in the (const index in fruits). The loop continues to iterate until all the elements of the array fruits are printed to the console.

The for...of

The for...of loop makes it possible to iterate through objects, arrays, strings and more. It is a simpler and more readable way to loop over iterables than a regular for loop.

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
    console.log(fruit);
}
/*
apple
banana
orange
*/

Break statement

The break statement is a control statement that is used to abruptly end the execution of a loop.

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        break;
    }
    console.log(i);
}

/*
1
2
*/

In the example above, we're printing the numbers from 1 to 5 using a for loop.
The execution of this loop abruptly stops when it reaches the number three. That is because we've added a condition inside the loop if (i === 3) that checks if the counter i is 3 and if the condition evaluates to true the break statement is used to exit the loop which stops its execution.

Let's use it with the fruits array.

const fruits = ["apple", "banana", "orange"];

for(let i=0; i<fruits.length; i++) {
    if(fruits[i] === "banana") {
        break;
    }
    console.log(fruits[i]);
}

//apple

Here as you probably can tell, we're iterating through the fruits array and printing its values to the console. A condition is added inside the loop asking to check each items at fruits[i] to see if it is equal to banana.
if the condition evaluates to false, it will print the value at the current position of fruits[i] if it evaluates to true it will break out of the loop and stop its execution.

Continue Statement

The continue statement is a control statement that is used to move to the next iteration of a loop while skipping the current iteration.

for(let i=0; i<=5; i++) {
    if(i ==3) {
        continue;
    }
    console.log(i);
}
/*
1
2
4
5
*/

In the example above, we're using a for loop and we've added a condition to see if the counter i is equal to 3. if the condition evaluates to true, we skip over 3 and don't print it and continue with the loop.

Let's try this with the fruits array.

const fruits = ["apple", "banana", "orange"];

for(let i=0; i<fruits.length; i++) {
    if(fruits[i] === "banana") {
        continue;
    }
    console.log(fruits[i]);
}
/*
apple
orange
*/

As we can see when the condition fruits[i]==="banana" is satisfied, the loop skips over printing the value banana and keeps on executing until the condition in the for loop evaluates to false that is i<fruits.length.

Labeled loop

The labeled loop has a label assigned to it. It it is mostly used with break and continue statements in order to identify the loop.

mainLoop: for (let i = 1; i <= 3; i++) {
    console.log("Main loop iteration:", i);

    nestedLoop: for (let j = 1; j <= 3; j++) {
        console.log("Nested loop iteration:", j);

        if (i === 2 && j === 2) {
            console.log("Breaking out of main loop!");
            break mainLoop;
        }
    }
}
/*
Main loop iteration: 1
Nested loop iteration: 1
Nested loop iteration: 2
Nested loop iteration: 3
Main loop iteration: 2
Nested loop iteration: 1
Nested loop iteration: 2
Breaking out of main loop!
*/

JavaScript: Your guide to understanding functions.

Joey — Tue, 22 Aug 2023 17:17:37 +0000

Functions are reusable blocks of code that perform specific tasks. They allow programmers to lessen code repetition and keep their code organized.

Think of Functions as Machines used in a factory, where each machine performs a specific task and together they create a product.

In this article we're going to cover:

Function Declaration
- Parameters and Arguments
- Default parameter
- Rest Parameter and Spread Operator
- Return statement
Function expression
Scope and Closure
Arrow Functions
Hoisting
Immediately Invoked function expression or IIFE

Function Declaration

We declare a function by using the reserved keyword function along with a name of your choice and parentheses.

function sayHello() {
}

Consider this syntax the blueprint for functions.

Inside the function, we write a code that will perform a task.

function sayHello(){
  console.log("Hello, I am a Function!");
}

In this example, we created a function named sayHello that prints out "Hello, I am a Function!" to the console after invoking it.

The function above will not output anything to the console at the moment because it has not been invoked.

How do we invoke a function?
We simply call the function by its name followed by parentheses.

function sayHello(){
  console.log("Hello, I am a Function!");
}

sayHello(); // Hello, I am a Function!

Parameters and Arguments

Parameters are placeholders for values that a function can accept when creating it. Arguments are the values passed to the function when invoking it.

 function sayHello(name) {
  console.log(`Hello, I am ${name}`);
}

sayHello("John"); //Hello, I am John

In the example above, the parameter name is a placeholder for the value passed as an argument. You can pass your name for example as an argument to the function and it will print out your name instead of "John".

In Other words, parameters are like blank spaces that expect to be filled with values when you're about to use the function. Arguments are the actual values you want to pass that will replace these blank spaces.

Default parameter

A default parameter is a parameter that was assigned a value when declaring a function. This is useful when a user does not pass an argument to the function. The assigned value of the parameter will act as an argument. Think of it as a backup argument.

function sayHello(name="User"){
  console.log(`Hello, ${name}`);
}

sayHello("John"); // Hello, John
sayHello(); //Hello, User

Rest Parameter and Spread Operator

The rest parameter is important, it helps you pass an unlimited number of parameters to a function instead of using multiple parameters.

Here's an example of a function with multiple parameters:

function names(a,b,c,d,e) {
    console.log(`My students names:, ${a}, ${b}, ${c}, ${d}, ${e}`);
}

names("John", "Jane", "Todd", "Michael", "Lenny");
//My students names:, John, Jane, Todd, Michael, Lenny

This function takes 5 arguments that are the names of students and displays them.
But what if we have more than 5 students?
What if we have 10 or 15 students?
We could give our function 10 or 15 parameters but there's a better way to do it and that is by using the rest operator.

function names(...name) {
    console.log(`My students names: ${name}`);
}

names("John", "Jane", "Todd", "Michael", "Lenny", "Draco", "Harry", "Ginny");
//My students names: John,Jane,Todd,Michael,Lenny,Draco,Harry,Ginny

Return Statement

return is a reserved keyword that will tell the function to stop executing. When return is used inside a function, the function will have a value, otherwise its value will be undefined.

function names(a,b,c,d,e) {
    console.log(`My students names:, ${a}, ${b}, ${c}, ${d}, ${e}`);
}

names("John", "Jane", "Todd", "Michael", "Lenny");

console.log(names("John", "Jane", "Todd", "Michael", "Lenny")); //undefined.

In this example we did not use the return keyword, meaning this function returns a value of undefined. Note that if you want your function to give back a meaningful result please specify a return statement

function sayHello() {
  return "Hello, I am a function";
}

console.log(sayHello()); //Hello, I am a function

Keep in mind the return statement will not print out anything to the console unless console.log() is used.

The return statement can be assigned to variable and used in another part of your code to complete a task. Remember the machine example.

Function expression

A function expression is when you define a function by assigning it to a variable which allow us to use the returned value in other parts of our code.

const calculateRectangleArea = function(width, height) {
    return width * height;
};

const width = 5;
const height = 8;
const area = calculateRectangleArea(width, height);

console.log(`The area of the rectangle is: ${area}`); //The area of the rectangle is: 40

Scope and Closure

When a variable is declared or accessed, the term "scope" is used. It specifies how variables are visible and usable throughout your code. JavaScript has two scope types:

Global Scope: global scope variables are declared outside of any function. they are also accessible anywhere inside the code, including functions.

const globalVar = "I'm in the global scope";

function printGlobalVar() {
    console.log(globalVar); 
}

printGlobalVar(); //I'm in the global scope

Local Scope: local scope variables are variables declared inside a block of code such as inside a function, or loops which we'll be seeing later in this series.

function greeting() {
    const message = "Hello, from the local scope!";
    console.log(message);
}

greeting(); // Hello, from the local scope!

Closures involve a combination of functions that work together. Imagine it as a tiny bubble that wraps around other functions. inside this bubble, All of the bubble's variables and parameters are stored inside of it and can still be used after the outer functions (the bubble) have finished.

function outer() {
    const outerVar = "I'm from the outer function";

    function inner() {
        console.log(outerVar); // inner function has access to outerVar
    }

    return inner;
}

const closureFunction = outer(); // outer function has finished executing, but inner still remembers outerVar
closureFunction(); // Output: "I'm from the outer function"

Arrow functions

Arrow functions make it easy and efficient to define functions. They were first introduced in ES6 and provide a more concise syntax for creating functions than traditional function expressions. In other words it's a shorthand to define a function. Just like a regular function it can also receive parameters. In the body of the arrow function you can omit the curly braces {} and the return statement .

const sum = (a, b) => a+b

console.log(sum(1, 2)); //3

this
if the function has one parameter the parentheses can be omitted

 const printName = (name) => console.log(`My name is: ${name}`);

printName("John");// My name is: John

Hoisting

The concept of hoisting is when function invocations are moved to the top of the source code. This means you can use functions before they are declared in your code.

sayHello(); // Output: "Hello!"
function sayHello() {
    console.log("Hello!");
}

This concept is also applies to variables.

console.log(name); //undefined
let name= "john";
console.log(name);  //john

the first console.log() statement will print undefined, and then the variable is assigned the value of john.

Immediately invoked function expression

Immediately invoked function expression or iife for short is a function that is defined in parentheses that wrap around it and followed by another pair of parentheses that immediately invoke it.

(function() {
    const secretMessage = "This is an iife!";
    console.log(secretMessage);
})(); //This is an iife!

This type of function is used when you want to isolate variables from the outer scope or write modular code without affecting the global scope.

JavaScipt: Everything you need to know about arrays.

Joey — Mon, 21 Aug 2023 19:26:45 +0000

Arrays are superheroes when it comes to organizing data. This article explains how they function, why they're essential for anyone looking to properly manage data and how to effectively manipulate it.

Overview :

What is an array?
Initializing an array
- Array literal
- New keyword
length property
Accessing and changing array elements
Multi-dimensional array
Array Methods
- Add methods
- Remove methods
- Transform methods
- Search methods
- Conversion methods
- Copy methods

What is an array?

Think of an array as a multi-drawer cabinet. Each drawer in that cabinet has a different item in it. You can reach an item by simply opening the drawer that has the item you want.

Similarly an array is a variable that can store multiple values.

Initializing an array

We've previously seen how to Initialize a variable.

let name = "John";

Array literal

Initializing an array is similar to initializing a variable with some differences. While a variable can store a single data type as we've seen in the example above, an array can hold multiple values of different data types. You declare an array using square brackets.

const food = [];

You can pass multiple values of different data types to the square brackets to initialize the array.

const values = ["ice cream", 57, "biscuit", true, 3.14];

New Keyword

You can also declare and assign values to an array using the new keyword.

const values = new Array();
const elements = new Array("one", 2, true, 3.14);

These two methods do exactly the same thing, but use the array literal method for efficiency, readability, and speed.

Length Property

In the previous article How to make the most out of strings We've seen what the length property does. Let's go over it one more time.
The length property returns the size of the array or the number of items in the array.

const values = ["ice cream", 57, "biscuit", true, 3.14];
console.log(values.length); //5

Accessing and changing array elements

The position of an item in an array is known as an index. We start counting the items of an array from zero. This is known as zero-based indexing.

const values = ["ice cream", 57, "biscuit", true, 3.14];
let index0 = values[0];
console.log(index0); //ice cream

Let's change an item in the values array

const values = ["ice cream", 57, "biscuit", true, 3.14];
values[1] = 26;
console.log(values);
//[ 'ice cream', 26, 'biscuit', true, 3.14 ]

As we can see the number 57 was modified to 26.

The length property always starts counting from 1. It's always 1 number higher than than the index
You can access array elements using the length property. For example, let's access the last item and second to last item of the values array.

const values = ["ice cream", 57, "biscuit", true, 3.14];

console.log(values[values.length-1]); //3.14
console.log(values[values.length-2]); //true

So what's happening in the example? Let's break it down.
We've previously accessed the first element of the array using this notation values[0] which gave us ice cream.
values[values.length-1] here is values[5 - 1] which is value[4] which will give us 3.14.
Why are we using -1?
As we've previously stated arrays use zero-based indexing. if we try to get the value at value[5] we will get undefined which means that there's no value assigned to the index 5 since we start counting from zero. Counting from 0 to 4 gives us five values which is the length of the array.

const values = ["ice cream", 57, "biscuit", true, 3.14];

console.log(values[values.length]); //undeifned

Multi-dimensional array

Now that we have a strong understanding of what an array is, let's explain what a multi-dimensional array is.

A multi-dimensional array is an array that contains other arrays.

const multiDimensional = [
  [2, "cat", false],
  [3.14, true, "mango"],
  ["peach", 32, true]
];

Multi-dimensional arrays can be accessed in the same way as an array by using bracket notation. Take our multiDimensional array which has 1 outer layer which is the entire array.

const multiDimensional = [
  [2, "cat", false],
  [3.14, true, "mango"],
  ["peach", 32, true]
];

console.log(multiDimensional[0]); //[2, "cat", false]
console.log(multiDimensional[1]); //[3.14, true, "mango"]
console.log(multiDimensional[2]); //["peach", 32, true]

The inner layer consists of 3 inner layers which are the 3 arrays. The items (values) within each inner array belong to the inner layer.

Let's say we want to access the value mango in our example:

const multiDimensional = [
  [2, "cat", false],
  [3.14, true, "mango"],
  ["peach", 32, true]
];

console.log(multiDimensional[1][2]);//mango

Our value mango is the second array in multiDimensional, so it's in position 1 (remember zero-based indexing). The mango value is the last item in that array meaning at position 2.

Array methods

Array operations like insertion, deletion, searching, and transformation can be performed on an array's elements using array methods. These methods make writing custom code less difficult and create more readable, compact and useful code.

Method	Description
`push()`	Adds one or more elements to the end of an array.
`unshift()`	Adds one or more elements to the beginning of an array.
`splice()`	Adds or removes elements from an array at a specified index.
`pop()`	Removes the last element from the end of an array and returns it.
`shift()`	Removes the first element from the beginning of an array and returns it.
`map()`	Creates a new array by applying a function to each element of the array.
`filter()`	Creates a new array with elements that pass a certain condition.
`reverse()`	Reverses the order of elements in an array.
`sort()`	Sorts the elements of an array in place or based on a provided function.
`copyWithin()`	Copies elements within an array to a specified destination.
`indexOf()`	Returns the first index at which a given element can be found in the array.
`lastIndexOf()`	Returns the last index at which a given element can be found in the array.
`includes()`	Checks if an array includes a certain element, returning a boolean.
`find()`	Returns the first element in the array that satisfies a given condition.
`findIndex()`	Returns the index of the first element that satisfies a given condition.
`join()`	Joins all elements of an array into a string using a specified separator.
`toString()`	Converts an array to a string representation.
`concat()`	Combines two or more arrays, returning a new concatenated array.
Spread Operator (`...`)	Expands an array into individual elements.
`slice()`	Returns a shallow copy of a portion of an array into a new array.
`reduce()`	Applies a function against an accumulator and each element in the array, reducing it to a single value.

Add methods

We can add an element to an array using multiple methods.

Using indexing

const values = [2, "cat", false]

values[3] ="miami";
console.log(values); //[2, "cat", false, "miami"]

Using length property

const values = [2, "cat", false]

values[values.length] ="miami";
console.log(values); //[2, "cat", false, "miami"]

Using these methods is not recommended because it can create undefined "holes" in an array.

const values = [];
values[2] = 'Hello';

console.log(values);        // Output: [ , , 'Hello' ]
console.log(values.length); // Output: 3
console.log(values[0]);     // Output: undefined
console.log(values[1]);     // Output: undefined
console.log(values[2]);     // Output: 'Hello'

Category	Array Methods
Element Insertion	`push()`, `unshift()`, `splice()`

push()

The push() method alters the array by adding a single or more values to the end of it and returns the new length of the altered array.

const numbers = [1, 2, 3];
const newLength = numbers.push(4, 5);

console.log(numbers);    // Output: [1, 2, 3, 4, 5]
console.log(newLength);  // Output: 5

unshift()

The unshift() method is used to add a single or multiple values to the beginning of the array and returns its new length.

const numbers = [3, 4, 5];
const newLength = numbers.unshift(1, 2);

console.log(numbers);    // Output: [1, 2, 3, 4, 5]
console.log(newLength);  // Output: 5

splice()

The splice() method is used to add remove or replace values at a specified index.
Here's an example of using splice to add and remove elements:

const fruits = ['apple', 'banana', 'orange', 'grape'];
const removedFruits = fruits.splice(1, 2, 'melon', 'cherry');

console.log(fruits);          
// Output: ['apple', 'melon', 'cherry', 'grape']
console.log(removedFruits);    
// Output: ['banana', 'orange'] (removed elements)

Remove methods

Category	Array Methods
Element Deletion	`pop()`, `shift()`, `splice()`

delete()

const values = ["apple", true, 2, "Mango"];
delete values[1];
console.log(values); //['apple', <1 empty item>, 2, 'Mango']
console.log(values.length);//4

It is not recommended to remove an item from an array using the delete() method because the original array length remains unchanged because it only removes the value from the array without freeing up that index. Meaning the length of the array stays the same.

pop()

The pop() method alters the array by removing the last element from the array and returns the removed value.

const numbers = [1, 2, 3, 4, 5];
const removedElement = numbers.pop();

console.log(numbers);         // Output: [1, 2, 3, 4]
console.log(removedElement);  // Output: 5 (last element)

shift()

The shift() method alters the array by removing the first element of it and returns the removed value.

const fruits = ['apple', 'banana', 'orange', 'grape'];
const removedFruit = fruits.shift();

console.log(fruits);         // Output: ['banana', 'orange', 'grape']
console.log(removedFruit);   // Output: 'apple' (first element)

Transform methods

Category	Array Methods
Element Transformation	`map()`, `filter()`, `reverse()`, `reduce()`,`sort()`, `copyWithin()`

The map(), filter(), and reduce() methods are higher order functions which we'll discuss in an upcoming article. All you have to know for now is that they're array methods do not modify the original array but return a new modified array.

reverse()

The reverse() method alters the original array and reverses the order of its values.

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();

console.log(numbers);  // Output: [5, 4, 3, 2, 1] (original array is reversed)

sort()

The sort() method alters the original array and sorts its values in ascending order.

const fruits = ['banana', 'apple', 'grape', 'orange'];
fruits.sort();

console.log(fruits);  // Output: ['apple', 'banana', 'grape', 'orange'] (sorted alphabetically)

//sorting numbers
const numbers = [4, 2, 8, 6, 1];
numbers.sort((a, b) => a - b);

console.log(numbers);  // Output: [1, 2, 4, 6, 8] (sorted numerically)

When sorting numbers in ascending order, the expression a - b is frequently used as a comparison function. This method makes use of the sort() method's behavior, which assumes the comparison function that returns a negative, zero, or positive value to determine the order of elements.
Why a - b ?

If a - b returns a negative value, it indicates that a should come before b in the sorted order.
If a - b returns zero, it indicates that a and b are considered equal in terms of sorting order.
If a - b returns a positive value, it indicates that a should come after b in the sorted order.

copyWithin()

The copyWithin() method does not modify the array and copies a piece of it to another place in the array.
it takes 3 parameters:

target: which is where the elements you're copying will be placed.
start: which is from where this method will start copying the elements in the array.
end: Which is the index prior to which copies of elements should stop. It takes the array's length as a default if omitted.

const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3, 5);

console.log(numbers);  // Output: [4, 5, 3, 4, 5]

Search methods

Category	Array Methods
Element Search	`indexOf()`, `lastIndexOf()`, `includes()`, `find()`, `findIndex()`

indexOf()

The indexOf() method returns the index of the element you're trying to find and -1 if it was not found.

const fruits = ['apple', 'banana', 'orange', 'apple'];
const index = fruits.indexOf('apple');

console.log(index);  // Output: 0 (index of the first 'apple')

lastIndexOf()

The lastIndexOf() method returns the index of last occurrence of the element you're trying to find and -1 if it was not found.

const fruits = ['apple', 'banana', 'orange', 'apple'];
const lastIndex = fruits.lastIndexOf('apple');

console.log(lastIndex);  // Output: 3 (index of the last 'apple')

includes()

The includes() method indicates if an element is present in an array. It returns true if the element is in the array and false if it is not.

const fruits = ['apple', 'banana', 'orange'];
const hasBanana = fruits.includes('banana');

console.log(hasBanana);  // Output: true (array includes 'banana')

find and findIndex methods are both higher order functions which we will discuss in a later article.

Conversion methods

Category	Array Methods
Element Conversion	`join()`, `toString()`

join()

The join() method creates a string using the argument passed as a separator.

const fruits = ['apple', 'banana', 'orange'];
const joinedString = fruits.join(', ');

console.log(joinedString);  // Output: "apple, banana, orange"

toString()

The toString() method converts the array into a string separated by comas.

const numbers = [1, 2, 3, 4, 5];
const numbersString = numbers.toString();

console.log(numbersString);  // Output: "1,2,3,4,5"

Copy methods

Category	Array Methods
Copying	`concat()`, Spread Operator (`...`), `slice()`

concat()

The concat() method joins two or more arrays together and returns a new array.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = array1.concat(array2);

console.log(combinedArray);  // Output: [1, 2, 3, 4, 5, 6]

The spread operator (...)

This operator is used to expand element of an array and can be used to combine arrays.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

console.log(combinedArray);  // Output: [1, 2, 3, 4, 5, 6]

slice()

The slice() method is used to create a copy of a portion of an array and returns a new array.

const numbers = [1, 2, 3, 4, 5];
const copiedNumbers = numbers.slice(1, 4);

console.log(copiedNumbers);  // Output: [2, 3, 4]

What are number methods and how do they impact performance?

Joey — Sat, 19 Aug 2023 14:42:43 +0000

Number methods are built-in methods that intend to make working with numbers easier and more effective by handling operations, conversions and checks.

Overview:

Number methods
Number properties
How number methods affect performance.

Number Methods

Number methods, allow you to manipulate numbers in various ways without the need to write custom code.

Method	Description
`toFixed(digits)`	Formats a number as a string with fixed decimals
`toString()`	Converts a number to a string
`parseInt(str)`	Parses a string to an integer
`parseFloat(str)`	Parses a string to a decimal number
`isNaN(value)`	Checks if a value is NaN (Not-a-Number)
`isFinite(value)`	Checks if a value is a finite number
`toExponential(digits)`	Formats a number in exponential notation
`toPrecision(precision)`	Formats a number with a specified precision

toFixed()

let num = 5.324578;
let formattedNum = num.toFixed(2); // "5.32"

toString()

let num = 15;
let str = num.toString(); // "15"

parseInt(str)

let str = "543";
let newInt = parseInt(str); // 543

parseFloat()

let floatStr = "1.23";
let parsedFloat = parseFloat(floatStr); // 1.23

isNaN() The isNaN() method checks if the value passed to it can be converted to a number or not. It returns a boolean value true or false. if the value can be converted to a number it returns false, otherwise it returns true.

isNaN("hello");  // true 
isNaN(26);       // false

isFinite()

let finiteValue = 42;
let infiniteValue = Infinity;
const finiteCheck = isFinite(finiteValue);     // true
const infiniteCheck = isFinite(infiniteValue); // false

In this example we've used the Infinity keyword which is a special numeric value that demonstrates positive infinity. That is why the infinityCheck returned false

toExponential()

Exponential notation are a form of notation where very large or very small numbers can be expressed in a smaller and practical form. For example

2000 = 2 x 10^3
0.0012 = 1.2 x 10^-3

The toExponential() method formats number into exponential notation with the specified number of decimal as argument.

let num = 54321.9876;
let expNum = num.toExponential(2); // 5.43e+4

toPrecision() This method formats numbers with a predetermined total number of significant digits.

let num = 226.456;
let preciseNum = num.toPrecision(5); //226.46

In this example we've passed 5 as argument which tells the method to return a number of 5 digits.

Number properties

Number properties give important information and constants related to numeric values. they provide explanations for the properties and limitations of numbers.

Property	Description
`Number.MAX_VALUE`	The largest representable number in JavaScript
`Number.MIN_VALUE`	The smallest positive representable number in JavaScript (close to zero)
`Number.POSITIVE_INFINITY`	Represents positive infinity (e.g., 1/0)
`Number.NEGATIVE_INFINITY`	Represents negative infinity (e.g., -1/0)
`Number.NaN`	Represents "Not-a-Number"
`Number.EPSILON`	The smallest difference between two representable numbers
`Number.MAX_SAFE_INTEGER`	The largest integer that can be safely represented without loss of precision
`Number.MIN_SAFE_INTEGER`	The smallest integer that can be safely represented without loss of precision

MAX_VALUE is 1.7976931348623157e+308
MIN_VALUE is 5e-324
POSITIVE_INFINITY is Infinity
NEGATIVE_INFINITY is -Infinity
NaN is NaN (not a number)
EPSILON is 2.220446049250313e-16
MAX_SAFE_INTEGER is 9007199254740991
MIN_SAFE_INTEGER is -9007199254740991

How number methods affect performance

Performance in JavaScript is significantly impacted by the use of number methods, particularly when performing calculations, data processing, and algorithmic operations. These techniques offer a number of advantages, such as quick operations that produce code that is cleaner and more concise, the maintenance of accuracy and precision with techniques like toFixed(). To benefit from these advantages, become familiar with number methods, but test your code first to ensure that it satisfies your performance needs.

Along this series we'll see more methods such as the Math Object methods that will allow us to perform many mathematical operations.

JavaScript: How to make the most out of Strings ?

Joey — Fri, 18 Aug 2023 14:23:37 +0000

Strings are a primitive data type that represent a series of characters. A string's syntax allows you to create a string that includes letters, spaces, symbols and numbers.

In this article we'll cover:

Strings Syntax
Escape characters
String Concatenation
Strings are immutable
String Methods
- String manipulation
- String extraction
- String search methods.

Strings Syntax

Strings are as we said, a series of characters that include letters, spaces, symbols and numbers wrapped within single, double quotes or backticks which is known as template literals.

let singleQuotes = 'This is a string with single quotes.';
let doubleQuotes = "This is a string with double quotes.";

A double quoted string can contain single quotes like so:

let sentence = "I'm named 'John'".
console.log(sentence) // I'm named 'John'

Template literals are a feature of ES6. They make it possible to include variables and expressions inside a string.

let backticks = `This is a string with backticks.`;
//or
let name = "John";
let age = 22;
let message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // Output: Hello, my name is John and I am 22 years old.

Escape Characters

To represent characters that are special or can be tricky to include in a string or code, in this case escape characters are used. When escape characters are used they tell the interpreter how it should treat the next character.

Escape Sequence	Meaning
`\n`	goes to a new line
`\t`	gives you a tab space
`\"`	escapes double quotes
`\'`	escapes single quotes
`\`	escapes a backslash

Let's look at some examples:

// \n
let newLine = "I am the first line.\nI am the second line.";
console.log(newLine);
/*
I am the first line.
I am the second line.
*/

// \t
let indentation = "One\tTwo\tThree";
console.log(indentation); // One   Two  Three

// \"
let quoteEsc = "Hi, I am \"John!\"";
console.log(quoteEsc); //  Hi, I am "John!"

// \'
let singleEsc = "I\'m Happy";
console.log(singleEsc); // I'm Happy

// \`
let message = `She said, \` I am at the beach.\``;
console.log(message); // Output: She said, ` I am at the beach`.

String Concatenation

String concatenation means combining multiple strings together to form a longer string. This can be done using the + operator or using concat() which we'll discuss later in this article.

let firstName = "Jane";
let lastName = "Doe";
console.log(firstName + " " + lastName); 
// Jane Doe

As we've previously mentioned, template literals allow us to include variables in our strings so we can concatenate using the same syntax.

let firstName = "Jane";
let lastName = "Doe";

console.log(`${firstName} ${lastName}`); // Jane Doe

Strings Are immutable

When a String is created, it cannot be changed. This means when you alter your string for example by using concatenation, you create a new string that holds the content that was modified leaving the original string unchanged.

To further understand this concept let's take a look at what bracket notation is. Bracket notation is used to access a string's characters (and arrays which we'll get to later in this series). Let's use the example "I am Tom" to see how this works. Let's say we want to know where the letter "m" in Tom is located within that string. The position of “m” is known as an index, and indices are counted starting at zero which is known as (zero-based indexing). Count the spaces too

The "m" in Tom is found at index 7. The syntax to access it is as follows:

let str = "I am Tom";
console.log(str[7]);// m

Let's take a look at this example:

let str= "I am Tob";
str[7]= "m";
console.log(str); // I am Tob

In this example, I've misspelled Tom. Using this bracket notation to fix the misspelling will not work. The output will still be I am Tob.

You can fix this issue by reassigning the variable string giving it the value of I am Tom.

let str= "I am Tob";
str = "I am Tom"
console.log(str); // I am Tom

String Methods

Now that we've covered the basics of strings, let's see how to modify, transform and extract data from strings.

String manipulation

Manipulating strings is the act of changing or modifying a string. This process is done through the string manipulation methods.

String Manipulation	Description
length	This method returns the character count or length of a string.
replace()	This method replaces the first occurrence of value you've specified with another in a string.
replaceAll()	This method replaces all the occurrences of the same value you've specified with another in a string.
toUpperCase()	This method returns a new string of uppercase characters. The original string is not modified.
toLowerCase()	This method returns a new string of lowecase characters. The original string is not modified.
concat()	This method is used to concatenate multiple strings. It returns a new string without modifying the original string.
trim()	This method removes white spaces from the start and end of the string
trimStart()	This method removes white spaces from the start of the string.
trimEnd()	This method removes white spaces from the end of the string.
padStart()	This method is used to add specific characters at the start of the string.
padEnd()	This method is used to add specified characters at the end of the string.

Length

 let str = "123456abcdef";
 console.log(str.length); // 12

replace()

let str = "Read my blog!";
let newStr = str.replace("blog", "articles");
console.log(newStr); //Read my articles!

It's important to remember that the replace() method doesn't change the original string. The first match is replaced, and a new string is returned.

let str = "Read my blog!";
console.log(str.replace("blog", "articles")); //Read my articles!
console.log(str); //Read my blog!

It is also case-sensitive and will not replace your input if one is in lowercase and the other in uppercase.

let str = "Hi, Hi, Hi!";
let newStr = str.replace("hi", "Bye");
console.log(newStr);// Hi, Hi, Hi!

replaceAll()

let str = "Hi, Hi, Hi!";
let newStr = str.replaceAll("Hi", "Bye");
console.log(newStr); // Bye, Bye, Bye!

Keep in mind that the replaceAll method works the same as the replace() method. The only difference is that it replaces all the occurrences of a value you've given it with another as we mentioned above.

toUpperCase()

let str = "hello reader!";
console.log(str.toUpperCase()); //HELLO READER!

-toLowerCase()

let str = "Hello Reader!"
console.log(str.toLowerCase()); //hello reader!

concat()

We've previously used the + operator to concatenate multiple strings. The concat() method can do the same thing.

let str1 = "Hello";
let str2 = "Reader!"
let str3 = str1.concat(" ", str2);
console.log(str3);// Hello Reader!

// concatenating 3 strings
let str1 = "Hello";
let str2 = "Reader"
let str3 = "!"
let str4 = str1.concat(" ", str2, str3);
console.log(str4); // Hello Reader!

trim()

let str = "   Hello Readers!   ";
console.log(str.trim()); //Hello Readers!

trimStart()

let str = "   Hello Readers!";
console.log(str.trimStart()); //Hello Readers!

trimEnd()

let str = "Hello Readers!   ";
console.log(str.trim()); //Hello Readers!

padStart()

The padStart() method takes two arguments. The first defines how long we want out string to be. The second is the character we want to use.

let str = "26";
console.log(str.padStart(5, "0")); // 00026

In our example we've said that, " i want my string to have a length of 5 and use 0 to pad the beginning".

padEnd()

This method works the same way as padStart() but instead of padding the beginning it is done at the end.

let str = "26";
console.log(str.padEnd(5, "0")); // 26000

String extraction

String Extraction	Description
slice()	This method extracts a portion of a string based on indices passed as arguments.
substring()	This method is similar to slice the only difference is that any negative number passed as an argument will be considered 0.
substr()	This method returns a segment of the string's beginning at the given index and continuing for the number of characters that you specify.
charAt()	This method gives back the character at the index you passed as argument.
charCodeAt()	This method gives back the unicode of the character at the index you passed as argument.
split()	This method converts a string into an array.

slice()

slice() creates a new string by taking a section of an existing string. This method requires two arguments: the start position, which is inclusive (takes into account the starting position), and the end position, which is Exclusive (does not take into account the ending position).
Keep in mind zero-based indexing.

let str = "Slice this string";
let strSlice = str.slice(11,17);
console.log(str);
console.log(strSlice);
/*
Slice this string
string
*/

If the second parameter is omitted, the method will remove the remainder of the string.

let str = "Slice this string";
let strSlice = str.slice(6);
console.log(str);
console.log(strSlice);
/*
Slice this string
this string
*/

-substring()
slice() and substring() are similar methods. the only difference is that any negative number passed as an argument will be treated as 0. Similar to slice(), substring() will slice off the rest of the string if a second argument is not provided.

let str = "Slice this string";
let strSubstring = str.substring(-3, 4);
console.log(str);
console.log(strSubstring); //Slic

substr()

This method is similar to substring() the only difference is that it can handle negative indices. It is able to use negative indices as a starting point from the end of the string.

let str = "Slice this string";
let strSubstr = str.substr(-3, 4);
console.log(str); //Slice this string
console.log(strSubstr); // ing

charAt()

let str = "hi";
let char = str.charAt(0);
console.log(char); //h

charCodeAt()

Simply put, Unicode is a system that assigns each character from every language a unique value or code. This is done to ensure that computers can recognize letters and symbols and numbers correctly. This allows the text to be uniform across all platforms. For more information visit About the Unicode Consortium

let str = "hi";
let char = str.charCodeAt(0); 
console.log(char); // 104

split()

This method takes a separator as argument. the separator could be a space, comma or anything else you'd like. The split() method splits the string each time it encounters the separator you've specified.

let str = "Hello, how are you today?";
console.log(str.split(" ")) 
//[ 'Hello,', 'how', 'are', 'you', 'today?' ]

let str = "Hello, how are you today?";

console.log(str.split(","));
[ 'Hello', ' how are you today?' ]

String search methods

The string search methods are case-sensitive.

Method	Description
`indexOf()`	This method gives back the index of the first occurrence of the string passed as argument
`lastIndexOf()`	This method gives back the index of the last occurrence of the string passed as argument
`search()`	This method is the same as the `indexOf` method but it cannot take a starting position as a second argument.
`match()`	This method uses a regular expression to search for the pattern passed as argument and return the first occurrence.
`matchAll()`	This method is the same as `match` but returns all the occurrences that match the pattern passed as argument.
`includes()`	This method returns a boolean value (true or false). if a string contains the value passed as argument it returns true.
`startsWith()`	This method returns a boolean value. If a string starts with the value passed as argument it returns true.
`endsWith()`	This method returns a boolean value. If a string ends with the value passed as argument it returns true.

indexOf()

let str = "Hello, Reader!"
console.log(str.indexOf("a")); //9

lastIndexOf()

let str = "Hello, Reader!"
console.log(str.lastIndexOf("e")); //11

Both indexOf and lastIndexOf return -1 if the argument passed was not found and can accept another argument as the starting position for searching.

search()

This method can be used with regular expressions which we'll be seeing later on in this series.

includes()

let str = "Hi, Reader!";
console.log(str.includes("Hi")); // true

startsWith()

let str = "See you later";
console.log(str.startsWith("See")); //true

endsWith()

let str = "See you later";
console.log(str.startsWith("See")); //false
console.log(str.endsWith("later")); //true

JavaScript: How conditionals influence your code?

Joey — Thu, 17 Aug 2023 14:38:18 +0000

Everybody makes decisions all the time. These decisions impact our lives and bring change with each different choice we make.
Conditionals are structures that offer you different results depending on the input you provide. Conditionals are the decision-makers of your code.

In this article we're going to cover:

If Statements
- If-else Statements
- Nested If else
Ternary Operator
Switch Statement
Logical Operators with conditionals
Nullish Coalescing Operator

If Statements

We've previously learned about Operators. For a decision to be made, comparison operators are combined with conditionals.
The if statement will execute only if the condition that was passed to it is true.

let a = 2; 
if(a > 0) {
   console.log("a is greater than 0");
}

// the result: a is greater than 0

In this example, the if statement checks if a is greater than 0. This expression a > 0 returns a boolean value (true or false) and in our example the result is true.

If else Statements

Let's say you have a meeting with someone named "Greg". You're waiting for them in the meeting room, no one is allowed in that room except for Greg. The person at the door needs to make sure that the person who wants to attend the meeting is named Greg. When checking their employeeID they're gonna check for their name. If their name is "Greg" then they're allowed to enter, If it is not which in this case would mean else then they won't be able to access the room.

let name = "greg";
if(name == "greg") {
   console.log("this is greg. this person can attend the meeting");
} else {
  console.log("this is not greg. This person cannot attend the meeting");
}

Nested If else

Nested if-else indicates the use of multiple if-else statements within each other. The nested if else allows more decisions to be made depending on multiple conditions.

Checking if a number is greater or less than another is a great example to see how this works:

let x = 12;

if (x > 10) {
    console.log("Number is greater than 10");

    if (x > 20) {
        console.log("Number is also greater than 20");
    } else {
        console.log("Number is not greater than 20");
    }
} else {
    console.log("Number is not greater than 10");
}

In our example we're checking if the number is greater than 10, which in our case it is. Since our expression x > 10 is true, we're going to check if x > 20 in the inner if-else. Since x > 20 evaluates to false our result is going to be "Number not greater than 20".

If x was equal to 5 then the expression x > 10 would have evaluated to false and our output would have been "Number not greater than 10".

The Ternary Operator

The ternary operator (?, : ) makes it possible for you to write a simple conditional statement that can be expressed in a single line of code.

let employeeId = 15 

let message = employeeId == 15 ? "This is Greg": "This is not Greg";

console.log(message);

In This example we are checking the employeeId. If this expression employeeId == 15 returns true then The result will be "This is Greg". If it returns false meaning the employeeId is not equal to 15 then the result will be "This is not Greg".

Switch Statement

The Switch Statement can be used instead of nested if-else statements. It provides a way to compare a value with other various values and executes the code of a matching case.

Let's look at the syntax:

switch(expression) {
  case a:
    // code
    break;
  case b:
    // code 
    break;
  default:
    // code
}

The switch statement will evaluate the expression passed inside the parentheses. The result of the evaluated expression will then be compared to all the cases we have. If a match is found the code of the matched case will be executed. If a match was not found the code block found in the default case will be executed. Here's an example:

let dayNumber = 3;
let dayName;

switch (dayNumber) {
    case 1:
        dayName = "Sunday";
        break;
    case 2:
        dayName = "Monday";
        break;
    case 3:
        dayName = "Tuesday";
        break;
    case 4:
        dayName = "Wednesday";
        break;
    case 5:
        dayName = "Thursday";
        break;
    case 6:
        dayName = "Friday";
        break;
    case 7:
        dayName = "Saturday";
        break;
    default:
        dayName = "Invalid day";
}

console.log("The day is:", dayName);

The result will be "The day is: Tuesday".

Logical Operators with conditionals

In the previous article we got to know what are Logical operators. Let's see how we can use them with Conditionals.

let age = 18;
let isMember = true;
let message;

if (age >= 60) {
    if (isMember) {
        message = "You are eligible for a senior discount.";
    } else {
        message = "You are eligible for a senior non-member discount.";
    }
} else {
    if (isMember) {
        message = "You are eligible for a regular member discount.";
    } else {
        message = "You are not eligible for any discounts.";
    }
}

console.log(message);

Nullish Coalescing Operator

The nullish coalescing operator (??) makes it possible for you to assign a default value to a variable that might be null or undefined.
If the left-hand side operand is null or undefined, it returns the right-hand side operand, else it returns the left-hand side operand.

let username = null;
let message = username ?? "John";

console.log(message); // result: "John"

JavaScript: What are Operators ?

Joey — Wed, 16 Aug 2023 17:57:48 +0000

Operators are symbols that allows you to manipulate values. They are the foundation for expressions, which are made of multiple combinations of values and operators that are evaluated to get to a result.

Overview:

Comments
- Single-line comments
- Multi-line comments
Arithmetic Operators
- Prefix increment/decrement
- Postfix increment/decrement
Assignment Operators
Comparison Operators
Logical Operators
Unary Operators
Bitwise Operators

Comments

Comments are a brief but clear description that you can add to your code to make it clearer and easier to understand.
There are two types of comments:

Single-line comments

Single-line comments are used to write comments that are only one line long.

// Single-line comment
let x = 2; //This is a variable with a value of 2

Multi-line comments

Multi-line comments are multiple lines long, they're also referred to as block comments. They are used to give more detailed explanations for a code sections.

/* this comment 
  is a multi-line
comment*/

You can also use comments to disable or stop the execution of a code block.

let x = 2;
// console.log(x);

Now console.log(x) will not display 2 in your console.

Arithmetic Operators

Programs use arithmetic operations to perform mathematical calculations.

Operators:

operator	description
+	addition operator
-	subtraction operator
*	multiplication operator
/	division operator
%	remainder operator
**	Exponentiation operator
++	increment operator
--	decrement operator

Addition:

let a = 5 + 4; // the sum is 9

Subtraction:

let a = 6 - 5; // the difference is 1

Multiplication:

let a = 3 * 4 ; // the product is 12

Division:

let a = 35 / 7 ; // the quotient is 5

Modulo: gives back the remaining amount after the left operand has been divided by the right operand.

let a = 14 % 3 // the remainder is 2

Exponentiation Exponentiation is raising a number to a specific power.

let a = 2 ** 4; // the result is 16

Increment and decrement The increment operator increases the value of a variable by 1 while the decrement operator decreases the value of a variable by 1.

Prefix increment/decrement

Prefix increment/decrement executes the statement after increasing or decreasing the value.

let x = 1;
let y = ++x; // Increment x by 1 and then assigned new value to y
console.log(x); // result 2 
console.log(y); // result: 2

Postfix increment/decrement

Postfix increment/decrement executes the statement before increasing or decreasing the value.

let x = 5;
let y = x++; // Assign the current value of x to y and then increment x by 1
console.log(x); // result: 6 
console.log(y); // result: 5

Assignment Operator

The assignment operator assigns a value to a variable, which we've seen in the previous article when we've learned about initializing variables.

The Assignment operator can be combined with arithmetic operators to create a shorthand. This shorthand makes it possible to perform an arithmetic operation and then assign the result to the original variable.

Addition assignment:

let x = 1;
x += 2; // Equivalent to x = x + 2; x = 3

Subtraction Assignment:

let x = 2;
x -= 1; // Equivalent to x = x - 1; x = 1

Multiplication Assignment:

let x = 2;
x *= 5; // Equivalent to x = x * 5; x = 10

Division Assignment:

let x = 20;
x /= 4; // Equivalent to x = x / 4; x = 5

Modulo Assignment:

let x = 14
x %= 3 // Equivalent to  x = x % 3; x = 2

Type Coercion

Type coercion is when the operator is used on a value that isn't the right type, value will be implicitly converted to the right type.
Here's an example:

let a = 5 + '5'; 
console.log(a); // result: 55
let b = '10' - 5;
console.log(b); // result: 5

In the first example, the number 5 is coerced into a string and that gives us 55 while in the second example, the 10 is coerced into a number and it gives us 5.

Comparison Operators

When two values or expressions are compared, comparison operators are used to determine whether one of the values is true or false and return a Boolean value (true or false). These operators are used in conditional statements and loops to make decisions which we'll get to later.

Comparison Operators	Description
==	Abstract or loose equality
===	Strict equality
!=	Abstract inequality
!==	Strict inequality
>	Greater than
>=	Greater than or equal to
<	Less than
<=	Less than or equal to

Loose comparison performs type coercion before comparing values, meaning JavaScript will try to convert values of various types to a single type before comparing them.

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a == b)
/*
data type of a: string 
data type of b: number
true
*/

Strict comparison does not perform type coercion before comparing values, meaning it checks both the values and their data types, giving you a precise comparison.

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a === b)
/*
data type of a: string 
data type of b: number
false
*/

It is the same for abstract and strict inequality.
Abstract inequality

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a != b)
/*
data type of a: string 
data type of b: number
false
*/

Strict inequality

let a = '2';
let b = 2 ;
console.log('data type of a: ' + typeof a, '\ndata type of b: ' +typeof b);
console.log(a != b)
/*
data type of a: string 
data type of b: number
true
*/

Greater than, Greater than or equal, Less than and Less than or equal:

let x = 10;
let y = 5;

console.log(x > y);  // true, 10 is greater than 5
console.log(x >= y); // true, 10 is greater than or equal to 5
console.log(x < y);  // false, 10 is not less than 5
console.log(x <= y); // false, 10 is not less than or equal to 5

Logical Operators

-&& The logical operator and: If the conditions being compared are all true, then the expression will return true. If one of the conditions being compared is false then the result will be false. If all the conditions compared are false then the result will be false.

let x = 5; 
let y = 7;
console.log( x>3 && y <10 ); //true
console.log( x>3 && y <x ); //false
console.log( x>y && y <x ); //false

|| The logical operator or: If one or all the conditions return true then the result will be true. If all conditions are false then the result is going to be false.

let x = 5; 
let y = 7;
console.log( x>3 || y <10 ); //true
console.log( x>3 || y <x ); //true
console.log( x>y || y <x ); //false

! The logical operator not: If the logical operator not is used with a boolean value it will return the opposite of that value. The value true becomes false and false becomes true.

let isTrue = true;

console.log(!isTrue); //false
console.log(!(!isTrue)); //true;

Unary Operator

The term "unary operator" refers to an operator that only accepts one operand, or value, to operate on. It is used for various purposes. Let's look at some examples:

The minus operator, is used to negate or change the sign of a number.

let x = -2;
console.log(-x); //2

The plus operator, is used to convert a value into a number.

let x = '42';
console.log('data type of x: '+ typeof +x); //number

Bitwise Operators

Bitwise operators are used to carry out operations on specific bits of binary representations of numbers.

Operator	Description
`&`	Bitwise AND: Performs AND operation on each bit of operands.
`	`
`^`	Bitwise XOR: Performs XOR operation on each bit of operands.
`~`	Bitwise NOT: Inverts the bits of the operand.
`<<`	Left Shift: Shifts bits to the left by specified positions.
`>>`	Right Shift: Shifts bits to the right by specified positions.
`>>>`	Zero-fill Right Shift: Similar to right shift with zero fill.

// Bitwise AND (&)
let resultAND = 5 & 3; // Result: 1
console.log(resultAND); // Output: 1

// Bitwise OR (|)
let resultOR = 5 | 3; // Result: 7
console.log(resultOR); // Output: 7

// Bitwise XOR (^)
let resultXOR = 5 ^ 3; // Result: 6
console.log(resultXOR); // Output: 6

// Bitwise NOT (~)
let num = 5;
let resultNOT = ~num; // Result: -6
console.log(resultNOT); // Output: -6

// Left Shift (<<)
let resultLeftShift = 5 << 2; // Result: 20
console.log(resultLeftShift); // Output: 20

// Right Shift (>>)
let resultRightShift = 20 >> 2; // Result: 5
console.log(resultRightShift); // Output: 5

// Zero-fill Right Shift (>>>)
let numNegative = -20;
let resultZeroFillRightShift = numNegative >>> 2; // Result: 1073741818
console.log(resultZeroFillRightShift); // Output: 1073741818

JavaScript: Variables and Data types.

Joey — Tue, 15 Aug 2023 14:30:48 +0000

Before we deep-dive into the details, let's look at an overview of what we'll cover in this article.

A better understanding of binary
Linking JavaScript to HTML
What is a variable?
- Variable declaration
- Initializing a variable
- Var, let and const
Data types
- Primitive types
- typeof Operator
- Reference types

A better understanding of binary

we've previously briefly explained binary and how some languages are compiled into binary before execution. You might be wondering how does a computer understand these series of 1s and 0s.

A computer can understand binary (a series of high or low electrical signals) through transistors.

A computer works with a very large number of bits and in order to keep track of them they are separated into pieces of information and they are called values. Each value has a type but let's first understand how to link scripts and what variables are before moving on to types.

Linking JavaScript to HTML

JavaScript either uses the tag <script>/script> which can be placed at the bottom of your HTML file or an external script that points to the separate file containing your JS script<script src="path/script.js">.

What is a variable?

Simply put, a variable is a named container that refers to a value in the computer's memory.

 var name = "John";

Variables are essential, they give you a way to refer to and modify data without having to hardcode values in your code.

Variable declaration

There are three different ways you can declare a variable and that is done by using var, let or const and each of which behaves differently.

When a variable is declared, it simply receives a name without a value.

var name;

Just like many programming languages, Javascript also has reserved keywords that cannot be used as variable names.
A reserved keyword is special word that has a specific role and has a specific behavior.
Here's an example:

var
let 
const
typeof
for
class
break
try
throw
default
case
//and many more...

Initializing a variable.

Initializing a variable simply means giving it a value.
You assign a value to your variable using the assignment operator =.

var name = "John";

Var, let and const.

Var

The var keyword allows you to re-declare the variable's meaning, overwriting it, as it was in earlier versions of ECMAScript.

var name = "John";
var age = "Jane" ;

The code snippet above, rather than throwing an error the re-declaration of the variable name will replace "John" with "Jane". Because of this behavior, finding bugs and fixing them becomes more difficult.

Let

The problem caused by the var keyword was resolved in ES6 by introducing the keyword let.

let name = "John";
let age = "Jane" ;

The snippet above will now throw an error since using let, a variable can only be declared once.

Const

const are read-only and immutable. A variable declared with const has a constant value, so once they are assigned, they cannot be changed.

const ICE_CREAM_FLAVOR = "vanilla";
ICE_CREAM_FLAVOR = "chocolate";

This snippet will throw an error since constants cannot be altered.

It is advised to use let instead of var to avoid facing unexpected bugs.

The naming conventions for variable declarations when using the let and const keywords are uppercase for constants and CamelCase or lower case for let.

Data types

A data type is a categorization that indicates what kind of value a variable contains.
JavaScript has two categories of types, primitive types and reference types.

Primitive types

Primitive types represent these 5 types.

Primitive types	Description
undefined	the variable has not been assigned a value
null	the variable has an empty value
boolean	returns either `true` or `false`
string	a series of characters
number	Integer or a decimal number
BigInt	BigInt is a special type of number that supports integers of any size without losing precision.
Symbol	Symbol offers a way to create a unique and immutable values that can be used as property keys in objects.

While number, string and boolean behave in a similar way, undefined and null behave in a slightly different way. We'll get to that in a bit.

When a variable is initialized with a primitive value, the value is copied into that variable.
When you set one variable to equal another, the value in the first variable is duplicated for second variable. Each variable that contains a primitive value uses its own storage space, so changes to one do not affect the other.

let food1 = "Pizza";
let food2 = food1;

console.log(food1); //Pizza
console.log(food2); //Pizza

food1 = "Pasta";

console.log(food1); //Pasta
console.log(food2); //Pizza

typeof Operator

The typeof operator is used to determine the data type of a value that is stored inside a variable. typeof returns a string denoting the type of the data.

console.log(typeof "John"); //string
console.log(typeof false); //boolean
console.log(typeof 1); //number
console.log(typeof undefined); //undefined
console.log(typeof null); //object

const symbol = Symbol("sym");
console.log(typeof symbol ); //symbol

const bigIntVal = 1541267803469812569871234576512347651890154n;
console.log(typeof bigIntValue); // Outputs: bigint

We'll be discussing how the typeof operator works in a future article.

The typeof null behavior returning object is regarded as mistake or error by the maintainers of JavaScript.
When checking for null, they unintentionally said it's an "object" rather than saying it's "nothing."

Reference types

The JavaScript concepts that are most similar to classes are reference types, which stand for objects.
Reference data types, as opposed to primitive data types, store references that point to the locations of the data in memory.

When an object is assigned to a variable, you are assigning one variable to another. Each variable receives a copy of the pointer, and both continue to refer to the same object in memory.

Reference types	Description
Array	A list with indexed values
Function	A function
Date	Date and time
Object	An Object
RegExp	A regular expression

Do not worry if you are unfamiliar with these terms, everything will be explained in detail as we go with this series.

The typeof operator is not limited to identifying the type of primitive values but can also be used to determine the type of reference values.

let obj = {};
console.log(typeof obj); //object

JavaScript: Programming Introduction.

Joey — Mon, 14 Aug 2023 08:07:16 +0000

Whether you're just starting your web development journey or you've got some experience, it is important to make sure that you have a solid grasp of some concepts. Before we jump into the fundamentals of JavaScript, let's make sure we know what programming is.

What is a computer program ?

To understand what programming is we have to know what a computer program is.
A computer program is created by writing lines of code, that run on the computer. The written code is made to perform a specific task.

What is a programming language?

A programming language is a language created specially to give instructions to computers which is known as source code.

What is programming ?

Programming is giving a computer a set of instructions that explain how to execute a program. These instructions could be for carrying out a straightforward task, like showing the result of a multiplication, or they could be for solving a more complex problem.

Types of programming languages

As you might have probably noticed, there are a large number of programming languages available.
Before deciding which languages to use, you need to consider first what your application needs to be built.

There are multiple types of programming languages:

High-level programming languages, are like the language we use to communicate with each other and are easier to read and write and understand,such as Java, C# or Python.
Low-level languages, such as Assembly and Machine language. Machine language is the lowest level language made up of binary code that the computer processor can directly execute.
Compiled programming languages, are translated entirely into machine language (binary) before execution, such as C, C++ and Rust.

Binary is a base-2 numeral system, it is represented by either 0 or 1. Each digit is known as a binary digit or bit for short. The farthest bit to the left is the most significant whereas the farthest bit to the right is the least significant.

Interpreted languages, Unlike low-level languages, Interpreted languages use an interpreter that reads the source code line by line, translates each line into machine-level instructions, and then executes those instructions at run time, such PHP, Ruby and JavaScript.
Scripting languages, are used to write scripts to manipulate data or automate tasks on a web servers. That is why PHP and JavaScript are referred to as Interpreted and scripting languages.
Functional languages, use functions that can be put together to create large complex programs, such as Haskell, F# and Clojure.
Object-Oriented languages, or OOP languages use a structured code to mimic real-world concepts just like objects and their behaviors. These type of languages create objects which are just instances of classes. some examples of Object-oriented languages are Java, C++ and Python.

JavaScript

JavaScript is a client-side scripting language that runs in the browser. It was initially created to build interactive and dynamic websites. JavaScript can also be used as a server-side language.
JavaScript's standardized specification or guideline is called ECMAScript (ES). It defines the features, syntax, and behavior of the language, guaranteeing compatibility with multiple environments and web browsers.
JavaScript has no official support for classes but since objects are the core of the language and almost everything in JavaScript is an object or is accessed through objects, it can mimic object-oriented programming concepts such as classes.

Overview about this series

In this series, we'll be building our knowledge from the ground up learning everything about JavaScript in depth. We'll be discussing everything from the fundamentals to object-oriented programming and more.

JavaScript Tutorial Series: Introduction to JavaScript events.

Joey — Thu, 23 Mar 2023 21:08:25 +0000

What is an event?

An event occurs in the browser whenever an element undergo a change in state as a result of user or browser activity. Events are linked to specific elements in the Document Object Model (DOM). For example a user clicking on a button and changing the <body>'s background color.

What is event handling?

Event handling is the process by which JavaScript code responds to events. The event handler in this scenario refers to the code itself. The act of resizing a window when a user clicks a button is an example of event handling. JavaScript contributes to a web page's interface being responsive to events.

Event listeners are another name for event handlers but they're a little different. While event handlers carry out the action in response to the event, event listeners watch for any events.

How does this work?

addEventListener() is a method that registers an event handler in order to define the code that will be run once the button is clicked.

First, we selected the button using querySelector() method.
Second, we defined a function called changeBackground that has 3 random numbers between 0 and 255 assigned to three different variables which then are passed to the rgb function of the backgroundColor of the <body>.
Lastly, The changeBackground() function will be called when users click the button by registering an event handler using the addEventListener() function.

Event bubbling & Event Capturing

According to the event bubbling model, an event begins at the element that is the most specific before moving upward toward the element that is the least specific.The event is bubbled up to the window object in modern web browsers.
An event begins at the least specific element in the event capturing model and moves down toward the most specific element.

Event flow

The Event flow has three phases

Event capturing takes place first, giving the chance to intercept the event.
Then, the event reaches the target.
Lastly, event bubbling takes place which then allows a final response to the event.

Event Object

The browser creates an event object, fills it with information, and passes it as an argument to the handler whenever an event occurs. Only within the event handler is the event object accessible.

<button>Click!</button>

let btn = document.querySelector('button');

btn.addEventListener('click', function(event) {
    console.log(event.type); //click
});

There are a lot of properties that can be used with the event object. We're going to discuss Two of them.

preventDefault()

Use the preventDefault() method to stop an event from acting by default. For example this method can stop the page from refreshing itself after click the submit button inside a form.

The event continues to bubble up the DOM even after calling the preventDefault() method. And if an event's cancelable property is true, it can be stopped.

stopPropagation()

The propagation of an event through the DOM tree is abruptly stopped by the stopPropagation() method. It does not, however, alter the default behavior of the browser.

JavaScript Tutorial Series: Manipulating elements styles

Joey — Tue, 07 Mar 2023 21:28:26 +0000

In this post we will learn how to alter the style of the HTML elements using the styling properties.

modifying inline styles

The style property allows you to set the inline style for an element.

Syntax

element.style

For example if you want to set the background-color of an element you can do it like so :

<p>I am a paragraph</p>

let p = document.querySelector("p");

p.style.backgroundColor =' red';

There are plenty of style properties you can set using this syntax such as:

background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
border
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth

The list above is just a couple of properties that are available, but there are many more.

className property

The className property of an element returns a string containing a list of the element's CSS classes, separated by spaces.

Syntax

element.className;

Let's look at an example:

<ul id="list" class="main-list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

console.log(list.className);

classList property

The classList property is a read-only and returns a live collection of CSS classes.
Despite being read-only, the classList can still be used to manipulate the classes it contains.

get classes of an element

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

for( let classes of list.classList){
  console.log(classes);
}

add a class to an element

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.add("newClass", "another");

for( let classes of list.classList){
  console.log(classes);
}

Remove an element's class

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.remove('main-list');

for( let classes of list.classList){
  console.log(classes);
}

Check if element has a specific class

This property returns a boolean. if the element has that specific class it returns true otherwise it returns false.

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

console.log(list.classList.contains("main-list"));

Toggle property

The toggle() method deletes a class name from an element's class list if it is present and includes the class name in the class list if it is missing.

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.toggle("main-list");

for( let classes of list.classList){
  console.log(classes);
}