October 2019

npm

npm (Node Package Manager) is a command line tool and helps organizes and install packages in our JS project.

* Node is a JS runtime, to run JS locally in your computer instead of in a browser.

npm is automatically installed along with Node.js so to check if you already have it in you computer run:

node -v

If a version doesn’t appear you can use the Node Version Manager to install Node.js.

To check the version of npm:

npm -v

To update it:

npm install --global npm

npm works with the package.json file and has a command to create it: npm init

The package.json file includes info about the project and tells to npm which packages are required for the project. When we run npm install in a project with a package.json file, npm downloads and install all packages listed in the file from npmjs.com.

If you are working in a local environment running npm install creates the folder node_modules, with all the downloaded packages.

To install more packages than the listed in the package.json, run:

npm install <name_of_the_package>

React

React is a front end web framework built entirely out of JS. We use JSX, an extension of vanilla JS, to write our components.

Why React?

Using components allow us to separate functionality and code.

It has a virtual DOM, to render faster.

React includes Babel that compiles JSX down to React.createElement() calls and Webpack, the module that bundles the JS files of the project.

Easy to create a new react app and run npm install and npm start.

Components

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. –reactjs.org

*React elements are the objects created by React.createElement()

//These two examples are identical

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

//These two examples are identical

const element = (

Hello, world!

</h1>

);

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, world!'

);

Types of components

//App.js
//Functional component
import React from 'react';

const App = props => {
  return (
    <h1>Hello, {props.name}</h1>;
  )
}

export default App;

//Class component
import React from 'react';

class App extends React.Component {
  render () {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default App

//Pure Component
import React, { PureComponent } from 'react'; 

class App extends PureComponent {
  render() {
    return <div></div>
  }
} 

export default App;

//App.js

//Functional component

import React from 'react';

const App = props => {

return (

<h1>Hello, {props.name}</h1>;

)

}

export default App;

//Class component

import React from 'react';

class App extends React.Component {

render () {

return <h1>Hello, {this.props.name}</h1>;

}

export default App

//Pure Component

import React, { PureComponent } from 'react';

class App extends PureComponent {

render() {

return <div></div>

}

export default App;

If props and state are not changing and we don’t need special work updating our component we can use PureComponent.
If we don’t need to use state and lifecycle methods we can use a functional component. In order to use state we have to inherit from Component, and functional components don’t do that.

Functional components don’t have state but have props, we have to explicitly pass them as the argument for the function.

We can use object destructuring and extract values from props.

import React from 'react';

const App = ({ name }) => <h1>Hello, { name }</h1>

export default App;

import React from 'react';

const App = ({ name }) => <h1>Hello, { name }</h1>

export default App;

The components are the files written using JSX. You can import one file/component into another component and make it its parent component so its parent can render it inside an element.

Components:

*Always start component names with a capital letter.

*must never modify its own props. For that, use the state.

All React components must act like pure functions with respect to their props. –reactjs

*I would start writing the component as a function component and if class component features, like .state, are necessary, then change it to a class component.

Container and presentation components

So we have talked so far about functional, class and pure components. Container and presentational components are not different types of components, they are a way to organise your react app.

Presentational components usually receive props and display content.

Containers keep more complex logic, dealing with state and usually are class components.

Render a component

In this example I render the App component.

//index.js

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

//index.js

ReactDOM.render(

<App />,

document.getElementById('root')

);

Importing from the node_modules folder and the src folder, exporting and the Component Chain

//Importing from the node_modules folder
import React, { Component } from 'react';

//Importing components you have created in your app, in the src folder.
import App from './App';  

//The file that is importing this component now can use it as <App /> in the render() method.

//Here your code for your component

//This allows other files to import it
export default NameOfThisComponent

//Importing from the node_modules folder

import React, { Component } from 'react';

//Importing components you have created in your app, in the src folder.

import App from './App';

//The file that is importing this component now can use it as <App /> in the render() method.

//Here your code for your component

//This allows other files to import it

export default NameOfThisComponent

When a component doesn’t have an export means that is the top of this chain.

*For an optimization of udpating, React recommends using React.PureComponent instead of React.Component. PureComponent doesn’t have access to shouldComponentUpdate because he will check for changes in props and state and update if necessary.

import React, { PureComponent } from 'react';
 
class App extends PureComponent {
 
}

export default App;

import React, { PureComponent } from 'react';

class App extends PureComponent {

}

export default App;

Props and state

Props are arguments passed into React components. They are like function arguments in JS and attributes in HTML. To send the props into a component, we use the same syntax as HTML attributes. React props are read-only. A component can change its own state but not its props. The parent who is passing the props can change them.

class Fruit extends React.Component {
  render() {
    return <h2>We have {this.props.fruit.quantity} {this.props.fruit.name} left!</h2>;
  }
}

class Supermarket extends React.Component {
  render() {
    const fruitInfo = {name: "apple", quantity: "1"};
    return (
      <div>
        <h1>Our products</h1>
        <Fruit fruit={fruitInfo} />
      </div>
    )
  }
}

ReactDOM.render(<Supermarket />, document.getElementById('root'));

class Fruit extends React.Component {

render() {

return <h2>We have {this.props.fruit.quantity} {this.props.fruit.name} left!</h2>;

}

class Supermarket extends React.Component {

render() {

const fruitInfo = {name: "apple", quantity: "1"};

return (

<div>

<h1>Our products</h1>

</div>

)

}

ReactDOM.render(<Supermarket />, document.getElementById('root'));

Default values for props:

class Fruit extends React.Component {
  render() {
    return <h2>We have {this.props.fruit.quantity} {this.props.fruit.name} left!</h2>;
  }
}

Fruit.defaultProps = {
  fruitInfo: {
    name: "defaultFruit",
    quantity: 0
  }
}

//I am not sure about this example.

class Fruit extends React.Component {

render() {

return <h2>We have {this.props.fruit.quantity} {this.props.fruit.name} left!</h2>;

}

Fruit.defaultProps = {

fruitInfo: {

quantity: 0

}

//I am not sure about this example.

State is similar to props, but it is private and fully controlled by the component. React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

The state object is initialised in the constructor method.

We should call super() in the constructor since we are inheriting from another class via the extends keyword. We set initial state in the constructor because it runs first.

class Fruit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "apple",
      quantity: 1
    };
  }

  render() {
    return (
      <div>
        <h2>We have {this.state.quantity} {this.state.name} left</h2>
      </div>;
    );
  }
}

class Fruit extends React.Component {

constructor(props) {

super(props);

this.state = {

quantity: 1

};

}

render() {

return (

<div>

<h2>We have {this.state.quantity} {this.state.name} left</h2>

</div>;

);

}

We can change the state using setState(), which will re-render the component:

class Fruit extends React.Component {
  constructor(props) {
    super(props);

    //Define the initial state
    this.state = {
      name: "apple",
      quantity: 1
    };
  }
  
  //this is an instance property. We use arrow function   to bind the value of this to be our instance of Fruit
  changeQuantity = () => {
    this.setState({
      quantity: 2
    });
  }
  render() {
    return (
      <div>
        <h2>We have {this.state.quantity} {this.state.name} left</h2>
        <button
          type="button"
          onClick={this.changeQuantity}
        >Change quantity</button> 
      </div>;
    );
  }
}

class Fruit extends React.Component {

constructor(props) {

super(props);

//Define the initial state

this.state = {

quantity: 1

};

}

//this is an instance property. We use arrow function to bind the value of this to be our instance of Fruit

changeQuantity = () => {

this.setState({

quantity: 2

});

}

render() {

return (

<div>

<h2>We have {this.state.quantity} {this.state.name} left</h2>

<button

type="button"

onClick={this.changeQuantity}

>Change quantity</button>

</div>;

);

}

When we want to update our state based in the previous state. Never use a this.state inside a setState. We can pass a function to setState that, when called inside setState will be passed the component state from when that setState was called (previous state) and the return value will be the new state (important use return!).

class App extends Component {
  constructor() {
    super()

    this.state = {
      count: 0
    }
  }

  handleClick = () => {
    this.setState(previousState => {
      return {
        count: previousState.count + 1
      }
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>Click me! </button>
      </div>
    )
  }

}

class App extends Component {

constructor() {

super()

this.state = {

}

handleClick = () => {

this.setState(previousState => {

return {

}

})

}

render() {

return (

<div>

<h1>{this.state.count}</h1>

<button onClick={this.handleClick}>Click me! </button>

</div>

)

}

React’s Event System

React uses basic HTML events and wrap them in the SyntheticEvent to make sure events are handled the same way across all browsers.

setState() sets state asynchronously.

class App extends Component {
 
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
 
  //We first create the event
  increment = (event) => {
    console.log(event.type); //prints click
    console.log(`before setState: ${this.state.count}`)
 
    this.setState({
      count: this.state.count + 1
    })
 
    console.log(`after setState: ${this.state.count}`)
  }
 
  render() {
    return (
      {/* We add an event handler to a JSX tag */}
      <div onClick={this.increment}>
        {this.state.count}
      </div>
    )
  }
}

  => before setState 0
  => after setState 0
  => before setState 1
  => after setState 1

class App extends Component {

constructor() {

super()

this.state = {

}

//We first create the event

increment = (event) => {

console.log(event.type); //prints click

console.log(`before setState: ${this.state.count}`)

this.setState({

})

console.log(`after setState: ${this.state.count}`)

}

render() {

return (

{/* We add an event handler to a JSX tag */}

{this.state.count}

</div>

)

}

=> before setState 0

=> after setState 0

=> before setState 1

=> after setState 1

//Remember, setting state is not synchronous!

handleClick = () => {
  this.setState({
    admin: true
  })
  console.log(this.state.admin); //prints false
};

//If I want an updated state I can add a cb function to the setSate as a second argument
//The callback will fire once the state has been updated

handleClick = () => {
  this.setState({
    admin: true 
  }, () => console.log(this.state.admin))  //prints true
};

//Remember, setting state is not synchronous!

handleClick = () => {

this.setState({

admin: true

})

console.log(this.state.admin); //prints false

};

//If I want an updated state I can add a cb function to the setSate as a second argument

//The callback will fire once the state has been updated

handleClick = () => {

this.setState({

admin: true

}, () => console.log(this.state.admin)) //prints true

};

//Another example with anything hardcoded in the setState

import React from 'react';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      admin: false
    };
  }

  handleClick = () => {
    this.setState(previousState => {
      return {
        admin: !previousState.admin
      }
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>{this.state.admin ? "ON" : "OFF"}</button>
      </div>
    );
  }
}

export default App;

//Another example with anything hardcoded in the setState

import React from 'react';

class App extends React.Component {

constructor() {

super();

this.state = {

admin: false

};

}

handleClick = () => {

this.setState(previousState => {

return {

admin: !previousState.admin

}

});

}

render() {

return (

<div>

<button onClick={this.handleClick}>{this.state.admin ? "ON" : "OFF"}</button>

</div>

);

}

export default App;

Update a nested state

{
  name: "Diana",
  address: {
    street: null,
    number: null
  },
}

//Using the spread operator
this.setState({
  address: {
    ...this.state.address,
    street: "Sesame"
  }
});

{

address: {

street: null,

number: null

}

//Using the spread operator

this.setState({

address: {

...this.state.address,

street: "Sesame"

}

});

We can not modify props only the state. Every component can modify its own state using setState, but what if a child want to modify the state of its parent? In order to do this we can use a callback. The parent component can pass down a callback function to its child where its state is modified. The child will have access to the cb inside the props being passed to it.

Event pooling

When the event fires, the event data is sent to the callback. If we need to use this data in an asynchronous way we can store it in a variable or we can make the event persistent (event.persist()).

Forms

When you have a form in React you usually want to write a JS function to handle the submission and have access to the form data. There are two different ways to control the form’s data, the controlled and the uncontrolled form, but the safest is using a controlled form.

How to know if the component is controlled or uncontrolled? If the input has a value, it is a controlled component and if the input has a defaultValue is an uncontrolled component.

Controlled forms store their input values in the state. With a controlled component we can control user input and show errors. How do we add the input data to our state?

Adding a value attribute to our input like <input type="text" name="query" onChange="{this.handleChange} value="{this.state.query}"/> or for radio and checkbox types, the checked attribute:

<span class="token tag"><span class="token punctuation">&lt;</span>input
<span class="gatsby-highlight-code-line">   <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"admin</span><span class="token punctuation">"</span></span>
</span>   <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
   <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.admin</span><span class="token punctuation">}</span></span>
   <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span> 
<span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token punctuation"><</span>input

<span class="gatsby-highlight-code-line"> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"admin</span><span class="token punctuation">"</span></span>

</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>

<span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.admin</span><span class="token punctuation">}</span></span>

<span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>

and then updating our state with the setState method inside an onChange event listener that will fire every time the value of the input changes.

handleChange = event => {
  this.setState({
    //or event.target.checked
    query: event.target.value
  });
};

handleChange = event => {

this.setState({

//or event.target.checked

query: event.target.value

});

};

Having the form data in our state means that it is easy to pass them down as props to other component or pass them to a parent component using a function callback supplied in props.

import React from 'react';
import { fetchBooks } from '..actions/searchForm';

class SearchForm extends React.Component {

  state = {
    query: ''
  };

  handleChange = event => {
    this.setState({
      query: event.target.value
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.props.fetchBooks(this.state.query);
  };

  render () {
    return (
      <div>
        <form onSubmit={this.handleSubmit} className="searchForm">
          <label>Search:</label>
          <input 
            type="text" 
            name="query" 
            onChange="{this.handleChange} 
            value="{this.state.query}"
           />
          <input 
            type="submit" 
            value="Search" 
           />
        </form>
      </div>
    );
  };
};

export default SearchForm;

import React from 'react';

import { fetchBooks } from '..actions/searchForm';

class SearchForm extends React.Component {

state = {

query: ''

};

handleChange = event => {

this.setState({

query: event.target.value

});

};

handleSubmit = event => {

event.preventDefault();

this.props.fetchBooks(this.state.query);

};

render () {

return (

<div>

<label>Search:</label>

<input

type="text"

name="query"

onChange="{this.handleChange}

value="{this.state.query}"

<input

type="submit"

value="Search"

</form>

</div>

);

};

export default SearchForm;

Form with multiple inputs

We can access the event.target attributes of our handleChange function and get different info. For example if we give to our input an attribute name we can access it via event.target.nameand that means that we can create a more abstract handleChange function and use it without having to write a different function to handle the changes for each input of our form, in case we have a form with more than one input like the one in the example. In order to do so we have to make sure that the name value is equal to the key/keys of our state.

handleChange = () => {
  this.setState({
    [event.target.name]: event.target.value
  })
}

handleChange = () => {

this.setState({

[event.target.name]: event.target.value

})

}

Lists

How to render a list of elements:

const colours = ["red", "blue", "yellow"];
const listColours = colours.map((colour) =>
  <li key={colour}>{colour}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

const colours = ["red", "blue", "yellow"];

const listColours = colours.map((colour) =>

<li key={colour}>{colour}</li>

);

ReactDOM.render(

<ul>{listItems}</ul>,

document.getElementById('root')

);

We should include a key (string) in our list of elements.

A good rule of thumb is that elements inside the map() call need keys. reactjs.org

React component methods

render()
Error handling during rendering, in a lifecycle method, constructor of any child component:
- static getDerivedStateFromError()
- componentDidCatch()
Other APIs:
- setState()
- forceUpdate()
Class properties:
- defaultProps
- displayName
Instance properties:
- props
- state

The render() method is necessary for a class component to be valid, the other ones are optional.

React component lifecycle

Component lifecycle: creation(mounting), updating, and deletion(unmointing).

React has special built-in events relating to the component lifecycle, the lifecycle hooks/methods.

Pre-mounting:
- constructor(). Where we create the initial state of the component.
Mounting:
- static getDerivedStateFromProps(props, state). I gives us access to state and props.
- render(). It returns JSX so React can insert it into the DOM.
- componentDidMount(). Where we set up long-running or asynchronous processes such as fetching or updating data.
Updating:
- static getDerivedStateFromProps(props, state). Where we can check state changes prior to an update. Use it when you want to modify the state based in the new props.
- shouldComponentUpdate(nextProps, nextState). Invoked before the re-render. We can compare here if there are changes in the props or the state and avoid an unnecessary re-rendering.
- render().Here the next props and the state became available as this.props and this.state. the component gets rendered into React’s virtual DOM.
- getSnapshotBeforeUpdate(prevProps, prevState). Just before React commits content from its virtual DOM to the actual DOMReturns a snapshot that can be used in the next hook. You can get info like the scroll position.
- componentDidUpdate(prevProps, prevState, snapshot). We can take some actions here without triggering a re-render of the component, like focusing on a specific form input. Here we have access to the previous and the current props and state and we can use this hook to update any third party libraries if they need to update due to the re-render.
Unmounting:
- - componentWillUnmount(). To clear any stuff we set up in componentDidMount.And avoid automatic data fetching for example that we don’t want.

Sending fetch requests

We can send a fetch request when the component is mounted, in the componentDidMount hook or we can tie it into an event.

componentDidMount() {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          colours: data.colours
        })
      })
  }

componentDidMount() {

fetch(url)

.then(response => response.json())

.then(data => {

this.setState({

colours: data.colours

})

}

handleClick = event => {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      this.setState({
        colours: data.colours
      })
    })
}

handleClick = event => {

fetch(url)

.then(response => response.json())

.then(data => {

this.setState({

colours: data.colours

})

}

Another way to organise the fetched data is using the container component pattern. Here it is a good link about it.

React Router

React router uses client-side routing, not server-side routing.

With Client-Side routing, it is now the responsibility of the Client-Side-Code to handle the routing, fetching and displaying of the data in the browser instead of the server.

Using pushState(state, title, url).

React and Babel

Babel is a compiler that makes all JS versions, even JSX, and emit a common one.

React and Webpack

Webpack combines different JS files, pre-bundles them together into a single file, to make less http requests to the server.

Reconciliation

React create during the first render the current tree, that looks like the current DOM, and when updates cause a re-render it creates the workInProgress tree, representing how the DOM will look. React uses a diffing algorithm to check for differences and if necessary uses this second tree to update the current tree and the DOM .

BirthdayCakeCandles

Problem from Hackerrank.

My solution:

function birthdayCakeCandles(ar) {
  let count = 0;

  let max = Math.max(...ar);

  for ( let i = 0; i < ar.length; i++) {
      if ( ar[i] === max ) {
          count++
      }
  }
  return count;
}

function birthdayCakeCandles(ar) {

let count = 0;

let max = Math.max(...ar);

for ( let i = 0; i < ar.length; i++) {

if ( ar[i] === max ) {

count++

}

return count;

}

Mini-Max Sum

Problem from Hackerrank.

My solution:

function miniMaxSum(arr) {
    let minValue, maxValue, minIndex, maxIndex, minSum = 0, maxSum = 0;

    minValue = Math.min(...arr);
    maxValue = Math.max(...arr);
    minIndex = arr.indexOf(minValue);
    maxIndex = arr.indexOf(maxValue);

    for ( let i = 0; i < arr.length; i++) {
        if ( minIndex !== i ) {
            maxSum += arr[i];
        }
        if ( maxIndex !== i ) {
            minSum += arr[i];
        }
    }
    console.log(minSum, maxSum);
}

function miniMaxSum(arr) {

let minValue, maxValue, minIndex, maxIndex, minSum = 0, maxSum = 0;

minValue = Math.min(...arr);

maxValue = Math.max(...arr);

minIndex = arr.indexOf(minValue);

maxIndex = arr.indexOf(maxValue);

for ( let i = 0; i < arr.length; i++) {

if ( minIndex !== i ) {

maxSum += arr[i];

}

if ( maxIndex !== i ) {

minSum += arr[i];

}

console.log(minSum, maxSum);

}

Staircase

Problem from Hackerrank.

My solution:

function main(n) {
    let space, hash, stair;

    for (var i = 0; i < n; i++){
        space = n - 1 - i;
        hash = i + 1;
        stair = ' '.repeat(space) + '#'.repeat(hash);
        console.log(stair);    
    }  
}

function main(n) {

let space, hash, stair;

for (var i = 0; i < n; i++){

space = n - 1 - i;

hash = i + 1;

stair = ' '.repeat(space) + '#'.repeat(hash);

console.log(stair);

}

Plus Minus

Problem from Hackerrank.

I was making the mistake of checking if the index was bigger or smaller than zero, instead of checking the value of the integer in that index. I was comparing i instead ,arr[i].

My solution:

function plusMinus(arr) {
    let arrayLength = arr.length;

    let positiveFraction = 0;
    let negativeFraction = 0;
    let zeroFraction = 0;

    for ( let i = 0; i < arrayLength; i++) {
        if ( arr[i] > 0 ) {
            positiveFraction++;
        } else if ( arr[i] < 0 ) {
            negativeFraction++;
        } else {
            zeroFraction++;
        };
    };

    console.log(positiveFraction/arrayLength);
    console.log(negativeFraction/arrayLength);
    console.log(zeroFraction/arrayLength);
};

function plusMinus(arr) {

let arrayLength = arr.length;

let positiveFraction = 0;

let negativeFraction = 0;

let zeroFraction = 0;

for ( let i = 0; i < arrayLength; i++) {

if ( arr[i] > 0 ) {

positiveFraction++;

} else if ( arr[i] < 0 ) {

negativeFraction++;

} else {

zeroFraction++;

};

console.log(positiveFraction/arrayLength);

console.log(negativeFraction/arrayLength);

console.log(zeroFraction/arrayLength);

};

Diagonal Difference

Problem from Hackerrank.

function diagonalDifference(arr) {
    // Write your code here
    let arrayLength = arr.length;
    let diag1 = 0;
    let diag2 = 0;

    for( let i = 0; i < arrayLength; i++) {
        for ( let j = 0; j < arrayLength; j++) {
            //main diagonal
            if ( i === j ) {
                diag1 += arr[i][j];
            };
            //second diagonal
            if ( i + j === arrayLength - 1 ) {
                diag2 += arr[i][j];
            };

        };
    };

    return Math.abs(diag1 - diag2);

}

function diagonalDifference(arr) {

// Write your code here

let arrayLength = arr.length;

let diag1 = 0;

let diag2 = 0;

for( let i = 0; i < arrayLength; i++) {

for ( let j = 0; j < arrayLength; j++) {

//main diagonal

if ( i === j ) {

diag1 += arr[i][j];

};

//second diagonal

if ( i + j === arrayLength - 1 ) {

diag2 += arr[i][j];

};

return Math.abs(diag1 - diag2);

}

Simply Array Sum

Problem from HackerRank.

Easy problem but I got confused with the index of the array and its value. I was adding i to my result variable and not ar[i].

function simpleArraySum(ar) {
    let result = 0;

    for (let i = 0; i < ar.length; i++) {
        result += ar[i];
    };

    return result;
}

function simpleArraySum(ar) {

let result = 0;

for (let i = 0; i < ar.length; i++) {

result += ar[i];

};

return result;

}

JS Cheatsheet (work in process)

JavaScript engine makes multiply passes over the same code:

First pass to parse the syntax. During this pass the engine undertakes a process called automatic semicolon insertion.
Second pass to initialise variables and functions and store them in memory. Hoisting: is a JS default behaviour of moving all declarations to the top of the current scope ( to the top of the current script or the current function). Variables and constants declared with let or const are not hoisted.
The third pass is to actually execute the code line-by-line.

First and second passes are called the compilation phase and the third phase is called the execution phase.

Debugging:

No matter what combination of types you write, JS won’t throw an error and will return something, even a non sense and weird something.

alert(“Hola!”);
console.log(“Hola!”);
console.error(“Hola!”);
console.warn(“Hola!”);
console.table

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
var me = new Person("Diana", "Badas");
console.table(me);

function Person(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

var me = new Person("Diana", "Badas");

console.table(me);

try statement lets you test a block of code for errors.

catch statement lets you handle the error.

function Myfunc() {
  this.twice=function(num){
    if(num<2){
      throw "num should be greater than 2"
    }
  return num*2;
  }
}

var myfunc = new Myfunc();
var list = new Array(0,4,1,3);
for(var i=0; i<4; i++){
  try{
    var res = myfunc.twice(list[i]);
    console.log(res);
  }
  catch(e){
    console.log(e);
  }
}

function Myfunc() {

this.twice=function(num){

if(num<2){

throw "num should be greater than 2"

}

return num*2;

}

var myfunc = new Myfunc();

var list = new Array(0,4,1,3);

for(var i=0; i<4; i++){

try{

var res = myfunc.twice(list[i]);

console.log(res);

}

catch(e){

console.log(e);

}

throw statement lets you create custom errors.

function getRectArea(width, height) {
  if (isNaN(width) || isNaN(height)) {
    throw "Parameter is not a number!";
  }
}

try {
  getRectArea(3, 'A');
}
catch(e) {
  console.error(e);
  // expected output: "Parameter is not a number!"
}

function getRectArea(width, height) {

if (isNaN(width) || isNaN(height)) {

throw "Parameter is not a number!";

}

try {

getRectArea(3, 'A');

}

catch(e) {

console.error(e);

// expected output: "Parameter is not a number!"

}

finally statement lets you execute code, after try and catch, regardless of the result.

let letsTry = () => {

  try {
    // there is a SyntaxError
    eval('alert("Hello world)');
    
  } catch(error) {
    console.error(error);
	
    // break the function completion
    return;
  } finally {
      console.log('finally')
  }

  // This line will never get executed
  console.log('after try catch')
}

letsTry();

let letsTry = () => {

try {

// there is a SyntaxError

eval('alert("Hello world)');

} catch(error) {

console.error(error);

// break the function completion

return;

} finally {

console.log('finally')

}

// This line will never get executed

console.log('after try catch')

}

letsTry();

Tests:

Unit testing
Integration testing
End-to end testing

Operators:

//Arithmetic operator **. The exponentiation operator returns the left number //raised to the power of the right number.
3 ** 3;
  => 27

//The remainder operator returns the remainder when the left number is divided //by the right number

5 % 2;
  => 1

//Order of the operations
()
**
* / %
+-

//Incrementing and Decrementing
//JS has a pair of operators that we can use to increment and decrement a //numerical value stored in a variable ++ --. 
//If the ++ operator comes after the variable, the variable's value is returned first and then incremented.

let count = 0;
count++;
  => 0
count;
  => 1

Otherwise:

let count = 5;

--count;
  => 4
count;
  => 4

//Assignment operators
let count = 0;

count += 10;
  => 10

count -= 2;
  => 8

//Equality operators:
== // Loose equality operator
=== /// Strict equality operator
!= // Loose inequality operator
!== // Strict inequality operator

//Relational operators
> //Greater than
>= //Greater than or equals
< //Less than
<= //Less than or equals

//Logical operators
//Use ! to negate an expression
//Convert an expression to a boolean using !!

//Link conditions with && and ||

//Return value of && is the falsy expression. The return value of the && //operator is always one of the two expressions. If the first expression is //falsy, && returns the value of the first expression. If the first expression //is truthy, && returns the value of the second expression.

//Return value of || is the truthy expression.
// The return value of the || operator is always one of the two expressions. //If the first expression is truthy, || returns the value of the first //expression. If the first expression is falsy, || returns the value of the //second expression.

//Arithmetic operator **. The exponentiation operator returns the left number //raised to the power of the right number.

3 ** 3;

=> 27

//The remainder operator returns the remainder when the left number is divided //by the right number

5 % 2;

=> 1

//Order of the operations

()

* / %

//Incrementing and Decrementing

//JS has a pair of operators that we can use to increment and decrement a //numerical value stored in a variable ++ --.

//If the ++ operator comes after the variable, the variable's value is returned first and then incremented.

let count = 0;

count++;

=> 0

count;

=> 1

Otherwise:

let count = 5;

--count;

=> 4

count;

=> 4

//Assignment operators

let count = 0;

count += 10;

=> 10

count -= 2;

=> 8

//Equality operators:

== // Loose equality operator

=== /// Strict equality operator

!= // Loose inequality operator

!== // Strict inequality operator

//Relational operators

> //Greater than

>= //Greater than or equals

< //Less than

<= //Less than or equals

//Logical operators

//Use ! to negate an expression

//Convert an expression to a boolean using !!

//Link conditions with && and ||

//Return value of && is the falsy expression. The return value of the && //operator is always one of the two expressions. If the first expression is //falsy, && returns the value of the first expression. If the first expression //is truthy, && returns the value of the second expression.

//Return value of || is the truthy expression.

// The return value of the || operator is always one of the two expressions. //If the first expression is truthy, || returns the value of the first //expression. If the first expression is falsy, || returns the value of the //second expression.

Data types:

Everything in JavaScript is data except:

operators:+, -, <=, etc.
reserved words:function, for, debugger, etc.

A basic type checking with the typeof operator: typeof(42);

The JS’s seven data types:

1.Numbers (primitive data type).

2. strings (primitive data type).

We use ‘single quotes’, “double quotes”, or `backticks.

String concatenation:

//Using the + operator:

"This" + "is" + "a" + "string";
//Interpolation of variables and other JS expressions

const number = 5;

"This" + "is" + "my string number " + number + "."

//Using template literals, using backticks.
This is a string using a template literal, introduced with ES2015 I can interpolate my varirable ${number} here too!

//Using the + operator:

"This" + "is" + "a" + "string";

//Interpolation of variables and other JS expressions

const number = 5;

"This" + "is" + "my string number " + number + "."

//Using template literals, using backticks.

This is a string using a template literal, introduced with ES2015 I can interpolate my varirable ${number} here too!

3. Booleans (primitive data type).

The following values are falsy:

false

null

undefined

0

NaN

'', ""

Every other value is truthy.

4.Symbols(primitive data type) are primarily used as an alternate way to add properties to objects.

5. Objects:

JS defines 5 types of primitive data types: string, number, boolean, null, undefined. All JS values, except primitives, are objects. In JS almost everything is an object: booleans, numbers and strings, if defined with the new keyword can be objects. Primitive data types represent single values, such as a number, a string or false, instead of a collection of values.

var x = new Boolean(false);

//typeof x returns object

JS objects: dates, maths, regular expressions, arrays, functions and objects.

Objects are similar to a hash in Ruby or a dictionary in Python. Arrays in JS are objects too.

All keys in an object are strings.

const diana = {
  name: "Diana",
  surname: "Badas",
  city: "London",
  favouriteColour: "blue"
};

const diana = {

surname: "Badas",

city: "London",

favouriteColour: "blue"

};

Access a value stored in an Object:

//.notation
diana.name;

//bracket notation
diana["name"];

//.notation

diana.name;

//bracket notation

diana["name"];

Add a property to an Object:

//.notation
diana.university = "USC";

//bracket notation
diana["age"] = "enough";

//.notation

diana.university = "USC";

//bracket notation

diana["age"] = "enough";

Delete an property

//.notation
delete diana.age;

//bracket notation
delete diana["university"];

//.notation

delete diana.age;

//bracket notation

delete diana["university"];

Arrays:

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];

1	let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];

Add an element:

//Destructively
dogs.push("Snoopy");
  =>  ["Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]
dogs.unshift("Lassie");
  => ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]
//Using arr[arr.length] = b 
let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];
const moreDogs = ["Toby", "Luna"]; 
dogs[dogs.length] = moreDogs;
  => (2) ["Toby", "Luna"] 
dogs;
  => (5) ["Byron", "Cubby", "Boo Radley", "Luca", Array(2)]

//Non-destructively
//Using ... operator
const allDogs = ["Rex", ...dogs];
allDogs;
  => ["Rex", "Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]
dogs;
  => ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

//Using.concat 
const moreDogs = ["Toby", "Luna"]; 
const allConcatDogs = dogs.concat(moreDogs);

//Destructively

dogs.push("Snoopy");

=> ["Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

dogs.unshift("Lassie");

=> ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

//Using arr[arr.length] = b

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];

const moreDogs = ["Toby", "Luna"];

dogs[dogs.length] = moreDogs;

=> (2) ["Toby", "Luna"]

dogs;

=> (5) ["Byron", "Cubby", "Boo Radley", "Luca", Array(2)]

//Non-destructively

//Using ... operator

const allDogs = ["Rex", ...dogs];

allDogs;

=> ["Rex", "Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

dogs;

=> ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

//Using.concat

const moreDogs = ["Toby", "Luna"];

const allConcatDogs = dogs.concat(moreDogs);

Delete an element:

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"]

//Destructively
dogs.pop(); //deletes the last element
  => "Luca"
dogs;
  => ["Byron", "Cubby", "Boo Radley"]

dogs.shift(); //deletes the first element
  => "Byron"
dogs;
  => ["Cubby", "Boo Radley"]

Array.splice() //Add and delete elements
var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const numbers = [1, 3, 4, 6];

numbers.splice(1, 0, 2); // at index 1, remove 0 elements, add number 2
  => [] //elements deleted
numbers;
  => [1, 2, 3, 4, 6]

numbers.splice(4, 1, 5);
  => [6] //elements deleted
numbers;
  => [1, 2, 3, 4, 5]


//Non-destructively
Array.slice
arr.slice([begin[, end]])
//begin index is included and end index is not included in the new array.

const colours = ["red", "blue", "yellow", "green"];

colours.slice(2);
  => ["yellow", "green"]
colours;
  => ["red", "blue", "yellow", "green"]
colours.slice(1, 3)
  => ["blue", "yellow"]
colours;
  => ["red", "blue", "yellow", "green"]

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"]

//Destructively

dogs.pop(); //deletes the last element

=> "Luca"

dogs;

=> ["Byron", "Cubby", "Boo Radley"]

dogs.shift(); //deletes the first element

=> "Byron"

dogs;

=> ["Cubby", "Boo Radley"]

Array.splice() //Add and delete elements

var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const numbers = [1, 3, 4, 6];

numbers.splice(1, 0, 2); // at index 1, remove 0 elements, add number 2

=> [] //elements deleted

numbers;

=> [1, 2, 3, 4, 6]

numbers.splice(4, 1, 5);

=> [6] //elements deleted

numbers;

=> [1, 2, 3, 4, 5]

//Non-destructively

Array.slice

arr.slice([begin[, end]])

//begin index is included and end index is not included in the new array.

const colours = ["red", "blue", "yellow", "green"];

colours.slice(2);

=> ["yellow", "green"]

colours;

=> ["red", "blue", "yellow", "green"]

colours.slice(1, 3)

=> ["blue", "yellow"]

colours;

=> ["red", "blue", "yellow", "green"]

6. Null (primitive data type). Null is an absent object, but when called with typeof returns object.

7. Undefined (primitive data type). It is like a “not yet assigned a value”.

Spread operator (…)

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

returnedTarget
  return value => {a: 1, b: 4, c: 5}

//Object.assign changes the original array, it is destructive.
target
  return value => {a: 1, b: 4, c: 5}

const mergedObj = { ...target, ...source };

mergedObj
  return value => {a: 1, b: 4, c: 5}

//... operator is not destructive.
target
  return value => {a: 1, b: 2}

const target = { a: 1, b: 2 };

const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

returnedTarget

return value => {a: 1, b: 4, c: 5}

//Object.assign changes the original array, it is destructive.

target

return value => {a: 1, b: 4, c: 5}

const mergedObj = { ...target, ...source };

mergedObj

return value => {a: 1, b: 4, c: 5}

//... operator is not destructive.

target

return value => {a: 1, b: 2}

Variables:

Start with a lower case and don’t use spaces, use camelCase.

Mind reserved words or future reserved words.

We can package both of the initialisation steps, declaration and assignment in a single line of code:

const name = "Diana";
  => undefined

1 2	const name = "Diana"; => undefined

Differences between var, const and let.

*Variables declared without a const, let, or var keywords are always globally scoped. You can avoid this using strict mode.

var:

var is function scoped. The scope is limited to the function within which it is defined. If it is defined outside any function, the scope of the variable is global. They are not block-scoped.

Can be reassigned.

var comes with a ton of baggage in the form of scope issues, for example, with var no error is thrown if you declare a variable twice.

let:

let is block scoped. The scope is limited to the block defined by curly braces {}.

Can be reassigned.

const:

const is block scoped. The scope is limited to the block defined by curly braces {}.

Can not be reassigned to anew value, but can be mutated.

const colours = ["blue", "red"];

colours.push("yellow");
  => 3
colours;
  => ["blue", "red", "yellow"]

colours = ["blue", "red", "yellow", "green"];
  => VM2182:1 Uncaught TypeError: Assignment to constant variable.

const colours = ["blue", "red"];

colours.push("yellow");

=> 3

colours;

=> ["blue", "red", "yellow"]

colours = ["blue", "red", "yellow", "green"];

=> VM2182:1 Uncaught TypeError: Assignment to constant variable.

Conditional statements:

if (condition) {
  doThis;
} else {
  doThat;
}

if (condition) {
  doThis;
} else if (condition2) {
  doThat;
} else {
  doOtherThing;
}

//Switch
switch(expression) {
  case x:
    //code block
    break;
  case y:
    //code block
    break;
  default:
    //code block
}

//Ternary operator
condition ? expresion1 : expresion2;
//I the condition returns a truthy value, run the code in expression1. I the condition returns a falsy value, run the code in expression2.

if (condition) {

doThis;

} else {

doThat;

}

if (condition) {

doThis;

} else if (condition2) {

doThat;

} else {

doOtherThing;

}

//Switch

switch(expression) {

case x:

//code block

break;

case y:

//code block

break;

default:

//code block

}

//Ternary operator

condition ? expresion1 : expresion2;

//I the condition returns a truthy value, run the code in expression1. I the condition returns a falsy value, run the code in expression2.

Functions:

A function is an object that contains a sequence of JavaScript statements. Declaration:

const sayMyName = () => {

  console.log("Diana");

}

const sayMyName = () => {

console.log("Diana");

}

Function calling or execution:

sayMyName();

1	sayMyName();

Parameters. They are locally scoped variables that are usable, scoped, to inside the function. Here name is our parameter.

const sayAname = (name) => {
  console.log(name);
}

const sayAname = (name) => {

console.log(name);

}

JS will assign the argument of “Diana” to the parameter name when this function is called.

sayAname("Diana");

1	sayAname("Diana");

Function declaration vs function expression

The difference lies in how the browser loads them into the execution context.

Function declarations load before any code is executed.

Function expressions load only when the interpreter reaches that line of code.

If you try to call a function expression before it is loaded you get an error.

//Function declaration
function myFunc () {
  return 5;
}
  => undefined

//Anonymous function expression
const myFunc = function () {
  return 5;
}
  => undefined
myFunc;
  => f(){
       return 5;
      }
myFunc();
  => 5 

//Named function expression
const myFunc = function myFunc () {
  return 5;
}

//Function declaration

function myFunc () {

return 5;

}

=> undefined

//Anonymous function expression

const myFunc = function () {

return 5;

}

=> undefined

myFunc;

=> f(){

return 5;

}

myFunc();

=> 5

//Named function expression

const myFunc = function myFunc () {

return 5;

}

myFunc();

function myFunc () {
  return 5;
}
  => 5
/////////////

myFunc();
const myFunc = function () {
  return 5;
}
  => Uncaught ReferenceError: Cannot access 'myFunc' before initialization

myFunc();

function myFunc () {

return 5;

}

=> 5

/////////////

myFunc();

const myFunc = function () {

return 5;

}

=> Uncaught ReferenceError: Cannot access 'myFunc' before initialization

Arrow functions:

Arrow functions do not have their own this, it uses whatever this is defined within the scope it is in.

Looping and iteration:

Iteration is the number of times a loop can be executed, while loop is the code which generate or causes expressions to be iterated.

Looping is the process of executing a set of statements repeatedly until a condition is met. It’s great for when we want to do something a specific number of times (for loop) or unlimited times until the condition is met (while loop).

Iteration is the process of executing a set of statements once for each element in a collection.

//for loop
const colours = ["blue", "red", "yellow"];

for (let i = 0; i < colours.length; i++) {
  console.log(`Colour ${colours[i]}`);
}

//while loop
function printColours (colours) {
  let i = 0;
  while (i < colours.length) {
    console.log(`Colour ${colours[i]}`);
    i++;
  }
  return colours;
}

printColours(colours);

//for...of. Good for arrays. Allow us to use const
const colours = ["blue", "red", "yellow"];
for (const element of colours) {
  console.log(element);
}

//for...in. Good for objects. It iterates over the properties of //an object in an arbitrary order.
let result = '';
const myObject = {
  a: 1,
  b: 2,
  c: 3
}

for (const property in myObject) {
  result += myObject[property];
};
  => '123'

//for loop

const colours = ["blue", "red", "yellow"];

for (let i = 0; i < colours.length; i++) {

console.log(`Colour ${colours[i]}`);

}

//while loop

function printColours (colours) {

let i = 0;

while (i < colours.length) {

console.log(`Colour ${colours[i]}`);

i++;

}

return colours;

}

printColours(colours);

//for...of. Good for arrays. Allow us to use const

const colours = ["blue", "red", "yellow"];

for (const element of colours) {

console.log(element);

}

//for...in. Good for objects. It iterates over the properties of //an object in an arbitrary order.

let result = '';

const myObject = {

a: 1,

b: 2,

c: 3

}

for (const property in myObject) {

result += myObject[property];

};

=> '123'

Creating object with JS

//Constructor function<code>
function Person(first, last, email) {
  this.first = first;
  this.last = last;
  this.email = email;
  this.name = function() {return this.first + " " + this.last;};
}

Person.prototype.sayHello = function() {
  console.log(`Hi! My name is ${this.first}`);
};

let Nao = new Person("Nao", "Gonzalez", n"nao@gmail.com");

//Constructor function<code>

function Person(first, last, email) {

this.first = first;

this.last = last;

this.email = email;

this.name = function() {return this.first + " " + this.last;};

}

Person.prototype.sayHello = function() {

console.log(`Hi! My name is ${this.first}`);

};

let Nao = new Person("Nao", "Gonzalez", n"nao@gmail.com");

//Class syntax
class Person {
  constructor(data) {
    this.first = first;
     this.last = last;
     this.email = email;
     this.name = function() {return this.first + " " + this.last;};</code> } } Person.prototype.sayHello = function() { console.log(`<code>Hi, my name is ${this.first}</code>`); }

//Class syntax

class Person {

constructor(data) {

this.first = first;

this.last = last;

this.email = email;

this.name = function() {return this.first + " " + this.last;};</code> } } Person.prototype.sayHello = function() { console.log(`<code>Hi, my name is ${this.first}</code>`); }

Definitions:

S.O.L.I.D.: 5 principles of Object Oriented Design with JS.
- S: Single responsibility principle.
- O: Open closed principle. Open for extensions and closed for modifications, we shouldn’t introduce breaking changes to existing functionality.
- L: Liskov substitution principle. Every subclass should be substitutable for their parent class.
- I: Interface segregation principle. A client should never be forced to implement an interface that it doesn’t use or clients shouldn’t be forced to depend on methods they do not use.
- D: Dependency Inversion principle. Entities must depend on abstractions not on concretions. Importance of higher-order functions.
ES6: “ES” ECMAScript, the official name of the JavaScript specification (Harmony – ES5)
Higher Order function: Function that may receive a first-class function as an argument and can even return a function.
First-class functions: Functions that are treated as objects or assignable to a variable.
AJAX: Process of making requests for additional data became known as Asynchronous JavaScript and XML, or AJAX.
Closure: When a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope. A closure is a feature in JavaScript such that a function holds onto the variables that it had access to when it was declared. Closures can be used to declare functions that have specific variables always defined. JavaScript developers also take advantage of closures to encapsulate data, as we can declare our functions in such a way that the data is only accessible from the returned function, with no way to overwrite the variables captured by the closure.

function sayHi() {  // 'scope of sayHi' is the lexical scope for printHi
   var myVar = 'hi!!';
   return function printHi() {
      console.log(myVar);
   }
}
var myVar = null,
greetings = sayHi();
greetings(); // 'hi!!'

function sayHi() { // 'scope of sayHi' is the lexical scope for printHi

var myVar = 'hi!!';

return function printHi() {

console.log(myVar);

}

var myVar = null,

greetings = sayHi();

greetings(); // 'hi!!'

Lexical scope: Where functions and variables are declared.
Hoisting: It is JS’s default behaviour of moving declarations to the top of the current scope. Let and const are not hoisted. During a compilation, every declaration ( of variables or functions) are added to the relative scope. Function declaration hoisting differs from variables as the content of the function get hoisted too.

foo(); // ‘hola!’

function foo() {
  console.log(‘hola!’);
}

foo(); // ‘hola!’

function foo() {

console.log(‘hola!’);

}

Scope: Where something is available. In JS, where declared variables and methods are available within our code. Global scope, function scope, block scope, scope chain, lexical scope ( where functions and variables are declared).

function myFunction () {
  console.log(hello);
  var hello = "World!";
  return hello;

}

myFunction();

  => log: undefined
  => "World"

function myFunction () {

console.log(hello);

var hello = "World!";

return hello;

}

myFunction();

=> log: undefined

=> "World"

Recursion: A recursive function is a function that calls itself.

function countDown(n) {
  console.log(n);
  if(n >= 1) countDown(n-1);
}
countDown(5);

function countDown(n) {

console.log(n);

if(n >= 1) countDown(n-1);

}

countDown(5);

Call back: When we pass a function into another function where in it might be invoked, we refer to the passed function as a callback.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

function doHomework(subject, callback) {

alert(`Starting my ${subject} homework.`);

callback();

}

function alertFinished(){

alert('Finished my homework');

}

doHomework('math', alertFinished);

forEach: Differences between map and forEach:
- forEach(): It simply calls a provided function on each element in your array. This callback is allowed to mutate the calling array. It returns undefined. forEach() affects and changes our original Array. forEach() may be preferable when you’re not trying to change the data in your array, but instead want to just do something with it — like saving it to a database or logging it out.
- map(): creates a new array with the results of calling a provided function on every element in the calling array. The difference is that map() utilises return values and actually returns a new Array of the same size. map() returns an entirely new Array — thus leaving the original array unchanged. And map() might be preferable when changing or altering data. Not only is it faster but it returns a new Array.

let arr = [1, 2, 3, 4, 5];
arr.forEach((num, index) => {
    arr[index] = num * 2;
});

arr;
  => [2,4,6,8,10]

let doubled = arr.map(num => {
    return num * 2;
});

doubled;
 => [2,4,6,8,10]
arr;
  => [1, 2, 3, 4, 5]

let arr = [1, 2, 3, 4, 5];

arr.forEach((num, index) => {

arr[index] = num * 2;

});

arr;

=> [2,4,6,8,10]

let doubled = arr.map(num => {

return num * 2;

});

doubled;

=> [2,4,6,8,10]

arr;

=> [1, 2, 3, 4, 5]

Statement vs expression: A statement is a unit of code that accomplish something but does not produce a value. An expression is a unit of code that produces a value.
- statements: variable declarations, iteration, control flow, debugging.
this: keyword that refers to the object it belongs to. Safer if using arrow functions, because arrow function uses whatever this is defined within the scope it is in.
- This, inside a standalone function will refer to the global object.
- Outside any function, this refers t the global object, in web browsers this is window.
- Inside an object method, this refers to the object that received the method call.
- Inside an standalone function, even one inside a method, this will default to the global object.
- When using strict mode in a standalone function, as we do inside classes, this will be undefined.
- We can use .bind, .call and .apply to control the value of this.

Boocket

Boocket is an app for book lovers that want to keep track of the books they want to read. You can search for books in the Google Book database and add them to your personal wishlist. If you can find anything you like you can create a new book and add it to your personal list and delete it when wished. All books are persisted in the Boocket database, so you will have always your list with you!

I used the create-react-app generator to start my project and in specific npx, a npm package runner, a tool to execute node.js packages.

npx create-react-app google-bookshelf

*I have change the name of the app after that.

My JS files, components and containers

index.js file will have my store with Redux that is connected with the rootReducer and thunk, in order to use async actions. index.js renders <Provider /> as the top level component and wrap my <App /> component.

App.js renders <NavBar />, <Footer /> and it is responsible for the React routes too using react-router-dom. I use react-router-dom, that is react-router plus some link improvements, <BrowserRouter> and <NavLink>.

<SearchableBookListContainer /> renders a form and takes care of its ‘query’ state. After the query, it renders a link list of books. This container is connected to the store to dispatch the action of searching and adding an item to the wishlist plus a list created after our search, the searchBookList. The list rendered with the results of the search has nested links to the book itself. Inside Link I pass a pathname and a state with the book object and in my representational Book component I will get this info as props from Link react-router. I can access them as props.location.state.

<WishListContainer /> is connected to the store and gets the wishlist from here and renders it. It dispatch two actions, getMyWishList that fetches my API end point for a list of books and the deleteBook action. The list of books rendered follows same pattern as the one displayed in <SearchableBookListContainer />, and includes links to the book itself.

<CreateBook /> is a container connected to the store to dispatch the action of adding a new book and renders a form to create it.

<Book />, <Home />, <Footer /> and <NotFound /> components are representational components.

<NavBar /> takes care of all links importing from react-router-dom NavLink.

My source for the data is Google Books API. The Google Books API allows a maximum of 40 returned results and can sort only by search relevance and publish dates. I used the first functionality.

Using Redux and Thunk

Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. — https://redux.js.org/

I will use Redux to organize and have all my states in the same place and Thunk as a middleware to help me alter the behaviour of my actions, allowing me asynchronous requests. I will need to dispatch an action saying I am loading data, then to make a request to the API, and then to wait for the response and then dispatch another action with the response data.

With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extend the store’s abilities, and let you write async logic that interacts with the store. — https://redux.js.org/

To install Redux and Thunk in my app I type into my console:

npm install --save redux

npm install --save react-redux

npm install --save redux-thunk

Initialize my store in index.js using createStore Redux function and pass it down to my top-level <App /> container.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import booksReducer from './reducers/booksReducer';

const store = createStore(booksReducer);

ReactDOM.render(
    //We pass our store as a prop to Provider and wrap our App component so it will have access to our Redux store and/or dispatch actions from any component we want.
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import App from './containers/App';

import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux';

import { Provider } from 'react-redux';

import booksReducer from './reducers/booksReducer';

const store = createStore(booksReducer);

ReactDOM.render(

//We pass our store as a prop to Provider and wrap our App component so it will have access to our Redux store and/or dispatch actions from any component we want.

<App />

</Provider>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

To have access to the store in any of our components we import the react-redux function connectinto the component where we want to have access.

If we want some state we can use:

const mapStateToProps = state => {
  return {
    whatEverWeWant: state.whatEverWeWant
  };
};

const mapStateToProps = state => {

return {

whatEverWeWant: state.whatEverWeWant

};

We can access these data as: this.props.whatEverWeWant.

If we want to dispatch an action and update our store we do something like:

const mapDispatchToProps = dispatch => {
  return {
    typeOfOurAction: () => dispatch({ type: 'TYPE_OF_OUR_ACTION' })
  };
};

const mapDispatchToProps = dispatch => {

return {

typeOfOurAction: () => dispatch({ type: 'TYPE_OF_OUR_ACTION' })

};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default connect(

mapStateToProps,

mapDispatchToProps

)(App);

Then to be able to debug I have installed redux-devtools-extension and add this code to my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import booksReducer from './reducers/booksReducer';

const store = createStore(
    booksReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
    //We pass our store as a prop to Provider and wrapp our App component so it will have access to our Redux store and/or dispatch actions from any component we want.
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import App from './containers/App';

import * as serviceWorker from './serviceWorker';

import { createStore } from 'redux';

import { Provider } from 'react-redux';

import booksReducer from './reducers/booksReducer';

const store = createStore(

booksReducer,

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

);

ReactDOM.render(

//We pass our store as a prop to Provider and wrapp our App component so it will have access to our Redux store and/or dispatch actions from any component we want.

<App />

</Provider>,

document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

Considering web accessibility in my app

I have followed some requirements to take into account web accessibility.

WAI-ARIA ( Web Accessibility Initiative – Accessible Rich Internet Applications). I am using Aria HTML attributes.
Using as possible fragments <> </>to group together multiple elements and don’t break the HTML semantic.
Every HTML form control, such as <input> and <textarea> is labeled accessibly.
Create react app has the eslint-plugin-jsx-a11y plugin with a subset of rules activated that checks your code as you develop.

Using docker

I wrapped up the project as a docker image in the Dockerfile.

Creating my API

I follow these instructions and as soon as I have the basics working I do the following:

Create a model for my Book:

rails generate model Book title:string author:text info:text

1	rails generate model Book title:string author:text info:text

I create a seeds file and run my migration:

rails db:migrate

rails db:seed

rails db:migrate

rails db:seed

Generate my controller:

rails generate controller Book

1	rails generate controller Book

Create a serializer for book and draw my endpoint inside config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  resources :books
end

Rails.application.routes.draw do

# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

resources :books

end

How do I connect my react app with my rails API? In my actions. I fetch the end point of my API “books” and GET and POST to it.

This is how my end point looks with my wishlist:

And I think that that’s it! I have enjoyed a lot this project despite it took my a while to figure out Redux functionality. I went through a lot of different problems and learnt a lot. Ah, this bug was my favourite one . I manage to set undefined as my query so my search results were hilarious but very revealing too!