basics_of_js.md

Basics of JS

types

can use typeof in a similar way to .class in ruby

console.log(typeof 1)
// number 
console.log(typeof "hello")
// string
console.log(typeof true)
// boolean
const num = "10"
console.log(typeof num)
// string
const numInt = Number.parseInt(num, 10)
console.log(typeof numInt)
// number

variables

don't use var

in es6 there is let and const

no need for ; at the end of every line, some companies still like you doing this but it doesn't change anything, just use it when told to otherwise don't

without const or let you are creating a global variable, we dont want this

let age = 25
age += 1
console.log(age)
const friend = true
PI = 3.14

strings

there is a difference between a property and a method call

let string = "harrison"
string = string.toUpperCase()
console.log(string)
const stringLength = string.length
console.log(stringLength)

functions

es6 function notation is slightly different

const mum = "amanda"
function capitalizeFirstLetter(string) {
    firstLetter = string[0].toUpperCase()
    stringArr = string.split("")
    noFirstLetter = stringArr.splice(1).join("")
    return `${firstLetter}${noFirstLetter}`
}
const firstName = capitalizeFirstLetter(mum)
console.log(firstName)

const printHello = () => { 
    console.log("Hello!") 
}
printHello()
const printGoodbye = (goodbye) => {
    console.log(goodbye)
}
const add = (x, y) => {
    return x + y
}
const result = add(5, 5)
console.log(result)

objects (not called hases in js)

age = 25
const person = {
    firstName: 'Harrison',
    age: age
}

changing hash value

do it the .keyName way but can also do it similar to ruby

person.firstName = "Jake"
console.log(person.firstName)

arrays

same as ruby

const fruit = ['apple', 'banana']

anonymous functions

a massive difference in js compared to ruby

allows us to store functions in a new way, like as a key in an object as seen below, it's also just a convenience thing

const multiplier = function(x, y) {
    return x * y
}
console.log(multiplier)
const multResult = multiplier(3, 5)

conditional

same as ruby expect for a few more brackets

if (multResult > 10) {
    console.log("number higher than 10")
}
else {
    console.log("number lower than 10")
}

switch statement

also very similar to ruby

switch(multResult > 10) {
    case true:
        console.log("num is greater than 10")
        break
    default:
        console.log("num is less than 10")
}

using npm to get user input (was an error) but good example of the difference between browser js and js that works in both places (node and browser)

prompt and alert are example methods that only work in a browser environment

const readlineSync = require('readline-sync');
const userName = readlineSync.question('May I have your name? ');
console.log("welcome" + " " + userName) 

push value into an array

in this case an object

const students = []
const harrison = {
    name: "harrison",
    age: 25
}
students.push(harrison)
console.log(students)

adding keys and values to an object

const me = {}
me.age = 25
me.currentLocation = 'Melbourne'
const hobbies = ['running', 'football', 'music', 'photography']
me.hobbies = hobbies

using forEach to iterate

very similar to ruby

me.hobbies.forEach(function(hobby) {
    console.log(hobby)
})
me.hobbies.push('podcasting')
me.hobbies.splice(0, 1)
me.mother = {}
me.mother.name = 'amanda'
me.mother.age = 56
me.mother.location = 'Melbourne'

creating an anonymous function as a key value pair value

me.printDetails = function() {
    return this
}
// invoking function
console.log(me.printDetails())
// not invoking function, will just display [Function: multiplier]
console.log(me.printDetails)

Nice and simple to understand!