Search for a command to run...
MERN Handbook Article 6: JavaScript Basics and Foundations Explained
I'm a full-stack engineer from Kerala. Helping startups turn their ideas into digital realities.I specialize in designing and building modern web solutions.
No comments yet. Be the first to comment.
This series makes industry knowledge accessible, fosters growth through practical learning, and builds a supportive community for aspiring developers.
MERN Handbook 6.1: JavaScript Core Principles Uncovered
Designing a Stateless Execution Loop to Eliminate Context Decay in AI Coding Systems
One of the most sophisticated supply chain attacks in history was discovered because of a 500-millisecond delay. A half-second lag in an SSH login—a fractional anomaly noticed by a single, curious developer—was the only thing that stood between the s...
1. Setting the Stage: A New Breed of Supply Chain Attack The Shai-Hulud campaign represents a critical evolution in supply chain threats, moving beyond isolated package compromise to a self-propagating contagion targeting the core of modern developme...
The healthcare landscape is undergoing a profound transformation. As our cities become smarter and our lives more connected, a new paradigm is emerging that promises to redefine how we approach health monitoring and care delivery. Edge AI-enabled IoT...
As a founder deeply immersed in both hardware and software, with a specialization in AI, I've spent years observing the tech industry's relentless pursuit of the "next big thing" beyond the smartphone. For a while now, the prevailing narrative has po...
Hey everyone! Welcome back to "The MERN Handbook." Today, we’re diving into some essential JavaScript concepts that form the foundation of web development. Let’s break these down in a fun and interactive way!
Think of variables as little storage boxes where you can keep information that you’ll need later.
let: Use this when you expect the value to change.
let name = 'Alice';
name = 'Bob'; // No problem!
const: Use this for values that shouldn’t change.
const birthYear = 1990;
// birthYear = 1991; // Nope, this will cause an error.
var: The old way. Avoid it if possible because it can be quirky.
var isStudent = true;
Quirks:
Hoisting: var declarations are hoisted to the top, making them available before their declaration.
console.log(x); // undefined
var x = 5;
Temporal Dead Zone: Variables declared with let and const are not accessible before their declaration.
console.log(y); // ReferenceError
let y = 10;
JavaScript handles several data types:
Strings: Text values.
let greeting = "Hello, world!";
Numbers: Numeric values.
let price = 19.99;
Booleans: True or false values.
let isAvailable = true;
Objects: Collections of key-value pairs.
let person = { name: 'Alice', age: 30 };
Arrays: Lists of values.
let colors = ['red', 'green', 'blue'];
Quirks:
Dynamic Typing: JavaScript variables can change types.
let dynamic = "hello";
dynamic = 42; // No error
Type Coercion: JavaScript can automatically convert types.
console.log(1 + '2'); // '12'
console.log('5' - 1); // 4
Operators are symbols that perform operations on variables and values.
Arithmetic Operators: Perform basic math operations.
let sum = 10 + 5; // 15
Comparison Operators: Compare two values and return a boolean.
let isEqual = (10 === 10); // true
Logical Operators: Combine multiple boolean expressions.
let isAdult = (age > 18 && age < 65); // true if age is between 18 and 65
Quirks:
Loose Equality (==) vs. Strict Equality (===):
console.log(1 == '1'); // true (type coercion)
console.log(1 === '1'); // false (no type coercion)
NaN: NaN is not equal to itself.
console.log(NaN === NaN); // false
Control flow statements allow you to control the execution of your code based on conditions.
If-Else Statements: Execute code blocks based on conditions.
if (age < 18) {
console.log('You are a minor.');
} else {
console.log('You are an adult.');
}
Switch Statements: Execute one of many code blocks based on a variable’s value.
let fruit = 'apple';
switch (fruit) {
case 'apple':
console.log('This is an apple.');
break;
case 'banana':
console.log('This is a banana.');
break;
default:
console.log('Unknown fruit.');
}
Loops: Repeat actions in your code. Common loops are for, while, and do...while.
for (let i = 0; i < 5; i++) {
console.log('Number ' + i);
}
Quirks:
Infinite Loops: Ensure loop conditions eventually become false.
while (true) {
// Infinite loop, avoid unless necessary
}
for...in vs. for...of:
for...in: Iterates over object properties.
let person = { name: 'Alice', age: 30 };
for (let key in person) {
console.log(key); // name, age
}
for...of: Iterates over iterable objects like arrays.
let colors = ['red', 'green', 'blue'];
for (let color of colors) {
console.log(color); // red, green, blue
}
When to Use Which Loop:
When choosing a loop, think about what you need to do.
Use loops for repetitive tasks, like working with arrays or collections.
A for loop is great for going through a range of numbers.
A while loop is good when you don't know how many times you'll need to loop and it depends on a condition.
Avoid using loops with large data sets without making them efficient, as this can slow down your program.
In such cases, use array methods like forEach, map, or filter, which are often faster and easier to understand.
Make sure your loop conditions will eventually be false to avoid infinite loops, which can crash your program.
Avoid Loops When:
Avoid using loops with large data sets without optimizations, as this can cause significant performance issues.
Consider using array methods like forEach, map, or filter, which are often more efficient and easier to understand.
These methods are optimized for performance and can handle large data sets more gracefully.
They provide a more declarative approach to iterating over data, making your code cleaner and more readable.
Always ensure that your loop conditions will eventually be false to prevent infinite loops, which can crash your program.
For more in-depth learning, check out these resources:
Books:
JavaScript: The Good Parts by Douglas Crockford
Eloquent JavaScript by Marijn Haverbeke
You Don’t Know JS series by Kyle Simpson
YouTube Channels:
I hope this overview helps you feel more confident about the basics. Stay tuned for our next post, where we'll dive into JavaScript functions and how they can make your code more modular and reusable. Happy coding!