Javascript Basics

Photo by Favour Usifo on Unsplash

What is JavaScript?

JavaScript is a programming language used to add behavior, functionality, and interactivity to web pages. HTML provides the structure, CSS handles the styling, and JavaScript makes the page dynamic. JavaScript can also run outside the browser using environments such as Node.js, where it is commonly used for backend development.

How does JavaScript run?

JavaScript runs inside a JavaScript engine. Different browsers use different engines: Chrome uses V8, Firefox uses SpiderMonkey, and Safari uses JavaScriptCore.

The engine processes JavaScript code and executes it. Modern engines use techniques such as interpretation and Just-In-Time (JIT) compilation to improve performance.

The engine also manages important parts of execution, such as the memory heap and call stack.

JavaScript can also run outside the browser using Node.js, which uses the V8 engine.

A good mental model is: JavaScript code → JavaScript Engine → Parse → Execute (interpret/JIT compile + optimize) → Output

var, let and const

JavaScript provides three ways to declare variables: var, let, and const.

var

• Function-scoped
• Redeclaration ✅
• Reassignment ✅
• Hoisted
• Access before declaration → undefined
• Top-level var in a classic browser script → window property

let

• Block-scoped
• Redeclaration ❌
• Reassignment ✅
• Hoisted , but accessing before declaration is blocked by the TDZ → ReferenceError
• TDZ before declaration

const

• Block-scoped
• Redeclaration ❌
• Reassignment ❌
• Hoisted , but accessing before declaration is blocked by the TDZ → ReferenceError
• TDZ before declaration
• Objects/arrays can still be mutated

Data Types

JavaScript has 8 data types: 7 primitive types + 1 non-primitive type (Object).

Primitive Data Types

1. String — represents text -> let name = “Pooja”;
2. Number — represents integers and floating-point numbers.

let age = 25;
let price = 99.5;

3. BigInt — used for very large integers.

let bigNumber = 12345678901234567890n;

4. Boolean — represents true or false.

let isLoggedIn = true;

5. Undefined — a variable has been declared but has not been assigned a value.

let x;
console.log(x); // undefined

6. Null — represents an intentional absence of a value.

let user = null;

7. Symbol — used to create unique identifiers.

const id = Symbol("id");

Non-Primitive Datatype

Object — used to store collections of related data.

const user = {
  name: "Pooja",
  age: 25
};

Arrays and functions are also technically objects in JavaScript.

const numbers = [1, 2, 3];
function greet() {
  console.log("Hello");
}

Quick Revision

Primitive:
String | Number | BigInt | Boolean | Undefined | Null | Symbol

Non-primitive:
Object

Primitive vs Reference Values

One of the easiest ways to understand primitive vs reference values is to see what happens when we copy them.

Primitive Values

When we copy a primitive value, the value is copied independently.

let a = 10;
let b = a;

b = 20;
console.log(a); // 10
console.log(b); // 20

Changing b doesn't affect a.

Primitive value is copied independently.

Reference Values

Objects behave differently:

let user1 = {
  name: "Pooja"
};

let user2 = user1;
user2.name = "John";
console.log(user1.name); // John
console.log(user2.name); // John

Both variables refer to the same object.

user1 ───┐
         ↓
      { name: "John" }
         ↑
user2 ───┘

So changing the object’s property through user2 is visible through user1.

Important Interview Point: JavaScript Is Pass-by-Value

People often say:

“Objects are passed by reference.”

This is a useful shorthand, but technically JavaScript is pass-by-value. For objects, the value being copied is a reference to the object.

let a = {
  name: "Pooja"
};
let b = a;
b = {
  name: "John"
};
console.log(a.name); // Pooja
console.log(b.name); // John

Here, b is assigned a completely new object. It no longer refers to the original object.

const Does Not Make Objects Immutable

const user = {
  name: "Pooja"
};
user.name = "John"; // ✅

But:

user = {}; // ❌

const prevents reassigning the variable. It does not freeze the object.

Type Coercion vs Type Conversion

Both involve changing a value from one type to another, but the difference is who performs the conversion.

Type Coercion

JavaScript automatically converts a value during an operation.

let result = "A" + 1;
console.log(result);        // "A1"
console.log(typeof result); // string

Because + with a string can perform concatenation, JavaScript converts 1 to "1".

"A" + 1
   ↓
"A" + "1"
   ↓
"A1"

Type Conversion

We explicitly convert the value ourselves.

let num = 10;
let str = String(num);
console.log(str);        // "10"
console.log(typeof str); // string

Coercion Depends on the Operator

Don’t assume that every operation involving different types behaves the same way.

"5" + 2  // "52"
"5" - 2  // 3
"5" * 2  // 10
"5" / 2  // 2.5

+ can perform string concatenation when a string is involved.

Get Pooja Chapole’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

-, *, and / are numeric operators, so JavaScript converts "5" to the number 5.

== vs ===

JavaScript has two equality operators:

== → Loose equality AND === → Strict equality

Loose Equality: ==

== compares values and may perform type coercion when the types are different.

5 == "5"      // true
true == 1     // true
null == undefined // true

JavaScript may convert the values according to its equality rules before comparing them.

Strict Equality: ===

=== compares both the type and value. It does not perform type coercion.

5 === "5"     // false
true === 1    // false
null === undefined // false

Interview tip: === is generally preferred when you want equality without implicit type coercion.

Truthy and Falsy Values in JavaScript

In JavaScript, values are treated as either truthy or falsy when used in a boolean context, such as an if condition.

Falsy Values

JavaScript has only 8 falsy values:

false
0
-0
0n
""
null
undefined
NaN

Everything else is truthy.

For example:

if ("hello") {
  console.log("runs");
}
if ([]) {
  console.log("also runs");
}
if ({}) {
  console.log("also runs");
}

Both [] and {} are truthy, even though they are empty.

Common Example

Boolean("0"); // true
Boolean(0);   // false

"0" is a non-empty string, so it is truthy.

Operators

Operators are symbols or keywords used to perform operations on values and variables.

1. Arithmetic Operators

Used for mathematical operations:

+    // addition           10 + 3  // 13
-    // subtraction        10 - 3  // 7
*    // multiplication     10 * 3  // 30
/    // division           10 / 3  // 3.333..
%    // remainder          10 % 3  // 1
**   // exponentiation     2 ** 3  // 8

2. Assignment Operators

Used to assign or update values:

=
+=
-=
*=
/=
%=

3. Comparison Operators

Used to compare values and produce true or false:

>
<
>=
<=
==
!=
===
!==

4. Logical Operators

Used mainly to combine or negate conditions:

&&   // AND
||   // OR
!    // NOT

Example:

age > 18 && isLoggedIn

Both conditions need to be truthy for the && expression to return a truthy result.

Note: && and || can return an operand rather than literally returning true or false.

10 && 20 // 20
0 && 20  // 0

10 || 20 // 10
0 || 20  // 20

5. Unary Operators

Unary operators operate on one operand.

Examples:

typeof x     //typeof 10 // "number"
!x
++x
--x

6. Ternary Operator

The ternary operator is a shorthand for a simple conditional expression:

condition ? valueIfTrue : valueIfFalse

let result = age >= 18 ? "Adult" : "Minor";

It is an operator, not an if-else statement.

7. Bitwise Operators

Bitwise operators work at the binary-bit level:

&
|
^
~
<<
>>
>>>

These are generally less important for basic JavaScript interviews but are useful to recognize.

8. Other Operators

typeof

Returns a string describing the type of a value:

typeof "hello" // "string"

instanceof

Checks whether an object is an instance of a particular constructor:

[] instanceof Array // true

in

Checks whether a property exists in an object:

"name" in user

delete

Removes a property from an object:

delete user.age

Nullish Coalescing ??

Uses the right-hand value when the left-hand value is null or undefined.

let name = username ?? "Guest";

Optional Chaining ?.

Safely accesses nested properties without throwing an error when an intermediate value is null or undefined.

user?.address?.city

Expressions vs Statements

Understanding the difference between expressions and statements is an important JavaScript fundamental.

Expression

An expression is something that produces a value.

For example:

10 + 5  //15
"Hello" + " World" //produces "Hello World".
age > 18 //produces either true or false.

Even a variable itself can be an expression, because it produces the value stored in x.

Function calls can also be expressions because the function call produces a value, even if that value is undefined.

Statement

A statement is an instruction that performs an action or controls execution.

For example:

let x = 10;                   //variable declaration statement.
if (x > 5) {                  //if statement. 
    console.log(x);
}             

for (let i = 0; i < 5; i++) { //for statement.
    console.log(i);
}

return x;  //return statement.

The Easiest Way to Remember

Expression → produces a value.
Statement → performs an action or controls execution.

Expression Inside a Statement

Expressions can be part of statements.

let x = 10 + 5;
//here 10 + 5 is an expression because it produces 15.
let x = 10 + 5; 
//the complete is a statement because it declares a variable.

Another example:

if (x > 10) {
    console.log(x);
}
//here x > 10 is an expression because it produces true or false.
//the complete if construct is a statement.

Ternary vs If

A ternary operator is an expression because it produces a value:

let x = condition ? 10 : 20;

An if construct is a statement:

if (condition) {
    x = 10;
} else {
    x = 20;
}

Key idea: Expressions can appear inside statements.

Examples:

// Type coercion
"5" + 2          // "52"
"5" - 2          // 3
"5" * 2          // 10
"5" / 2          // 2.5
true + 1         // 2
false + 1        // 1
null + 1         // 1
undefined + 1    // NaN

// == vs ===
1 == "1"                 // true
1 === "1"                // false
true == 1                // true
true === 1               // false
false == 0               // true
false === 0              // false
null == undefined        // true
null === undefined       // false

// String conversion with +
"10" + true              // "10true"
"10" + null              // "10null"
"10" + undefined         // "10undefined"

// Numeric conversion
"10" - "5"               // 5
"10" * "2"               // 20
"10" / "2"               // 5
"" - 1                   // -1

// Truthy / falsy with coercion
Boolean(0)               // false
Boolean("0")             // true
Boolean("")              // false
Boolean("hello")         // true
Boolean([])              // true
Boolean({})              // true

// Arrays / objects with +
[] + []                  // ""
[] + [1]                 // "1"
[1] + [2]                // "12"
[] + {}                  // "[object Object]"

// NaN
"hello" - 1              // NaN
NaN == NaN               // false
NaN === NaN              // false