Slide 1 of 54
Javascript - Arrays
#100Devs
Leon Noel
Metal Fist terrorists claim responsibility
Broken household name usually said in hostility
Um... what is MF? You silly
Slide 2 of 54Agenda
- Questions?
- Let's Talk - #100Devs
- Review - Functions && Loops
- Learn - Arrays
- Learn - Array Iteration
- Learn - Array Methods
- Homework - Objects
Slide 3 of 54
Questions
About last class or life
Slide 4 of 54Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 54Want to be fancy?
Best Clip Get's Special Color On Discord!
Slide 6 of 54Submitting Work
Slide 7 of 54Networking
3 Individuals Already In Tech
2 Coffee Chats
Slide 9 of 54Coding Challenges
Daily
Codewars 8kyu Fundamentals
Slide 10 of 54Paid Client
Due by Mar. 31st
Slide 11 of 54TURN IT UP!
Slide 12 of 54Programming
Slide 13 of 54A computer will do what you tell it to do.
Slide 14 of 54What is a program?
A program is a set of instructions that you write to tell a computer what to do
Slide 15 of 54What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Slide 16 of 54JAVASCRIPT
Slide 17 of 54Has a specific 'Syntax'
Syntax: "Spelling and grammar" rules of a programming language.
Slide 18 of 54Variables
Declaration: let age
Assignment: age = 25
Both at the same time:
let age = 25
Slide 19 of 54Conditional Syntax
if(condition is true) {
//Do this cool stuff
}else if(condition is true){
//Do this other cool stuff
}else{
//Default cool stuff
}
Slide 20 of 54🚨 DANGER 🚨
Assignment vs. Comparison
Slide 21 of 54Multiple Conditions
if (name === "Leon" && status === "Ballin"){
//Wink at camera
}
Slide 22 of 54Multiple Conditions
if (day === "Saturday" || day === "Sunday"){
//It is the weekend
}
Slide 23 of 54Functions
What are functions?
Slide 24 of 54Functions
-
Functions are simple sets of instructions!
-
Functions are reusable
-
Functions perform one action as a best practice
-
They form the basic "building blocks" of a program
Slide 25 of 54Functions
function name(parameters){
//body
}
//call
name(arguments)
Slide 26 of 54Functions
function yell(word){
alert(word)
}
yell("HELLO")
Slide 27 of 54Loops
What are loops?
Slide 28 of 54Loops
-
Repeat an action some number of times!
-
Three main types of loops in Javascript
- For, while, and do while loops
-
Each type offers a different way to determine the start and end points of a loop
Slide 29 of 54Loops - For
for (let i = 1; i < 5; i++) {
console.log(i)
}
Slide 30 of 54Loops - While
let count = 0
while(count < 5){
console.log(count)
count++
}
Slide 31 of 54Let's Code
Bring It On - All Or Nothing!
Slide 32 of 54Arrays
What are arrays?
Slide 33 of 54Toasters
Slide 34 of 54Arrays
-
A data structure to store ordered collections!
-
Array elements are numbered starting with zero
-
Arrays have many methods to manage the order of elements
-
Can be created by a constructor or literal notation
Slide 35 of 54Declaring Arrays
let newArr = new Array()
Array Constructor
Slide 36 of 54Declaring Arrays
let newArr = []
Literal Notation
Slide 37 of 54Declaring Arrays
newArr = ['Zebra',true,21]
Arrays are populated with elements
Elements can be of any type
Slide 38 of 54Declaring Arrays
🚨Empty spaces leave an empty element 🚨
Slide 39 of 54Array Indexing
Slide 40 of 54Array Indexing
newArr = ['Zebra',,true,21]
console.log( newArr[0] ) //Zebra
console.log( newArr[1] ) //undefined
console.log( newArr[2] ) //true
console.log( newArr[3] ) //21
Elements can be accessed by their index numbers
Slide 41 of 54Array Indexing
newArr = ['Zebra',,true,21]
newArr[1] = 'Bob'
console.log( newArr )
// ['Zebra','Bob',true,21]
Elements can be updated by using the index at that position
Slide 42 of 54Array Indexing
let cars = ['Honda', 'Toyota', 'Ford', 'Tesla']
let nums = [1,2,3]
cars = nums
console.log( cars ) //[1,2,3]
You can overwrite whole arrays by assigning an array to a different array
Slide 43 of 54Array Length
console.log( newArr.length ) //4
How do you determine how many elements are in your array?
Slide 44 of 54Let's Code
Array Dat - In It To Win It
Slide 45 of 54Array Iteration
let bestColors = ['green','blue','yellow','black']
for(let i = 0; i < bestColors.length;i++){
console.log( bestColors[i] )
}
Iterates through an array passing in the value and index of each element
Slide 46 of 54Array Iteration
let bestColors = ['green','blue','yellow','black']
bestColors.forEach((x,i)=> console.log(x))
Iterates through an array passing in the value and index of each element
Slide 47 of 54Let's Code
Array Dat - Fight To The Finish
Slide 48 of 54Other Arrays Methods
let bestRappers2020 = ['6ix9ine','Polo G','6ix9ine']
let removed = bestRappers2020.shift()
console.log( bestRappers2020 ) // ['Polo G', '6ix9ine']
Remove item from the beginning of an Array
Slide 49 of 54Other Arrays Methods
let bestRappers2020 = ['Polo G','6ix9ine']
let removedAgain = bestRappers2020.pop()
console.log( bestRappers2020 ) // ['Polo G']
Remove item from the end of an Array
Slide 50 of 54Other Arrays Methods
let bestRappers2020 = ['Polo G']
let removed = bestRappers2020.unshift('Dylan')
console.log( bestRappers2020 ) // ['Dylan','Polo G']
Add item to the beginning of an Array
Slide 51 of 54Other Arrays Methods
let bestRappers2020 = ['Dylan','Polo G']
let removed = bestRappers2020.push('Dylan')
console.log( bestRappers2020 ) // ['Dylan','Polo G','Dylan']
Add item to the end of an Array
Slide 52 of 54Other Arrays Methods
let bestRappers2020 = ['Dylan','Polo G','Dylan']
let bestRappersAllTime = bestRappers2020.map(x => 'Dylan')
bestRappersAllTime.unshift('Dylan')
bestRappersAllTime.push('Dylan')
console.log( bestRappersAllTime )
// ['Dylan','Dylan','Dylan', 'Dylan', 'Dylan']
Slide 53 of 54Let's Code
Array Dat - Worldwide Cheersmack
