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

Objects

You can create an object using this

const sessionId = 1;
const burke1 = sessionId
const burke2 = sessionId +1
const burke3 = sessionId +2
const burke4 = sessionId +3
const burke5 = sessionId +4

const mee = {
  burke1,
  burke2,
  burke3,
  burke4,
  burke5,
}

Will create a object with keys the same name as the values e.g.

mee.burke1 // = 1
mee.burke2 // = 2

Class Field declarations

You can declare classes like

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

This will simplify the class state e.g. was

class App Extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            profile: testData,
        } 
    }
}

To

class App Extends React.Component {

    state = {
       profile: testData,
    }
}

Property Syntax

You can reference a property of an object via a variable. In the example below we have assigned c to myPropertyName.

const myPropertyName = 'c'

const myObject = {
  a: 5,
  b: 10,
  [myPropertyName]: 15
} 

console.log(myObject.c) // prints 15

Comparisons

The following would be true with loose comparisons

    if("20" == 20) {
       console.log("true");
    }
    else {
       console.log("false");
    }

But false with strict comparisons

    if("20" === 20) {
       console.log("true");
    }
    else {
       console.log("false");
    }

This is because the type is compared in strict comparisons

Array

Add

    const newArray = myArray.concat(newElement)

Filter

    const newArray = myArray.filter(
        n=> !myOtherArray.includes(n)
    }

Spread

Spreading array

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} />

Appending to an array

    testData: [...prevState.testData, newTestData]

Map

Given we can spread elements we can also spread array e.g

    <div>
        {testData.map( element=> <Card {...element} />) }
    </div>

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'),
);