JavaScript

Day Two

arrays

let friends = ['Landy','Lindsey','Taz']

let faveNums = [3,33,333]

let people = [
  {name: 'Joe',position: 'instructor'},

  {name: 'Steven',position: 'boss'},

  {name: 'Bryan',position: 'instructor'},
]

let randomInfo = [29, 'red', true]

arrays

Arrays are zero-indexed. What this means is that arrays start their count at 0 rather than 1

let faveNums = [3, 33, 333, 3333]

let firstFaveNum = 

let fourthFaveNum = 

let lastFaveNum = 

faveNums[0]

faveNums[3]

faveNums[faveNums.length - 1]

looping over arrays

Arrays are one of the two most common ways to store data. If you ever have a list of data, it will be stored in an array

You often don't have control of where your data is stored in an array or your array is so big that there would be no way to know exactly which index the piece of data you want is at. That is where loops come in.

for loops

for(var i = 0; i < arr.length; i++){
  //action to be performed
}

for(var i = 0; i <= 10; i++){
  //action to be performed
}

Looping over entire array

Looping over array set number of times

anatomy of for loops

for(var i = 0; i < arr.length; i++){
  //action to be performed
}

Where to start in the array

How long to loop for

What to do with i var after the loop

loops in action

var friends = ['Taz', 'Landy', 'Corey', 'Cam']

function findFriend(friend, arr){
 for(var i = 0; i < arr.length; i++) {
  if(arr[i] === friend){
    return 'Found ' + friend
  }
 }
 return 'No friend found :('
}

first time through

var friends = ['Taz', 'Landy', 'Corey', 'Cam']

function findFriend(friend, arr){
 for(var i = 0; i < arr.length; i++) {
  if(arr[0] === friend){
    return 'Found ' + friend
  }
 }
 return 'No friend found :('
} 

findFriend( 'Corey' ,friends)

i = 0

friends[0] // 'Taz'

second time through

var friends = ['Taz', 'Landy', 'Corey', 'Cam']

function findFriend(friend, arr){
 for(var i = 0; i < arr.length; i++) {
  if(arr[0] === friend){
    return 'Found ' + friend
  }
 }
 return 'No friend found :('
} 

findFriend( 'Corey' ,friends)

i = 1

friends[1] // 'Landy'

third time through

var friends = ['Taz', 'Landy', 'Corey', 'Cam']

function findFriend(friend, arr){
 for(var i = 0; i < arr.length; i++) {
  if(arr[0] === friend){
    return 'Found ' + friend
  }
 }
 return 'No friend found :('
} 

findFriend( 'Corey' ,friends)

i = 2

Found Corey so we enter below and hit return statement

friends[2] // 'Corey'

array methods

But what was that .length you used for your looping?

- You

array methods

Arrays have a variety of built in methods, or functions, on them. These come in handy so you don't have to figure out the logic yourself

array methods

Finds the length of the array. One thing to keep in mind here is that it starts at 1

let friends = ['Landy', 'Lindsey', 'Taz']

friends.length

// 3

let nums = [1, 4, 0, 55, 666, 34, 954, 7]

nums.length

// 8

array methods

Adds item to the end of the array. This piece of data can be anything.

let friends = ['Landy', 'Lindsey', 'Taz']

friends.push('Sperry')

friends

//['Landy', 'Lindsey', 'Taz', 'Sperry']

array methods

Removes the last item of an array and returns it. Alters the length of the array

let friends = ['Landy', 'Lindsey', 'Taz']

friends.pop()

friends

//['Landy', 'Lindsey']

array methods

Removes the first item of array and returns it. Alters length of the array

let friends = ['Landy', 'Lindsey', 'Taz']

friends.shift()

friends

//['Lindsey', 'Taz']

array methods

ADDS item(s) to beginning of array and returns it. Alters length of the array

let friends = ['Landy', 'Lindsey', 'Taz']

friends.unshift('Joe', 'Eric')

friends

//['Joe','Eric','Landy','Lindsey', 'Taz']

array methods

.slice

Returns a copy of the selected portion of the array. Original array is not altered

let friends = ['Landy', 'Lindsey', 'Taz']

friends.slice(0, 1)

//['Landy']

friends.slice(2, 3)

//['Taz']

friends.slice(1, 3)

//['Lindsey', 'Taz']

friends.slice()

//['Landy','Lindsey', 'Taz']

array methods

.splice

Alters array by removing and possibly adding items to it

let friends = ['Landy', 'Lindsey', 'Taz']

friends.splice(0, 1, 'Fred')

//['Landy']

friends

//['Fred', 'Lindsey', 'Taz']

friends.splice(1, 2)

//['Lindsey', 'Taz']

friends

//['Fred']

objects

let me = {
  name: 'Bryan',
  age: 29,
  tattoos: {
    has: true,
    count: 5
  }
}

objects - accessing

let me = {
  name: 'Bryan',
  age: 28,
  tattoos: {
    has: true,
    count: 4
  }
}

me.name

me.tattoos.count

me['age']

dot notation

bracket notation

objects - methods

let me = {
  name: 'Bryan',
  age: 28,
  tattoos: {
    has: true,
    count: 4
  },
  greet: function(){
    return `Hello friends!`
  }
}

me.greet()

me['greet']()

objects from functions

function createEmployee(name, position, isAdmin){
  return {
    name: name,
    position: position,
    admin: isAdmin
  }
}

createEmployee('Bryan', 'instructor', false)

{name: 'Bryan', position: 'instructor', admin: false}

array of objects

var people = [
  {name: 'Bart', age: 33, friend: true},

  {name: 'Phil', age: 46, friend: false},

  {name: 'Lindsey', age: 23, friend: true}

]

ternary

A ternary is shorthand for if/else statements

var isAdmin = true

function checkAdmin(){
  if(isAdmin === true){
    return 'Access Granted'
  } else if(isAdmin !== true){
    return 'Access Denied'
  }
}

function checkAdmin(){
  return isAdmin === true 
  ? 'Access Granted' 
  : 'Access Denied'
}

ternary

But when should you use a ternary vs a if/else statement?

A good rule to follow is if you ever need to go deeper than checking  just one condition. Nesting ternaries can be difficult to follow and often leads to a bit of confusion.

Ternary

If/Else

This OR that but nothing else

This OR this OR this OR this OR that

callbacks

A callback, in its most simple form, is a function that will be referenced, or called back, to at a later time. Using callbacks makes your code more reusable

function personCreator(first, last){
  var person = first + ' ' + last
  return person
}

function personGreeter(callback, first, last){
  var namedPerson = callback(first, last)
  return 'Hello, ' + namedPerson
}

personGreeter(personCreator, 'Bryan', 'Smith')

callbacks

function doMath(mathType, number1, number2){
  return mathType(number1, number2)
}

function add(number1, number2){
  return number1 + number2
}

function subtract(number1, number2){
  return number1 - number2
}

function multiply(number1, number2){
  return number1 * number2
}