Week 12

Javascript Foundation
 Week 12
Javascript Foundation

Why languages?
Interpreted vs compiled languages
Why JS >> Other languages in some use-cases
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strings, booleans)
Complex primitives in JS (arrays, objects)
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callback queue, Asynchronous programming
Callback hell and Promises
Why languages? Why languages?
Interpreted vs compiled languages
Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
Computer

RAM

SSD
 Why languages?
Why languages? Scripting vs compiled languages
Why JS >> Other languages in some us
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, string
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callbac
Callback hell and Promises

Computer

RAM

SSD
 Why languages?

Why languages? Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Computer

Statically present on machine

RAM

SSD
 Why languages?

Why languages? Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Open/double click Practise problem solving
0100100 Callback functions, Event loop, callba
Callback hell and Promises
0010100
1010101 Computer

Executing on machine

RAM

SSD
 Why languages?

Why languages? Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Computer

RAM

SSD
 Why languages?

Why languages? Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Computer

RAM

SSD

0100100
0010100
1010101
 Why languages?

Why languages? Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
What have we learned? Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
1. Languages are used to write applications Callback functions, Event loop, callba
2. Developers write high level code in these languages Callback hell and Promises

3. Every language has a compiler which converts the developer code into 01
Computer

RAM

C
C++
Compiler 0100100
Java
0010100 SSD
Javascript
1010101
Golang
Rust
 Why languages?

Interpreted vs compiled languages Interpreted vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

What are compilers - Compilers convert high level developer friendly code into 0s and 1s
 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Lets see it in action - The C++ compiler is called g++ Callback hell and Promises

Step 1 - write code

 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Lets see it in action - The C++ compiler is called g++ Callback hell and Promises

Step 1 - write code Step 2 - Compile code

 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Lets see it in action - The C++ compiler is called g++ Callback hell and Promises

Step 1 - write code Step 2 - Compile code Step 3 - Run the code (put it in ram
 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
But JS is di erent (interpreted) Callback hell and Promises

Step 1 - write code

ff
 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
But JS is di erent (interpreted) Callback hell and Promises

Step 1 - write code Step 2 - Run code

ff
 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Compiler Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Compiled languages Interpreted Languages

1. First need to compile, then need to run

2. Usually don’t compile if there is 1. Usually go line by line
an error in the code 2. Can run partially if the error comes later
3. Example - C++, Java, Rust, Golang 3. Example - Javascript, Python
 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Lets write some code Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Please sign up on repl.it Callback functions, Event loop, callba
Callback hell and Promises

Why repl.it? - It’s lets you compile (or interpret?)

javascript code without having it locally on your machine
lets try to run the hello world program
 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Lets write some code Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Now run this code

 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Lets write some code Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Same code for C++

 Why languages?

Interpreted vs compiled languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
What did we learn? Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

JS is an interpreted language
C++ is a compiled language
Interpreted languages go line by line while executing, can partially run until an
error comes
 Why languages?

Why is JS better than other languages Scripting vs compiled languages

Why JS >> Other languages in som
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Browsers can only understand HTML/CSS/JS (not technically true)

Thanks to Node.js , Javascript can also be used for “Backend Development”
 Why languages?

Static vs dynamic languages Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

C++ Javascript

Bene ts - More strict code Bene ts - Can move fast

fi
fi
 Why languages?

Single threaded nature of JS Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Mac Machine

1 2 3 4

5 6 7 8
 Why languages?

Single threaded nature of JS Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Mac Machine

JS can only use one of these at a time

It is single threaded 1 2 3 4
This is why it is considered to be a bad language for
scalable systems
There is a way to make it use all cores of your machine 5 6 7 8
 Why languages?

Single threaded nature of JS Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

More practically, JS runs line by line and only

One line runs at a time Mac Machine

1 2 3 4

5 6 7 8
 Why languages?

Simple primitives Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Variables (let, var, const)

Data types - strings, numbers and booleans
If/else
Loops - For loop

Let’s write some code -

1. Write the program to greet a person given their rst and last name
2. Write a program that greets a person based on their gender. (If else)
3. Write a program that counts from 0 - 1000 and prints (for loop)

fi
 Why languages?

Complex primitives Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

1. Arrays
2. Objects

Let’s write some code -

1. Write a program prints all the even numbers in an array
2. Write a program to print the biggest number in an arrya
3. Write a program that prints all the male people’s rst name given a complex object
4. Write a program that reverses all the elements of an array

fi
 Why languages?

Functions Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba

Functions let you

Callback hell and Promises

1. Abstract out logic in your program

2. Take arguments as an input
3. Return a value as an output
4. You can think of them as an independent program that is supposed to do something
given an input
5. Functions CAN take other functions as input - this will confuse you (callbacks)

Let’s write some code -

1. Write a function that nds the sum of two numbers
2. Write another function that displays this result in a pretty format
3. Write another function that takes this sum and prints it in passive tense
fi
 Why languages?

Functions Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Functions let you Single threaded nature of JS
Simple primitives in JS (number, str
1. Abstract out logic in your program booleans)
2. Take arguments as an input Complex primitives in JS (arrays, obje
Functions in Javascript
3. Return a value as an output Practise problem solving
4. You can think of them as an independent program that is supposed to do something Callback functions, Event loop, callba
given an input Callback hell and Promises

5. Functions CAN take other functions as input - this will confuse you (callbacks)
https://gist.github.com/hkirat/898ac1da32b6b347a8c0c3e73e1c0666
Why languages?
Scripting vs compiled languages
Why JS >> Other languages in some use-cases
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, strings, booleans)
Complex primitives in JS (arrays, objects)
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callback queue
Callback hell and Promises
 Why languages?

Callback functions, event loops, callback queue Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str

Synchronous vs Asynchronous functions booleans)

Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Synchronous Asynchronous

Asynchronous functions in programming are those

that allow a program to start a potentially long-
All the code we’ve written until now running operation and continue executing other
All code running line by line (hence sync) tasks without waiting for that operation to
complete. This is particularly important in
environments like web browsers or Node.js, where
waiting for an operation to nish (like fetching
data from a server or reading a large le) could
make the application unresponsive.
fi
fi
 Why languages?

Callback functions, event loops, callback queue Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str

Synchronous vs Asynchronous functions booleans)

Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Synchronous
 Why languages?

Callback functions, event loops, callback queue Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str

Synchronous vs Asynchronous functions booleans)

Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba

Asynchronous (setTimeout)
Callback hell and Promises
 Why languages?

Callback functions, event loops, callback queue Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
http://latent ip.com/loupe/ booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
fl
 Why languages?

Callback functions, event loops, callback queue Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
http://latent ip.com/loupe/ Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript

Better example
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
fl
 Why languages?

Callback functions, event loops, callback queue Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
http://latent ip.com/loupe/ Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
More examples?

Network calls
File system calls
Database calls
setInterval
fl
 Why languages?

Callback hell, Promises Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Disclaimer - This is going to be overwhelming, especially for beginners

Please don’t worry if you don’t understand the next section, we don’t need it for a while
 Why languages?

Callback hell, Promises Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
https://gist.github.com/hkirat/502ea4573a045804be95083ce5af94dc Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
 Why languages?

Callback hell, Promises Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
https://gist.github.com/hkirat/f7780b5061182b7281d37c23951e916d Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
 Why languages?

What’s left? Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises

Async await syntax in promises

Next week/of ine video
fl
 Why languages?

Assignments Scripting vs compiled languages

Why JS >> Other languages in some u
Strict vs dynamic languages
Single threaded nature of JS
Simple primitives in JS (number, str
booleans)
Complex primitives in JS (arrays, obje
Functions in Javascript
Practise problem solving
Callback functions, Event loop, callba
Callback hell and Promises
For today -
1. Create a counter in Javascript (counts down from 30 to 0)
2. Calculate the time it takes between a setTimeout call and the inner function actually running
3. Create a terminal clock (HH:MM:SS)

There will be a video on how to install node.js and run tests locally for
the main assignments for this week