Control Structures and Functions
Welcome to this lesson on control structures and functions in JavaScript! As a Python developer, you’ll find many familiar concepts here, but with some key differences in syntax and behavior. Let’s explore how JavaScript handles flow control and function declarations, comparing them to what you’re used to in Python.
Control Structures
If/Else Statements
While the concept of if/else statements is the same in JavaScript and Python, the syntax differs slightly:
// JavaScript
if (condition) {
// code block
} else if (anotherCondition) {
// code block
} else {
// code block
}
In Python, you use colons and indentation to define blocks, but in JavaScript, we use curly braces {}
. Also, conditions in JavaScript are always enclosed in parentheses.
Switch Statements
JavaScript has a switch
statement, which doesn’t exist in Python. It’s useful for multiple condition checking:
// JavaScript
switch (variable) {
case value1:
// code block
break;
case value2:
// code block
break;
default:
// code block
}
This is somewhat similar to using multiple elif
statements in Python, but can be more readable for certain types of comparisons.
Loops
JavaScript has several types of loops, some similar to Python and some unique:
For Loop
// JavaScript
for (let i = 0; i < 5; i++) {
console.log(i);
}
This is similar to Python’s range
-based for loop, but with a different syntax.
While Loop
// JavaScript
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
This is very similar to Python’s while loop.
Do-While Loop
JavaScript has a do-while loop, which Python doesn’t have:
// JavaScript
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
This loop always executes at least once, even if the condition is false.
Iterating Over Arrays and Objects
JavaScript uses for...of
for iterables (like arrays) and for...in
for object properties:
// JavaScript
// For arrays (similar to Python's for item in list)
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}
// For objects (similar to Python's for key in dict)
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key, obj[key]);
}
Functions
Function Declaration
In JavaScript, you can declare functions in several ways:
// JavaScript
// Function declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Function expression
const greet = function(name) {
return `Hello, ${name}!`;
};
// Arrow function (ES6+)
const greet = (name) => {
return `Hello, ${name}!`;
};
// Shorthand arrow function (for single expressions)
const greet = name => `Hello, ${name}!`;
Arrow functions are a concise way to write functions, similar to Python’s lambda functions but more versatile.
Default Parameters
JavaScript supports default parameters, similar to Python:
// JavaScript
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
Rest Parameters
JavaScript’s rest parameters are similar to Python’s *args:
// JavaScript
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
Conclusion
In this lesson, we’ve covered the basics of control structures and functions in JavaScript, highlighting the similarities and differences with Python. You’ve learned about if/else statements, the switch statement, various types of loops, and different ways to declare and use functions in JavaScript.
In the next lesson, we’ll dive into Arrays and Objects in JavaScript, exploring how they compare to Python’s lists and dictionaries. We’ll look at various methods for manipulating these data structures and introduce concepts like destructuring, which can make your code more concise and readable.