While HTML and CSS provide website structure, JavaScript brings interactivity to websites by enabling complex functionality, such as handling user input, animating elements, and even building full web applications.

JS fundamentals

Data Types

Data types help the program understand the kind of data it’s working with, whether it’s a number, text, or something else.

  • Number Type: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90.
  • Floating point: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
  • String: A string is a sequence of characters, or text, enclosed in quotes. "I like coding" and 'JavaScript is fun' are examples of strings.
  • Booleans: A boolean represents one of two possible values: true or false. You can use a boolean to represent a condition, such as isLoggedin = true.
  • Undefined & Null: An undefined value is a variable that has been declared but not assigned a value. A null value is an empty value, or a variable that has intentionally been assigned a value of null.
  • Object: An object is a collection of key-value pairs. The key is the property name, and the value is the property value.
  • Symbol: The Symbol data type is a unique and immutable value that may be used as an identifier for object properties.
const crypticKey1= Symbol("saltNpepper");
const crypticKey2= Symbol("saltNpepper");
console.log(crypticKey1 === crypticKey2); // false
  • BigInt: When the number is too large for the Number data type, you can use the BigInt data type to represent integers of arbitrary length. By adding an n to the end of the number, you can create a BigInt.
const veryBigNumber = 1234567890123456789012345678901234567890n;

Variables In JS

  1. Var, Let & const
  2. To assign a value to a variable, you can use the assignment operator =.
  3. Variables declared using let can be reassigned a new value.
  4. Apart from let, you can also use const to declare a variable. However, a const variable cannot be reassigned a new value.

String

  • Strings are sequences of characters enclosed in quotes. They can be created using single quotes and double quotes.
  • Strings are immutable in JavaScript. This means that once a string is created, you cannot change the characters in the string. However, you can still reassign strings to a new value.

String Concatenation in JavaScript

  • Concatenation is the process of joining multiple strings or combining strings with variables that hold text. The + operator is one of the simplest and most frequently used methods to concatenate strings.
let studentName = "Asad";
let studentAge = 25;
let studentInfo = studentName + " is " + studentAge + " years old.";
console.log(studentInfo); // Asad is 25 years old.
  • If you need to add or append to an existing string, then you can use the += operator. This is helpful when you want to build upon a string by adding more text to it over time.
  • Another way you can concatenate strings is to use the concat() method. This method joins two or more strings together.
let firstName = "John";
let lastName = "Doe";
let fullName = firstName.concat(" ", lastName);
console.log(fullName); // John Doe

Logging Messages with console.log()

  • The console.log() method is used to log messages to the console. It’s a helpful tool for debugging and testing your code.

JavaScript as a Dynamically Typed Language

  • JavaScript is a dynamically typed language, which means that you don’t have to specify the data type of a variable when you declare it. The JavaScript engine automatically determines the data type based on the value assigned to the variable.
let error = 404; // JavaScript treats error as a number
error = "Not Found"; // JavaScript now treats error as a string

Using the typeof Operator

  • The typeof operator is used to check the data type of a variable. It returns a string indicating the type of the variable.
let age = 25;
console.log(typeof age); // "number"
 
let isLoggedin = true;
console.log(typeof isLoggedin); // "boolean"
  • However, there’s a well-known quirk in JavaScript when it comes to null. The typeof operator returns "object" for null values.
let user = null;
console.log(typeof user); // "object"

Functions

In JavaScript, functions and object methods are both ways to encapsulate reusable code, but they have some key differences in how they are defined, used, and the context in which they operate. Understanding these differences is crucial for writing effective and organized JavaScript code. Difference Between Functions and Object Methods

Operators

Control flow and error handling

Methods

Objects

In JavaScript, understanding the difference between primitive and non-primitive data types is important for writing efficient and bug-free code.

Arrays

Loops

Constructors

Common Practices for Naming Variables and Functions

Linters and Formatters

Memory Management

Closures

Modules

Async JS Fetch API Promise Engine & Runtime

Geolocation API

CRUD

OOPs Maps & Sets


What Is JSON, and How Do You Access Values Using Bracket and Dot Notation?


Fundamental Object

NameDescription
ObjectBase of all objects.
FunctionBase function object.
BooleanBoolean wrapper object.
SymbolUnique and immutable value used as object keys.

Global Value Properties

NameDescription
globalThisThe global this value across environments.
InfinityRepresents mathematical infinity.
NaNNot a Number value.
undefinedPrimitive value used when a variable is not assigned.

Global Function Properties

NameDescription
eval()Evaluates JavaScript code represented as a string.
isFinite()Checks if a value is a finite number.
isNaN()Checks if a value is NaN.
parseFloat()Parses a string to a floating point number.
parseInt()Parses a string to an integer.
decodeURI()Decodes a full URI.
decodeURIComponent()Decodes a URI component.
encodeURI()Encodes a full URI.
encodeURIComponent()Encodes a URI component.
escape() (Deprecated)Encodes a string. Deprecated.
unescape() (Deprecated)Decodes an encoded string. Deprecated.

Numbers and Dates

NameDescription
NumberRepresents numbers.
BigIntArbitrary precision integers.
MathMath constants and functions.
DateDates and times.
TemporalModern date/time API (proposal stage).

Error Objects

NameDescription
ErrorBase error object.
AggregateErrorRepresents multiple errors.
EvalErrorError in eval().
RangeErrorNumber out of allowable range.
ReferenceErrorInvalid reference to a variable.
SyntaxErrorIncorrect syntax.
TypeErrorIncorrect type usage.
URIErrorError in URI handling.
InternalErrorNon-standard internal error.

Text Processing

NameDescription
StringString manipulation.
RegExpRegular expressions.

Indexed Collections

NameDescription
ArrayIndexed collection of values.
TypedArrayGeneric typed array base.
Int8Array8-bit signed integer array.
Uint8Array8-bit unsigned integer array.
Uint8ClampedArray8-bit unsigned clamped array.
Int16Array16-bit signed integer array.
Uint16Array16-bit unsigned integer array.
Int32Array32-bit signed integer array.
Uint32Array32-bit unsigned integer array.
BigInt64Array64-bit signed BigInt array.
BigUint64Array64-bit unsigned BigInt array.
Float16Array16-bit float array.
Float32Array32-bit float array.
Float64Array64-bit float array.

Keyed Collections

NameDescription
MapKey-value pairs; remembers insertion order.
SetUnique values; remembers insertion order.
WeakMapKeys are weakly held.
WeakSetValues are weakly held.

Structured Data

NameDescription
ArrayBufferRaw binary data buffer.
SharedArrayBufferShared buffer for threading.
DataViewLow-level interface to buffer data.
AtomicsAtomic operations for shared memory.
JSONJSON parsing and stringifying.

Managing Memory

NameDescription
WeakRefWeak reference to an object.
FinalizationRegistryCleanup logic when object is GC’d.

Control Abstractions

NameDescription
IteratorProtocol for iteration.
AsyncIteratorAsync version of Iterator.
PromiseRepresents a future value.
GeneratorFunctionFunction that yields values.
AsyncGeneratorFunctionAsync generator function.
GeneratorIterator returned from generator.
AsyncGeneratorAsync version of generator.
AsyncFunctionFunction using async keyword.

Reflection

NameDescription
ReflectProvides methods for interceptable operations.
ProxyCustom behavior for fundamental operations.

Internationalization (Intl)

NameDescription
IntlNamespace for i18n features.
Intl.CollatorString comparison.
Intl.DateTimeFormatDate and time formatting.
Intl.DisplayNamesLocalized display names.
Intl.DurationFormatFormatting durations (proposal).
Intl.ListFormatFormatting lists.
Intl.LocaleBCP 47 language tag parsing.
Intl.NumberFormatNumber formatting.
Intl.PluralRulesRules for pluralization.
Intl.RelativeTimeFormatRelative time formatting (e.g., “2 days ago”).
Intl.SegmenterUnicode text segmentation.