Syllabus.md

Complete JavaScript Syllabus - Basic to Advanced

Introduction

• What is a programming language?
• What is front-end?
• What is back-end?
• Introduction
  • HTML
  • CSS
  • JavaScript
• Role of HTML, CSS, and JavaScript in WEB development?

History of JavaScript

• JavaScript history
• ECMAScript
  • JScript
  • ActionScript
  • JavaScript
  • ECMA-262 and ISO/IEC 16262
• Versions of JavaScript & History
• Backward & Forward compatible
• JavaScript Engines
  • V8
  • SpiderMonkey
  • JavaScriptCore

Visual Studio Code Setup

• What is an IDE?
• Downloading & Installing Visual Studio Code
• Difference - File vs Folder vs Workspace
• VSCode shortcuts
• Installing extensions
• Applying Settings & Default Formatter Setting

Project setup

• Separation of concern
• Setting up starter files
• Folder structure for JavaScript projects

JavaScript Core

JavaScript Features

• High Level Language
• Garbage Collected
• Interpreted Language (JIT)
  • Parsing
  • Interpretation
  • Profiling
  • Compilation
  • Execution
• Multi Paradigm
• Prototype based functions
• First Class Function
• Dynamically Typed
• Single Threaded
• Non-Blocking Event Loop
• Platform Independent

Interaction

• console.log
• console utilities
  • console.warn
  • console.error
  • console.table
• document.write()
• window.alert()
• innerHTML (part of DOM)

Value, Variable and Data types

• Value, Variable and Data Types
• Difference between Primitive and Non-Primitive Data Types ?

Primitive Data types

• Number
• String
• Boolean
• Undefined
• Null
• Symbol
• BigInt

Non-primitive Data types

• Object
• Function

Truthy and Falsy Values

• What are the truthy and falsy values in JavaScript ?
• Falsy values
  • undefined
  • null
  • 0
  • ""
  • false
  • NaN
• Using Truthy and Falsy values in conditional statements

Type Conversion

• Implicit type conversion / Coercion
• Explicit type conversion

Number Conversion

• String to Number
• Boolean to Number
• Undefined to Number

String Conversion

• Number to String
• Boolean to String

Boolean Conversion

• String to Boolean
• Number to Boolean

JavaScript Popup Boxes

• Alert Box
• Confirm Box
• Prompt Box

Identifiers

• What is an identifier ?
• Rules for creating identifier
• Reserved keywords

Comments

• What is comment ?
  • Single line comment
  • Multi line comment
• Coding guidelines for comments

Statement

• What is a statement in programming ?
• Single line statement
• Multi-line code block
• Semicolon and whitespace

let, const and var

• let
• const
• var
• Difference between let, const and var
• When to use let, const and var

JavaScript operators

Arithmetic operators

• /
• %
• **
• ++

---

Assignment operator

• =
• +=
• -=
• *=
• /=
• %=
• **=

Comparison operator

• ==
• ===
• !=
• !==
• <

• =

• <=

Logical operators

• &&
• ||
• !

Other operators

• typeof
• ternary operator
• nullish coalescing ??

Logical Assignment Operators

• ||=
• &&=
• ??=

Conditional statements

• if
• else if
• else
• Nested conditions
• Switch case

use strict

• What is the significance of use strict ?
• Behavior without strict mode

Looping

• For Loop
• While Loop
• Do while loop
• Loop inside loop
• Backwards Loop
• For of loop
• For in loop
• Break and continue

JavaScript String

• What is a String ?
• String literal vs String object
• Escape characters
• Template literals

String functions

• charAt
• slice
• substring
• substr (deprecated)
• replace
• repeat
• toUpperCase
• toLowerCase
• concat
• trim
• trimStart
• trimEnd
• padStart
• padEnd
• split
• indexOf
• lastIndexOf
• startsWith
• endsWith
• includes
• match
• search

Scope

• What is Scoping
• Lexical Scoping

Types of scope

• Global Scope
• Function Scope
• Block Scope

Functions Basics

• Function declaration
• Function expression
• Arrow function
• Anonymous function
• Function invocation
• Calling function from other function
• Parameters & Arguments
• Default parameters
• Arguments object
• Passing arguments (value vs reference)

Functions Advanced

• First Class Function
• Higher Order Function
• Callback function
• setTimeout
• clearTimeout
• setInterval
• clearInterval
• call
• apply
• bind
• IIFE
• Closures
• Hoisting
• Temporal Dead Zone
• Currying
• Recursion
• DRY Principle

Debugging

• Debugging
• Chrome Developer Tools
• Breakpoints
• Fixing errors

Console debugging

• console.log
• console.warn
• console.error
• console.table

Types of errors

• Syntax Error
• Reference Error
• Type Error
• Range Error
• URI Error

Numbers and Dates

Number

• 64-bit Floating Point Numbers
• Number conversion
• Binary
• Octal
• Decimal
• Hexadecimal

Number functions

• toFixed
• toString
• parseInt
• parseFloat
• isNaN

Number Properties

• MAX_VALUE
• MIN_VALUE
• Infinity
• NaN

Internationalization Numbers

• Intl.NumberFormat

Date

• Date object
• Creating dates
• Milliseconds
• Getter methods
• Setter methods
• Intl.DateTimeFormat

JavaScript Data Structures

Array

• Creating arrays
• Array indexing
• Array length
• Looping arrays

Array methods

• push
• pop
• shift
• unshift
• concat
• join
• splice
• slice
• sort
• reverse
• forEach
• map
• filter
• reduce
• find
• findIndex
• some
• every
• flat
• flatMap
• at

Object

• Object basics
• Object literal
• new Object()

Accessing properties

• Dot notation
• Bracket notation

Object methods

• Object.keys
• Object.values
• Object.entries

Copying Objects

• Shallow copy
• Deep copy
• structuredClone()

Set

• Creating Set
• Set methods
• Iteration
• WeakSet

Map

• Creating Map
• Map methods
• Iteration
• WeakMap

Modern JavaScript Features

Destructuring

• Array destructuring
• Object destructuring
• Nested destructuring
• Default values

Spread Operator

• Copy arrays
• Merge arrays
• Spread in function calls

Rest Parameters

• Variable arguments
• Rest in objects

Optional Chaining

• Safe property access
• Optional method calls

Enhanced Object Literals

• Property shorthand
• Method shorthand
• Computed properties

JavaScript DOM and BOM

DOM

• DOM introduction
• DOM selection
  • getElementById
  • querySelector
  • querySelectorAll

DOM properties

• innerHTML
• textContent
• attributes
• style

Events

• click
• change
• mouse events
• keyboard events
• addEventListener
• event bubbling
• event capturing
• event delegation

DOM manipulation

• createElement
• appendChild
• removeChild

BOM

• window
• history
• navigator
• screen
• location
• cookies
• localStorage
• sessionStorage

JSON & XML

• What is JSON
• JSON.parse
• JSON.stringify
• What is XML

JavaScript Internals

• JavaScript Engine
• Call Stack
• Memory Heap
• Execution Context
• Event Loop
• Scope Chain
• this keyword

OOPS

JavaScript OOP

• Object
• Class
• Encapsulation
• Inheritance
• Polymorphism
• Abstraction

Prototypes

• Prototype chain
• Prototypal inheritance

ES6 Classes

• constructor
• getters
• setters
• static methods
• private fields

Web

How Web Works

• Client
• Server
• Request
• Response
• APIs
• REST
• CORS

AJAX

• XMLHttpRequest
• API calls
• Handling responses

Fetch API

• fetch()
• Handling responses
• JSON parsing
• Error handling
• AbortController

Asynchronous JavaScript

• Promises
• Promise chaining
• Async/Await

Promise combinators

• Promise.all
• Promise.race
• Promise.allSettled
• Promise.any

Error Handling

• try
• catch
• finally
• throw
• Custom Errors
• Async error handling

Modules

• import
• export
• dynamic import
• top level await

JavaScript Tools

• NPM
• Bundlers
• Parcel
• Babel
• Polyfills
• Transpiling

Security

• XSS
• CSRF
• Content Security Policy
• HTTPS
• Secure Cookies

Advanced topics

• Generators
• Proxy
• Reflect
• Web Workers
• Service Workers
• WebSockets
• Memoization
• Immutable Data
• WebRTC
• WebAssembly