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.

WordPress REST API and Custom Post Types

Posted in WordPress on February 27, 2019 by rowej83.

In my examples, I will be using a custom post type of “recipes”

In order to get a custom post type to show on the REST API (i.e. https://jmrowe.com/blog/wp-json/wp/v2/recipes ) , two options when using register_post_type can be set.

show_in_rest (boolean) (optional) Whether to expose this post type in the REST API.

rest_base (string) (optional) The base slug that this post type will use when accessed using the REST API. Default: $post_type

show_in_rest must be set to true

rest_base will be the “base” of the url when calling it in the rest API. So if nothing is set, the $post_type slug will be used.. i.e. recipes. If rest_base is changed to say “recipes-api” then to call it via the REST api it would look like: https://jmrowe.com/blog/wp-json/wp/v2/recipes-api

Sending the rest_url from WordPress to Javascript

wp_localize_script should be used to send the rest api url to javascript in a portable way such as:

wp_localize_script('registered-js-handle','site_variables', 
array('rest_url'=>rest_url('wp/v2/recipes-api/'))
);

// Now the rest url for recipes-api can be used in javascript 
// such as console.log(site_variables.rest_url);

wp_localize_script('registered-js-handle','site_variables',

array('rest_url'=>rest_url('wp/v2/recipes-api/'))

);

// Now the rest url for recipes-api can be used in javascript

// such as console.log(site_variables.rest_url);

Creating new fields in the REST responses

To add more/custom fields in the REST response. A function that does so must be added to the hook “rest_api_init” so..

add_action('rest_api_init','function_name_that_adds_custom_fields');

1	add_action('rest_api_init','function_name_that_adds_custom_fields');

register_rest_field() is used to register/add the custom field in the rest response

add_action( 'rest_api_init', 'create_api_posts_meta_field' );
 
function create_api_posts_meta_field() {
 
    // register_rest_field ( 'name-of-post-type', 'name-of-field-to-return', array-of-callbacks-and-schema() )
    register_rest_field( 'post', 'post-meta-fields', array(
           'get_callback'    => 'get_post_meta_for_api',
           'schema'          => null,
        )
    );
}

// function below is "callback" which provides what the
// value of the new rest field will be.
// in this case, it simply adds all post meta for an ID
// to the rest field 'post-meta-fields'

// the callback gives you access to the post object 
// so you can retrieve the post id
 
function get_post_meta_for_api( $object ) {
    //get the id of the post object array
    $post_id = $object['id'];
 
    //return the post meta
    return get_post_meta( $post_id );
}

add_action( 'rest_api_init', 'create_api_posts_meta_field' );

function create_api_posts_meta_field() {

// register_rest_field ( 'name-of-post-type', 'name-of-field-to-return', array-of-callbacks-and-schema() )

register_rest_field( 'post', 'post-meta-fields', array(

'get_callback' => 'get_post_meta_for_api',

'schema' => null,

)

);

}

// function below is "callback" which provides what the

// value of the new rest field will be.

// in this case, it simply adds all post meta for an ID

// to the rest field 'post-meta-fields'

// the callback gives you access to the post object

// so you can retrieve the post id

function get_post_meta_for_api( $object ) {

//get the id of the post object array

$post_id = $object['id'];

//return the post meta

return get_post_meta( $post_id );

}

A good reference for using nonces in custom REST endpoints: https://viastudio.com/wordpress-rest-api-secure-ajax-calls-custom-endpoints/

One thing to note from this example is that WordPress suggest passing the nonce via the header and not the request content data. So, below is the better way of passing the nonce from js back to WordPress:

$.ajax( {
    url: site_variables.root + 'wp/v2/posts/1',
    method: 'POST',
    beforeSend: function ( xhr ) {

 // this is "safer" way to send the nonce via ajax rather then
// in a $GET or $POST field.

        xhr.setRequestHeader( 'X-WP-Nonce', site_variables.nonce );
    },
    data:{
        'title' : 'Hello Moon'
    }
} ).done( function ( response ) {
    console.log( response );
} );

$.ajax( {

url: site_variables.root + 'wp/v2/posts/1',

method: 'POST',

beforeSend: function ( xhr ) {

// this is "safer" way to send the nonce via ajax rather then

// in a $GET or $POST field.

xhr.setRequestHeader( 'X-WP-Nonce', site_variables.nonce );

data:{

'title' : 'Hello Moon'

}

} ).done( function ( response ) {

console.log( response );

} );

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.

});

}

Connecting a Domain to hosting that are on different providers.

Posted in Server Admin on December 3, 2018 by rowej83.

This applies when Domain and Hosting are provided by two different service providers ( i.e. GoDaddy hosting and Namecheap domain )

3 pieces of information are needed from the HOSTING to be put in to the settings on the DOMAIN service provider:
nameserver1 address
nameserver2 address
host IP

The nameserver addresses get put in to the nameserver fields
The host IP is used for the A record. A CNAME record is added to add www to the domain and the value of the CNAME record must be the name that is used for the A record.

Assuming the host IP is 198.71.233.41 it would look like:

Misc notes for WordPress

Posted in WordPress on November 15, 2018 by rowej83.

Proper way to add js variables from php is to use localize script.

An efficient way of doing it:

First register the script at the beginning (main.js as an example).

 wp_register_script('main_script', 'main.js', array('jquery'), null, true);

1	wp_register_script('main_script', 'main.js', array('jquery'), null, true);

Then if any variables need to be added from php to js you create a call back for a custom filter:

function localize_admin_ajax_url($array) {
  $array['admin_ajax_url'] = admin_url('admin-ajax.php');
  return $array;
}
add_filter('localized_theme_vars', 'localize_admin_ajax_url');

function localize_admin_ajax_url($array) {

$array['admin_ajax_url'] = admin_url('admin-ajax.php');

return $array;

}

add_filter('localized_theme_vars', 'localize_admin_ajax_url');

That will add a js variable admin_ajax_url when the script is finally included. The nonce or any other data could be added as well.

Finally, we check the filter to see if any data has been added to it and if not we do not localize the script:

// Apply any filters that were added via add_filter
$localized_theme_vars = apply_filters('localized_theme_vars', array());

if($localized_theme_vars) { //only localize if we have something to localize!
    wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars);
}

// After the check, we finally enqueue the script

wp_enqueue_script('main_script');

// Apply any filters that were added via add_filter

$localized_theme_vars = apply_filters('localized_theme_vars', array());

if($localized_theme_vars) { //only localize if we have something to localize!

wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars);

}

// After the check, we finally enqueue the script

wp_enqueue_script('main_script');

Body and Post Class

WordPress provides body_class() and post_class() which will provide useful classes on both <body> and the individual post i.e. <article> that will give information to target things like specific post ids etc. The functions are to be used like :

// for body classes
// no need for class=""

<body <?php body_class() ?> >
</body>

// for individual post classes 
// no need for class=""

<article <?php post_class() ?> >
</article>

// for body classes

// no need for class=""

</body>

// for individual post classes

// no need for class=""

</article>

in_the_loop()

Useful for determining if the caller is within the loop. So for example, if you added an action to ‘loop_end’ to display something after the last of the loop using a condition with in_the_loop() it will make sure the contents of the action will only execute if it is within the main posts loop.

Including CSS/Javascript for a shortcode

As long as the styles/scripts are registered.. they can be actually en-queued within the actual short code code so that the script/styles will only actually load when the short code is used.

Conditionally enqueueing scripts/styles in admin area

When adding an action to ‘admin_enqueue_scripts’ to enqueue scripts, $hook is passed in to determine what page in the admin area you are on.

To test if you are on a certain plugin menu page you can create a global variable to check against the $hook.

Example:

// First, when creating the menu page.. also assign it to a new global variable:

function addMenuItem(){
    global $main_test_plugin_menu;
    $main_test_plugin_menu=add_menu_page('Test Plugin Menu Title','Test Plugin','manage_options','test_plugin_menu',__NAMESPACE__.'\\show_page');
}

// Then in the admin_enqueue_scripts function you create to add action
// use the global variable to check against $hook to check if
// the user is on the parent plugin for the script/style

function add_admin_scripts($hook)
{
    global $main_test_plugin_menu; // retrieve global variable 
    wp_register_script('main-admin-vue', PLUGIN_DIR_URL . 'js/vue.js',['jquery'],  time(),true);
    wp_register_script('main-admin-js', PLUGIN_DIR_URL . 'js/main.js',['main-admin-vue'],time(),true);

// Use global variable to check against $hookthe check, we finally enqueue the script

   if($hook==$main_test_plugin_menu){
    include PLUGIN_DIR.'inc\\template.php';
    wp_enqueue_script('main-admin-js');
    wp_enqueue_script('main-admin-vue');}
   }
}

add_action('admin_enqueue_scripts',  __NAMESPACE__.'\\add_admin_scripts');

// First, when creating the menu page.. also assign it to a new global variable:

function addMenuItem(){

global $main_test_plugin_menu;

$main_test_plugin_menu=add_menu_page('Test Plugin Menu Title','Test Plugin','manage_options','test_plugin_menu',__NAMESPACE__.'\\show_page');

}

// Then in the admin_enqueue_scripts function you create to add action

// use the global variable to check against $hook to check if

// the user is on the parent plugin for the script/style

function add_admin_scripts($hook)

{

global $main_test_plugin_menu; // retrieve global variable

wp_register_script('main-admin-vue', PLUGIN_DIR_URL . 'js/vue.js',['jquery'], time(),true);

wp_register_script('main-admin-js', PLUGIN_DIR_URL . 'js/main.js',['main-admin-vue'],time(),true);

// Use global variable to check against $hookthe check, we finally enqueue the script

if($hook==$main_test_plugin_menu){

include PLUGIN_DIR.'inc\\template.php';

wp_enqueue_script('main-admin-js');

wp_enqueue_script('main-admin-vue');}

}

add_action('admin_enqueue_scripts', __NAMESPACE__.'\\add_admin_scripts');

To help with removing render-blocking resources from javascript files:

function defer_parsing_of_js($url)
{
  if (is_admin()) return $url; 
  if (false === strpos($url, '.js')) return $url; 
  if (strpos($url, 'jquery.js')) return $url; 
  return str_replace(' src', ' defer src', $url);
}
add_filter('script_loader_tag', 'defer_parsing_of_js', 10);

/*

Doesn't attempt for admins/wp admin bar

Can add more lines for individual js files by name if we want to exclude from 
deffer.

Note the files will still load in the same order just all with deferred added.
*/

function defer_parsing_of_js($url)

{

if (is_admin()) return $url;

if (false === strpos($url, '.js')) return $url;

if (strpos($url, 'jquery.js')) return $url;

return str_replace(' src', ' defer src', $url);

}

add_filter('script_loader_tag', 'defer_parsing_of_js', 10);

Doesn't attempt for admins/wp admin bar

Can add more lines for individual js files by name if we want to exclude from

deffer.

Note the files will still load in the same order just all with deferred added.

Rewrite API and when/how to flush_rewrite_rules

The simplest solution is to delete the option that WordPress sets after building the rewrite rules upon the plugins activation and deactivation hooks. This will force WordPress to rebuild the rules that you may have added.

<?php
defined('ABSPATH') or exit;
/**
 * Plugin Name: Custom Endpoint Plugin
 * Description: To show when and how to flush rewrite rules
*/


register_activation_hook(__FILE__, array('api_custom_endpoint', 'activation_method'));
register_deactivation_hook(__FILE__, array('api_custom_endpoint', 'deactivation_method'));

class api_custom_endpoint
{
  
    function init()
    {
        add_action('init', array($this, 'add_rewrite_rules_for_api_custom_endpoint'));
        add_action('template_redirect', array($this, 'check_getuserlist_template_redirect'), 0);
    }


    function activation_method()
    {
        //forces WordPress to rebuild rewrite list
        delete_option('rewrite_rules');
    }

    function deactivation_method()
    {
        //forces WordPress to rebuild rewrite list
        delete_option('rewrite_rules');
    }

    function add_rewrite_rules_for_api_custom_endpoint()
    {
        add_rewrite_endpoint('newendpoint', EP_ROOT);

    }

    function check_getuserlist_template_redirect()
    {
        global $wp_query;

        // if not the root "/" of the site or if request doesn't contain getUsers.. don't redirect.
        if (!isset($wp_query->query_vars['newendpoint']) )
            return;

        // include custom template if it passes newendpoint in url check
        include dirname(__FILE__) . '/newendpointtemplate.php';
        exit;
    }
}


// running init

$app = new api_custom_endpoint();
$app->init();

<?php

defined('ABSPATH') or exit;

/**

* Plugin Name: Custom Endpoint Plugin

* Description: To show when and how to flush rewrite rules

register_activation_hook(__FILE__, array('api_custom_endpoint', 'activation_method'));

register_deactivation_hook(__FILE__, array('api_custom_endpoint', 'deactivation_method'));

class api_custom_endpoint

{

function init()

{

add_action('init', array($this, 'add_rewrite_rules_for_api_custom_endpoint'));

add_action('template_redirect', array($this, 'check_getuserlist_template_redirect'), 0);

}

function activation_method()

{

//forces WordPress to rebuild rewrite list

delete_option('rewrite_rules');

}

function deactivation_method()

{

//forces WordPress to rebuild rewrite list

delete_option('rewrite_rules');

}

function add_rewrite_rules_for_api_custom_endpoint()

{

add_rewrite_endpoint('newendpoint', EP_ROOT);

}

function check_getuserlist_template_redirect()

{

global $wp_query;

// if not the root "/" of the site or if request doesn't contain getUsers.. don't redirect.

if (!isset($wp_query->query_vars['newendpoint']) )

return;

// include custom template if it passes newendpoint in url check

include dirname(__FILE__) . '/newendpointtemplate.php';

exit;

}

// running init

$app = new api_custom_endpoint();

$app->init();

Change the placeholder for Add Title field on custom post type:

function change_title_text( $title ){
     $screen = get_current_screen();
   
     if  ( 'word' == $screen->post_type ) {
          $title = 'What is the new word?';
     }
   
     return $title;
}
   
add_filter( 'enter_title_here', 'change_title_text' );

function change_title_text( $title ){

$screen = get_current_screen();

if ( 'word' == $screen->post_type ) {

$title = 'What is the new word?';

}

return $title;

}

add_filter( 'enter_title_here', 'change_title_text' );

Custom Excerpt

function custom_excerpt_bn($text) { // Fakes an excerpt if needed
$excerpt = get_the_content();
$excerpt = strip_shortcodes($excerpt);
$excerpt = strip_tags($excerpt,'<p>');
$excerpt = substr($excerpt, 0, 150);
$excerpt = substr($excerpt, 0, strripos($excerpt, " "));
$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));
$excerpt = $excerpt.' ...';
return $excerpt;
}
/* remove the default filter */
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
/* now, add your own filter */
add_filter('get_the_excerpt', 'custom_excerpt_bn');

function custom_excerpt_bn($text) { // Fakes an excerpt if needed

$excerpt = get_the_content();

$excerpt = strip_shortcodes($excerpt);

$excerpt = strip_tags($excerpt,'<p>');

$excerpt = substr($excerpt, 0, 150);

$excerpt = substr($excerpt, 0, strripos($excerpt, " "));

$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));

$excerpt = $excerpt.' ...';

return $excerpt;

}

/* remove the default filter */

remove_filter('get_the_excerpt', 'wp_trim_excerpt');

/* now, add your own filter */

add_filter('get_the_excerpt', 'custom_excerpt_bn');

Online Journal

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

Miscellaneous Javascript Notes

WordPress REST API and Custom Post Types

How to lazy load using jQuery

Connecting a Domain to hosting that are on different providers.

Misc notes for WordPress