DEV Community: Muhammad Muhktar Musa

Javascript concept you should know

Muhammad Muhktar Musa — Mon, 10 Jan 2022 13:44:40 +0000

We will go from the easier ones to the more difficult ones. Let us start with our first concept.

let and var

what is the difference between the keywords let and var. First var has been in javascript since the beginning while let was introduced in ES2015./ES6. Lets say your browser has not been upgraded in a decade. let will not work on such browsers. Secondly, let has a block scope which means a variable defined with the let keyword will die at the end of the block it is defined compared to var which has functional scope which means it doesn't respect all of the block except the function block. So it will die at the end of the function it is defined not the block. The third difference is the var is gets hoisted at the top of the function while variable defined with let doesn't get hoisted. Let us look at it in play


 let z = function () {

  if (true) {
    //console.log(y)
    //console.log(m)

    var y = 2;
    let m = 3;

  }
  console.log(y)
  console.log(m)
}
z();

We can see that the variable y gives us 2 which means that it exist outside the block giving it a function scope while variable m gives an undefined which means it does not exist outside the block.
Similarly if we call the functions inside the block before the definition of the variable


 let z = function () {

  if (true) {
    console.log(y)
    console.log(m)

    var y = 2;
    let m = 3;

  }
}
z();

the variable y is undefined because its definition gets hoisted but not the value. That is why it does not give an error but m gives an error because it does not exist before its definition.

Difference between === and ==

The double equal sign and the triple equal sign are both comparison operators. Which means they would compare values on their left hand and their right side. The difference is when using the double equal sign it compares values but does not compare type. The triple equal sign compares both the value and type. Let us look at this in play


  if('3' == 3) {

}

What happens is that in order to compare using the double equal sign, first it will make the value on the left side equal to the value on the right side. It will try and convert both to a string. That way it will say true. Right side equal to left side. The double equal sign does not compare types it actually converts one type to reflect the other. When we use the triple equal sign it does not try and convert anything, it just says well the left side is a string and the right side is a number so it is not true.

Keyword let and const

The let and const keywords are used basically to define variables. After the first assignment of value using the const keyword you cannot reassign another value or change type compared to let which allows all this changes. For example

 let l = 3;
l = 5;
console.log(l);

const h = 6;
h = 3;
console.log(h);

We get 5 for the let keyword while the const keyword throws a typeerror. The variable using a const keyword can be modified if its an object but values cannot be reassigned to it.

undefined and null

undefined and null in javascript both represent empty values but the difference is that when you define a variable and not assign a value to it, it automatically puts a placeholder which is called undefined. javascript does this so you don't have to do it. null meanwhile can be set by yourself. If we check the

typeof(null);
  typeof(undefined);

typeof undefined gives undefined while typeof null gives an object.

The arrow function

let person = {
  firstname:'',
  lastname: '',
  setname:function(name){
    let splitname = function(n){
      let newarray = n.split(' ');
      this.firstname =  newarray[0];
      this.lastname = newarray[2]
    }
    splitname(name)
  }
}
person.setname('hello man');
console.log(person.firstname);

We have this object called person and it also has properties firstname and lastname. It has a function inside called setname and it takes the argument name and splits the fullname into firstname and lastname. This splitting is done by an inner function which is a private function. Because the function is inside of a function it has its own this. As it is not a constructor it will set the the this to the windows object. If we run the above code it will give us nothing

it is because it is setting to the windows object. So if we say

window.firstname

we get

Here is a perfect scenario to use the arrow function. The way to do it is to remove the function keyword and insert the arrow function

let person = {
  firstname:'',
  lastname: '',
  setname:function(name){
    let splitname = (n) => {
      let newarray = n.split(' ');
      this.firstname =  newarray[0];
      this.lastname = newarray[2]
    }
    splitname(name)
  }
}
person.setname('hello man');
console.log(person.firstname);

Now if we run the

person.firstname

we get hello because it does not have its own this it is automatically setting it for setname which is person object.

Prototype in javascript

Muhammad Muhktar Musa — Wed, 15 Dec 2021 22:50:06 +0000

The prototype is an object that is associated with every functions and objects by default in JavaScript. Prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible. Every function includes prototype object by default. This allows you to define properties on objects that can be accessed via the object’s instances.

let us look at an example


let person = {};

person.name = "David";
person.age = 45;

person.eat = function() {
console.log(`person is eating`);
}

Here we are creating new instances for the object. If you console.log this object you won’t see any methods, but you can use methods like set or get for the object prototype.

When you use map, JavaScript looks for map in the object itself. If map is not found, JavaScript will try to look for a Prototype. If JavaScript finds a prototype, it continues to search for map in that prototype.

So the correct definition for Prototype is: An object that instances can access when they’re trying to look for a property.

Prototype chain

When a property is accessed in javascript, javascript checks to see if the property is available inside the object. If yes, JavaScript uses the property straight away. If the property is not inside the object, JavaScript checks if there’s a Prototype available. If there is a Prototype, repeat Step 1 (and check if the property is inside the prototype). If there are no more Prototypes left, and JavaScript cannot find the property, it does the following:

Returns undefined (if you tried to access a property).
Throws an error (if you tried to call a method).

Javascript flaws you should know

Muhammad Muhktar Musa — Tue, 23 Nov 2021 13:44:33 +0000

Introduction

We all know and everybody does agree that javascript is awesome. It is a language that by any metrics is growing faster than anything else. There is a lot of reasons for this. There is a lot of goodness in this. This are some core javascript traits.
• Built-in memory management
• Native serialization (JSON)
• Naturally scalable (via Eventloop)
• Frequent template /encoding use
• Flourishing npm package ecosystem

Javascript capabilities

These are amazing capabilities. They are core allowing the building of amazing things. But sometimes the same capabilities that make it awesome also make it vulnerable. So you look at this various different capabilities and what you can see as Built- in memory management one can look at the flaws and see buffer objects and leaking memory from servers. If you talk about native serialization hackers can look at it and do some type manipulation because types a decided in runtime and those kind of changes can be manipulated. A lot of our talk today is going to center on how javascript capabilities can be manipulated and abused.

• Built-in memory management : Buffer vulnerabilities
• Native serialization (JSON) : Type manipulation
• Naturally scalable (via Eventloop): Regex Dos
• Frequent template /encoding use: Sandbox Escaping
• Flourishing npm package ecosystem: Vulnerable packages

Another thing to remember is that this vulnurebalities don’t just happen in your code. Part of the core part of the javascript ecosystems are libraries . Npm, node, jquery. Much of the codes are open source codes. A typical application has thousands of dependencies which leads to a situation where your app is very large but your code is so small. It is slightly frightening from a security perspective. Most of your apps code come from npm which makes most of your apps vulnerabilities to come from npm. This is not a theoretical problem, it is practically what happens when we use npm packages.

Risk front-end Apps

Packages use packages that use other packages and within that ecosystem is vulnerabilities. Pretty every node shop has these and this risk node apps and front-end app has vulnerabilities in front-end apps like angular, react and node apps with all the packages we pull in from npm. Also there is the internet of things, we hear about Ddos and other massive attacks that take down the internet. Many of these devices run node apps and light weight apps and these can have vulnerabilities. We are going to look at
• Explain and exploit real world javascript vulnerabilities using npm
• Discuss remediation and solutions for vulnerable code and packages
We will discuss this in our next write up

javaScript and hacking

Muhammad Muhktar Musa — Sun, 07 Nov 2021 19:21:44 +0000

introduction

javaScript is most well-known as the scripting language for Web pages, and it allows developers do things. It allows the developer to talk to servers, make things dance arround the page, change when clicked on. It is used for form validation and handling of all kinds of things like single page applications.

why we should look at javascript.

We want to look at javascript so that we can have an idea of what can we do to leverage javascript to find vulnerabilities, tools we can use, how to find the tools, how do we start these tools, how to understand what's going on and how to expliot what's going on.
A place to start is to take a look at a website.

One of the most useful and probably most underrated hacker tools that there is at all is the browser devtools. To open devtools while your browser is on the viewport use the following command

/*
Mac
open whatever panel used last:  Command + Option + I
open console panel: Comand + Option + I
Open element panel: Command + Shift + C

Windows
open whatever panel used last:  Control + Shift + I
open console panel: Control + Shift + j
Open element panel: Control + Shift + C
*/

The browser devtools is not really meant for developers but it is super useful to hackers. For example if we go to the network tab, click on it and reload the tab. We can see all the request that is being loaded on the page and they can be filtered to just the javascript files. All by just one click.

We can right click on any of these files and open it up in a source folder

we can see a single long line of code that doesn't make a whole lot of sense. But we can prettify this code to make sense to us by using the curly buttons in the source folder

Do that and you get a much nicer format of the javascript. There is a of reasons why we want to read this script. Some of the reasons are like we want to know what is going on on the page or search for some information that may be hanging around like API keys or keywords. On the network files, also related to the javascript is the xhr . xhr is xml http request. It a name that came to be known as AJAX or fetching remote files with javascript. These request are request that where made by javascript.
we can check the initiator of the request by using the initiator tab and pretifying the code

The line of code is the one that initiated this call. When this is done you can see that there are API calls being made. You can use this knowledge to check for more API calls.

Headers can also be checked for. From the header tap we see there is a API call being made to a URL.

The dev tools also give a search functionality. We can search for the API calls there and we get a pretty quick response.

click on the result and it is going to take you to the source folder. prettify your code and you can read around the javascript and say ok well we are doing this or that here. One way the devtools can be really useful is performing static analysis and checking for vulnerabilities with the javascript itself.

Javascript and code documentation

Muhammad Muhktar Musa — Sun, 31 Oct 2021 21:43:30 +0000

javaScript is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions.

Why code documentation?

If you wrote a couple of functions for making an HTML table with JavaScript. You could use those function right now, or pass them to another developer. Everything is clear in your mind the moment you write the code, yet a month later you don't remember how to use function A or function B anymore. How function A is supposed to be called? What parameters it takes? And what shape should the parameters have?
Code documentation helps you and other developers understand how to use the software you wrote. There are many ways for documenting a piece of code. For example you can write:

howtos guides for using your code
a nice README for the repo
code documentation in the source But on top of how-to and READMEs, code documentation in the source holds most of the value. It sits right there with the code and helps avoiding mistakes as you write JavaScript in the editor.

Consider the following function:

function generateTableHead(table, data) {
  const thead = table.createTHead();
  const row = thead.insertRow();
  for (const i of data) {
    const th = document.createElement("th");
    const text = document.createTextNode(i);
    th.appendChild(text);
    row.appendChild(th);
  }
}

This function kind of speaks for itself, generateTableHead. The data parameter doesn't specify what it should execute or what data should be.
If we look at the function's body, it becomes evident that "data" must be an array. table on the other hand does not make it clear if it is to be a string or an actual html element.
We simply as add a comment before the function:

/**
 * Generates a table head
 */
function generateTableHead(table, data) {
  const thead = table.createTHead();
  const row = thead.insertRow();
  for (const i of data) {
    const th = document.createElement("th");
    const text = document.createTextNode(i);
    th.appendChild(text);
    row.appendChild(th);
  }
}

This is the standard code documentation. The function generateTableHead" should take an HTMLTableElement and an array as parameters. We can add annotations for both like

/**
 * Generates a table head
 * @param {HTMLTableElement} table - The target HTML table
 * @param {Array} data - The array of cell header names
 */
function generateTableHead(table, data) {
  const thead = table.createTHead();
  const row = thead.insertRow();
  for (const i of data) {
    const th = document.createElement("th");
    const text = document.createTextNode(i);
    th.appendChild(text);
    row.appendChild(th);
  }
}

Code documentation is often overlooked and considered more or less a waste of time. Great code should speak for itself. And that's true to some extents. Code should be clear, understandable and plain. Writing documentation for code can help your future self and your colleagues.

Conditional logic you should know

Muhammad Muhktar Musa — Sun, 24 Oct 2021 23:14:18 +0000

Once you start getting JavaScript under the belt, one of the things you would want to do is get conditional logic into an application. What is conditional logic? Conditional logic acts as a traffic curve in a program. It decides which conditions are to be prioritized if the logic is true. It also decides the code to run or what to do if the condition is false. This conditions can be used to run different things based on different values.
Let us take a look at 3 different conditional logic in javaScript. We want to know what they look like and when they are to be used to optimize an application .

If/else statement

We are going to look at an array of food and each food is represented an objects.

 const food = [
    { type: "Banana", family: "fruits" },
    { type: "Lettuce", family: "vegetable" },
    { type: "Rice", family: "grains" }
  ]

We are going to use a javascript forEach method to loop through the contents of the food array and execute the function using the if/else statement.

food.forEach (({type, family})=>{
if (family === "fruits"){
  console.log(`i am eating ${type}`);

}if (family === "Vegetable"){
  console.log(`i am eating ${type}`);

}if (family === "grains"){
  console.log(`i am eating ${type}`);

}
  });

When we run the above code we get the current value that we loop over and introduce our conditional logic. All we are doing is saying if the condition is met run the code or other wise move to the next statement. That is the basic idea behind an if statement. It is a very simple but powerful tool. We can apply an else statement to the if statement. For example we can say

food.forEach(({ type, family }) => {
    if (family === "fruits") {
        console.log(`i am eating ${type}`);

    } else if (family === "Vegetable") {
        console.log(`i am eating ${type}`);

    } else if (family === "grains") {
        console.log(`i am eating ${type}`);

    }
    else { console.log('all food are good for hunger'); }
});

When we give a condition to the if statement, if the condition is true we are going to log a statement otherwise we log whatever the else statement is when the if statement is through no matter the value we are looping through. As long as it does not meet our if statement the else statement will be logged.

Switch statement

The next type of logic we are going to look at is the switch statement. The switch statement is similar to the if/else statement. We going to take a look at a similar food array and loop through using the switch statement


const getFoodAll = (food) => {
    switch (food) {
        case "Banana":
            return "this is my favorite fruit";

        case "Lettuce":
            return "this is my favorite Vegetable";

        case "Rice":
            return "this is my favorite grain";
        default:
            return "i have no business being here";
    }
};

Unlike if/else statements, the switch statements keep going. They do what is called fall through. What it does is print all the statements when the conditions are met. To prevent all the statements falling through, a break statement is added.

const getFoodAll = (food) => {
    switch (food) {
        case "Banana":
            return "this is my favorite fruit";
            break;
        case "Lettuce":
            return "this is my favorite Vegetable";
            break;
        case "Rice":
            return "this is my favorite grain";
            break;
        default:
            return "i have no business being here";
    }
};

When using the switch statement, in some cases we want to fall through all the various cases. In some other cases we want to break the code when we have our result. The break is known as the stop mechanism for achieving this. When we hit a statement we want evaluated the break stops the code from evaluating all other statements from that point. This break stops the steady flow. If we don't have a break, the code is going to run to the default statement. The switch statement is super useful in replacing logic that uses a lot of if/else statements.

Ternary operator

It is a simple piece of very powerful code. It is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

function lifeStyle() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

Using the tenery operator the above logic can be simplified into

function lifeStyle() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

Key difference between Inheritance and compose

Muhammad Muhktar Musa — Sun, 17 Oct 2021 12:18:34 +0000

Introduction

Everything in JavaScript is treated as an object. Functions too are high class objects in a way and are treated as such in javaScript.

Compose

To make large complex objects simple, many small objects are composed together. Composition is a cleaner, reusable and better solution for better code.
Let us take a look at an example


const MoneyInbank = {
    highRate(investspeed, devestSpeed) {
      return investspeed + devestSpeed;
    },
    lowrate(investspeed, devestSpeed) {
      return investspeed- investspeed;
    },
  };

const StopDebt = {
    stop(investspeed) {
      this.investspeed = 0;

      return 0;
    },
  };

const Bank = {
    model: "Grco",
  };

To make this large object smaller and reusable and implement functionality we can create a function that implements a functionality.


 const regulator = function (Des, MoneyInbank, StopDebt) {
    const bank = Object.create(Des);
    const money = Object.create(MoneyInbank);
    const stopmoney = Object.create(StopDebt);
    const props = {
      investspeed: 0,
      model: bank.model,
    };

We can now create our set and get methods to access the props

 return {
      set(name, value) {
        props[name] = value;
      },

      get(name) {
        return props[name];
      },

      log(name) {
        console.log(`${name}: ${props[name]}`);
      },

      slowLoan() {
        props.investspeed =  money.lowrate(props.investspeed, 5);
      },
     speedLoan() {
        props.investspeed = money.highRate(props.investspeed, 10);
    },

stopLoan() {
  props.investspeed = stopmoney.stopLoan(props.investspeed);
},
};
};

We can now call the function


 const regulator = regulator (Des, MoneyInbank, StopDebt);

Run the methods in our console giving them values and we can see the outcome. we can increase & decrease the investspeed according to our preferences


 regulator.slowLoan(investspeed);
 regulator.speedLoan(investspeed);
 regulator.stopLoan(investspeed);

regulator can implement the functionality of regulator when needed. Now, regulator can increase its investspeed, decrease its investspeed. In composition the Inheritance gets assisted automatically.

Inheritance

Inheritance can be defined as gaining some or all traits (functionality) of parent and then providing a relational structure. Mixin plays a vital role when it comes to inheritance in JavaScript. Mixin is actually mixing which could be any i.e. bank into a moneymixin means mixing bank to the money.
To understand the concept properly let’s take an example

script>
  const breadMixer = {
    set(name, value) {
      this[name] = value;
    },

    get(name) {
      return this[name];
    },

    mixspeed: 0,

    inclinespeed() {
      this.mixspeed += 10;
      console.log(`Inclinedspeed is: ${this.mixspeed}`);
    },
    declinespeed() {
      this.mixspeed -= 5;
      console.log(`Declinedspeed is: ${this.mixspeed}`);
 },

    stopmachine() {
      this.mixspeed = 0;
      console.log(`Now the speed is: ${this.mixspeed}`);
    },
  };

Let us assign an object

 const Breadmill = { brand: "Maxpro", mixspeed: 0 };
  const Breadmill1 = Object.assign({}, Breadmill, breadMixer);

We can increase the speed of Breadmill1

 Breadmill1.inclinespeed();

We can decrease the speed of Breadmill1

 Breadmill1.declinespeed();

We can stop the Breadmill

 Breadmill1.stopmachine();

We access the brand of Breadmill1

console.log(Breadmill1.get("brand"));

We can change the brand of Breadmill1

  Breadmill1.brand = "PowerMax";
  console.log(Breadmill1.get("brand"));

It is visible from the operations performed by Breadmill1 which was assigned a Breadmill object which possesses breadMixer.At First and foremost, the mixspeed was 0 after applying inclinespeed() method the mixspeed increased by 5 after that decline speed method was performed which reduced the speed by 5 finally stop operation was performed which stopped the mixer by making its mix speed zero. The brand was changed from Maxpro to Powermax which shows the power of Inheritance

The key differences between composition and inheritance are
Composition allows code-reuse while Inheritance does not allow code-reuse. In composition, you will not need to extend classes while in inheritance, you will need to extend classes.

7 javaScript Array methods you should know

Muhammad Muhktar Musa — Mon, 11 Oct 2021 13:11:17 +0000

Arrays are one of the most common things a programmer uses or is likely to come across in a project. In this regard the array method we are going to look into should come in handy.
We are going to use a single array for our examples

const clubs = [
  { name: "All-stars", fans: 20000 },
  { name: "Bay", fans: 30000 },
  { name: "C-stars", fans: 25000 },
  { name: "D-pillars", fans: 40000 },
  { name: "Clos", fans: 60000 },
  { name: "Magic", fans: 45000 }
]

Let us take a look at this methods and what they do to an array

filter

The filter method is used to filter out or remove all elements from an array that affirms the subject in the proposition logic and they are returned in a new array without altering the original array
for example

const filterClub = clubs.filter((item) => {
  return item.fans <= 30000;
});

All the clubs having fans of less than or equal to 30000 fans are going to be returned to a new array.

The filter method is a simple method to use. It returns true or false for each item. If the item is true, it is included in the new array and if it is false it is not included. The filter method does not change the array or object it is being filtered over. This method is convenient because we do not have to worry about the old array being changed when using it subsequently.

map

This method allows the taking of an array and converting it to a new array so that all items in the array are going to look slightly different. Let us say we want to get the names of every clubs in the array sample. We can use the map method for this.
Example

const clubNames = clubs.map((item) => {
  return item.name
});

We get a new array that prints out the names of the club in the original array without altering the original array. This is super convenient when you want to get the items in an object or the keys of an object or convert an array from one form to another. It has millions of uses.

find

This method allows a single object to be found in an array of objects. The method takes a single item as a parameter and returns the first item that returns true for the statement.

const findClub = clubs.find((item) => {
  return item.name === "All-stars"
});

forEach

This method does not return anything unlike the methods we covered previously. It works very similarly to a forLoop but it takes a function instead and takes a single parameter

clubs.forEach((item) => {
  console.log(item.name);
});

For every single element inside the array, it prints out the names. The method makes working with an array where you have to loop through them much easier so that you don't have to write clunky, long forLoop syntax.

some

This function does not return a brand new array. Instead what it does is to return true or false. We can check if some items in the array affirms or denies the subject in the proposition logic. example

const highestFans = clubs.some((item) => {
  return item.fans <= 30000
});

It checks if any item value returns true and returns the first item that matches the criteria.

every

This method checks if every single item in the array affirms the subject proposition logic and returns true or false
example

const highestFans = clubs.every((item) => {
  return item.fans <= 30000
});

reduce

This method performs an operation on the array and returns a combination of all the different operations. To get the total of all the fans in our clubs array we use the reduce method in the following way

const totalFans = clubs.reduce((x, item) => {
  return item.fans + x;
}, 0);

It takes a property and an item we want the property to be reduced to. It also takes a second parameter which is where we want to start the reduce from. In our case it starts from 0.

The upside and downside of lodash

Muhammad Muhktar Musa — Sun, 03 Oct 2021 15:49:17 +0000

Lodash is a modern javaScript utility library that delivers modularity, performance and other task.

Upside

Lodash provides tools for making code cleaner and more functional. It supports modern browsing environments and helps in building modular applications. It makes working with arrays, numbers, objects and strings more easier. Lodash is also excellent for iterating arays, objects and strings as well as manipulating and testing values. Let us take a look at some lodash functions and how they improve functionality. We are going to compare them to the vanilla javaScript equivalent.
The aim is to understand how this functionalities are achieved under the hood.

sortBy

It creates an array of elements sorted in ascending order by the results of running each element in a collection through each iteratee. This method performs a stable sort. It also preserves the original sort order of equal elements. the iteratees are invoked with a single argument: (value). It returns the new sorted array.

Lodash

First we import the function from lodash

 import {sortBy} from 'lodash';

Then we create an array of users

const users = [
  { 'user': 'fred', 'age': 48 },
  { 'user': 'brand', 'age': 36 },
  { 'user': 'fred', 'age': 40 },
  { 'user': 'brand', 'age': 34 }
];

We now apply the the lodash sortBy function to the array

_.sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 42]]

_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 42], ['fred', 48]]

_.sortBy(users, 'user', function(o) {
  return Math.floor(o.age / 10);
});
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 42]]

We get the above result.

Vanilla javaScript

const users = [
  { 'user': 'fred', 'age': 48 },
  { 'user': 'brand', 'age': 36 },
  { 'user': 'fred', 'age': 40 },
  { 'user': 'brand', 'age': 34 }
];

const sortBy = (key) => {
  return (a, b) => (a[key] > b[key]) ? 1
   : ((b[key] > a[key]) ? -1 : 0);
};

We now use the native sort to modify the array in place. We also use the concat() method to copy the array before sorting.

users.concat().sort(sortBy('user'));
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 42]];

users.concat().sort(sortBy('user', 'age'));
// => objects for [['barney', 34], ['barney', 36], ['fred', 42], ['fred', 48]];

Curry

Creates a function that accepts arguments of func and either invokes func returning its result if at least the number of arguments is specified or returns a function that accepts the remaining func arguments. The arguments of the func maybe specified if func.length is not sufficient

Lodash

import { curry } from 'lodash';
const abc = (a, b, c) => [a, b, c];
const curried = curry(abc);
curried(3)(4)(5);

For the code solution above check
https://dev.to/mcube25/javascript-advanced-functions-for-dummies-4i6g:
check for more info on currying

Vanilla javaScript

First we define the number of expected arguments

const curry = func => {
  const expectedArgs = func.length;
  const curried = (...args) => {

  }
}

If enough arguments have been passed, we return the result of the function execution or else we continue adding to the list

const curry = func => {
  const expectedArgs = func.length;
  const curried = (...args) => {
    return args.length >= expectedArgs
      ? func(...args)
      : (...args2) => curried(...args.concat(args2))
  }
  return curried
}

For the code solution above check
https://dev.to/mcube25/javascript-advanced-functions-for-dummies-4i6g:
check for more info on currying

Chunk

It creates an array of elements split into groups the length of the size. The size will be the second argument provided to the function.

Lodash

Import chunk from lodash

import { chunk } from 'lodash';
chunk(['boy', 'girl', 'brother', 'sister', 'uncle', 'aunt'], 2);
//=>[['boy', 'girl'], ['brother', 'sister'], [uncle', 'aunt']];

If collection can’t be split evenly, the final chunk will be the remaining elements.
Example

chunk(['boy', 'girl', 'brother', 'sister', 'uncle', 'aunt', 'father'], 2);
//=>[['boy', 'girl'], ['brother', 'sister'], [uncle', 'aunt'], [father]];

Vanilla javaScript

Using plain javaScript the lodash example can be written as

const chunk = (arr, arrSize, cache = []) => {
  const temp = [...arr]
  if (arrSize <= 0) { return cache }
  while (temp.length) {
    cache.push(temp.splice(0, arrSize))
    return cache
  }
}
chunk(['boy', 'girl', 'brother', 'sister', 'uncle', 'aunt'], 2);
//=>[['boy', 'girl'], ['brother', 'sister'], [uncle', 'aunt']];

pullAt

This function removes elements from an array corresponding to indexes and returns an array of removed elements. This method mutates the array

Lodash

import { pullAt } from 'lodash';
const array = ['2', '3', '4', '5', '6'];
pullAt(array, [2, 4]);
//=>[4, 6]

Vanilla javaScript

const pullAt = (arr, idxs) => {
  idxs.reverse().map(
    idx => arr.splice(idx, 1)[0]
  ).reverse()
};

pullAt(array, [2, 4]);
//=>[4, 6]

Remove

This function removes all elements from an array that affirms or denies the subject in the proposition logic. It returns truthy for the array. It also returns an array of the removed elements. It is invoked with three arguments which are (value, index, array). It mutates the array

Lodash

import { remove } from 'lodash';
const array = [1, 2, 3, 4, 5];
const even = remove(array, n => {
  return n % 2 === 0
});

// the array //=>[1, 3, 5];
// even //=> [2, 4];

Vanilla javaScript

const remove = (array, ix) => {
  const toRemove = [];
  const result = array.filter((item, i) =>
    ix(item) && toRemove.push(i)
  )
};

In order to not mutate the original array until the very end, we want to cache the indexes while preparing the result to return in the code above. Just before returning, we can remove the items making sure to start from the higher indexes to prevent them shifting at each removal.

const remove = (array, ix) => {
  const toRemove = [];
  const result = array.filter((item, i) =>
    ix(item) && toRemove.push(i)
  )
  toRemove.reverse().forEach(i => array.splice(i, 1))
  return result
}
const array = [1, 2, 3, 4, 5];
const even = remove(array, n => {
  return n % 2 === 0
});

// the array //=>[1, 3, 5];
// even //=> [2, 4];

Reduce

This function reduces a collection to a value that is the accumulated result of running each element in the collection through an iteratee. Each successive invocation is supplied the return value of the previous. If the accumulator is not given, then the first element of the collection is used as the initial value. The iteratee is invoked with four arguments: (accumulator, value, index, collection)

Lodash

import { reduce } from 'lodash';

reduce([3, 4], (sum, n) => sum + n, 0);
//=>7

Vanilla javaScript

array = [3, 4];
array.reduce((sum, n) => sum + n, 0);
//=>7

Before

It creates a function that invokes a func with the this binding and arguments of the created function while it is called less than n times. Subsequent calls to the created function returns the result of the last func invocation

Lodash

import { before } from 'lodash';

(t, fn) => before(t, fn);

Vanilla javaScript

const before = (t, fn) => {
  let counter = 0;
  let res;
  return (...args) => {
    counter++;
    if (counter <= t) {
      res = fn(...args);
      return res
    } else {
      return res
    }
  }
}

Downside

As can be seen, the amount of code written when using lodash is minimal compared to using plain javaScript. But the downside of using lodash in an application is that it increases the size of the application which in turn affects the performance of such applications.

Reactive Forms in Angular The basics

Muhammad Muhktar Musa — Mon, 27 Sep 2021 17:35:07 +0000

Introduction

Angular uses reactive methods to process and manage form. It is easy to use reactive forms to capture user inputs events, validate the inputs and create form models in large angular applications. This enables the tracking of data and changes in the form model in all parts of the application.

Reactive Form model setup

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. It uses an explicit and immutable approach to manage the form at a given point in time and it is built around observable streams.

Adding a basic form control

Register the reactive form module in the app module declaration of an angular app. This module declares a reactive form directives needed to use the reactive form
Generate a new form control instance and save in the component class
Register the form control in the template.

Let us take a look at how to implement the above. To use the reactive form controls we need to import ReactiveFormsModule from @angular/forms package and add it to the NgModule imports array

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports:[
ReactiveFormsModule],
  });

Next is to generate a form control. To register a single form control, we import the form control class and create a new instance of FormControl that is saved as a class property.

import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})

export class CartComponent implements OnInit {
  name = new FormControl('');
}

By creating this control in the component class, immediate access is gotten to listen for, update and validate the state of the form input.
To register the control in the template, we can add a label to the template

<label>Name:
<input type="text" [formControl]="name">
</label>

Displaying a form control value can be achieved through value changes from observables where changes are listened for in the template using AsyncPipe or in the component class using a subscribe method. It can also be achieved with the value property which gives a snapshot of the current value.
Let us take an example of how to display the value using interpolation in the template.

<label>Name:
<input type="text" [formControl]="name">
<p>
    value: {{name.value}}
</p>
</label>

The displayed value changes as the form control element is updated. Reactive forms have methods they use to change a control value programmatically. This gives flexibility to update the value without user interaction. A form control instance provides a setValue() method that updates the value of the form control and validates the structure of the value provided against the control structure. To update the name we can use the setValue method as below

 upDateName() {
    this.name.setValue('Kings');
  }

Update the template with a button to simulate name update

<label>Name:
<input type="text" [formControl]="name">
<p>
    value: {{name.value}}
</p>
</label>
<button (click)="upDateName()">Update Name</button>

The form model is the source of truth for the control. When the button is clicked the value of the input is changed within the component class overriding its current value.

Grouping form controls

Forms typically contain several related controls. Reactive forms provide two ways of grouping multiple related controls into a single input form.

A form group that defines a dynamic form with a fixed set of controls that can be managed together.
A form array that defines a dynamic form where controls can be added or removed at run time. A single form control instance gives control over a single input field while a form group instance tracks the form state of a group of form control instances. let us take a look at this in play. Import the form group class from the angular packages

import { FormControl, FormGroup } from '@angular/forms';

Create a form group instance, associate the form group model and view then save the data.

profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastname: new FormControl('')
  });

Associate the form group model and view in the template

<form [formGroup]="profileForm ">
    <label>First Name:
        <input type="text" formControlName="firstName">
        <p>
            value: {{name.value}}
        </p>
        </label>
        <label>Last Name:
            <input type="text" formControlName="lastName">
            <p>
                value: {{name.value}}
            </p>
            </label>
</form>

To save the form data the form group directive listens for the submit event emitted by the form element which can be bind to a callback function. let us add an ngSubmit event listener to the form tag with the onSubmit() callback method.

<form [formGroup]="profileForm " (ngSubmit)="onSubmit()">
    <label>First Name:
        <input type="text" formControlName="firstName">
        <p>
            value: {{name.value}}
        </p>
        </label>
        <label>Last Name:
            <input type="text" formControlName="lastName">
            <p>
                value: {{name.value}}
            </p>
            </label>
</form>

add the method to the class

  onSubmit() {
console.log(this.profileForm.value);

  }

Use a button element to add a button to the form to trigger the form submission

 <button type="submit" [disabled]="profileForm.valid"></button>

Creating nested form groups

Form groups can accept individual form control instances and other form group instances as children. This makes composing complex form models easier to maintain and logically grouped together. Let us create and take a look at a complex form.

 profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastname: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });

Group the nested form in a template

<div formGroupName="address">
   <h5>Address</h5>
        <label>City:
            <input type="text" formControlName="city">
            <p>
                value: {{city.value}}
            </p>
        </label>
        <label>Street Name:
            <input type="text" formControlName="street">
            <p>
                value: {{street.value}}
            </p>
        </label>
        <label>State Name:
            <input type="text" formControlName="state">
            <p>
                value: {{state.value}}
            </p>
        </label>
        <label>Zip:
            <input type="text" formControlName="zip">
            <p>
                value: {{zip.value}}
            </p>
        </label>
    </div>

The updateProfile() method can be used to update the firstName and street of the user

updateProfile() {
    this.profileForm.patchValue({
      firstName: 'jules',
      address: {
        street: '234 jules miles street'
      }
    })
  }

simulate an update by adding a button to the user profile

<button (click)="updateProfile()">update profile</button>

Generating controls using the formbuilder service

To generate controls using the formbuilder service, we need to import the formbuilder class then inject the formbuilder service and then generate the form contents.

import the formbuilder class

import { FormBuilder} from '@angular/forms';

inject the formbuilder service

constructor( private fb: FormBuilder) { }

generate the controls

profileForm = this.fb.group({
      id: [''],
      teacherIds: [''],
      studentIds: [''],
    });

Validating form input

Form validation is used to ensure that user input is complete and correct. To achieve this we import a validator function in the form component

import { Validators} from '@angular/forms'

Add logic and validators to the form fields required

profileForm = this.fb.group({
      id: ['', validators.required],
      teacherIds: [''],
      studentIds: [''],
    });

Add the validator to the template

<input placeholder="id" formControlName="id" required />

Display current status of form by using interpolation

<p> Form status: {{profileForm.status}} </p>

We can see from our discussion that building a form using the reactive form approach makes managing immutable form input data at a given point much easy.

Ngrx Entity and Selectors. The why and how

Muhammad Muhktar Musa — Sun, 19 Sep 2021 22:40:59 +0000

Using Ngrx to build an application? The problem of deciding the format of storing data inside the store is always there. Handling of the business data in a centralized store is something that will need to be done in the application. This process could be repetitive and time consuming. It could lead to handwriting the same reducer logic and selectors for different data types. This can be error prone and slows down the development process. We will cover how to solve this problems using the Ngrx Entity and selectors to improve an application.

Entity

Ngrx Entity helps in handling business data in a store. It represents some sort of business data or user interface state. An entity is defined as a typescript custom object type, like in the example below

export interface EarlyconfigState <earlyConfig> {
  // additional entities state properties
  selectedId: number;
  loading: boolean;
  error: string;
  query: EarlyconfigSearchQuery;
}

As can be seen, the entity has a unique identifier field called selectedId. This unique id can be either a string or a number. It is a technical identifier that is unique to a given instance of the entity. Most data stored in a store are entities.

EntityState, EntityAdapter, createEntityAdapter

Ngrx Entity is a small library that helps keep entities in an ideal entity state format. It is designed to be used in conjunction with the Ngrx store and it is a key part of Ngrx ecosystem. Let us take a deeper look to see how entity helps in writing an Ngrx application.

export interface EarlyconfigState extends EntityState<earlyConfig> {
  // additional entities state properties
  selectedId: number;
  loading: boolean;
  error: string;
  query: EarlyconfigSearchQuery;
}

From the example code above we inherit our properties from EntityState. It is imported from the @ngrx/store. The EntityState makes it easier to manipulate entities.
To use the EntityState and other features of Ngrx Entity, an EntityAdapter needs to be created. This adapter is a utility class that provides a series of utility functions that are designed to make it simple to manipulate entity state. The adapter allows all initial entity state to be written. Let us take a look at it in action

export const EarlyconfigAdapter: EntityAdapter<earlyConfig> = createEntityAdapter<earlyConfig>();

The adapter can now be taken and used to define the initial state that will be needed for the reducers. This reducers will be implemented like in the code below.

export const initialEarlyconfigState: EarlyconfigState = EarlyconfigAdapter.getInitialState({
  // additional earlyconfig state properties
  selectedId: null,
  loading: false,
  error: '',
  query: {
    filter: '',
    sorting: '',
    limit: 999,
    page: 1
  }
});

The adapter in turn can be used to write reducer functions and logic.

export function EarlyconfigReducer(state = initialEarlyconfigState, action: EarlyconfigActions): EarlyconfigState {
  switch (action.type) {
    case EarlyconfigActionTypes.CreateEarlyconfig:
      return {
        ...state,
        loading: true,
        error: ''
      };

    case EarlyconfigActionTypes.CreateEarlyconfigSuccess:
      return {
        ...EarlyconfigAdapter.addOne(action.payload.result, state),
        loading: false,
        error: ''
      };

    default:
      return state;
  }
}

Benefits of Entity Adapter

Using adapters to write reducers spares a lot of work and helps in avoiding common reducer logic bugs. The adapter prevents the problem of mutating the store state, as well as reducing the amount of code needed to write reducers to the barest minimum.
Ngrx Entity helps with the commonly needed selectors. This selectors are then ready to be used directly in a component or as a starting point for building other selectors. Though the ngrx Entity allows the writing of state, reducer and selector logic to be easier, the reducer function itself still has to be written. Using the Ngrx Entity does not avoid having to write reducer logic for each entity. It makes it simpler.

The convention to be followed is to pull all the closely related code that uses the adapter directly into the same file where the entity reducer function is defined.

export function EarlyconfigReducer(state = initialEarlyconfigState, action: EarlyconfigActions): EarlyconfigState {
  switch (action.type) {
    case EarlyconfigActionTypes.CreateEarlyconfig:
      return {
        ...state,
        loading: true,
        error: ''
      };

    case EarlyconfigActionTypes.CreateEarlyconfigSuccess:
      return {
        ...EarlyconfigAdapter.addOne(action.payload.result, state),
        loading: false,
        error: ''
      };

case EarlyconfigActionTypes.SearchAllEarlyconfigEntities:
      return {
        ...EarlyconfigAdapter.removeAll(state),
        loading: true,
        error: ''
      };

    case EarlyconfigActionTypes.SearchAllEarlyconfigEntitiesSuccess:
      return {
        ...EarlyconfigAdapter.setAll(action.payload.result, state),
        loading: false,
        error: ''
      };

    case EarlyconfigActionTypes.SearchAllEarlyconfigEntitiesFail:
      return {
        ...state,
        loading: false,
        error: 'Earlyyearsconfig search failed: ' + action.payload.error
      };
    default:
      return state;
  }
}

In practice each entity has slightly different reducer logic so
that there would be no code repetition between reducer functions.
In conclusion, Ngrx Entity is an extremely useful package. In order to understand it, it is essential to first be familiar with the base store concepts like Actions, Reducers and effects. You can find lessons using the link below

Link understanding-ngrx-actions-reducers-and-effects

Ngrx Entity is designed to handle only the business entities in a store making it simple to store such entities in memory in a convenient way.

Selectors

Selectors are pure functions used for obtaining slices of store state. Ngrx store provides some helper functions for optimizing this selection. When selecting slices of state, selectors provide many features like

Portability
Memoization
Composition
Testability
Type safety

createSelector function

When using the createSelector function, the Ngrx store keeps track of the latest arguments in which a selector function was invoked. The last result can be returned when the arguments match without revoking a selector function. This is possible because of the nature of selectors which are pure functions.
This provides performance benefits especially with functions that perform expensive computation.
The createSelector function can be used to select some data from the same state based on several slices of the same state. let us take a look an example

export const getSelectedId = (state: EarlyconfigState) => state.selectedId;
export const getLoading = (state: EarlyconfigState) => state.loading;

We are getting our state from the reducer file. We have a getSelectedId and getLoading object. The createSelector method creates a result that filters some of the state by another section of the state and brings the state up to date.
The selector looks like this

export const {
  selectIds: EarlyconfigIds,
  selectEntities: EarlyconfigEntities,
} = EarlyconfigAdapter.getSelectors(getEarlyConfigState);


export const currentEarlyconfigId = createSelector(
    getEarlyConfigState,
  getSelectedId
);

export const currentEarlyconfigIds = createSelector(
  getEarlyConfigState,
  EarlyconfigIds
);

The selector function returned by calling createSelector initially has a memoized value of null. After a selector is invoked the first time its value is stored in memory. If the selector is subsequently invoked with the same arguments, it will re-compute and update its memoized value. A selectors memoized value stays in memory indefinately. If the memoized value is a large dataset that is no longer needed, it is then possible to reset the memoized value to null so that the large dataset can be removed from memory. This is achieved by invoking the release method on the selector.

currentEarlyConfigId.release();

Event Handling in Angular

Muhammad Muhktar Musa — Wed, 08 Sep 2021 18:32:25 +0000

Understanding event and event handling is a key to understanding angular..
Angular always looks to see if the name in a DOM matches any event property of a known directive or not. We are going to have a look at
event and event handling, custom events with event emitter, structural directives , two way binding, input and output decorators.

Event and Event Handling

in an event binding, angular sets out an event handler for the target event. When the event is raised, the handler executes the template statement
the template statement typically involves a receiver which performs an action in response to the event. This event could be like storing values
from the html control into a model.
The binding conveys information about the event. This information can include data values such as event objects, string or number named $event
The target event determines the shape of the $event object. If the target event is a native DOM element event, then $event is a DOM event object with properties such as target and target.value
Let us take a look at an example

<input [value] ="currentItem.name"
 (input) = "currentItem.name = $event.target.value">

without ngModel
The code sets the value property by binding to the name property. To listen for changes to the value, the code binds to the input event of the element.
When the user makes changes the input event is raised and the binding executes the statement within a context that includes the DOM event
object ($event)

Custom events with event emitter

In angular, directives typically raise custom events with an angular EventEmitter.
example

<img src="{{itemImageUrl}}" [style.display]="displayNone">
<span>{{item.name}}</span>
<button (click)="delete()">Delete</button>

on the ts file

 @Output() deleteRequest = new EventEmitter<item>();
  delete() {
    this.deleteRequest.emit(this.item);
  }

The component defines a deleteRequest property that returns an EventEmitter. When the user clicks delete, the componentinvokes the delete()
method. The component tells the EventEmitter to emit an object.
Imagine hosting a parent component that binds to the deleteRequest event of the above component.

<app-messages (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-messages>

When the delete request event fires, angular calls the parent components deleteItem() method. It passes the item to the delete in the $event variable.

Structural Directives

Structural directives are directives that can add or remove an element from the DOM. we have several structural directives.
Let us take a look at them

*ngIf

An element can be added or removed from the DOM by adding an *ngIf to a host component. The directive is binded to a conditional expression

<app-messages *ngIf="isActive" [item]="item"></app-messages>

Do not forget the star sign. It is a vital part of this structural directives. In the above code, when the isActive expression returns a truthy value, *ngIf adds the component to the DOM. When the expression is falsy, *ngIf removes the component from the DOM destroying the component
and all its sub component.

*ngFor

It is a repeater directive. It presents us with a way to present a list of items. Let us take a look at an example
Define a block of html that defines how a single item should be displayed. Tell angular to use that block as a template for rendering each item in the list.

<div *ngFor="let item of items">{{item.name}}</div>

The string "let item of items" means take each items in the items array, store it in the local item looping variable and make it available
to the templated html for each iteration.

Template reference variable (#var)

This a template variable often depicted with the symbol #. It is often a reference to a DOM element within a template. It can also refer
to a directive which contains a component, an element, a TemplateRef or a web component. To declare this template variable/reference variable, the symbol # is used.

<input type="text" class="form-control ng-untouched ng-pristine ng-valid" id="name"
  #name="ngModel"
         required
         [(ngModel)]="model.name" name="name">

The #name in the input element refers to a template variable called name that is binded in a two way by the ngModel. You can refer to the template variable anywhere in the template component further down the template.

<input type="text" class="form-control ng-untouched ng-pristine ng-valid" id="name"
  #phone  placeHolder ="Phone number"/>

  <! --lots of other elements -->


<button type="button" class="btn btn-default" (click)="cellPhone(phone.value)">Call</button>

##### @Input() and @Output() properties
This two properties allow angular to share data between the parent content and the child directives or components. The major difference between them is that the @Input() property is writeable while the @Output() property is observable. For example

 <parent-component>
    <child-component></child-component>
</parent-component>

The @Input() and @Output() properties will act as the api for the child component in that they allow the child component to communicate with the parent component. @Input() allows data to flow into the child component while @Output() allows data to flow out of the child component. The @Input() and @Output() properties are independent of each other. If the child component needs to send only data to the parent component, an @Output() property is needed. If the child component needs to receive data from the parent component an @Input() property is needed.
The @Input() property is used in a component or directive to let angular know that a property in that component can receive its value from the its parent component i.e data flows from parent to child.
@Output() marks the property in a child component as a doorway through which data can travel from the child to the parent. The child component then has to raise an event so that the parent component knows that something has changed. @Output() works hand in hand with the EventEmitter to emit custom events.
Lets us take a look at an example
In the child component class

import {Output, EventEmitter} from '@angular/core'

decorate a property with @Output() in the child component class

 export class myFormComponent {

  @Output()  newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
  this.newItemEvent.emit(value)
}
 powers = ['Really smart', 'Flexible','Super hot', 'Weather changer'];

}

in the child HTML template, add

 <label> Add an Item <input #newItem/></label>
 <button (click)="addNewItem(newItem.value)"> Add to parent list</button>

in the parent component

 export class AppComponent {


  items = ['Really smart', 'Flexible', 'Super hot', 'Weather changer'];

  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

and in the parent HTML component add

<app-item-output (newItemEvent)="addItem($event)"></app-item-output>

The event binding (newItemEvent)="addItem($event)", tells angular to connect the event in the child newItemEvent to the method in the parent addItem(); and that the event the child component is notifying about is to be the argument of addItem();. The $event contains the data that the user types into the in the child template user interface.
For the @output property to come into effect we add a structural directive to the parent template

<ul>
    <li *ngFor = "let item of items">{{item}}</li>
</ul>