The document provides an overview of key JavaScript concepts including variables, data types, operators, control flow, functions, objects, and arrays. It explains that JavaScript is used for both client-side scripting in web browsers and server-side scripting with Node.js. Key topics covered include primitive data types, operators, if/else and switch statements, loops, functions, objects, methods, and arrays. The document also discusses JavaScript fundamentals like variables, scoping, and hoisting as well as more advanced topics like recursion, symbols, and memory management.
10. Babel Coder
VARIABLES
• A variable is a named value in your program.
• Whenever you use the name in the program, it’s replaced with the value.
var age
The var keyword tells the computer to
take the next word in the statement and
turn it into a variable.
Variable
name
age = 12
The assignment operator
var age = 12
Declare a
variable
Assign a
value
11. Babel Coder
VARIABLE NAMES
var thisIsMyBook;
var $whatMyName;
var _withUnderscore;
var StartWithCapital;
var 123;
var 456abc;
var &special;
var separate by space;
var if
Valid variables
Invalid variables
DYNAMIC TYPING
Variables in JavaScript are not
directly associated with any
particular value type, and any
variable can be assigned (and re-
assigned) values of all types.
var foo = 42 // foo is now a Number
var foo = 'bar' // foo is now String
var foo = true // foo is Now Boolean
12. Babel Coder
DATA TYPES
Primitive
• Boolean
• Null
• Unde
fi
ned
• Number
• String
• Symbol
Object
• Array
• TypedArray
• Dates
• Map
• Set
• WeakMap
• WeakSet
typeof(<VARIABLE>)
Check data type of this variable
15. Babel Coder
OPERATORS
8 == “8”
8 === “8”
Strict Equality Operator
var num = 10
num = num + 10
num += 10
Shorthand
2 + 3 // Addition
3 * 4 // Multiply
5 / 2 // Divide
7 % 2 // Remainder
16. Babel Coder
STRING
Template String
Code Output
n New line
t Tab
Backslash
’ Single quote
” Double quote
var myStr1 = 'Hello World'
var myStr2 = "Hello World"
var myStr3 = "HellonWorld"
var myStr4 = `
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
`
var myStr5 = `${myStr1} Krub`
17. Babel Coder
STRING
var name = ‘BABELcoDER’
name B A B E L c o D E R
[0] [1] [2] [3] [4] [5] [6] [7] [8] [9]
name.length
name[3]
name.endsWith(‘ER’)
name.startsWith(‘BABEL’)
name.includes(‘oDE’)
name.indexOf(‘L’)
18. Babel Coder
STRING
B A B E L c o D E R
[0] [1] [2] [3] [4] [5] [6] [7] [8] [9]
B A B E L C O D E R
b a b e l c o d e r
name.toUpperCase()
name.toLowerCase()
19. Babel Coder
STRING
B A B E L C O D E R
B A B
B A B E L B A B E R
name.replace(‘COD’, ‘BAB’)
21. Babel Coder
SYMBOL
Every symbol value returned from Symbol() is unique. A
symbol value may be used as an identi
fi
er for object
properties; this is the data type's only purpose.
const str1 = 'Hello'
const str2 = 'Hello'
const sym1 = Symbol('hello')
const sym2 = Symbol('hello')
console.log(str1 === str2) // true
console.log(sym1 === sym2) // false
22. Babel Coder
PRINTING
var msg = 'Hello'
console.log(msg) // Hello
console.log('Hello') // Hello
console.log(msg, 'World') // Hello World
23. Babel Coder
IF-ELSE STATEMENT
num > 0.5
Yes No
Y N
var num = Math.random()
if (num > 0.5) {
console.log('Yes')
} else {
console.log('No')
}
24. Babel Coder
COMPARISON OPERATORS
Operator Name Example Evaluates to
> Greather than 15 > 3 true
>= Greather than or equal to 12 >= 12 true
< Less than 7 < 3 true
<= Less than or equal to 3 <= 5 false
== equal to 3 == 5 false
!= not equal to 3 != 5 true
=== strictly equal to 3 === “3” true
!== not strictly equal to 3 !== “3” true
25. Babel Coder
IF-ELSE-IF STATEMENT
score >= 80
Grade A
Y N
score >= 70
Grade B
Y N
score >= 60
Grade C
Y N
score >= 50
Grade D
Y N
Grade F
var score = 50
var grade
if (score >= 80) {
grade = 'A'
} else if (score >= 70) {
grade = 'B'
} else if (score >= 60) {
grade = 'C'
} else if (score >= 50) {
grade = 'D'
} else {
grade = 'F'
}
26. Babel Coder
SWITCH STATEMENT
Default Case
switch(new Date().getDay()) {
case 0:
day = 'Sunday'
break
case 1:
day = 'Monday'
break
case 2:
day = 'Tuesday'
break
case 3:
day = 'Wednesday'
break
case 4:
day = 'Thursday'
break
case 5:
day = 'Friday'
break
case 6:
day = 'Saturday'
break
}
var text
switch (new Date().getDay()) {
case 4:
case 5:
text = 'Soon it is Weekend'
break
case 0:
case 6:
text = 'It is Weekend'
break
default:
text = 'Looking forward to the Weekend'
}
27. Babel Coder
FOR LOOP
var sum = 0
for (var i = 1; i <= 3; i++) {
sum += i
}
Initial
Condition
Post Condition
Loop i sum
1 1 0
2 2 1
3 3 3
6
i <= 3
sum += i
Y N
var sum = 0
sum += 1
sum += 2
sum += 3
28. Babel Coder
WHILE LOOP
var sum = 0
var i = 1
while (i <= 3) {
sum += i
i++
}
Initial
Condition
Post Condition
var sum = 0
sum += 1
sum += 2
sum += 3
30. Babel Coder
EXPRESSIONS VS STATEMENTS
• Expressions only contain identifiers, literals and operators, where operators include
arithmetic and boolean operators, the function call operator () the subscription
operator [] and similar, and can be reduced to some kind of "value", which can be any
JavaScript object.
• Statements, on the other hand, are everything that can make up a line (or several lines) of
JavaScript code. Note that expressions are statements as well.
Expressions Statements
if (x % 2 === 0) {
console.log('Even')
}
3 + 5
"Hello".substr(1, 2)
31. Babel Coder
FUNCTIONS
var sum = 0
for (var i = 1; i <= 3; i++) {
sum += i
}
console.log(sum)
sum = 0
for (var i = 10; i <= 20; i++) {
sum += i
}
console.log(sum)
sum = 0
for (var i = 9; i <= 100; i++) {
sum += i
}
console.log(sum)
sum of 1 to 3
sum of 10 to 20
sum of 9 to 100
“Sum” function
32. Babel Coder
FUNCTIONS
function () {
}
keyword function
Parentheses
Code block between curly b
for the function body
function sayHello() {
console.log(‘Hello')
}
sayHello() // Hello
var sayHello = function() {
console.log(‘Hello')
}
sayHello() // Hello
33. Babel Coder
FUNCTIONS
function sum(start, end) {
var sum = 0
for(var i = start; i <= end; i++) {
sum += i
}
return sum
}
var result = sum(1, 3)
console.log(result)
result = sum(10, 20)
console.log(result)
console.log(sum(9, 100))
sum of start to end
returns sum
Parameters
Arguments
sum(1, 3)
function sum(start, end)
Parameters
Arguments
34. Babel Coder
ARROW FUNCTION
function foo(a) {
return a + 1
}
const foo = (a) => {
return a + 1
}
const foo = a => {
return a + 1
}
const foo = a => a + 1
const foo = a => let b = a + 1
35. Babel Coder
RECURSION
5! = 5 x 4 x 3 x 2 x 1
4! = 4 x 3 x 2 x 1
3! = 3 x 2 x 1
2! = 2 x 1
1! = 1
0! = 1
function factorial(n) {
var result = 1
for(var i = 1; i <= n; i++) {
result *= i
}
return result
}
console.log(factorial(5))
36. Babel Coder
RECURSION
fac(5)
5 fac(4)
4 fac(3)
3 fac(2)
2 fac(1)
1
X
X
X
X
2
6
24
120
120
function factorial(n) {
if (n <= 1) return 1
return n * factorial(n - 1)
}
37. Babel Coder
SCOPING
var result = 0
function plus(a, b) {
result = a + b
return result
}
function sum(start, end) {
for(var i = start; i <= end; i++) {
result += i
}
return result
}
plus(100, 200)
console.log(sum(1, 10)) // 355
function plus(a, b) {
var result = a + b
return result
}
function sum(start, end) {
var result = 0
for(var i = start; i <= end; i++) {
result += i
}
return result
}
plus(100, 200)
console.log(sum(1, 10)) // 55
38. Babel Coder
HOISTING
var a = 1
function foo() {
var b = 2
if(b > a) {
var c = 3
}
console.log(c) // 3
}
foo()
var a = 1
function foo() {
var b
var c
b = 2
if(b > a) {
c = 3
}
console.log(c) // 3
}
foo()
39. Babel Coder
LET AND CONST
function foo() {
let x = 1
x = 2
}
foo()
function foo() {
const x = 1
x = 2
}
foo()
45. Babel Coder
ARRAYS
var dayOfWeek = 1
var day
switch(dayOfWeek) {
case 1:
day = 'Sunday'
break
case 2:
day = 'Monday'
break
case 3:
day = 'Tuesday'
break
case 4:
day = 'Wednesday'
break
case 5:
day = 'Thursday'
break
case 6:
day = 'Friday'
break
case 7:
day = 'Saturday'
break
}
var dayOfWeek = 1
var daysOfWeek = {
1: 'Sunday',
2: 'Monday',
3: 'Tuesday',
4: 'Wednesday',
5: 'Thursday',
6: 'Friday',
7: 'Saturday'
}
var day = daysOfWeek[dayOfWeek]
var dayOfWeek = 1
var daysOfWeek = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
]
var day = daysOfWeek[dayOfWeek - 1]
51. Babel Coder
DESTRUCTURING
let person = {
age: 24,
gender: 'male',
name: {
fi
rstName: '
fi
rstName',
lastName: 'lastName'
}
}
let age = person.age
let gender = person.gender
let name = person.name
let
fi
rstName = name.
fi
rstName
let lastName = name.lastName
let { age, gender, name } = person
let {
fi
rstName, lastName } = name
let { age, gender, name: {
fi
rstName, lastName } } = person
71. EXAMPLE 1
Fetch content from URL: https://jsonplaceholder.typicode.com/todos
import axios from 'axios'
async function fetchPosts() {
const res =await axios.get(URL)
console.log(res.data)
console.log(res.status) // 200
}
fetchPosts()
HTTP GET HTTP POST
import axios from 'axios'
async function createPost() {
const res =await axios.post(
URL, { title: 'Test', completed: true })
console.log(res.status) // 201
}
createPost()
72. ES MODULE - NAMED EXPORTS
export const DEFAULT_COLOR = 'white'
export function walk() {
console.log('Walking...')
}
{
DEFAULT_COLOR: 'white',
walk() {
console.log('Walking...')
}
}
dog.js
main.js
syntax: 1
import * as lib from './dog.js'
lib.DEFAULT_COLOR // white
lib.walk() // Walking...
main.js
syntax: 2
import { DEFAULT_COLOR, walk } from './dog.js'
73. ES MODULE - DEFAULT EXPORT
circle.js
main.js
syntax
export default class Circle {
area() {
}
}
import Circle from './circle.js'
74. ES MODULE - BOTH
circle.js
export const PI = 3.14
export default class Circle {
area() {
}
}
main.js
syntax
import Circle, { PI } from './circle.js'
