JS Foundations

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
Simple primitives in JS (number, strin
Complex primitives in JS (arrays, obje
Callback functions, Event loop, callba
Computer
RAM
SSD
Why languages?
Why languages? Scripting vs compiled languages
Why JS >> Other languages in some us
Simple primitives in JS (number, string
Callback functions, Event loop, callbac
Computer
RAM
SSD
Why languages?

Computer
Statically present on machine
RAM
SSD
Why languages?

Open/double click Practise problem solving
0100100 Callback functions, Event loop, callba
0010100
1010101 Computer
Executing on machine
RAM
SSD
Why languages?

Computer
RAM
SSD
Why languages?

Computer
RAM
SSD
0100100
0010100
1010101
Why languages?

What have we learned? Single threaded nature of JS
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

Compiler Simple primitives in JS (number, strin
What are compilers - Compilers convert high level developer friendly code into 0s and 1s
Why languages?
Interpreted vs compiled languages Scripting vs compiled languages

Lets see it in action - The C++ compiler is called g++ Callback hell and Promises
Step 1 - write code

Why languages?

Step 1 - write code Step 2 - Compile code

Why languages?

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

But JS is di erent (interpreted) Callback hell and Promises
Step 1 - write code

ff
Why languages?

But JS is di erent (interpreted) Callback hell and Promises
Step 1 - write code Step 2 - Run code

ff
Why languages?

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?

Lets write some code Simple primitives in JS (number, strin
Please sign up on repl.it Callback functions, Event loop, callba
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?

Now run this code

Why languages?

Same code for C++

Why languages?

What did we learn? Simple primitives in JS (number, strin
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
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

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

Mac Machine
1 2 3 4
5 6 7 8
Why languages?

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?

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

Simple primitives in JS (number, str
booleans)
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

booleans)
1. Arrays
2. Objects

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

booleans)
Functions let you

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)

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

Functions let you Single threaded nature of JS
1. Abstract out logic in your program booleans)
2. Take arguments as an input Complex primitives in JS (arrays, obje
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
Simple primitives in JS (number, strings, booleans)
Complex primitives in JS (arrays, objects)
Callback functions, Event loop, callback queue
Why languages?
Callback functions, event loops, callback queue Scripting vs compiled languages

Synchronous vs Asynchronous functions booleans)

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?


Synchronous
Why languages?


Asynchronous (setTimeout)
Why languages?

http://latent ip.com/loupe/ booleans)
fl
Why languages?

http://latent ip.com/loupe/ Simple primitives in JS (number, str
booleans)
Better example
fl
Why languages?

http://latent ip.com/loupe/ Simple primitives in JS (number, str
booleans)
More examples?
Network calls
File system calls
Database calls
setInterval
fl
Why languages?
Callback hell, Promises Scripting vs compiled languages

booleans)
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?

https://gist.github.com/hkirat/502ea4573a045804be95083ce5af94dc Simple primitives in JS (number, str
booleans)
Why languages?

https://gist.github.com/hkirat/f7780b5061182b7281d37c23951e916d Simple primitives in JS (number, str
booleans)
Why languages?
What’s left? Scripting vs compiled languages

booleans)
Async await syntax in promises

Next week/of ine video
fl
Why languages?
Assignments Scripting vs compiled languages

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

JS Foundations

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JS Foundations

Uploaded by

Copyright:

Available Formats

Week 12

Why languages? Scripting vs compiled languages

Statically present on machine

Why languages? Scripting vs compiled languages

Why languages? Scripting vs compiled languages

Why languages? Scripting vs compiled languages

Why languages? Scripting vs compiled languages

Interpreted vs compiled languages Interpreted vs compiled languages

Interpreted vs compiled languages Scripting vs compiled languages

Step 1 - write code

Interpreted vs compiled languages Scripting vs compiled languages

Step 1 - write code Step 2 - Compile code

Interpreted vs compiled languages Scripting vs compiled languages

Interpreted vs compiled languages Scripting vs compiled languages

Step 1 - write code

Interpreted vs compiled languages Scripting vs compiled languages

Step 1 - write code Step 2 - Run code

Interpreted vs compiled languages Scripting vs compiled languages

Compiled languages Interpreted Languages

1. First need to compile, then need to run

Interpreted vs compiled languages Scripting vs compiled languages

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

Interpreted vs compiled languages Scripting vs compiled languages

Now run this code

Interpreted vs compiled languages Scripting vs compiled languages

Same code for C++

Interpreted vs compiled languages Scripting vs compiled languages

Why is JS better than other languages Scripting vs compiled languages

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

Static vs dynamic languages Scripting vs compiled languages

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

Single threaded nature of JS Scripting vs compiled languages

Single threaded nature of JS Scripting vs compiled languages

JS can only use one of these at a time

Single threaded nature of JS Scripting vs compiled languages

More practically, JS runs line by line and only

Simple primitives Scripting vs compiled languages

Variables (let, var, const)

Let’s write some code -

Complex primitives Scripting vs compiled languages

Let’s write some code -

Functions Scripting vs compiled languages

Functions let you

1. Abstract out logic in your program

Let’s write some code -

Functions Scripting vs compiled languages

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

Synchronous vs Asynchronous functions booleans)

Asynchronous functions in programming are those

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

Synchronous vs Asynchronous functions booleans)

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

Synchronous vs Asynchronous functions booleans)

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

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

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

Callback hell, Promises Scripting vs compiled languages

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

Callback hell, Promises Scripting vs compiled languages

Callback hell, Promises Scripting vs compiled languages

What’s left? Scripting vs compiled languages

Async await syntax in promises

Assignments Scripting vs compiled languages

You might also like