this refers to an object which is executing the current bit of JavaScript code. There are 4 rules.

1. Simple Function Call

this is the global object in non-strict mode, and undefined in strict mode.

2. Implicit Binding

this points to the object on which the function is called (what’s to the left of the period when the function is called)

3. Explicit Binding

We can explicitly tell the JavaScript engine to set this to point to a certain value using call, apply or bind.

4. new Binding

Using the new keyword constructs a new object, and this points to it.

Summary

The JavaScript this keyword refers to the object it belongs to

  • In a method — this refers to the owner

1. Implement your own content delivery network (CDN)

A collection of global servers share a website’s static files, such as CSS or Javascript, and they deliver from the server closest to the user’s physical location. In other words, when a user clicks on a video, the file loads faster because it’s distributed from a server nearby.

2. Use adaptive images

Most of the website’s page weight is from images. Use tools such as Picturefill or Adaptive Images to save bandwidth and improve page speed. Or adopt new image formats such as WebP and JPeg XR to reduce image weight without sacrificing image quality.

3. Cache

Browser caching stores cache versions of static resources. When a user visits a page, usually the cached version displays unless it has changed from when it was last cached. …


Depth First Search

  • Uses a Stack data structure
  • It is an edge based technique
  • It performs two stages, first visited
  • Might traverse through more edges to reach a destination vertex from a source
  • Is more suitable when there are solutions away from the source
  • Is more suitable for game or puzzle problems. We make a decision then explore all paths through this decision. And if this decision leads to win situation, we stop.
  • Complexity is O(V+E) when adjacency list is used and O(V²) when Adjacency Matrix is used, where V stands for vertices and E stands for edges
Image for post
Image for post

Breadth First…


  1. What is a state?
  • It is an object that holds some information that may change over the lifetime of the component
  • Try to make the state as simple as possible and minimize the number of stateful components
  • state is similar to props, except it is private and fully controlled by the component
  • state is not accessible to any component other than the one that owns and sets it

2. What are props?

  • props are inputs to components
  • They are single values or objects containing a set of values that are passed to components on creation
  • They are data passed down from a parent component to a child…

  1. What is React?
  • It is a front-end Javascript library developed by Facebook in 2011
  • It uses the component based approach which helps in building reusable UI components

2. What are features of React?

  • It uses virtual DOM
  • It uses server-side rendering (this is a technique for rendering a client-side single page application on the server and then sending a fully rendered paged to the client)
  • It follow uni-directional data flow or data binding (state is passed to the view and child components)

3. What are some major advantages of React?

  • It increases the application’s performance
  • It can be conveniently used on the client as well as server…

In JavaScript, we can check if a variable is an array by using 3 methods.

  1. isArray method
  2. instanceof operator
  3. checking the constructor type if it matches an Array object

Method 1: isArray Method

Checks…


Definition

  • ES5 stands for ECMA Script 5.
  • ES6 stands for ECMA Script 6.
  • ECMA is a scripting language used to standardize JavaScript and used for client-side scripting for websites.

Data Types

  • ES5: Supports data types, such as string, number, Boolean, null and undefined.
  • ES6: Introduced SYMBOL for unique values.

Arrow Function

  • ES5: Both functions and return keywords are needed to define the function
//ES5
var multiply = function(x,y) {
return x * y;
};
  • ES6: Keywords are not not needed to define the function
//ES6
const multiply = (x,y) => { return x * y };

Object Manipulation

  • ES5: Consumes more time when processing
  • ES6: Can be processed smoothly due to destructing and special…


Image for post
Image for post

TLDR;

Manipulating the virtual DOM is like editing a blueprint.

Manipulating an actual DOM is like moving rooms in an actual house.

What problem does React Virtual DOM solve?

  • Current day websites require lots of DOM manipulation.
  • Why are most, other JavaScripts frameworks slow? JavaScript frameworks update the DOM much more than they have to.
  • For example, you have a list than contains 10 items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That is 10 times more work than necessary. Virtual DOM only updates what is necessary.
  • Virtual DOM solves the issue of slowness with efficient updating.

What is Virtual DOM?

  • In react, for every DOM object, there is a corresponding Virtual DOM object. …


Image for post
Image for post
Photo by Bench Accounting on Unsplash

What does setState do?

  • Updates the component’s state object
  • When a state changes, the component responds by re-rendering

How do you initialize a state variable?

Here we are setting the myCount state to 0 by setting this.state to { myCount: 0} inside the constructor.

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
myCount: 0
};
}

How do you read a state?

When you want to display the current myCount variable, we write this.state.myCount.

<p>You clicked {this.state.myCount} times</p>

In a function, you can use the variable myCount directly.

<p>You clicked {myCount} times!</p>

How do you update a state?

In a class, we need to call this.setState() to update the myCount state.

<button onClick={()=>this.setState({count:this.state.myCount+1})}>    
Click me!
</button>

In a function, it will be as so. We do not need the keyword this.

About

Marika Lam

👩‍💻 Software engineer 📍Bay Area

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store