Category Archives: Javascript

Miscellaneous React js notes

Posted in Javascript on July 24, 2019 by rowej83.

useEffect Notes

useEffect is called on initial load and every update after unless an empty dependency array is entered.. then it is only performed on first load:

useEffect(()=>{
//this will only be performed on first load
},[]);


useEffect(()=>{
//this will only be performed on first load and everytime 
// someVariableThatHasChanged has been updated
},[someVariableThatHasChanged]);

useEffect(()=>{

//this will only be performed on first load

},[]);

useEffect(()=>{

//this will only be performed on first load and everytime

// someVariableThatHasChanged has been updated

},[someVariableThatHasChanged]);

For ajax calls on initial loads or in useEffect in general..async/await is only allowed if done in this way:

//below is allowed
useEffect(()=>{
async function getData(){
//get ajax data
}
let returnedData=await getData();
});

// Having async in the way below is not allowed.

useEffect(async ()=>{
let returnedData=await getData();
});

//below is allowed

useEffect(()=>{

async function getData(){

//get ajax data

}

let returnedData=await getData();

});

// Having async in the way below is not allowed.

useEffect(async ()=>{

let returnedData=await getData();

});

useEffect & setState

useEffect generally would get the “stale” state value however we can pass in a callback to the setState function in order to recieve/use the previous states value

useEffect(()=>{
//normally using setState as below wouldn't work 
//because the actual value in someState is "stale"
setSomeState(someState+1); // will always return 1 because the stale someState would be it's initial value of 0

//below would work because the callback provides the actual previous state value

setSomeState(someState =>someState+1);


},[someState]);

useEffect(()=>{

//normally using setState as below wouldn't work

//because the actual value in someState is "stale"

setSomeState(someState+1); // will always return 1 because the stale someState would be it's initial value of 0

//below would work because the callback provides the actual previous state value

setSomeState(someState =>someState+1);

},[someState]);

The remaining problem with this is that you can only access the previous state value if you are setting (setSomeState) it. One work around that is provided is to use Refs

Using useRefs for current state value in useEffect

Refs exist outside of the re-render cycle and there for their actual current value isn’t effected by re-renders and so the value at ref.current will stay “current”. So the ref.current value will be what it was set last and not being reset or altered by a re-render. However, refs aren’t reactive.

function Timer() {
    const [count, setCount] = React.useState(0)
    const countRef = React.useRef(0)

    React.useEffect(() => {
        const intervalId = setInterval(() => {
            countRef.current = countRef.current + 1
            setCount(countRef.current) // we don't need the call back to reference
  // the previous state in order to update it properlly because we use ref.current which 
  // retains it's value and isn't affect by the re-renders.
        }, 1000)
        return () => clearInterval(intervalId)
    }, [])

    return (
        <div>The count is: {count}</div>
    )
}

function Timer() {

const [count, setCount] = React.useState(0)

const countRef = React.useRef(0)

React.useEffect(() => {

const intervalId = setInterval(() => {

countRef.current = countRef.current + 1

setCount(countRef.current) // we don't need the call back to reference

// the previous state in order to update it properlly because we use ref.current which

// retains it's value and isn't affect by the re-renders.

}, 1000)

return () => clearInterval(intervalId)

}, [])

return (

<div>The count is: {count}</div>

)

}

The problem with this approach is that refs aren’t reactive and so shouldn’t be used like how <div>The count is: {count}</div> is displayed because the actual value that is displayed (the counting would still happen behind the scene tho ) won’t update until the component is re-rendered.

React Router

Import react-router-dom to use for web. Wrap <BrowserRouter></BroswerRouter> around <App/> in the index.js

To create routes you would do the following:

<Route exact path="/" component={TestComponent} />
<Route exact path="/test2" component={TestComponent2} />
<Route exact path="/test3" component={TestComponent3} />
<Route exact path="/test4" component={TestComponent4} />

// this is inclusive so any  and all patterns match will be included if "exact" 
// keyword isn't used.

// Can also wrap all of the routes in a <Switch></Switch> component
// and that will render only the FIRST to match the pattern exclusively

// this is inclusive so any and all patterns match will be included if "exact"

// keyword isn't used.

// Can also wrap all of the routes in a <Switch></Switch> component

// and that will render only the FIRST to match the pattern exclusively

Link vs NavLink

To link to a route you can use Link or NavLink. The difference mostly is that Link will just create a <a> element pointing to the route ( which doesn’t actually issue a GET request like a link normally would ). Navlink will do the same thing but it is to be used in menus because you can set a prop in Navlink to indicate the “active” route so it can be styled properly.

<Link to="/">Test1</Link> // creates simple <a> to route

<NavLink to="/" activeClassName="active-route">Test1</NavLink>

// above will put a class of active-route on the link it produces
// so it can be styled different using CSS and classes


<NavLink to="/" activeStyle={{ color:'red' }}>Test1</NavLink>

// activeStyle is a inline prop where you can specify what
// css should be applied if it is the active route.

<Link to="/">Test1</Link> // creates simple <a> to route

// above will put a class of active-route on the link it produces

// so it can be styled different using CSS and classes

// activeStyle is a inline prop where you can specify what

// css should be applied if it is the active route.

Passing a prop to a route ( render vs component props )

// below will pass a prop to the route but it is the wrong 
// way of doing so because the component will be recreated
// every time going through the whole life cycle

<Route exact path="/" component={()=><TestComponent name="jason"/>} />

// we can prevent the needless re-render by using render instead:

<Route exact path="/" render={()=><TestComponent name="jason"/>} />

// this will make it so the component isn't needlessly re-rendering.

// below will pass a prop to the route but it is the wrong

// way of doing so because the component will be recreated

// every time going through the whole life cycle

// we can prevent the needless re-render by using render instead:

// this will make it so the component isn't needlessly re-rendering.

URL Parameters with Router

When a route is declared and component/render/children is used, 3 things are passed to component/render/children under one component.. — history, location , match

So we can do the following to extract the parameter in a given route

<Route exact path="/:name" 
render={(routeProps)=>
<TestComponent name={routeProps.match.params.name/>} />

// in path, :name is the parameter for the route
// when using render/children/component a route prop is
// supplied (in our case it's called routeProps) with 
// the parameters available under
// routeProps.match.params.name

<Route exact path="/:name"

render={(routeProps)=>

// in path, :name is the parameter for the route

// when using render/children/component a route prop is

// supplied (in our case it's called routeProps) with

// the parameters available under

// routeProps.match.params.name

Redirects

Can use Redirect component from react-router-dom .

// Simply doing below  will bring the user to the route for '/'

<Redirect to='/' />

// Simply doing below will bring the user to the route for '/'

Redirect programmatically

This is done by pushing on the browser history stack. In order to be able to do that, the routeProps has to be passed down when the <Route/> is created. This is done automatically if using componenet={SomeComponent} but needs to be passed manually if done via render instead. i.e. You would only need to use render if you want to pass other props to the Route’s component.

props.history.push('/') // will bring to base url

// this will only work if you pass in route props.. 

//i.e. when defining the route

<Route path="/" render={(routeProps)=>{<SomeComponent {...routeProps}/>}}

// now you can push to the routeProps history
// since SomeComponent has routeProps passed to it.
// and it will bring you to '/'

// NOTE - if you use component instead of render then
//i.e.
<Route path="/" component={SomeComponent}/>

// routeProps is already passed in and can be used
// to push on history

props.history.push('/') // will bring to base url

// this will only work if you pass in route props..

//i.e. when defining the route

<Route path="/" render={(routeProps)=>{<SomeComponent {...routeProps}/>}}

// now you can push to the routeProps history

// since SomeComponent has routeProps passed to it.

// and it will bring you to '/'

// NOTE - if you use component instead of render then

//i.e.

// routeProps is already passed in and can be used

// to push on history

Some differences of history.push vs <Redirect>

<Redirect /> won’t change the back button so if you redirect to a url that goes to a 404 then hitting the back button won’t bring them back to the url that will re-redirect to the 404 page. history.push will make the back button to the route that was pushed – so, if history.push to a route that goes to a 404 then hitting the back button will bring it back to the route that took it to the 404 and will be a endless loop.

Redirecting via history.push when the component has no route its self and so no routeProps – use withRouter

import React from 'react';
import {withRouter} from 'react-router-dom';

const RandomPropThatHasNoRoute=(props)=>{
return (<button onClick={e=>{props.history.push('/newPage');}} > Click to redirect </button>
}

export default withRouter(RandomPropThatHasNoRoute);

// the history push will only work if withRouter is set as above 
// because otherwise this componenet that has no <Route/> will not
// be given the routeprops(history).

import React from 'react';

import {withRouter} from 'react-router-dom';

const RandomPropThatHasNoRoute=(props)=>{

return (<button onClick={e=>{props.history.push('/newPage');}} > Click to redirect </button>

}

export default withRouter(RandomPropThatHasNoRoute);

// the history push will only work if withRouter is set as above

// because otherwise this componenet that has no <Route/> will not

// be given the routeprops(history).

props.history.goBack() and props.history.goFoward()

These methods are available if needed to create functionality in the app similiar to the browsers forward and back button.

React Context API

Components can easier share values/functions by being wrapped in a Context.Provider component. Any component that uses that particular Context will be re-rendered when that Context’s value changes. This may cause un-wanted re-renders.

An example of using the Context Hook:

// in a seperate file (context.js) we initialize the context

import React from 'react';

export const todoContext=React.createContext();

// then in container components or App.js/index.js we can 
// wrap other components with the created context provider and pass
// along objects to any children components so that the
// values are available

// App.js

import React from 'react';
import ReactDom from 'react-dom';
import {todoContext} from './contexts.js'
const App=()=>{

return (
<>
<h1>Main App</>
<todoContext.Provider value={{count:100}}> //now count is available in 
                                           // child component(s)
  <ChildComponent1 />
  <ChildComponent2 />
</todoContext>

</>
)
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// then in the child component you can consume the value(count) via:
// Childcomponent1.js

import React from 'react';
import todoContext from './contexts.js';

const ChildComponent1=()=>{

// we retrieve and deconstruct the value object to extract count
const {count}=React.useContext(todoContext); 

return (<p> Showing the count retrieved from Context {count} </p>)
}
export default ChildComponent1;

// in a seperate file (context.js) we initialize the context

import React from 'react';

export const todoContext=React.createContext();

// then in container components or App.js/index.js we can

// wrap other components with the created context provider and pass

// along objects to any children components so that the

// values are available

// App.js

import React from 'react';

import ReactDom from 'react-dom';

import {todoContext} from './contexts.js'

const App=()=>{

return (

<todoContext.Provider value={{count:100}}> //now count is available in

// child component(s)

</todoContext>

</>

)

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

// then in the child component you can consume the value(count) via:

// Childcomponent1.js

import React from 'react';

import todoContext from './contexts.js';

const ChildComponent1=()=>{

// we retrieve and deconstruct the value object to extract count

const {count}=React.useContext(todoContext);

return (<p> Showing the count retrieved from Context {count} </p>)

}

export default ChildComponent1;

One issue with above is the todoContext using an object for the values ( values={{count:100}} ) , this will cause needless re-renders because the object will be rebuilt every time.

Setting Disabled attribute based on a function (computed property) that returns a boolean

// validateNames is the function we want to run to check if 2 state vars 
// are set and return true or false based on that.

const validateNames = () => {
    if (pluginMeta.className != "" && pluginMeta.nonceName != "") {
      return false;
    } else {
      return true;
    }
  };

// we use validateNames in a ternary to create an object 
// containing disabled if validatesNames returns true 
// it will return an empty object ( not disabling) if false


let disabled = validateNames() ? { disabled: "disabled" } : {};

// finally, we spread the disabled variable as below which
// will either add the disabled attribute or nothing ( empty object )

<Button onClick={handleCloseModal}   {...disabled}>Finished</Button>

// validateNames is the function we want to run to check if 2 state vars

// are set and return true or false based on that.

const validateNames = () => {

if (pluginMeta.className != "" && pluginMeta.nonceName != "") {

return false;

} else {

return true;

}

};

// we use validateNames in a ternary to create an object

// containing disabled if validatesNames returns true

// it will return an empty object ( not disabling) if false

let disabled = validateNames() ? { disabled: "disabled" } : {};

// finally, we spread the disabled variable as below which

// will either add the disabled attribute or nothing ( empty object )

<Button onClick={handleCloseModal} {...disabled}>Finished</Button>

Conditionally show a component based on a state array not being empty.

Casting the input.Values.length as a Boolean enables this to be possible. Without casting , it would return a 0 to the screen which is not what is desired.

{inputValues && Boolean(inputValues.length) && (
        <>
          <p>This will only show if the array exists and isn't empty.</p>
        </>
)}

{inputValues && Boolean(inputValues.length) && (

<p>This will only show if the array exists and isn't empty.</p>

</>

)}

Setup Codesandbox.io + Jest to work with React Components for testing.

Posted in Javascript on June 18, 2019 by rowej83.

First step is create a new sandbox with the create-react-app base. Then add these three dependencies to your sandbox.

enzyme & enzyme-adapter-react-16 & @testing-library/react

The enzyme-adapter-react-16 name will slightly change with newer releases of react.

Next, create a file in your src folder and name it setupTests.js . This files goves jest with the ability to understand React.

// setTest.js

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

// React 16 Enzyme adapter, at the time of this writing.
Enzyme.configure({ adapter: new Adapter() });

// setTest.js

import Enzyme from "enzyme";

import Adapter from "enzyme-adapter-react-16";

// React 16 Enzyme adapter, at the time of this writing.

Enzyme.configure({ adapter: new Adapter() });

Also, insert this in to your package.json file.

 "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

"jest": {

"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"

}

Now, for our test scenario we will create and use a functional component ( using hooks ) that has 1 input ( that will use useState ) and 1 prop to use and test.

Miscellaneous Javascript Notes

Posted in Javascript on March 1, 2019 by rowej83.

Common Regex:

For checking for a format such as : (856) 999-7777 use regex: /^$\d{3}$\s\d{3}-\d{4}$/

Ternary

(condition) ? 'value if true' : 'value if false';

// Can also have multiple ?'s, below has 3 conditions total if the 
// first 2 are false.

let result = (condition) ? 'value if true' : (2ndconditionIfFalse)
? 'value if 2nd con is true' : (3rdConditionIfFalse) ? 'returned value if 3rd is true' :
'returned value if 3rd is false';

(condition) ? 'value if true' : 'value if false';

// Can also have multiple ?'s, below has 3 conditions total if the

// first 2 are false.

let result = (condition) ? 'value if true' : (2ndconditionIfFalse)

? 'value if 2nd con is true' : (3rdConditionIfFalse) ? 'returned value if 3rd is true' :

'returned value if 3rd is false';

Boolean conversions

A number 0, an empty string "", null, undefined, and NaN all become false. Because of that they are called “falsy” values.

Break & Continue

// break will "break" out of the loop entirely 

for (let i = 0; i < 3; i++) {
  if (i == 2) {
    break;
  }
  alert(i);  // alert will never show 2 because it will break the loop
}
// continue will allow the following to execute in a loop

for (let i = 0; i < 3; i++) {
  if (i == 2) {
    continue;
  }
  alert(i);  // alert will only show 2 because the "continue" keyword 
}

// break will "break" out of the loop entirely

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

if (i == 2) {

break;

}

alert(i); // alert will never show 2 because it will break the loop

}

// continue will allow the following to execute in a loop

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

if (i == 2) {

continue;

}

alert(i); // alert will only show 2 because the "continue" keyword

}

For loop:

for (let i = 0; i < 5; ++i) alert( i );

// Execute once i = 0 before everything (begin).
// Check the condition i < 5
// If true – note it willonly execute the loop body alert(i), and then i++

for (let i = 0; i < 5; ++i) alert( i );

// Execute once i = 0 before everything (begin).

// Check the condition i < 5

// If true – note it willonly execute the loop body alert(i), and then i++

Breaking out of a nest for loop ( named loops ):

outer: for (let i = 0; i < 3; i++) {

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

    let input = prompt(`show values: (${i},${j})`, '');

    // if an empty string or canceled, then break out of both loops
    // other wise it will keep prompting with new values 

    if (!input) break outer; // (*)

    // do something with the input ( or i / j ) if the loop isn't broken out of
  }
}
alert('Done!');

outer: for (let i = 0; i < 3; i++) {

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

let input = prompt(`show values: (${i},${j})`, '');

// if an empty string or canceled, then break out of both loops

// other wise it will keep prompting with new values

if (!input) break outer; // (*)

// do something with the input ( or i / j ) if the loop isn't broken out of

}

alert('Done!');

Curried Functions

The process of breaking up a multiple parameter function in to multiple single(or more) parameters.

Useful for : If you don’t provide all parameters for a function, it returns a function whose input are the remaining parameters and whose output is the result of the original function.

// normal function that takes in multiple parameters at once
function tripleAdd1(num1, num2, num3) {
  return num1 + num2 + num3;
}

// curried version of the function above that breaks down the 3 parameters 
// in to a set of single parameter functions
function tripleAdd(num1) {
  return function(num2) {
    return function(num3) {
      return num1 + num2 + num3;
    };
  };
}

// normal function that takes in multiple parameters at once

function tripleAdd1(num1, num2, num3) {

return num1 + num2 + num3;

}

// curried version of the function above that breaks down the 3 parameters

// in to a set of single parameter functions

function tripleAdd(num1) {

return function(num2) {

return function(num3) {

return num1 + num2 + num3;

};

}

Useful ways of using Currying:

function getTravelTime(distance) {
  return function(speed) {
    return distance / speed;
  };
}
// getTravelTime usually takes distance and speed but to use for specific
// cases where the distance doesn't change.. you can use below which will end up
// return a function customized to using the same distance since it doesn
// exist

const travelTimeBosNyc = getTravelTime(400);
// above creates a function with a preset distance of 400

// below travelTimeBoysNyc supplies the speed variable to finally calculate 
// completely.
console.log(travelTimeBosNyc(100));

function getTravelTime(distance) {

return function(speed) {

return distance / speed;

};

}

// getTravelTime usually takes distance and speed but to use for specific

// cases where the distance doesn't change.. you can use below which will end up

// return a function customized to using the same distance since it doesn

// exist

const travelTimeBosNyc = getTravelTime(400);

// above creates a function with a preset distance of 400

// below travelTimeBoysNyc supplies the speed variable to finally calculate

// completely.

console.log(travelTimeBosNyc(100));

Closures

Closures provide two unique purposes. One is memory management and the other is encapsulation. Currying is an example usage of Closures.

Using closures creates a lexical scope that will store variables within it and are available for subsequent functions that may be returned within a function.

//Memory Management(container)

function MultiplyBy(num1){

// function within a function creates the closure. num1 is available 
// to the returned function 
return function(num2){

return num1*num2;

}
}

const MultiplyByFive=MultiplyBy(5); // sets num1=5
console.log(MultiplyByFive(2)); // returns 10

// MultiplyBy is called with 5 as the param and and returns a new
// function stored in MultiplyByFive that will keep the num1=5 for the
// lifetime of MultiplyByFive

// all values declared within the closure functions as well as the params
// are available due to their lexical scope

//Memory Management(container)

function MultiplyBy(num1){

// function within a function creates the closure. num1 is available

// to the returned function

return function(num2){

return num1*num2;

}

const MultiplyByFive=MultiplyBy(5); // sets num1=5

console.log(MultiplyByFive(2)); // returns 10

// MultiplyBy is called with 5 as the param and and returns a new

// function stored in MultiplyByFive that will keep the num1=5 for the

// lifetime of MultiplyByFive

// all values declared within the closure functions as well as the params

// are available due to their lexical scope

For Encapsulation the same idea exists except that a function that is declared within another function but not directly returned (instead as maybe a property of a returned object instead) will still benefit from being able to access the internal values of the nesting closure function

function MakeCounter(){
let count=0;
const increaseCount=()=>{count++} // will increase count stored in lexical scope(closure)
const displayCount=()=>{console.log(count)}

//instead of returning functions, we encapsulate 
//in a object what we  want available to the user
return {
increaseCount,
displayCount
}

}

let newCounter=MakeCounter();
newCounter.displayCount(); // shows as 0 since count is initialized at 0

/* 
the provided function in the object will increase count by 1. In this case 3 times
*/
newCounter.increaseCount(); 
newCounter.increaseCount();
newCounter.increaseCount();


newCounter.displayCount(); // shows 3 as the count that's in lexical scope

function MakeCounter(){

let count=0;

const increaseCount=()=>{count++} // will increase count stored in lexical scope(closure)

const displayCount=()=>{console.log(count)}

//instead of returning functions, we encapsulate

//in a object what we want available to the user

return {

increaseCount,

displayCount

}

let newCounter=MakeCounter();

newCounter.displayCount(); // shows as 0 since count is initialized at 0

the provided function in the object will increase count by 1. In this case 3 times

newCounter.increaseCount();

newCounter.displayCount(); // shows 3 as the count that's in lexical scope

Closure to count how many times a function to ran

The function initializes a counter and then returns an anonymous function which increments the counter. To be used, a variable must be made that is equal to the containing function and is invoked. Then, the variable created will be invoked in order to increase the count.

Example below:

function myFunc() {
  let count = 0;
  
  return function() {
    count++;
    return count;
  };
}

console.log(myFunc());

const instanceOne = myFunc();
const instanceTwo = myFunc();

console.log('instanceOne: ', instanceOne()); // returns 1
console.log('instanceOne: ', instanceOne()); // returns 2
console.log('instanceOne: ', instanceOne()); // returns 3
console.log('instanceTwo: ', instanceTwo()); // returns 1
console.log('instanceTwo: ', instanceTwo()); // returns 2
console.log('instanceOne: ', instanceOne()); // returns 4

function myFunc() {

let count = 0;

return function() {

count++;

return count;

};

}

console.log(myFunc());

const instanceOne = myFunc();

const instanceTwo = myFunc();

console.log('instanceOne: ', instanceOne()); // returns 1

console.log('instanceOne: ', instanceOne()); // returns 2

console.log('instanceOne: ', instanceOne()); // returns 3

console.log('instanceTwo: ', instanceTwo()); // returns 1

console.log('instanceTwo: ', instanceTwo()); // returns 2

console.log('instanceOne: ', instanceOne()); // returns 4

Hoisting

Variable that are defined are brought to the top of the file ( or function it resides in i.e. IIFE ) but remain undefined until the line where the variable is set.

For example.

var temp;

// the existence of the variable temp is brought to the top
// but remains undefined until the actual line below 
// ( originally var temp="Jason"; )

temp="Jason";

// This is truth for function expressions as well.

var tempFunction=function(){

// inside of function expression.

}

var temp;

// the existence of the variable temp is brought to the top

// but remains undefined until the actual line below

// ( originally var temp="Jason"; )

temp="Jason";

// This is truth for function expressions as well.

var tempFunction=function(){

// inside of function expression.

}

function declarations are also hoisted but are set at the time that the interrupter runs. function declarations can be safer for this reason.

When a variable or function is created within another function or IIFE, it is hoisted only to the top of the parent function (function scope) – not the global scope. This only applies when using var as it is function scoped.

const and let are aware of global/function scope but unlike var, const and let are aware of block scope (function,if,for,while loop). Hoisting with const and let only happens to the top of the block it was declared in.

unlike var, const and let do not have any value when hoisted until the actual declaration is reached and will throw an error if trying to be accessed before it’s declaration is reached. var is automatically undefined until it’s declaration is reached and will not throw an error if is tried to be accessed before it is defined/declared.

Strict mode

Enabled by placing ‘use strict’; at the top of a js file.

Strict mode will enforce a few things. One is that a variable must use either var,let or const or it will be considered undefined.

// in strict mode below is not accept and will result in undefined

code="the code";
console.log(code);

// below will work however

var code="the code";
console.log(code);

// in strict mode below is not accept and will result in undefined

code="the code";

console.log(code);

// below will work however

var code="the code";

console.log(code);

In strict mode, all function parameters must have an unique name. Otherwise, an error will be thrown.

Without strict mode, JavaScript will interpret the last use of the parameters name as the prevailing value.

function test(a,a,b){
console.log(a,a,b);
}

test(1,2,3); // this will result in 2 2 3 since 2 is the last 
// value passed in for the "a" parameter

function test(a,a,b){

console.log(a,a,b);

}

test(1,2,3); // this will result in 2 2 3 since 2 is the last

// value passed in for the "a" parameter

Strict mode also prevents the ability to delete properties on objects that we shouldn’t be able to delete such as:

delete Object.prototype;

1	delete Object.prototype;

this and controlling it

this is the object that the function is a property of

Four ways to control this

function constructors and the use of “new”
implicit binding (most common)
explicit binding ( i.e. use of bind(), call() and apply() )
arrow function to maintain lexical scope of this

//1. Use of new
function Person(age, name) {
    this.age = age; // this in this case is the function constructor
    this.name = name;
}

let newPerson = new Person(10, 'jason'); // new operator will make the use of this 
// inside the function constructor refer to 
//it's self instead of the global scope(window).

//2. implicit binding
const person = {
    name: 'jason',
    age: 10,
    sayHello: function() {
        console.log(this.name + ' is ' + this.age + ' years old.');
    }
}

//3. explicit binding
// the use of bind for instance

const person2 = {
    name: 'jason',
    age: 10,
    sayHello: function() {
        console.log(this.name + ' is ' + this.age + ' years old.');
    }.bind(window) // instead of this refering to the person2 object
    // it refers to the window for "this" instead.
}

//4. arrow functions, arrow func will maintain the lexical scoping
//normally if a function is declared in a object or another function.. this refers
// to the inner function and not the surrounding object or function. if 
// you use arrow functions.. the inner function will maintain the outer object/function
//as this... hence , keeping it's lexical scope

const person3 = {
    name: 'jason',
    age: 10,
    sayHello: function() {
        console.log(this.name + ' is ' + this.age + ' years old.');
        let innerFunction = () => {
            console.log('hello' + this.name) // because an arrow func was used.. 
            //this still refers to the outer function's this which is the object person3.
        }
    }
}

//1. Use of new

function Person(age, name) {

this.age = age; // this in this case is the function constructor

this.name = name;

}

let newPerson = new Person(10, 'jason'); // new operator will make the use of this

// inside the function constructor refer to

//it's self instead of the global scope(window).

//2. implicit binding

const person = {

age: 10,

sayHello: function() {

console.log(this.name + ' is ' + this.age + ' years old.');

}

//3. explicit binding

// the use of bind for instance

const person2 = {

age: 10,

sayHello: function() {

console.log(this.name + ' is ' + this.age + ' years old.');

}.bind(window) // instead of this refering to the person2 object

// it refers to the window for "this" instead.

}

//4. arrow functions, arrow func will maintain the lexical scoping

//normally if a function is declared in a object or another function.. this refers

// to the inner function and not the surrounding object or function. if

// you use arrow functions.. the inner function will maintain the outer object/function

//as this... hence , keeping it's lexical scope

const person3 = {

age: 10,

sayHello: function() {

console.log(this.name + ' is ' + this.age + ' years old.');

let innerFunction = () => {

console.log('hello' + this.name) // because an arrow func was used..

//this still refers to the outer function's this which is the object person3.

}

Misc Notes

// inside of a IIFE
(function(){
var x=200;
y=200;
})

console.log(y); // this will work as y is global since no var is included

console.log(x); // this will show as undefined since outside of IIFE and 
// the variable used var so it is not in global scope. It is in function 
// scope only.

// inside of a IIFE

(function(){

var x=200;

y=200;

})

console.log(y); // this will work as y is global since no var is included

console.log(x); // this will show as undefined since outside of IIFE and

// the variable used var so it is not in global scope. It is in function

// scope only.

Objects i.e. {} can only have properties as string types.

var obj1={
name:"Jason",
"last name":"R",
1:"Middle Name"
}; 
// name and "last name" are valid because they are a string
// 1 as a property name is valid because it is turned in to a string

var obj1={

name:"Jason",

"last name":"R",

1:"Middle Name"

};

// name and "last name" are valid because they are a string

// 1 as a property name is valid because it is turned in to a string

If a property of an object is given another object.. Javascript will turn the object property in to a string of “[object object]”

const a = {};
const b = { name: 'b' };
const c = { name: 'c' };

a[b] = 200;
// a['[object Object]'] = 200

a[c] = 400;
// a['[object Object]'] = 400

console.log(a[b]); // would show 400 since passing an object to 
// another objects property will result in the property being set in to a string
// of '[object Object]'
// console.log(a['[object Object]']);

const a = {};

const b = { name: 'b' };

const c = { name: 'c' };

a[b] = 200;

// a['[object Object]'] = 200

a[c] = 400;

// a['[object Object]'] = 400

console.log(a[b]); // would show 400 since passing an object to

// another objects property will result in the property being set in to a string

// of '[object Object]'

// console.log(a['[object Object]']);

call() and apply() methods

Both are available for any function that is created. call() is another way to call a function and to give it different variables. You can also change the “this” context.

// getCarDescription is defined in car1 but will be used 
// by call/apply to provide different a different brand variable
// via providing a different "this" context.

const car1 = {
  brand: 'Porsche',
  getCarDescription: function(cost, year, color) {
    console.log(`This car is a ${this.brand}. The price is $${cost}. The year is ${year}. The color is ${color}.\n`);
  }
};

const car2 = {
  brand: 'Lamborghini'
};

// function called via normal method where this is car1
// so brand will be Porche
car1.getCarDescription(80000, 2010, 'blue');

// function called via call() where car2's brand is used 
// because 'this' is changed to car2.
// then the rest of the functions parameters are provided.
car1.getCarDescription.call(car2, 200000, 2013, 'yellow');

// getCarDescription is defined in car1 but will be used

// by call/apply to provide different a different brand variable

// via providing a different "this" context.

const car1 = {

brand: 'Porsche',

getCarDescription: function(cost, year, color) {

console.log(`This car is a ${this.brand}. The price is $${cost}. The year is ${year}. The color is ${color}.\n`);

}

};

const car2 = {

brand: 'Lamborghini'

};

// function called via normal method where this is car1

// so brand will be Porche

car1.getCarDescription(80000, 2010, 'blue');

// function called via call() where car2's brand is used

// because 'this' is changed to car2.

// then the rest of the functions parameters are provided.

car1.getCarDescription.call(car2, 200000, 2013, 'yellow');

apply() is very similar except that it uses an array [] to input the remaining parameters.

For example:

const car3 = {
  brand: 'Ford'
};

car1.getCarDescription.apply(car3, [35000, 2012, 'black']);

const car3 = {

brand: 'Ford'

};

car1.getCarDescription.apply(car3, [35000, 2012, 'black']);

Copy by value vs reference

If a variable has a primitive type ( number, string, boolean ) and is copied by another variable.. it is copied by value. So if the original variable’s value is changed, the new variable that was made when coping the original will not be changed.

var var1=1; // can be any primitive type, string, Boolean etc
var var2=var1; // var2 = 1 at this point
var1=3;
console.log(var2) // will out put 1 still since it is copied by value.

var var1=1; // can be any primitive type, string, Boolean etc

var var2=var1; // var2 = 1 at this point

var1=3;

console.log(var2) // will out put 1 still since it is copied by value.

If a non-primitive type is copied – it is by reference. So if a variable is set to an array and another variable is set to that variable.. both will reference that array and if either variable pushes/pops a value out of the array.. both will reflect that same array.

var arr1=[1,2,3,4];
var arr2=arr1;
arr1.push(3,5);

console.log(arr2) // will show 1,2,3,4,3,5 since by reference.

// if arr1 is set to a new array completely, then arr2 will still
// point to the old array and if arr1 is altered - arr2 will not reflect it

arr1=[4,5,6];
console.log(arr2) // will still show old array. 1,2,3,4,3,5 because
// it still references the old array in memory

console.log(arr1); // will show new array 4,5,6

var arr1=[1,2,3,4];

var arr2=arr1;

arr1.push(3,5);

console.log(arr2) // will show 1,2,3,4,3,5 since by reference.

// if arr1 is set to a new array completely, then arr2 will still

// point to the old array and if arr1 is altered - arr2 will not reflect it

arr1=[4,5,6];

console.log(arr2) // will still show old array. 1,2,3,4,3,5 because

// it still references the old array in memory

console.log(arr1); // will show new array 4,5,6

One way to copy an array variable to another variable by value is to do the following:

var arr1=[1,2,3,4];

//both methods below will create arr2 and arr3 with the same 
//array values as arr1 but by value only

var arr2=arr1.slice();
var arr3=arr1.concat([]);
arr1.push(6);
console.log(arr1); // shows 1,2,3,4,6
console.log(arr2); // shows 1,2,3,4
console.log(arr3); // shows 1,2,3,4

// could use for loop on arr1 to push in to arr2 or arr3 
// that unnecessary extra code

var arr1=[1,2,3,4];

//both methods below will create arr2 and arr3 with the same

//array values as arr1 but by value only

var arr2=arr1.slice();

var arr3=arr1.concat([]);

arr1.push(6);

console.log(arr1); // shows 1,2,3,4,6

console.log(arr2); // shows 1,2,3,4

console.log(arr3); // shows 1,2,3,4

// could use for loop on arr1 to push in to arr2 or arr3

// that unnecessary extra code

Comparing two different identical objects (or arrays) will never result in true. One way to check however is to JSON.stringify both and than compare.

let obj1={
name:"Jason"
};
let obj2={
name:"Jason"
}
console.log(obj1==obj2) // will always result in false since
// each object is passed by reference so the different objects 
// point to different addresses in memory.

// however, can JSON stringify to check if the same.
console.log(JSON.stringify(obj1) == JSON.stringify(obj2)) // results in true

let obj1={

name:"Jason"

};

let obj2={

name:"Jason"

}

console.log(obj1==obj2) // will always result in false since

// each object is passed by reference so the different objects

// point to different addresses in memory.

// however, can JSON stringify to check if the same.

console.log(JSON.stringify(obj1) == JSON.stringify(obj2)) // results in true

Array Constructor

var arr1 = [];
var arr2 = new Array(50);
var arr3 = new Array(1, 2, "three", 4, "five");
var arr4 = new Array([1, 2, 3, 4, 5]);

// arr1 results in an empty array - []
// arr2 results in an array with 50 empty items (length:50)
// when passing a single number parameter in to Array(), you 
// get an array with that number's amount of empty items

// arr3 will create an array with the enclosed parameters as 
// individual members of the array. i.e. [1,2,"three",4,"five"]

// arr4 will return an array with one item in it that is a an 
// array so would look like
// [0:[1, 2, 3, 4, 5]]

var arr1 = [];

var arr2 = new Array(50);

var arr3 = new Array(1, 2, "three", 4, "five");

var arr4 = new Array([1, 2, 3, 4, 5]);

// arr1 results in an empty array - []

// arr2 results in an array with 50 empty items (length:50)

// when passing a single number parameter in to Array(), you

// get an array with that number's amount of empty items

// arr3 will create an array with the enclosed parameters as

// individual members of the array. i.e. [1,2,"three",4,"five"]

// arr4 will return an array with one item in it that is a an

// array so would look like

// [0:[1, 2, 3, 4, 5]]

JSON Notes

Double quotes have to be used , ” “, not single quotes.

All property names ( and on nested object properties ) are strings and so must be wrapped in double quotes. undefined and functions can not be used in JSON

//valid:
{
	"somestring": "jason",
	"somenumber": 12,
	"mynull": null,
	"myarray": [1, 2, 3, 4],
	"myobject": {
		"name": "jason",
		"age": 2
	}
}

//valid:

{

"somestring": "jason",

"somenumber": 12,

"mynull": null,

"myarray": [1, 2, 3, 4],

"myobject": {

"name": "jason",

"age": 2

}

Event Loop

The event loop is a event queue where callbacks are placed to be processed after the main thread of execution is done.

For Example:

function someFunc(){
console.log(1);
setTimeout(function(){console.log(2);},1000);
setTimeout(function(){console.log(3);},0);
console.log(4);
}

someFunc(); // result will be 1,4,3,2

// 1 and 4 are logged out immediately.
// 2 and 3 are in setTimeout functions and so is placed in 
// the event loop which is processed after the main
// thread is completed. Since 3 has a time out of 0 milliseconds
// it is logged out before 2. But both 2 and 3 console logs 
// are moved to the end of the execution because they are placed
// in the event loop. Any call back functions get placed in to the 
// eventloop i.e. setTimeout setInterval etc

function someFunc(){

console.log(1);

setTimeout(function(){console.log(2);},1000);

setTimeout(function(){console.log(3);},0);

console.log(4);

}

someFunc(); // result will be 1,4,3,2

// 1 and 4 are logged out immediately.

// 2 and 3 are in setTimeout functions and so is placed in

// the event loop which is processed after the main

// thread is completed. Since 3 has a time out of 0 milliseconds

// it is logged out before 2. But both 2 and 3 console logs

// are moved to the end of the execution because they are placed

// in the event loop. Any call back functions get placed in to the

// eventloop i.e. setTimeout setInterval etc

3 Ways to Create an Object in Javascript

// 1. Object Literal (preferred) 

const obj1={
name:"Jason",
age:10,
getInfo:function(){
console.log(this.name + " is of age: "+this.age);
}
}

// 2. new Object syntax

const obj2=new Object();
obj2.name="Jason";
obj2.age=10;
obj2.getInfo=function(){
console.log(this.name + " is of age: "+this.age
}

// 3. constructor function

function Person(name,age){
   this.name=name;
   this.age=age;
}

Person.prototype.getInfo=function(){
console.log(this.name + " is of age: "+this.age
};

const Jason=new Person("Jason",10);
Jason.getInfo();

// 1. Object Literal (preferred)

const obj1={

name:"Jason",

age:10,

getInfo:function(){

console.log(this.name + " is of age: "+this.age);

}

// 2. new Object syntax

const obj2=new Object();

obj2.name="Jason";

obj2.age=10;

obj2.getInfo=function(){

console.log(this.name + " is of age: "+this.age

}

// 3. constructor function

function Person(name,age){

this.name=name;

this.age=age;

}

Person.prototype.getInfo=function(){

console.log(this.name + " is of age: "+this.age

};

const Jason=new Person("Jason",10);

Jason.getInfo();

indexOf Method (String and Array)

1. console.log([10, 20, 30, 40, 50].indexOf(30));
2. console.log([{ name: 'Pam' }, { name: 'Kent' }].indexOf({ name: 'Kent' }));
3. console.log('hello world'.indexOf('o'));
4. console.log([[1], [2], [3], [4]].indexOf([2]));

// 2 and 4 will return -1 (not found) because of objects and arrays 
// are passed by reference and are two separate places in memory despite
// being the same values.

// 1 will result in 2 because the array version of indexOf is 0 based
// and so the indexes of arrays start at 1

// 3 will result in 4 as it is the string very of indexOf which 
// means the indexes start at 1. Also because it is the first 
// instance of 'o' in the string.

1. console.log([10, 20, 30, 40, 50].indexOf(30));

2. console.log([{ name: 'Pam' }, { name: 'Kent' }].indexOf({ name: 'Kent' }));

3. console.log('hello world'.indexOf('o'));

4. console.log([[1], [2], [3], [4]].indexOf([2]));

// 2 and 4 will return -1 (not found) because of objects and arrays

// are passed by reference and are two separate places in memory despite

// being the same values.

// 1 will result in 2 because the array version of indexOf is 0 based

// and so the indexes of arrays start at 1

// 3 will result in 4 as it is the string very of indexOf which

// means the indexes start at 1. Also because it is the first

// instance of 'o' in the string.

Properly add & remove eventListeners

In order to remove an eventListener that was assigned, the handling function must be a named function variable and can not be just a anonymous function.

const handleEvent=(e)=>{
// do whatever in the event 
 return e.pageX; // returns x coordinate for this example
}

document.addEventListener('mousemove',handleEvent); // will add it 

// the above event listener can be removed by doing below

document.removeEventListener('mousemove',handleEvent); // will work

document.removeEventListener('mousemove',function(e){
  return e.pageX; // this would not work, 
});

const handleEvent=(e)=>{

// do whatever in the event

return e.pageX; // returns x coordinate for this example

}

document.addEventListener('mousemove',handleEvent); // will add it

// the above event listener can be removed by doing below

document.removeEventListener('mousemove',handleEvent); // will work

document.removeEventListener('mousemove',function(e){

return e.pageX; // this would not work,

});

Copy objects and exclude selected properties

// Original CPU
const CPU = {
    ram: '32gb',
    ssd: '64gb',
    micro: 'i7'
};

// new CPU copy without the 64GB ssd
const { ssd, ...newCPU } = CPU;

console.log(newCPU); // results: { ram: '16gb', micro: 'i7' };

// Original CPU

const CPU = {

ram: '32gb',

ssd: '64gb',

micro: 'i7'

};

// new CPU copy without the 64GB ssd

const { ssd, ...newCPU } = CPU;

console.log(newCPU); // results: { ram: '16gb', micro: 'i7' };

source: https://enmascript.com/articles/2019/09/20/two-exceptional-use-cases-for-the-spread-operator-you-may-not-know-of

Object Destructuring and aliasing

Destructuring is a way to extract an objects property upon assignment.

const object1={x:10};
// can destructur and assign x to the above objects property x
const {x}=object1;
console.log(x) // 10

// Aliasing allows us to rename the destructured property upon assignment

const {x:newNameOfX}=object1; 
console.log(newNameOfX) // 10; 

// can also assign a default value to the destructured value/new name
// in case the object that is being destructured does not contain
// the named property.

const {y:newNameOfY=2}=object1; 
console.log(newNameOfY); // 2 since no "y" is in object1, it uses the default

const object1={x:10};

// can destructur and assign x to the above objects property x

const {x}=object1;

console.log(x) // 10

// Aliasing allows us to rename the destructured property upon assignment

const {x:newNameOfX}=object1;

console.log(newNameOfX) // 10;

// can also assign a default value to the destructured value/new name

// in case the object that is being destructured does not contain

// the named property.

const {y:newNameOfY=2}=object1;

console.log(newNameOfY); // 2 since no "y" is in object1, it uses the default

String Functions

indexOf(wordToLookFor) – will find the starting position of the wordToLookFor and return the starting index. If nothing is found it will return -1

localeCompare() − Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order

// The letter "a" is before "c" yielding a negative value
'a'.localeCompare('c'); // -2 or -1 (or some other negative value)

// Alphabetically the word "check" comes after "against" yielding a positive value
'check'.localeCompare('against'); // 2 or 1 (or some other positive value)

// "a" and "a" are equivalent yielding a neutral value of zero
'a'.localeCompare('a'); // 0

// The letter "a" is before "c" yielding a negative value

'a'.localeCompare('c'); // -2 or -1 (or some other negative value)

// Alphabetically the word "check" comes after "against" yielding a positive value

'check'.localeCompare('against'); // 2 or 1 (or some other positive value)

// "a" and "a" are equivalent yielding a neutral value of zero

'a'.localeCompare('a'); // 0

prototype vs __proto__

function blah(){

  // do something
}
console.log(blah.prototype); // blah{} returns the function it's self. this is because only functions have a prototype that isn't nested under __proto__
// an Object is typeof "function" and therefore also has a .prototype not nested under __proto__
// an Object is a typeof function since it is needed to create an object {}
//it is a constructor function that creates objects and provides it it's prototype given methods etc


console.log(blah.__proto__); // [Function] it points to the base function object

console.log(blah.prototype.__proto__ ===Object.prototype); // the custom functions prototype's __proto__ is equal to the master base Object's prototype. to reach the master base object via blah.. you have to use it through prototype.__proto__ . Other wise, if using __proto__ directly it will not go up the chain as expected.

function blah(){

// do something

}

console.log(blah.prototype); // blah{} returns the function it's self. this is because only functions have a prototype that isn't nested under __proto__

// an Object is typeof "function" and therefore also has a .prototype not nested under __proto__

// an Object is a typeof function since it is needed to create an object {}

//it is a constructor function that creates objects and provides it it's prototype given methods etc

console.log(blah.__proto__); // [Function] it points to the base function object

console.log(blah.prototype.__proto__ ===Object.prototype); // the custom functions prototype's __proto__ is equal to the master base Object's prototype. to reach the master base object via blah.. you have to use it through prototype.__proto__ . Other wise, if using __proto__ directly it will not go up the chain as expected.

How to lazy load using jQuery

Posted in Javascript on February 20, 2019 by rowej83.

Check the comments in code for explanations. This example relies on jQuery.

function scroll_item() {
  var tracked_item = $(".list_item").last(); // grabs the last "item" with the class list_item

  // $(window).outerHeight()  is the height of the browser window
  // tracked_item.offset().top is the vertical amount of pixels from(below) the top of the web page document

  var scrollPosition = tracked_item.offset().top - $(window).outerHeight(); // figures out how many pixels below the
  // initial browser window is the tracked item. So if the window is 700px vertically and the item that is being tracked
  // is 1200px from the very top of the document.. then the user needs to scroll 500 more pixels to reach the
  // tracked item.

  $(window).scroll(function(event) {
    // applies an event listener to the document window
    // $(window).scrollTop() is how many pixels that are hidden(above) the element ( window in this case )
    if (scrollPosition > $(window).scrollTop()) {
      // checks if there are more pixels left to scroll(scrollPosition)
      // then what has been scrolled already($(window).scrollTop())
      return; // since the amount left is greater then what has been scrolled... do nothing, tracked_item isn't visible yet.
    }
    // finally the amount of pixels scrolled ($(window).scrollTop()) is larger then the amount needed to scroll
    // to the tracked_item.
    $(this).off(event); // temporarily remove this scroll event from the window.
    add_to_items(); // lazy load and append new item. If desired, at the end of the add_to_items make
    // sure to re-call scroll_item() to reattached the event listener to the window.
  });
}

function scroll_item() {

var tracked_item = $(".list_item").last(); // grabs the last "item" with the class list_item

// $(window).outerHeight() is the height of the browser window

// tracked_item.offset().top is the vertical amount of pixels from(below) the top of the web page document

var scrollPosition = tracked_item.offset().top - $(window).outerHeight(); // figures out how many pixels below the

// initial browser window is the tracked item. So if the window is 700px vertically and the item that is being tracked

// is 1200px from the very top of the document.. then the user needs to scroll 500 more pixels to reach the

// tracked item.

$(window).scroll(function(event) {

// applies an event listener to the document window

// $(window).scrollTop() is how many pixels that are hidden(above) the element ( window in this case )

if (scrollPosition > $(window).scrollTop()) {

// checks if there are more pixels left to scroll(scrollPosition)

// then what has been scrolled already($(window).scrollTop())

return; // since the amount left is greater then what has been scrolled... do nothing, tracked_item isn't visible yet.

}

// finally the amount of pixels scrolled ($(window).scrollTop()) is larger then the amount needed to scroll

// to the tracked_item.

$(this).off(event); // temporarily remove this scroll event from the window.

add_to_items(); // lazy load and append new item. If desired, at the end of the add_to_items make

// sure to re-call scroll_item() to reattached the event listener to the window.

});

}

Vuejs notes

Posted in Javascript on October 24, 2018 by rowej83.

Mass registering global components

Import top level components and export them as an Array:

// File: /components/index.js

import Component1 from './Component1.vue';
import Component2 from './Component2.vue';
import Component3 from './Component3.vue';

export default [
    Component1,
    Component2,
    Component3
];

// File: /components/index.js

import Component1 from './Component1.vue';

import Component2 from './Component2.vue';

import Component3 from './Component3.vue';

export default [

Component1,

Component2,

Component3

];

Then in main.js we loop through the components and register them globally:

import Vue from 'vue';
import globalComponents from './components';

globalComponents.forEach(component => {
    Vue.component(component.name, component);
});

// load Vue

import Vue from 'vue';

import globalComponents from './components';

globalComponents.forEach(component => {

Vue.component(component.name, component);

});

// load Vue

Useful Vuejs libraries

https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js can be used for phone and zip code masks to prevent bad input. Also works with Element UI. Just include via cdn and then can be used as a directive i.e. :

<el-input v-model="phone" v-mask="'(###) ###-####'" ></el-input>

1	<el-input v-model="phone" v-mask="'(###) ###-####'" ></el-input>

Online Journal

My online journal about design and development related topics and what I've learned.

Category Archives: Javascript

Miscellaneous React js notes

Setup Codesandbox.io + Jest to work with React Components for testing.

Miscellaneous Javascript Notes

How to lazy load using jQuery

Vuejs notes