Web Dev Day 6: JavaScript Guide

What is a Variable?

A variable in JavaScript is a named container that holds a value. It allows us to store, update, and retrieve data dynamically.
JavaScript provides three ways to declare variables:

var (old syntax)

let (modern)

con…


This content originally appeared on DEV Community and was authored by Bhupesh Kumar

What is a Variable?

A variable in JavaScript is a named container that holds a value. It allows us to store, update, and retrieve data dynamically.

JavaScript provides three ways to declare variables:

  • var (old syntax)
  • let (modern)
  • const (for constants)
let name = "Bhupesh"; 
const age = 25; 
var country = "Canada";

Data Types in JS

JavaScript has primitive and non-primitive data types.

Primitive Data Types

These are immutable and stored directly in memory:

  • String"Hello"
  • Number42
  • Booleantrue, false
  • Undefinedlet x; (not assigned)
  • Nulllet y = null; (empty value)
  • BigInt12345678901234567890123n
  • SymbolSymbol('unique')

Non-Primitive Data Types

These are reference types and stored as objects:

  • Objects{ name: "John", age: 30 }
  • Arrays["apple", "banana", "cherry"]
  • Functions
  function greet() { 
      console.log("Hello!"); 
  }

Numbers in JavaScript

JavaScript has only one type for numbers: floating-point numbers.

Example:

let a = 10;       // Integer
let b = 10.5;     // Float
let c = 1e3;      // Scientific notation (1000)

Special Number Values:

  • Infinity → console.log(1 / 0);
  • -Infinity → console.log(-1 / 0);
  • NaN (Not-a-Number) → console.log("hello" * 2);

Operations in JavaScript

JavaScript supports the following operators:

  • Arithmetic Operators: +, -, *, /, %, **
  • Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
  • Logical Operators: &&, ||, !
  • Bitwise Operators: &, |, ^, ~, <<, >>
  • Ternary Operator: condition ? trueValue : falseValue

Example:

console.log(5 + 2);  // 7
console.log(10 / 2); // 5
console.log(3 ** 2); // 9 (Exponentiation)

NaN in JavaScript

NaN stands for "Not-a-Number." It occurs when an operation does not yield a valid number.

Example:

console.log("hello" * 2); // NaN
console.log(0 / 0);       // NaN

Operator Precedence in JavaScript

Operator precedence determines how expressions are evaluated in JavaScript.

Operator Type Operators Precedence
Parentheses () Highest
Exponentiation ** 2
Multiplication, Division, Modulus *, /, % 3
Addition, Subtraction +, - 4
Relational <, >, <=, >= 5
Equality ==, ===, !=, !== 6
Logical AND && 7
Logical OR `

Example:

{% raw %}

console.log(5 + 3 * 2);    // 11 (Multiplication first)
console.log((5 + 3) * 2);  // 16 (Parentheses first)

let Keyword

The let keyword was introduced in ES6. It has the following properties:

  • Block-scoped (Only accessible within the block {} it is declared in).
  • Can be reassigned but cannot be redeclared within the same scope.

Example:

let x = 10;
x = 20;  // ✅ Allowed

let x = 30; // ❌ Error (Cannot redeclare)

const Keyword

The const keyword has the following properties:

  • Block-scoped (Like let, it is confined within the block {} it is declared in).
  • Cannot be reassigned after declaration.
  • Cannot be redeclared in the same scope.
  • Must be initialized when declared.

Example:

const PI = 3.1416;
PI = 3.14; // ❌ Error (Cannot reassign)

var Keyword (Old Syntax)

The var keyword is function-scoped, meaning:

  • Can be redeclared and reassigned.
  • Not recommended in modern JavaScript due to scoping issues.

Example:

var name = "Alice";
var name = "Bob";  // ✅ Allowed (but not good practice)

Assignment Operators in JavaScript

Assignment operators are used to assign values to variables.

Operator Example Meaning
= x = 5 Assigns 5 to x
+= x += 2 x = x + 2
-= x -= 3 x = x - 3
*= x *= 4 x = x * 4
/= x /= 5 x = x / 5
%= x %= 2 x = x % 2

🏴 Unary Operators in JavaScript

Unary operators operate on a single operand.

Operator Description Example Output
+ (Unary plus) Converts value to a number +"42" 42
- (Unary minus) Negates a number -10 -10
++ (Increment) Increases value by 1 let x = 1; x++ 2
-- (Decrement) Decreases value by 1 let y = 2; y-- 1
typeof Returns the type of a value typeof 42 "number"

Identifiers Rule in JavaScript

Identifiers are names used for variables, functions, and objects. JavaScript follows these rules:

Valid Identifiers:

  • Can include letters, digits, underscores (_), and dollar signs ($).
  • Cannot start with a digit.
  • JavaScript is case-sensitive.

Valid Identifiers:

let firstName;
let _privateVar;
let $price;

Invalid Identifiers in JavaScript

JavaScript has strict rules for naming identifiers. The following are invalid identifiers:

let 2name;    // ❌ Error (Cannot start with a digit)
let my-name;  // ❌ Error (Hyphens are not allowed)

camelCase Naming Convention in JavaScript

JavaScript follows the camelCase naming convention, where:

  • The first word is lowercase.
  • Each subsequent word starts with an uppercase letter.

Example:

let userName;
let totalAmount;
let firstName;

Boolean in JavaScript

A Boolean represents either true or false.

Example:

let isLoggedIn = true;
let hasDiscount = false;

Boolean Conversion:

console.log(Boolean(0));        // false
console.log(Boolean("Hello"));  // true

What is TypeScript?

TypeScript is a superset of JavaScript that:

  • Adds static typing to JavaScript.
  • Prevents runtime errors by catching issues during development.
  • Compiles to JavaScript, making it compatible with all JS environments.

Static vs. Dynamic Typing:

  • TypeScript is statically typed, meaning variable types are checked at compile time.
  • JavaScript is dynamically typed, meaning types are inferred at runtime.

Example:

let age: number = 25;  // TypeScript

String in JavaScript

A string is a sequence of characters enclosed in quotes ("" or '').

Example:

let greeting = "Hello, World!";
console.log(greeting.length); // 13

String Indices in JavaScript

Each character in a string has an index, starting from 0.

Example:

let str = "JavaScript";
console.log(str[0]);             // "J"
console.log(str[str.length - 1]); // "t"

String Concatenation in JavaScript

Concatenation is the process of joining two or more strings together.

Methods of Concatenation:

  1. Using the + operator (Most common)
  2. Using the .concat() method (Less common)

Example:

console.log("Hello" + " " + "World"); // "Hello World"
console.log("Hi".concat(" there!"));  // "Hi there!"

null and undefined in JavaScript

In JavaScript, null and undefined are special values that represent the absence of a value, but they have different meanings.

undefined

  • A variable is undefined when it is declared but not assigned a value.
  • It is the default value of an uninitialized variable.

Example:

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

null in JavaScript

In JavaScript, null represents an intentional absence of any object value.

  • It signifies that a variable intentionally holds no value.
  • null must be explicitly assigned.

Example:

let y = null;
console.log(y); // null


This content originally appeared on DEV Community and was authored by Bhupesh Kumar


Print Share Comment Cite Upload Translate Updates
APA

Bhupesh Kumar | Sciencx (2025-02-09T00:37:54+00:00) Web Dev Day 6: JavaScript Guide. Retrieved from https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/

MLA
" » Web Dev Day 6: JavaScript Guide." Bhupesh Kumar | Sciencx - Sunday February 9, 2025, https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/
HARVARD
Bhupesh Kumar | Sciencx Sunday February 9, 2025 » Web Dev Day 6: JavaScript Guide., viewed ,<https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/>
VANCOUVER
Bhupesh Kumar | Sciencx - » Web Dev Day 6: JavaScript Guide. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/
CHICAGO
" » Web Dev Day 6: JavaScript Guide." Bhupesh Kumar | Sciencx - Accessed . https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/
IEEE
" » Web Dev Day 6: JavaScript Guide." Bhupesh Kumar | Sciencx [Online]. Available: https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/. [Accessed: ]
rf:citation
» Web Dev Day 6: JavaScript Guide | Bhupesh Kumar | Sciencx | https://www.scien.cx/2025/02/09/web-dev-day-6-javascript-guide/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.