Javascript

Javascript tips

variables

let a = 50; // Can be changed but only valid in scope
var a = 50; // Can be changed but global
const a = 50 // Cannot be changed

Spread

const testData = {
  { name = "Fred", age = 20 }
  { name = "Freda", age = 30 }

Spread spreads them e.g.

    <Card {...testData[0]} />
    <Card {...testData[1]} />

Is the same as

    <Card { name="Fred"  age=20} />
    <Card { name="Freda" age=30} />

functions

Assign function to variable

const X = () => {
   console.log("Fred");
}

Importing

Using export instead of export default means you have to use destruction to import e.g.

import {ActionTypes as types} from '../constants';

For this example constants.js file

import keyMirror from 'keyMirror';

export var ActionType = keyMirror ({
    THIS_IS_A_CONST = null
});

destructure

// const PI = Math.PI;
// const E = Math.E;
// const SQRT2 = Math.SQRT2; 

// Does the same
const {PI, E, SQRT2} = Math;

You can pass a cirucla to and the radius is automatically extracted. Precision can have a default but can also be passed.

const circle = {
    label: 'circleX',
    radius: 2,
};

const circleArea = {{radius}, {precision = 2} = {}) =>
  (PI * radius * radius).toFixed(precision);

console.log(
  circleArea(circle, {precision:5})
);

And arrays

const [first, ...restOfItems] = [10,20,30,40]

// First be 10, restOfitems is and array of 20,30,40

Template Strings

This is like c# interpolation using back ticks.

const html = `<div>${Math.random()}</div>`;

Promises and Async

Old approach to async

const fetchData = async () => {
  const resp = await fetch('https://api.github.com');
  const data = await resp.json();
  console.log(data);
};

fetchData();

New approach

const fetchData = async() => {

  const resp = await fetch('http::/api.github.com');
  const data = await resp.json();

  console.log(data);
}

fetchData();

Generators

The function * denotes a generator function. The function is executed until yield. Subsequent calls remember the value of yield and continue to the next yield

 function * myGen(i) 
 {
    while(true)
    {
       yield i = i * 10;
    }
 }

 fred = myGen(10);

 console.log(fred.next());
 console.log("Fred was ere 1");

 console.log(fred.next());
 console.log("Fred was ere 2");

 console.log(fred.next());
 console.log("Fred was ere 3");

Output would be{ value: 100, done: false }

Fred was ere 1
{ value: 1000, done: false }
Fred was ere 2
{ value: 10000, done: false }
Fred was ere 3

react functions and state

Normal function

function logRandom() {
    console.log(Math.random());
}

function Button() {

 const [count, setCounter] = useState(0);
 return <button onClick={logRandom}>{counter}</button>;
}

inline function

function Button() {

 const [count, setCounter] = useState(0);
 return <button onClick={

  function logRandom() {
      console.log(Math.random());
  }

 }>{counter}</button>;
}

inline arrow function definition

function Button() {

 const [count, setCounter] = useState(0);
 return <button onClick={() = > console.log(Math.random())}>{counter}</button>;
}

Passing Props

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
	return (
  	<button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
	return (
  	<div>{props.message}</div>
  );
}

function App() {
	const [counter, setCounter] = useState(0);
  const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);
	return (
    <div>
      <Button onClickFunction={incrementCounter} increment={1} />
      <Button onClickFunction={incrementCounter} increment={5} />
      <Button onClickFunction={incrementCounter} increment={10} />
      <Button onClickFunction={incrementCounter} increment={100} />
      <Display message={counter}/>
    </div>  
  );
}

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