DEV Community: JCorley44

Javascript Promises

JCorley44 — Mon, 20 Jul 2020 04:11:24 +0000

A promise is an object that can potentially turn into a value in the future. The value will either be resolved or unresolved and if it does resolve it will be either resolved, rejected or pending. A better example of this would be to conceptually think of a promise in javascript just like a promise you might make to someone in real life. When you make that promise it will either be unresolved or resolved. While waiting for the promise to be fulfilled it has three stages of existence as mentioned previously: resolved, rejected or pending.

Stages of a Promise

Resolve: the promise will have a value
Reject: the promise has failed
Pending: the stasis period of waiting for the promise to receive either of the two previously mentioned states.

Example of a Promise

 let firstPromise = new Promise(function(resolve, reject) {
  setTimeout(function() {
      resolve('I will only eat one cookie');
  }, 2000);
});

firstPromise.then(function(data) {
  console.log(data); //will log 'I will only eat one cookie' after two seconds
});

Promises have become the standard way to deal with asynchronous code. Asynchronous coding models let multiple code blocks execute at the same time. It allows for new actions to start while the program is being ran. In the example the firstPromise is using resolve to fulfill the promise. After we use the then function to bind a callback so we can use the data from the resolve function. It is possible to bind multiple callbacks too!

var indecisivePromise = new Promise(function(resolve, reject) {
  setTimeout(function() {
      resolve('I will only eat one cookie');
  }, 2000);
});

indecisivePromise.then(function(data) {
  console.log(data + ' hopefully.');
});

indecisivePromise.then(function(data) {
  console.log(data + ' maybe.');
});

indecisivePromise.then(function(data) {
  console.log(data + ' I make no promises.');
});

Promises can only be resolved once. The method then can be chained but there can only be one resolve. Just like in real life once a promise has been fulfilled you can not fulfill the same promise for a second time unless you have another condition to the promise. That's why the then method is useful. IT

let multiResolvePromise = new 

Promise(function(resolve, reject) {

  setTimeout(function() {

//only this will revolve
      resolve('first resolve');

//the promise ends after the first resolve
      resolve('second resolve');
      resolve('third resolve');
      resolve('fourth resolve');
  }, 1000);
});


multiResolvePromise.then(function success(data) {
  console.log(data); //will print 'first resolve'
});

What happens if the promise is not fulfilled? The catch method allows us to have an output if the promise fails.

const failedPromise = new Promise((resolve, reject) => {

  let numberOfCookies = 1000000;

  if (numberOfCookies < 1) {
    resolve('Good job you only at one cookie!')
  } else {
    reject('I knew you would eat more than one, but one million that is madness.')
  }
});

failedPromise.then((resolveData) => {
  console.log(resolveData)
}).catch((rejectData) => {
  console.log(rejectData)
});

Since the conditional statement above is false the promise fails so the resolve method will not trigger thus leaving the promise unfulfilled.

Conclusion

Promises allow for coding asynchronously to be easier to understand and avoid using more complicated programming strategies. Promises will either resolve or reject depending on the criteria of the promise object. Once the promise is pending we can then chain then and catch to implement more intuitive asynchronous code instead of venturing into a "callback hell". If we were to use a lot of callbacks the code would be extremely hard to follow and become unruly making errors and debugging much harder to do.

Understanding ReactJS

JCorley44 — Mon, 13 Jul 2020 03:17:33 +0000

React or ReactJS is a software framework that allows coders to build user interfaces (UI) for different web applications or websites. A software framework is a library of code that allow for easier and faster programming. Frameworks can remove some of the complexities of coding since they can take care of some of the background work. The ReactJS has a few advantages which allows it to excel in web app development.

Virtual DOM

The ReactJS has a virtual Document Object Model (DOM) which is the primary structure of the HTML document. The DOM is very resembles a tree datatype filled with objects that the programmers can manipulate. Anytime a change is made to the DOM the webpage may have to reload. A change to the DOM can be caused my input from the user, a search, sending or receiving information from a server which can potentially cause the webpage to run slowly. ReactJS uses a virtual DOM to circumvent this potential hiccup. The virtual DOM is a shallow copy of the DOM. The DOM is only updated once the virtual DOM has interacted with it.

https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-reactjs-and-react-native/

Instead up updating the entire DOM, which is not efficient, ReactJS hold two copies of the virtual DOM in memory. One of the copies is the DOM before the update, while the other copy is the DOM after the update. ReactJS then will find any elements that have been altered and only update the parts of the real DOM that were altered. This allows for the website to be fluid with its updates and helps the application performance.

Components that are reusable

Components are reusable parts of code and begin to build the structure of the ReactJS framework. The components in ReactJS are very similar to JavaScript functions, they take a parameter and return a value. The input parameter for the component is called props,

and the return value will be displayed on the DOM. There are two ways to define a component, either as a function or class.

function Greeting(props) {
            return <div>Good afternoon, {props.codename}</div>;
          }

Above is defining a component as a function. As stated previously its parameter is props, which is an object, and the return value is a React element. This definition is considered to be stateless. These will print what was given to them and are deterministic, they will print what they are given.

class Greeting extends React.Component {
            render() {
              return <div>Good afternoon, {this.props.codename}</div>;
            }
        }

This is using ES6 class syntax defining the same component. The return value here will still display on the DOM but the render method makes that possible. The components defined in this manner are considered to be stateful. This means that they are capable of holding on the values of the input data if it is changed. The state of the component can be updated at any time. Below is an example of updating the state of a ReactJS component.

class AnimeShow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      genre: 'anime',
      title: 'My Hero Academia',
      numberOfSeasons: 3
    }
   }
}
correctDetails(){
  this.setState({
    numberOfSeasons: 4
  })
}

Conclusion

ReactJS allows for fluid updates to the DOM since the entire page does not need to be refreshed. Building the application is also extremely easy due to components. Components can be reused as many times as needed and carefully choosing when to use stateful and stateless components is essential to writing a good application. Using stateful components when the values are going to need updating and stateless components when you only need to print them.

Backtracking Algorithms

JCorley44 — Mon, 06 Jul 2020 03:13:19 +0000

Last week I tackled n-queens, it was my first introduction to coding a backtracking algorithm. This type of algorithmic technique is best used for finding solutions step by step, building a solution and modifying it over time until there is a solution that satisfies all the current constraints. These types of algorithms are used in the 8-queens puzzle, crossword puzzles, Sudoku and some logical programming languages. Using backtracking to solve a sudoku puzzle:

Place a single number in each square
If the number that is placed cannot be in the spot we will backtrack/recurse and try the next number

Solving the problem using a backtracking algorithm is faster than attempting to generate all possible solutions, also called the naive approach. Using the backtracking technique will eliminate a lot of permutations that you would have to generate if you were to solve this puzzle with a naive approach. Iterating through a tree datatype is another example of this algorithmic technique. During the 8-queens sprint we needed to place 8 queen chess pieces on a chessboard so that none of them could attack each other. The same thought process of solving sudoku also applies here. First you place one piece then check for any horizontal and diagonal conflicts, then place the next piece. Once that piece is placed you check for more conflicts if there is one them move that piece to the next space. Each solution will be generated one square at a time and if there is a conflict we backtrack. The code below is from n-queens and is checking for any rook solutions.

findNRooksSolution = function (n) {

  //creating a new board
  let newBoard = new Board({ 'n': n });

  //iterating over the board object
  for (let col in newBoard.rows()) {

    //creating an array of row and col values
    let arr = newBoard.rows()[col];

    //placing a piece
    arr[col] = 1;
  }

Backtracking in Tree Data Structure

Starting at the root node, 1, and iterating until we get to the leaf with the value of 7. If the first node the algorithm looks at is bad it will backtrack to the parent node then go to the correct branch until the desired value is reached. Below is a code example of how this process is implemented.

treeMethods.contains = function (target, obj = this) {
  //if the target is strictly equal to the value
  if (obj.value === target) {
    //true is returned
    return true;
  }
  //checking the length of the children
  else if (obj.children.length > 0) {
    //setting default value of result to false
    let result = false;

    //iterating over the the array of children
    obj.children.forEach(child => {
      //using a recursive call to check nested nodes
      if (obj.contains(target, child)) {
        result = true;
      }
    });
    return result;
  }
}

Above is a code example of what a function that searches for a value within a tree and below is the pseudocode code thought process of the above code.

function (target) {
    if(target is equal to the leaf node){
        return true
    } else {
        forEach(child node of the current leaf node) {
            if(recursive call is true)
               return true
        }
        return false
    }
}

As mentioned previously logical programming languages such as Icon, use algorithmic backtracking to generate answers internally.

This or That........Object. Understanding This

JCorley44 — Mon, 29 Jun 2020 00:20:28 +0000

This always refers to an object, the question is which object. The object that this refers to depends on how it is used in your code and where it is at the time of invocation. There are a few ways to ways invoke this to always know what you are referencing.

Method Invocation

In this example the keyword this is bound to the detective object that it's encapsulating function is in. Due to scoping, instead of this pointing to the global window, like from free function invocation, this belongs to the detective object. Another way to verify this is to look to the left of the dot at call time. Anytime the wellID function is invoked it will be as a method of the detective object, this is what this will refer to.

var detective = {
  firstName: "Akihito",
  lastName : "Narihisago",
  id     : 'Sakaido',
  wellID : function() {
    return `My name is ${this.id}, and I am the brilliant detective. `;
  }
};
console.log(detective.wellID()) //My name is Sakaido, and I am the brilliant detective.

Free Function/Global Invocation

Unlike in the example above, where this is used within the lexical scope, of the detective object, here this is freely called.

const file01 = {
  suspectCodeName: 'Perforator',
  firstName: 'Tamotsu',
  lastName: 'Fukuda',
  proof: this
};
console.log(file01.proof) //will print global window

This will log the global window to the console. This is a value inside of the file01 object but due to that object being inside of the global window and not in another closure, this has the value of the global window.

.apply(), .bind() & .call()

These three methods allow us to use this no matter how it has been invoked. Each one of those methods apply this in a different way.

.apply() & .call()
These methods invoke the function with this having a new context. The difference between the two methods is .apply() takes arguments as an array while .call() takes them as a list.

function scenario(tools, quirk) {
  return `${detective.wellID()}${this.firstName} ${this.lastName} also known as
  the ${this.suspectCodeName} has been found and captured. The ${tools} helped with his capture.
   Since he had a ${quirk} it disrupted the ${tools} and made his apprehension more difficult.`;
}
console.log(scenario.apply(file01, ['cognition particles', 'hole in is head']));

// My name is Sakaido, and I am the brilliant detective. Tamotsu Fukuda also known as the Perforator
// has been found and captured. The cognition particles,hole in is head helped with his capture.
// Since he had a undefined it disrupted the cognition particles,hole in is head and made his
// apprehension more difficult.

.bind()
This method creates a new function that will set this to the given value when the function is invoked.The .bind() invocation has a lot less code when used but the new function must be saved to a variable.

let usingBind = scenario.bind(file01, ['cognition particles', 'hole in is head'])
  console.log(usingBind());
  // My name is Sakaido, and I am the brilliant detective. Tamotsu Fukuda also known as the Perforator
  // has been found and captured. The cognition particles,hole in is head helped with his capture.
  // Since he had a undefined it disrupted the cognition particles,hole in is head and made his
  // apprehension more difficult.

Constructor Invocation
When using this with constructor invocation, this will be bound to the new instance of the constructor object, only when the new keyword is used. All of the objects created from that object will have the same properties.

const File = function(codeName, firstName, lastName) {
  this.codeName = codeName;
  this.firstName = firstName;
  this.lastName = lastName;
}

const newCase = new File('Gravedigger', 'Haruka', 'Kazuta');
console.log(newCase); //logs a new object

Having this knowledge this or knowing what it is referencing should no longer be an alien concept.