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]
//3
//3333
//3333
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)
'Taz'
friends.length
'Corey'
'Corey'
'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)
'Landy'
friends.length
'Corey'
'Corey'
'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)
'Corey'
friends.length
'Corey'
'Corey'
'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
.length
.push
.pop
.shift
.unshift
.slice
.splice
.forEach
.map
.filter
.reduce
array methods
.length
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
.push
Adds item to the end of the array. This piece of data can be anything. Alters length
let friends = ['Landy', 'Lindsey', 'Taz']
friends.push('Sperry')
friends
//['Landy', 'Lindsey', 'Taz', 'Sperry']
array methods
.pop
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
.shift
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
.unshift
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. Returns removed item.
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: 29, tattoos: { has: true, count: 5 } }
me.name
// 'Bryan'
me.tattoos.count
// 5
me['age']
// 29
dot notation
bracket notation
objects - methods
let me = { name: 'Bryan', age: 29, tattoos: { has: true, count: 5 }, greet: function(){ return `Hello friends!` } }
me.greet
me.greet()
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: 24, friend: true}
]
ternary
condition ? value if true : value if false
A ternary is shorthand for if/else statements
ternary
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' }
// 'Access Granted'
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 }
Copy of JavaScriptDay Two
By jonmcd
Copy of JavaScriptDay Two
- 120