Intro To Programming Syllabus:Lesson 1-1: Javascript BasicsLesson 1-2: Variables, Types, Boolean Algebra, and ComparisonsLesson 2-1: for and while loopsLesson 2-2: Intro to Objects, Functions, and this.Lesson 2-3: ArraysLesson 3-1: let and constLesson 3-2: Destructuring and ...restLesson 3-3: Higher Order Functions (HOFs)Lesson 3-4: Application Programming Interfaces (APIs)Lesson 3-5: Promises & async/awaitLesson 3-6: Prototypes & InheritanceLesson 4-1: IIFEs, Factory Functions, and ModulesLesson 4-2: ClassesLesson 4-3 Class InheritanceLesson 4-4: Export/ImportLesson 5-1: Intro to React, React Native, and ExpoLesson 5-2: this.props and React Event HandlingLesson 5-3: Lifting this.state upLesson 5-4: Functionalizing React (an Intro to Better Practices)
Lesson 2-4: Scopes, bind, Arrow Functions and Default Function Parameters
scopesExample = {
// if we ignore the globalScopeExample = { } above...
var imGlobal = "global variable"
function localScope() {
var imLocal = "local variable"
imGlobal // global can be accessed in here.
}
localScope()
// global variable can be accessed over here but not local variable
imGlobal
imLocal
}
locallyScopedFunctions = {
function globalFunction() {
function localFunction() {
return "Hai from local function"
}
return "Hai from global function"
}
globalFunction()
localFunction()
}
{ //I know this seems like a far-fetched example, but bookmark this notebook for when we get to React
function makeKidsGetIceCream() {
var kid = {
name: "Random Child",
iceCream: null,
getIceCream: function(flavor) {
this.iceCream = flavor
return this.name + " got " + this.iceCream + "-flavored ice cream!"
}
}
return kid.getIceCream
}
var iceCreamGetter = makeKidsGetIceCream()
return iceCreamGetter("chocolate")
}
{ //I know this seems like a far-fetched example, but bookmark this notebook for when we get to React
function makeKidsGetIceCream() {
var kid = {
name: "Random Child",
iceCream: null,
getIceCream: function(flavor) {
this.iceCream = flavor
return this.name + " got " + this.iceCream + "-flavored ice cream!"
}
}
return kid.getIceCream.bind(kid) //notice that .bind() actually creates a new function
}
var iceCreamGetter = makeKidsGetIceCream()
return iceCreamGetter("chocolate")
}
(param1, param2) => {
//code here
return 'something'
}
param => {
//code here
return 'something'
}
() => {
//code here
return 'something'
}
() => 'something'
func = function() {
return this.attr;
}
funcA = () => this.attr
objContext = ({
attr: 'objectAttribute',
objFunc: func,
objFuncA: funcA
})
objContext.objFunc()
objContext.objFuncA()
func.bind(objContext)()
funcA.bind(objContext)()
fortune = (type='random') => {
var fortunes = ['you will be happy', 'you will be sad', 'you will eat pineapple']
if(type==='happy')
return 'Your '+ type +' fortune: ' + fortunes[0]
else if(type==='sad')
return 'Your '+ type +' fortune: ' + fortunes[1]
else
return 'Your '+ type +' fortune: ' + fortunes[Math.floor(Math.random() * 3)]
}
fortune()
mysteryFunction = ({bob=5, joe=10, mary=30}={}) => {
//some long and complicated code nobody can read
return bob*joe*mary
}
mysteryFunction()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
