[JavaScript] Objects

These are my notes while doing the course JavaScript Algorithms and Data Structures on https://www.freecodecamp.org. I highly recommend it if you prefer to try things directly rather than watching videos.


Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. Objects are useful for storing data in a structured way, and can represent real world objects.

var myDog = {
    "name": "Dog",
    "legs": 4,
    "tails": 1,
    "friends": ["Max", "Matilda"]
};

Note: If your object has any non-string properties, JavaScript will automatically typecast them as strings.


There are two ways to access the properties of an object: dot notation (.) and bracket notation ([]), similar to an array.

var myObj = {
  prop1: "val1",
  prop2: "val2"
};

var prop1Dot = myObj.prop1; // val1
var prop2Dot = myObj.prop2; // val2

var prop1Bracket = myObj["prop1"]; // val1
var prop2Bracket = myObj["prop2"]; // val2

Append / Delete Properties with dot or bracket notation.

var myObj = {
  prop1: "val1",
  prop2: "val2"
};

ourDog.prop3 = "val3";
ourDog["prop4"] = "val4";

delete myObj.prop3;
delete myObj["prop4"];

Note: Bracket notation is required if your property has a space in it or if you want to use a variable to name the property.


Check if the property of a given object exists or not using the hasOwnProperty() method or the in keyword.

var myObj = {
  prop1: "val1",
  prop2: "val2"
};

myObj.hasOwnProperty("prop1"); // true
myObj.hasOwnProperty("prop3"); // false

'prob1' in myObj; // true
'prob3' in myObj; // false

JSON – an array of objects https://www.json.org/json-en.html

var myObj = [{
  prop1: "val1",
  prop2: "val2"
},
{
  prop1: "val1",
  prop2: "val2"
}];

console.log(JSON.stringify(myObj));

Generate an Array of All Object Keys

Using the Object.keys() method and passing in an object as the argument will return an array with strings representing each property in the object.

let users = {
  Max: {
    age: 27
  },
  Mira: {
    age: 32
  },
  Rich: {
    age: 48
  }
};

function getArrayOfUsers(obj) {
  return Object.keys(obj);
}

getArrayOfUsers(users); // [ 'Max', 'Mira', 'Rich' ]

Note: Also have look at ES6 which includes new object syntax for constructors, getters and setters etc.

[JavaScript] Arrays

These are my notes while doing the course JavaScript Algorithms and Data Structures on https://www.freecodecamp.org. I highly recommend it if you prefer to try things directly rather than watching videos.


Note: In JavaScript arrays are technically a type of object. Therefore arrays are also capable of storing complex objects.

Array functions to manipulate arrays:

/* Modify Array Data with Indexes */
var myArray = [50,40,30];
myArray[0] = 15; // equals [15,40,30]


/* Access Multi-Dimensional Arrays with Indexes */
var myArray = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
myArray[3]; // equals [[10,11,12], 13, 14]
myArray[3][0]; // equals [10,11,12]
myArray[3][0][1]; // equals 11


/* Manipulate Arrays with push() -> adding to the end */
var myArray = [1,2,3];
myArray.push(4); // myArray is now [1,2,3,4]


/* Manipulate Arrays with pop() -> removing last element */
var threeArr = [1, 4, 6];
var oneDown = threeArr.pop();
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]


/* Manipulate Arrays with shift() -> removing first element */
var myArray = ["Stimpson", "J", ["cat"]];
var removedFromOurArray = myArray.shift();
console.log(removedFromOurArray); // Returns "Stimpson"
console.log(myArray); // Returns ["J", ["cat"]]


/* Manipulate Arrays with unshift() -> adding to the beginning */
var myArray = ["Stimpson", "J", "cat"];
myArray.shift(); // myArray now equals ["J", "cat"]
myArray.unshift("Happy"); // myArray now equals ["Happy", "J", "cat"]


/* Manipulate Arrays with concat() -> combine arrays into a new one without mutating the original arrays. */
var firstArray = [1, 2, 3];
var secondArray = [4, 5, 6];
var thirdArray = firstArray.concat(secondArray); // thirdArray now equals [ 1, 2, 3, 4, 5, 6 ]
/* Also useable to clone an array (will do a copy by reference!) */
var fourthArray = [].concat(firstArray); // FourthArray now equals [1, 2, 3]


/* Remove & Add Items using splice() -> remove any number of consecutive elements from anywhere in an array. */
/* First parameter: index */
/* Second parameter: number of elements to delete */
let array = ['today', 'was', 'not', 'so', 'great'];
array.splice(2, 2);  // array now equals ['today', 'was', 'great']
/* Third parameter: add elements to the array. Useful for quickly switching out an element, or a set of elements, for another. */
const numbers = [10, 11, 12, 12, 15];
numbers.splice(3, 1, 13, 14); // returns [ 10, 11, 12, 13, 14, 15 ]


/* Sort numbers in an array: array.sort(compareFunction) */ 
arr.sort((a, b) => a-b); // ascending
arr.sort((a, b) => b-a); // descending

Array functions that does not mutate the original array:

/* Copy Array Items Using slice() -> copies or extracts a given number of elements to a new array, leaving the array it is called upon untouched */
let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
let todaysWeather = weatherConditions.slice(1, 3); // todaysWeather equals ['snow', 'sleet'];


/* Copy an Array with the Spread Operator -> allows to easily copy all of an array's elements. Syntax: ... */
let thisArray = [true, true, undefined, false, null];
let thatArray = [...thisArray]; // thatArray equals [true, true, undefined, false, null]


/* Combine Arrays with the Spread Operator */
let fragment = ['to', 'code'];
let sentence = ['learning', ...fragment, 'is', 'fun']; // sentence equals ['learning', 'to', 'code', 'is', 'fun']


/* The reduce() method reduces the array to a single value. It executes a provided function for each value of the array (from left-to-right).*/
/* First parameter: The initialValue, or the previously returned value of the function */
/* Second parameter: The value of the current element */
/* 0 is set as initialValue */
const args = [2, 4, 2];
const arraySum = args.reduce((sum, currentNum) => sum + currentNum, 0); // returns 8 


/* map() iterates over each item in an array and returns a new array containing the results of calling the callback function on each element */
const users = [
  { name: 'John', age: 34 },
  { name: 'Amy', age: 20 },
  { name: 'camperCat', age: 10 }
];
const names = users.map(user => user.name); // [ 'John', 'Amy', 'camperCat' ]

Checks:

/* indexOf() checks for the presence of an element -> takes element as parameter. Returns the position (index) or -1 if element does not exist */
let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];
fruits.indexOf('dates'); // returns -1
fruits.indexOf('oranges'); // returns 2
fruits.indexOf('pears'); // returns 1, the first index at which the element exists


/* every() checks if every element passes a particular test */
function checkPositive(arr) {
   return arr.every(num => num > 0); 
}
checkPositive([1, 2, 3, -4, 5]); // false


/* some() checks if any element passes a particular test. */
function checkPositive(arr) {
  return arr.some(num => num > 0); 
}
checkPositive([1, 2, 3, -4, 5]); // true

And there are several other build in methods like forEach(), filter(), etc.
https://www.w3schools.com/jsref/jsref_obj_array.asp

Note: As already mentioned, arrays are objects, therefore array functions are methods on the array object prototype, i.e. Array.prototype.push()

[JavaScript] Math & Numbers

/* generates a random decimal number between 0 (inclusive) and up to 1 (exclusive). */
Math.random()

/* Round the number down to its nearest whole number. */
Math.floor()

/* x to the power of y */
Math.pow(num, 2)

/* Pi */
Math.PI;

/* Square root */
Math.sqrt(16);

/* Parse a string and return as integer. */
var int = parseInt("020"); // returns 20

/* Parse a string and return as float. */
var float = parseFloat("8.55"); // returns 8.55

/* Check if number is not float */
function isInt(n) {
   return n % 1 === 0;
}

[JavaScript] Conditional (Ternary) Operator

Can be used as a one line if-else expression. Syntax:

condition ? expression-if-true : expression-if-false;

function checkEqual(a, b) {
    return a == b ? "Equal" : "Not Equal";
}

/* Chain them together to check for multiple conditions */
function checkSign(num) {
    return (num == 0) ? "zero"
        : (num > 0) ? "positive"
        : "negative";
}

/* If there is no "else", just write */
function checkEqual(a, b) {
    if (a == b) return "Equal";
}
console.log(checkEqual(1, "1"));

[JavaScript] Switch Statement

Note: Case values are tested with strict equality (===)

/* Default Option in Switch Statements */
var result = "";
switch (num) {
  case 1:
    result = "1";
    break;
  case 2:
    result = "2";
    break;
  default:
    result = "3 or more";
    break;
}

/* Multiple Identical Options in Switch Statements */
var result = "";
switch(val) {
  case 1:
  case 2:
  case 3:
    result = "1, 2, or 3";
    break;
  case 4:
    result = "4 alone";
}

[JavaScript] Iterate

While Loops

var myArr = [];
var i = 0;

while(i < 5) {
  myArr.push(i);
  i++;
}

For Loops

var myArr = [];

// for ([initialization]; [condition]; [final-expression])
for (var i = 0; i < 5; i++) {
  myArr.push(i);
}

Iterate through an Array with a For Loop

var myArr = [ 2, 3, 4, 5, 6];
var total = 0;

for (var i = 0; i < myArr.length; i++) {
    total += myArr[i];
}

Nesting For Loops

var myArr = [
  [1,2], [3,4], [5,6]
];

for (var i=0; i < myArr.length; i++) {
  for (var j=0; j < myArr[i].length; j++) {
    console.log(myArr[i][j]);
  }
}

For…In Loops

Iterate through all the keys within an object.

let users = {
  Max: {
    age: 27
  },
  Mira: {
    age: 32
  },
  Rich: {
    age: 48
  }
};

for (let user in users) {
  console.log(user); // logs: Max, Mira, Rich
  if (users[user].age > 40) {
      console.log(`${user} is old.`);
  }
} 

Do…While Loops

A do...while loop ensures that the code inside the loop will run at least once.

var myArr = [];
var i = 0;
do {
  myArr.push(i);
  i++;
} while (i < 5);

Replace Loops using Recursion

/* For Loop */
function multiply(arr, n) {
   var product = 1;
   for (var i = 0; i < n; i++) {
       product *= arr[i];
   }
   return product;
}

/* Replace For Loop with Recursion */
function multiply(arr, n) {
   if (n <= 0) {
     return 1;
   } else {
     return multiply(arr, n - 1) * arr[n - 1];
   }
}

Note: Recursive functions must have a base case when they return without calling the function again (in this example, when n <= 0), otherwise they can never finish executing.

/* Count to n */
function countup(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countup(n - 1);
    countArray.push(n);
    return countArray;
  }
}

console.log(countup(5)); // [ 1, 2, 3, 4, 5 ]

Note: The push happens last, after the recursive call has returned. Thats why the value of n decreases, but the values in the final array are increasing.

/* Create a Range of Numbers */
function rangeOfNumbers(startNum, endNum) {
  if (startNum == endNum) {
    return [startNum];
  } else if (startNum < endNum) {
    const rangeArray = rangeOfNumbers(startNum + 1, endNum);
    rangeArray.unshift(startNum);
    return rangeArray;
  } 
};

console.log(rangeOfNumbers(5, 10)); // [ 5, 6, 7, 8, 9, 10 ]

[JavaScript] Functions

/* Basic Function */
function reusableFunction() {
  console.log("Hello World");
}
reusableFunction();


/* Passing Values to Functions with Arguments */
function functionWithArgs(arg1, arg2 ) {
    console.log(arg1 + arg2);
}
functionWithArgs(1, 2); //returns 3


/* Global vs. Local Scope in Functions 
It is possible to have both local and global variables with the same name. 
When you do this, the local variable takes precedence over the global variable. */
var outerWear = "T-Shirt";
function myOutfit() {
  var outerWear = "sweater"
  return outerWear;
}
myOutfit(); //returns "sweater"

[JavaScript] Comparsion Operators

/* Equality Operator (type conversion / type coercion) */
1   ==  1   // true
1   ==  2   // false
1   == '1'  // true
"3" ==  3   // true


/* Strict Equality Operator (no type conversion) */
3 ===  3   // true
3 === '3'  // false


/* Inequality Operator (type conversion) */
1 !=  2     // true
1 != "1"    // false
1 != '1'    // false
1 != true   // false
0 != false  // false

/* Strict Inequality Operator (no type conversion) */
3 !==  3   // false
3 !== '3'  // true
4 !==  3   // true

/*Greater Than Operator (type conversion) */
5   >  3   // true
7   > '3'  // true
2   >  3   // false
'1' >  9   // false

/* Greater Than Or Equal To Operator (type conversion) */ 
6   >=  6   // true
7   >= '3'  // true
2   >=  3   // false
'7' >=  9   // false

/* Less Than Operator (type conversion) */
2   < 5  // true
'3' < 7  // true
5   < 5  // false
3   < 2  // false
'8' < 4  // false

/* Less Than Or Equal To Operator (type conversion) */
4   <= 5  // true
'7' <= 7  // true
5   <= 5  // true
3   <= 2  // false
'8' <= 4  // false

[JavaScript] Working with strings

/* Escape Sequences in Strings 
Code	Output                   
\'	single quote
\"	double quote
\\	backslash
\n	newline
\r	carriage return
\t	tab
\b	word boundary
\f	form feed               */

var firstStr = "I come first. ";
var secondStr = "I come second.";

/* Concatenating Strings with Plus Operator */
var myStr = firstStr + secondStr;

/* Concatenating Strings with the Plus Equals Operator */
var myStr = firstStr;
myStr += secondStr;

/* Bracket Notation to Find the First Character */
var firstName = "Carlos";
var firstLetter = firstName[0]; // firstLetter is "C"
var firstName[0] = "K";         // not possible! Individual characters of a string literal cannot be changed.

/* Bracket Notation to Find the Last Character in a String */
var firstName = "Carlos";
var lastLetter = firstName[firstName.length - 1]; // lastLetter is "s"

/* Split a string into an array of substrings */
var str = "How are you doing today?";
var res = str.split(" ");  // [ 'How', 'are', 'you', 'doing', 'today?' ]
var otherString = "How9are7you2today";
var byDigits = otherString.split(/\d/); // ["How", "are", "you", "today"]

/* Array of strings to single string */
var stringArray = [ 'How', 'are', 'you', 'doing', 'today?' ];
var str = stringArray.join(" "); // "How are you doing today?"

/* Check if a string ends with "universe." */
var str = "Hello world, welcome to the universe.";
var n = str.endsWith("universe.");

/* Lower & Upper Case */
console.log('ALPHABET'.toLowerCase()); // 'alphabet'
console.log('alphabet'.toUpperCase()); // 'ALPHABET'
console.log('test'.charAt(0).toUpperCase() + 'test'.slice(1)); // Test

/* reverse String */
let str = "test";
let reverseStr = str.split("").reverse().join(""); // tset