Vanilla JavaScript - basic methods to primitive types that any developer should know

basic-methods.js

/////////////
// STRINGS //
/////////////

// https://mzl.la/2ZiPyGL - .split
// https://mzl.la/2Zh3XTQ - .repeat
// https://mzl.la/2ZjaT3c - .startsWith
// https://mzl.la/2ZeuLUW - .endsWith
// https://mzl.la/2ZfUxIk - .trim
// https://mzl.la/2Z9sBWG - .toUpperCase
// https://mzl.la/2ZjaZb4 - .toLowerCase

// Turn the string into an array of letters.
const helloWorld = 'Hello world!'
helloWorld.split('') // ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!']

// Turn the string into an array of words
// by splitting on the space character.
helloWorld.split(' ') // ['Hello', 'world!']

// Repeat a character.
const z = 'z'
z.repeat(5) // 'zzzzz'

// Check if a string starts with a character.
const start = 'Start'
start.startsWith('S') // true
start.startsWith('s') // false
start.startsWith('Sta') // true
start.startsWith('Yo') // false

// Check if a string ends with a character.
const end = 'End'
end.endsWith('End') // true
end.endsWith('nd') // true
end.endsWith('En') // false
end.endsWith('d') // true

// Trim white space on both ends of the string.
const phrase = '       JavaScript rules!     '
phrase.trim() // 'JavaScript rules!'

// All uppercase.
const test = 'jUsT a teSt'
test.toUpperCase() // 'JUST A TEST'

// All lowercase.
test.toLowerCase() // 'just a test'


////////////
// ARRAYS //
////////////

// https://mzl.la/2ZgKfaS - .map
// https://mzl.la/2ZaNJvA - .forEach
// https://mzl.la/2ZjbFgC - .reverse
// https://mzl.la/2ZegXJZ - .join
// https://mzl.la/2ZdR6BZ - .filter
// https://mzl.la/2ZfVlgk - .concat
// https://mzl.la/2ZgLs1U - .push
// https://mzl.la/2ZgLzdQ - .pop


// The .map function will return a new array, leaving the old one untouched.
const arr1 = [1, 2, 3]
arr1.map(n => n * 2) // [2, 4, 6]
arr1.map(function(num) { return num * 2 }) // [2, 4, 6]
arr1.map(n => 'a'.repeat(n)) // ['a', 'aa', 'aaa']
arr1.map(n => n + 1).map(n => 'a'.repeat(n)) // ['aa', 'aaa', 'aaaa']

// .forEach will iterate through an array just like .map, but it doesn't return anything.
arr1.forEach(n => n * 2) // undefined
arr1.forEach(n => console.log(n)) // console.log's each element in the array.
arr1.forEach(function(num) { console.log(num) }) // console.log's each element in the array.

// Reverse the contents of an array.
// This will mutate the original array!
const arr2 = [4, 5, 6]
arr2.reverse() // [6, 5, 4]
console.log(arr2) // [6, 5, 4] => the original array was changed in place!

// Join the elements of an array together.
const arr3 = ['Hello', 'world!']
arr3.join('') // 'Helloworld!'

// Join the elements of an array together by a given character.
arr3.join(' ') // 'Hello world!'
arr3.join('z') // 'Hellozworld!'
arr3.join(' crazy ') // 'Hello crazy world!'

// Filtering an array.
[1, 2, 3].filter(n => n === 2) // [2]
[1, 2, 3].filter(n => n !== 2) // [1, 3]

const names = ['Aaron', 'Justin', 'James', 'Avery', 'Ralph']
names.filter(name => name.startsWith('A')) // ['Aaron', 'Avery']
names.filter(name => !name.startsWith('A')) // ['Justin', 'James', 'Ralph']
names.filter(name => name.startsWith('J')) // ['Justin', 'James']
names.filter(name => name.startsWith('Z')) // []

const truthyOrFalsey = [0, '', null, undefined, -1, ' ', 2, {}]

// Filter out falsey items by coercing to a boolean.
truthyOrFalsey.filter(item => !!item) // [-1, 2, {}]
truthyOrFalsey.filter(function(item) {
  if (item) return true
  return false
})

// Simpler way to filter out falsey items.
// Why? Because `Boolean` is a function that analyzes what's passed to it for truthyness.
// E.x.: Boolean(5) is true. Boolean(0) is false. Boolean(-1) is true. Boolean('0') is true.
truthyOrFalsey.filter(Boolean)

// Filter out truthy items.
truthyOrFalsey.filter(item => !item)
truthyOrFalsey.filter(function(item) {
  if (item) return false
  return true
})

// Combine multiple arrays.
const arr4 = [1, 2, 3]
const arr5 = [4, 5, 6]
const arr6 = [7, 8, 9]
arr4.concat(arr5) // [1, 2, 3, 4, 5, 6]
arr4.concat(arr5, arr6) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr6.concat(arr4) // [7, 8, 9, 1, 2, 3]

// Combine multiple arrays with the spread operator.
const combineWithSpreadOperator = [...arr4, ...arr5, ...arr6] // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// Add elements to an array.
const arr7 = ['Hello', {}, 44]
arr7.push([]) // ['Hello', {}, 44, []]
arr7.push('JS') // // ['Hello', {}, 44, [], 'JS']

// Remove the last element in an array.
// This will both mutate the original array (remove the item),
// and return that item to you.
arr7.pop() // 'JS', and arr7 is ['Hello', {}, 44, []]
arr7.pop() // [], and arr7 is ['Hello', {}, 44]
arr7.pop() // 44, and arr7 is ['Hello', {}]