Photo by Paul Esch-Laurent on Unsplash
Mastering JavaScript Basics: Variables, Data Types, Operators, and Control Flow Explained
MERN Handbook Article 6: JavaScript Basics and Foundations Explained
Table of contents
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!
Variables
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
andconst
are not accessible before their declaration.console.log(y); // ReferenceError let y = 10;
Data Types
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
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
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
, anddo...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
, orfilter
, 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
, orfilter
, 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.
Extra Resources
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!