JavaScript Tips and Tricks.

---

Objects

---

Get Lenght of Object

//create an array
const arr = [1, 2, 3];

console.log(arr.length); // = 3

//create a Object
const obj = {
  a: 1,
  b: 2,
  c: 3
};

console.log(obj.length); // undefined

let length = Object.keys(obj);
console.log(length); // [ 'a', 'b', 'c' ]

length = Object.keys(obj).length;
console.log(length); // 3

Iterate over an Object

//create an Object
const obj = {
  FirstName: "Jean",
  LastName: "Snyman",
  Age: 35
};

// Option 1
for (let u in obj) {
  if (obj.hasOwnProperty(u)) {
    console.log(u, obj[u]);
  }
}

// Option 2
for (let u of Object.keys(obj)) {
  console.log(u, obj[u]);
}

// Option 3 - ES7+
Object.entries(obj).forEach(([key, value]) => console.log(key, value));

Convert Object to Array

const obj = {
  FirstName: "Jean",
  LastName: "Snyman",
  Age: 35
};

// Option 1
const result = Object.keys(obj).map(key => [key, obj[key]]);
console.log(result);

// Option 2
console.log(Object.entries(obj));

Check if property is in Object

const user = {
  FirstName: "Jean",
  LastName: "Snyman",
  Age: 35,
  address: {
    street: "Main Road",
    city: "Cape Town",
    PostalCode: "8000"
  }
};

const property = user.address.hasOwnProperty("PostalCode");

console.log(property);

Prevent Object Properties from Being Added, Deleted or Changed

const user = {
  FirstName: "Jean",
  LastName: "Snyman",
  Age: 35
};

// View Object properties
console.log(Object.getOwnPropertyDescriptors(user));

// Prevent object properties from being added
Object.preventExtensions(user);

// Prevent object properties from being added or deleted
Object.seal(user);

// Prevent object properties from being changed at all
Object.freeze(user);

Merge two or more Objects (Object.assign & Object spread)

const defaultUser = {
  FirstName: "Jean",
  LastName: "Snyman",
  Age: 35
};

const additionalUserProps = {
  Email: "jeans@gmail.com",
  Age: 40
};

//Merge two objects using Object.assign
const user = Object.assign(defaultUser, additionalUserProps);

console.log(user);

//Merge two objects using object spread
const user2 = { ...defaultUser, ...additionalUserProps };

console.log(user2); 
// { 
//   FirstName: 'Jean',
//   LastName: 'Snyman',
//   Age: 40,
//   Email: 'jeans@gmail.com' 
// }

Computed Object Properties

// Create a state object where we will add our computed props to
let state = {};

// Create a key and a value property
const key = "name";
const value = "This is the value of the prop";

// Assign it to the state object
state[key] = value;

// Create a function
const func = () => {
  console.log("Running a function");
};

// You can also assign a function as a computed prop
state["func"] = func;

console.log(state);

state.func();

// { name: 'This is the value of the prop',
//  func: [Function: func] }
//  Running a function

Delete or Filter Property of Object

const user = {
  firstName: "Jean",
  lastName: "Snyman",
  age: 35
};

function filterObj(obj, prop) {
  let filteredObj = {};
  Object.keys(user)
    .filter(k => k !== prop)
    .map(key => (filteredObj[key] = obj[key]));
  return filteredObj;
}

console.log(filterObj(user, "firstName")); //{ lastName: 'Snyman', age: 35 }

Get All Values in Object

const user = {
  firstName: "Jean",
  lastName: "Snyman",
  age: 35
};

console.log(Object.values(user));  // [ 'Jean', 'Snyman', 35 ]

Arrays

---

Shollow Copy/Clone Array

const fruits = ["apples", "bananas"];

let newFruits = fruits.slice();
// Alternative method
// const newFruits = [].concat(fruits);

newFruits.push("cherry");

console.log(fruits); // [ 'apples', 'bananas', 'cherry' ]

// Using ES6 spread operator
newFruits = [...fruits, "pear"];
console.log(newFruits); // [ 'apples', 'bananas', 'pear' ]

Get Random Element from Array

const ages = [12, 32, 45, 78, 3, 55, 9];

let randomNumber = ages[Math.round(Math.random() * ages.length)];

console.log(randomNumber);

Remove falsy values from Array

// Falsy values = values which wjen converted to a boolean always become false
// Five falsy values in JS = '', 0, null, undefined, NaN

const temps = [12, 32, 45, 78, 3, undefined, 9, 0, NaN, ""];

// filter converts all values to booleans and if true keeps them in the array
const newTemp = temps.filter(temp => temp);

console.log(newTemp); // [ 12, 32, 45, 78, 3, 9 ]

Remove items from Array

const nums = [12, 32, 45, 78, 3];

function removeItems(arr, fn) {
  return arr.filter(fn).map(el => {
    arr.splice(arr.indexOf(el), 1);
    return el;
  });
}

let res = removeItems(nums, num => num > 32);

console.log(res);  // [ 45, 78 ]
console.log(nums); // [ 12, 32, 3 ]

Fill Array with values

const phoneNumber = "555-525-5248";

// Using the fill method to replace characters in a string
let newNumber = phoneNumber
  .split("")
  .fill("*", 0, 8)
  .join("");

console.log(newNumber); // ***5255248

Find Certain Element / Index / Indices of Array

const people = ["Jean", "John", "James", "John"];

function findIndexAll(arr, value) {
  let indices = [];
  arr.forEach((el, i) => el === value && indices.push(i));
  return indices;
}

let res = findIndexAll(people, "John");

console.log(res); //[ 1, 3 ]

Make Range of Numbers within Array

const range = Array.from({ length: 10 }, (value, index) => index + 1);

console.log(range); //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Get Unique Values in Array ( Filter or Set)

const users = ["Jean", "John", "John", "James", "John"];

// Filter method
const newUsers = users.filter((name, index, array) =>
  array.indexOf(name) === index ? name : ""
);

console.log(newUsers); // [ 'Jean', 'John', 'James' ]

// Set method
const set = [...new Set(users)];

console.log(set); // [ 'Jean', 'John', 'James' ]

Find Difference Between Two Arrays ( Filter and Set)

const users = ["Jean", "John", "John", "James", "John"];

const users2 = ["Jean", "Milan", "John", "Jones", "John", "Jones"];

const result = [...new Set(users2)].filter(el => !users.includes(el));

console.log(result); // [ 'Milan', 'Jones' ]

Get Last Item / Everything Before last Item in Array

const users = ["Jean", "John", "John", "James", "John"];

const lastElement = users[users.length - 1];

console.log(lastElement); // John

// Get everything except last element
const beforeLastElement = users.slice(0, -1);

console.log(beforeLastElement); // [ 'Jean', 'John', 'John', 'James' ]

Strings

---

Iterate over a string

const str = "Hello world";

for (let s of str) {
  console.log(s);
}

Capitalize first word of string

const capitalize = ([first, ...rest]) =>
  `${first.toUpperCase()}${rest.join("")}`;

const result = capitalize("hello world");

console.log(result); // Hello world

Capitalize every word of string

const capitalizeWords = str => {
  return str
    .split(" ")
    .map(word => `${word[0].toUpperCase()}${word.slice(1)}`)
    .join(" ");
};

const result = capitalizeWords("hello world, it's a nice day");

console.log(result); // Hello World, It's A Nice Day

Numbers And Math Operations

---

Change Length of Decimal

let num = Number((1.234).toFixed(2));
console.log(num);

Round Decimals to Integers

let num = Math.floor(1.2345); //rounds down

console.log(num); // 1

let num2 = Math.ceil(1.2345); //rounds up

console.log(num2); // 2

let num3 = Math.round(1.49); // 1.5 and up will round up and < .5 will round down

console.log(num3); // 1

let num4 = Math.round(1.5); // 1.5 and up will round up and < .5 will round down

console.log(num4); // 2

General

---

Private Data using IIFEs or Block Scope

//Use IIFEs or Block scope (w/ let /const) to hide / expose data

// Before ES6
var getUserdata = (() => {
    let name = "John";
    let email = "johan@gmail.com";
    let password = "3kj3n432423kj";
  
    return { name, email };
  })();

  getUserdata;  // gets access to name and email only

  // ES6

  {
    let name = "John";
    let email = "johan@gmail.com";
    let password = "3kj3n432423kj"; 

    const sayHi = () => {
        return `Hi, ${name}`
    }

    // make function available outside the block scope
    var result = {
        sayHi
    }
  }

  console.log(result.sayHi()); // Hi, John

Array Destructuring

const nums = [1,2,3,4,5,6];

//Destructuring
const [one, two, three] = nums;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

// Ussing destructuring to swp varialbes

let name = 'doug@gmail.com';
let email = 'doug';

// First construct an array from which to destructure
[ email, username ] = [name, email];

console.log(email); // doug@gmail.com

// variable can be renamed with destructuring
console.log(username); // doug