crashedout93

[crashedout93]

Request Response Cycle

As coders/hackers, we continue to build up our skills as we learn more about React, Ruby, and bringing them together to create a full stack web application. At some point as our confidence builds, we will be communicating with a server our building our own server to make our web applications fully functional. Let’s start with the 1st process of this cycle, the client. 

Once a client inputs a website they would like to display like facebook.com, the letters http automatically pull up in front of the entire text. This stands for Hypertext Transfer Protocol. It encrypts the code and builds a HTTP request to send to the server. 

That information is sent through the web pipe line and reaches the server and the server decrypts the information and goes through its data base or library to find the data that matches with the request from the client and it begins to send that information back. 

Once the information has been matched to the data base, the server then builds out an HTTP response to send that information back to the client through the digital pipe line or fiber optic cables.

The browser that the client is using then receives the HTTP response back and displays it on the client webpage. 

Inputting the wrong characters can bring up a page that displays, “did you mean” with alternate links that are close to what you typed in. If the page is offline, you can still click on the page but it will display a message stating this certain webpage is going under maintenance or it’s no longer reachable.  Or a 404 error will pop up saying the content that you are trying to reach can’t be found.

The end

[crashedout93]

.map() vs .forEach()

After using javascript for awhile and becoming familiar with the functions and how they work, you will become more comfortable with coding and have that go to feature to use when it may be needed. Key word is “MAY”, as in this one feature can get the job done, but either incorrectly or inefficiently. No one wants to go into an interview and use a feature that can get the job done but cause a delay due to it not being fully capable of what needs to be done. 

So what is they key difference between .map and .foreach?

.map()

Let’s say you have a variable filled with different type of content and want to pull that information into a new array and rename it. 

const fewPokemon = [

{

Name: Pikachu

Type: Electric

Fly: No

},

{

Name: Mew

Type: Psychic

Fly: Yes

},

{

Name:  Sandslash

Type: Ground

Fly: No

},

];

If you want to pull certain parts from the pokemon objects and rename them into their separate variable, you would invoke the following. 

const fighters = fewPokemon.map((pokemon) => fewPokemon.Name);

console.log(fighters); 

Will display, Pikachu, Mew, and Sandslash.

Same way works to get the type of pokemon they are. 

const pokeTypes = fewPokemon.map((pokemon) => fewPokemon.Type);

console.log(pokeTypes);

Will display, Electric, Psychic, and Ground. 

Now lets switch to the .forEach method

.forEach() will display a list of the items included along with index number placed in an array once invoked. For example,

let  DBZ = [”Goku”, “Vegeta”, “Freiza”, “Goahn”];

  In order to properly use this function, you would invoke the following, 

DBZ.forEach(Characters);

function Characters(item, index, array){

console.log(index, item)

0.”Goku”

1.”Vegeta”

2. “Freiza”

3. “Gohan”

They both have the functionality to pull information from a variable but depending on what you need done with that variable makes the difference. With .map() you can pull certain information from a variable and send that data into a new variable making a copy of the original and duplicating it with a new name.

With .forEach() this can be used to not only display the information, but to have the information do something in particular wether it’s styling it a certain way, appending them to an element, add the information into another object, etc. 

They both have the same capabilities but depending on the task at hand will depend on the proper function that should be used.

[crashedout93]

Arrays Vs. Objects

Arrays and objects can play a huge role when coding in javascript and keeping things organized from table charts, data structures, sports stats for individual players, etc. and are easy to access once structured properly. They are similar by the formats they are used for, but different in the way they are structured and how to access them. Let’s start with arrays.

Arrays are a list a values that are stored in a variable used with the [ ] notations. For example, const NBA = [’Mavericks’, ‘Celtics’, ‘Lakers’, ‘Bulls’]; 

This method stores the different teams or values inside the variable NBA. Once you console log NBA, it will display the arrays or values of what’s inside the variable NBA. 

Console.log(NBA); 

[’Mavericks’, ‘Celtics’, ‘Lakers’, ‘Bulls’]

You can also access these arrays independently and assign them to a different variable by invoking the following function,

let a = NBA[0];

a = ‘Mavericks’

The 0 indicates the nested array number and  begins with 0. 0 is 1, 1 is 2, 2 is 3 etc. 

You can also reassign an array by invoking the following function. 

NBA[0] = ‘Heat’;

If you console log NBA with the following change the outcome would be,

console.log(NBA);

[’Heat’, ‘Celtics’, ‘Lakers’, ‘Bulls’]

More information can be found about arrays on the following link. https://www.w3schools.com/js/js_arrays.asp

Objects are structured and accessed differently. They are variables as well and can contain many values. For example,

const WuTang =  { RZA: “Birth of a Prince”,  GZA: “Liquid Swords, Beneath the Surface”, Inspectah-Deck: “Uncontrolled Substance”, U-God: “Golden Arms Redemption”, Ghostface-Killah: “Ironman”, Method-Man: “Tical”, Raekwon: “Only Built 4 Cuban Linx”, Masta-Killa: “No Said Date”, Ol-Dirty-Bastard: “Return To The 36 Chambers: The Dirty Version”};

So many values that can fit into one variable. Very handy for keeping the data organized and more easier to find. It may seem like a cluster of information but it is easy to access each object. For example, the code above can be used to pin point each artist and their album invoking the following function. 

WuTang.RZA;

“Birth of a Prince” 

WuTang.GZA;

“Liquid Swords Beneath the Surface”

WuTang.Method-Man;

“Tical”

WuTang.Raekwon;

“Only Built For Cuban Linx”

WuTang.Ol-Dirty-Bastard;

“Return To The 36 Chambers: The Dirty Version”

WuTang is our variable or container that contains properties of each members name along with their album name which is called an object or the property value. 

This is the basic uses of arrays and objects and are very useful when dealing with multiple values of information. It makes keeping track of the data much easier and it is a simple process of storing data to a variable and calling the property from the variable once everything is stored properly. More  information can be found about objects in the link below

https://www.w3schools.com/js/js_objects.asp