What is it?

It’s a built in Node.js module that allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP). If you want to use it all that is needed is this code.

const http = require(‘http’); //to use HTTP require http

Create a server

The module can be use to create a server ,which can handle requests and responses. To set it up use the following code.

//create a server object:

http.createServer((request, response) =>{

});//the callback function is called the request handler

The request handler is called once for every HTTP request that’s made against that serve. The Server object returned by createServer is actually an EventEmitter. The code is just shorthand for creating a server object and then adding the listener later. The same server can be created like this.

//create a server object:

const server = http.createServer();

server.on(‘request’,(request, response) =>{

});

Requests

The following code can be used to handle requests from the server.

http.createServer((request, response) =>{
const { headers, method, url } = request;
// request.headers, request.method, request.url
let body = [];
request.on(‘error’, (err) => { // Check for errors
console.error(err);
}).on(‘data’, (chunk) => { // Adds data to the body in chunks
body.push(chunk);
}).on(‘end’, () => {
body = Buffer.concat(body).toString(); // toString() decodes the data
// we have the headers, method, url and body, and can now
// do whatever we need to in order to respond to this request.
});
}).listen(3000); // Activates this server, listening on port 3000.

Responses

Now let’s set up our responses to the requests.

response.on(‘error’, (err) => { // Check for errors
console.error(err);
});
response.writeHead(200, {‘Content-Type’: ‘application/json’});
//response.statusCode = 200;
//response.setHeader(‘Content-Type’, ‘application/json’);

const responseBody = { headers, method, url, body };
// response.headers, response.method, response.url, response.body
response.write(JSON.stringify(responseBody));
response.end();

Routes

Routes for http requests can be set up now. Let’s look at a get and post.

//GET messages

if (request.url === ‘/classes/messages’ && request.method === ‘GET’) {

statusCode = statusCode || 200; // success code

response.writeHead(statusCode, headers);

const obj = { results: database };

response.end(JSON.stringify(obj));

}

// POST a message to the database

if (request.url === ‘/classes/messages’ && request.method === ‘POST’) {

response.writeHead(201, headers); // post code

const accumulatedData = [];

request.on(‘data’, function (chunk) {

accumulatedData.push(chunk);

}).on(‘end’, function () {

accumulatedData = Buffer.concat(accumulatedData).toString();

database.push(JSON.parse(accumulatedData));

console.log(database);

});

response.end(JSON.stringify(database));

}

When setting up routes, you will also want to send a 404 code for any routes not on the server.

// send a 404 status code if the url is not correct
if (request.url !== ‘/classes/messages’) {
response.writeHead(404, headers);
response.end(‘wrong header’);
}

Now you have your server set up, and you can send people to websites on your local host using this route.

What are component lifecycle events?

React lets you define components as classes or functions. The methods that you are able to use on these are called lifecycle events. These methods can be called during the lifecycle of a component, and they allow you to update the UI and application states.

Mounting, Updating, and Unmounting are the three phases of the component lifecycle.

Mounting

When an instance of a component is being created and inserted into the DOM it occurs during the mounting phase. Constructor, static getDerivedStateFromProps, render, componentDidMount, and UNSAFE_componentWillMount all occur in this order during mounting.

Updating

Anytime a component is updated or state changes then it is rerendered. These lifecycle events happen during updating in this order.

static getDerivedStateFromProps, shouldComponentUpdate, render,
getSnapshotBeforeUpdate, componentDidUpdate, UNSAFE_componentWillUpdate, UNSAFE_componentWillReceiveProps

Unmounting

The final phase of the lifecycle if called when a component is being removed from the DOM. componentWillUnmount is the only lifecycle event during this phase.

constructor()

The constructor for a React component is called before it is mounted.If the component is a subclass you should call super(props), or the props will be undefined. constructors can be used to assign state using this.state or to bind event handle methods to an instance. Let’s take a look at some example code.

class FishTableRow extends React.Component {

constructor() {

super(props); //gives us access to props

//Don’t call this.setState() here

this.state = { //intitialize local state

showDescription: false

}; }

Avoid using this.setState() in the constructor because it can lead to side effects, and it is unnecessary. Doing this will ignore all updates to props, so it shouldn’t be done unless it is intentional.

static getDerivedStateFromProps()

This method exists for rare cases where the state relies on changes in props over time.

render()

Render is the only required method in a class component. It will examine this.props and this.state when called. The render function should not modify the component state because it would cause a lot of bugs by changing the state every time it rerenders. I also should not directly interact with the browser. render will not be invoked if shouldComponentUpdate() returns false. Here is an example of using render.

ReactDOM.render(

<FishTable fishes= {fishData}/>,//set fishes document.getElementById(‘app’)

);

componentDidMount()

This method is invoked immediately after a component is mounted. If you need to load anything using a network request or initialize the DOM, it should go here. This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().

setState() can be called here, but it should be used sparingly, because it will cause a rerender, which can lead to perfomance issues.

Here we use componentDidMount() to connect to the YouTube API and get videos when the components is rendered.

componentDidMount() {

console.log(‘got videos’);

this.getVideos(‘cats’);

}

getVideos(query) {

var options = {

key: this.props.YOUTUBE_API_KEY,

query: query

};

shouldComponentUpdate()

The default behavior in react is to rerender after every state change. Setting shouldComponentUpdate() to false allows you to prevent this from happening. This is in order to optimize performance. If you want to use this method, it may be better to use PureComponent instead, which performs a shallow comparison of props and state. If you do decide to use this method, be sure to check the previous props and state with the current props and state. If shouldComponentUpdate() returns false, then UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked.

getSnapshotBeforeUpdate()

This is another rarely used method that allows you to capture a picture of the DOM to check it before actually changing anything on the DOM.

componentDidUpdate()

This method is useful for performing network requests after a change has occurred.

componentDidUpdate(prevProps) {
// Typical usage (don’t forget to compare props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}

componentWillUnmount()

This method allows you to clean up the DOM and netwrok requests/ subscriptions.

UNSAFE Lifecycle Events

UNSAFE_componentWillMount()

UNSAFE_componentWillUpdate()

UNSAFE_componentWillReceiveProps()

These events have lead to a lot of bugs and unintended side effects, so in React 17 these will no longer be able to be used without the UNSAFE tag in front of them. Instead of componentWillMount use ComponentDidMount.
Instead of componentWillReceiveProps use static getDerivedStateFromProps.
Instead of componentWillUpdate us getSnapshotBeforeUpdate.

Here is a handy chart to help you keep track of the lifecycle events

https://reactjs.org/docs/react-component.html

What is a Linked List?

A linked list is a linear data structure where each element is a separate object usually called a node. A node is comprised of the data and a reference to the next node. The last node has a reference to null. The head of the linked list is not a separate node. It is a reference to the first node. If the list is empty then the head is a null reference. This type of linked list is called a singly linked list.

A doubly linked list has two references, one to the next node and another to previous node.

What is a Linked List Cycle?

A cycle occurs when the linked list is no longer linear with a beginning and end — instead, it cycles through a loop of nodes.

How Can I Check for a Cycle?

The problem of checking for a cycle in a linked list may seem intimidating at first, but using Floyd’s Tortoise and Hare algorithm it is easy to understand and solve. The idea is to use a slow pointer named “tortoise” and a fast pointer named “hare”. The tortoise starts at the 0 position and the hare starts at the 1 position. If the tortoise moves 1 place at a time and the hare and 2 places at a time, will they ever meet?

Yes. If you draw out each movement, you can see that the place they meet is a cycle.

Let’s look at some JavaScript code implementing this.

We will create two variables for the slow and fast pointers.

We will create a while loop to go over each node in the list as long as the hare node exists and has a next node. If either the hare or the next node are null, then the list does not end in a cycle, so we will return false.

Now we just need to move the tortoise and hare. If at any time the two pointers are equal, then the linked list contains a cycle.

Now we have a working solution to check for linked list cycles in JavaScript. I hope that this solution was helpful. More on linked list cycles can be found here.

• LinkedLists
• Cycle detection - Wikipedia
• Floyd's Cycle detection algorithm | Determining the starting point of cycle

A higher order function is a function that takes a function as an argument(s) and/ or returns a function.

JavaScript has a lot of useful native higher order functions that you can use: map, filter, sort, reduce and bind are a few.

When should I use higher order functions?

Higher order functions are useful when you want to customize the behavior of a function or you want to use that function to do the same thing many times.

Sort

The sort functions allows us to choose the order to sort the array of objects. We input an anonymous function as an argument and return person1.age minus person2.age. This returns an array of objects that are now sorted by age. Cool right?

More information can be found on using sort here.

Array.prototype.sort() - JavaScript | MDN

Why should I use higher order functions?

They are easier to read and debug. Using higher order functions will save you a lot of time and typing in the long run.

Higher order functions are completely customizable, and they let you do cool stuff.

Map

Map allows you to input a function as an argument, and it returns a new map containing the values after the function is called. It is useful for performing mathematical operations on each item in an array, or any time you want a new array of values modified by a function. More on map can me found here.

Here map takes every item in the array, performs a function on it and returns a new array of the results.

Array.prototype.map() - JavaScript | MDN

Higher Order functions are completely customizable

You can create a higher order function any time to do anything. Reduce is one of the most useful higher order functions.

Reduce

Reduce can be customized to do just about anything, which makes it one of the most useful higher order functions. Here I use reduce to flatten nested arrays.

Here I use reduce to sum an array of numbers.

More on using reduce can be found here.

• A Guide To The Reduce Method In Javascript​
• Array.prototype.reduce() - JavaScript | MDN

There are also a lot of great libraries out there with useful higher order functions. Underscore and Lodash are pretty useful libraries that I encourage you to explore. You can always write your own high order functions, and make a library to use of your own.

• Underscore.js
• Lodash