Intro to JavaScript
JavaScript
Programming language originally created in early 90's by a dude named Brendan Eich. Has become one of the most popular languages to program in.
JavaScript
JavaScript uses things called variables to store different data.
var name = 'Bryan'
let age = 29
const tattoos = true
JavaScript
Here we see three different ways to declare a variable.
var name = 'Bryan'
let age = 29
const tattoos = true
var is dead, don't use it
let can be reassigned
const cannot be reassigned
JavaScript
Eventually I will be a year older, the age variable will be upped by one
let age = 29
const tattoos = true
let age = 30
On the other hand, I will always have tattoos so we cannot change that
JavaScript
You may have noticed that each of our variables have different types of data
let age = 30
const tattoos = true
The values variables can have each have a conveniently named datatype
JavaScript
datatypes
let age = 30 //number
const tattoos = true //boolean
const name = 'Bryan' //string
let biggestFear = null //null
let myGoal //undefined
JavaScript
Eventually we will have a list of data we need to store. We can use an array
const friends = ['Corey', 'Cam', 'Taz', 'Landy']
const favoriteNumbers = [3, 333, 1989]
const randomInfo = ['male', 'Holladay', true, 5, 29]
Notice arrays start and end with square brackets []
JavaScript
Arrays were nice, but what if we want all of our data to relate to one thing?
Objects
JavaScript
Objects are used to store data that is related to each other.
const randomInfo = ['Bryan', 'Holladay', true, 5, 29]
const me = {
name: 'Bryan',
city: 'Holladay',
tattoos: true,
tattooCount: 5,
age: 29
}
The me object makes much more sense than our randomInfo variable above
JavaScript
Objects have a key characteristic in the curly braces at the beginning and end {}
const me = {
name: 'Bryan',
city: 'Holladay',
tattoos: true,
tattooCount: 5,
age: 29
}
JavaScript
We will regularly need to perform some actions and often times multiple times. We will use something called a function.
Think of it like a recipe for your code
JavaScript
function expression
let returnFour = function(){
return 4
}
function declaration
function returnFour(){
return 4
}
Two different ways to do the same thing. You should stick with function declarations though
JavaScript
function returnFour(){
return 4
}
function returnBryan(){
return 'Bryan'
}
function returnFriends(){
return ['Taz', 'Corey', 'Cam', 'Landy']
}
function returnMe(){
return {
name: 'Bryan',
age: 28,
tattoos: true
}
}
We can return any number of things from functions
JavaScript
returnFour() //4
returnBryan() //'Bryan'
returnFriends() //['Taz', 'Corey', 'Cam', 'Landy']
returnMe() //{ name: 'Bryan', age: 28, tattoos: true}
But how do we actually get that data? We invoke the function
JavaScript
You can name your functions whatever you want but their name should make sense.
function sayHello(){
return 'Hello'
}
sayHello() // 'Hello'
function addNumbers(){
return 2 + 2
}
addNumbers() // 4
JavaScript
Functions should be as dynamic and reusable as possible. Hard coding data is generally frowned upon.
We can use things call parameters, which are just place holders for data we will add in later
function add(num1, num2){
return num1 + num2
}
JavaScript
Parameters can be called anything you want but you have to be consistent and it should make sense.
function add(pizza, cat){
return pizza + cat
}
DON'T DO THIS!
function add(num1, num2){
return num1 + num2
}
JavaScript
When we invoke the function, we use things called arguments which will take the place of the parameters
add(3, 6) // 9
function add(num1, num2){
return num1 + num2
}
Becomes when invoked
JavaScript
The order in which you use your arguments also matters
function myFaveNum(num1, num2){
return `myFaveNum is ${num2}`
}
myFaveNum(3,19) //'myFaveNum is 19
myfaveNum(3,1) //'myFaveNum is 1
myfaveNum(0,33) //'myFaveNum is 33
JavaScript
JavaScript follows a pattern called scope. What this means is what data is accessible and usable in different areas of your code
JavaScript
//Global Scope
const name = 'Bryan'
function sayName(){
return name
}
sayName() //'Bryan'
function secretNumber(){
let secNum = 3 // local scope
}
const myFaveNum = secNum // Error: secNum is not defined
JavaScript
function secretNumber(){
let secNum = 3 // local scope
return secNum
}
const myFaveNum = secretNumber()
Copy of Intro to JavaScript
By jonmcd
Copy of Intro to JavaScript
- 112