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()

Intro to JavaScript

By bryansmith33

Made with Slides.com

Intro to JavaScript

  • 428

More from bryansmith33