mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(curriculum): add comparisons and conditionals transcripts (#58567)
This commit is contained in:
+51
@@ -10,6 +10,57 @@ dashedName: how-do-comparisons-work-with-null-and-undefined-data-types
|
||||
|
||||
Watch the video lecture and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do comparisons work with `null` and `undefined` data types?
|
||||
|
||||
In JavaScript, `null` and `undefined` are two distinct data types that represent the absence of a value, but they behave differently in comparisons. Understanding how these types interact in various comparison scenarios is crucial for writing robust and bug-free code.
|
||||
|
||||
Let's start with the `undefined` type. A variable is `undefined` when it has been declared but hasn't been assigned a value. It's the default value of uninitialized variables and function parameters that weren't provided an argument.
|
||||
|
||||
The `null` type, on the other hand, is an assignment value that represents a deliberate non-value. It's often used to indicate that a variable intentionally has no value.
|
||||
|
||||
When comparing `null` and `undefined` using the equality operator (`==`), JavaScript performs type coercion. This means it tries to convert the operands to the same type before making the comparison. In this case, `null` and `undefined` are considered equal:
|
||||
|
||||
```js
|
||||
console.log(null == undefined); // true
|
||||
```
|
||||
|
||||
However, when using the strict equality operator (`===`), which checks both value and type without performing type coercion, `null` and `undefined` are not equal:
|
||||
|
||||
```js
|
||||
console.log(null === undefined); // false
|
||||
```
|
||||
|
||||
This difference is important to keep in mind when writing conditional statements or performing equality checks in your code. When comparing `null` or `undefined` with other values using the equality operator (`==`), the behavior can be unexpected. For example:
|
||||
|
||||
```js
|
||||
console.log(null == 0); // false
|
||||
console.log(null == ''); // false
|
||||
console.log(undefined == 0); // false
|
||||
console.log(undefined == ''); // false
|
||||
```
|
||||
|
||||
These comparisons return `false` because `null` and `undefined` are only equal to each other (and themselves) when using the equality operator. The behavior of `null` in other comparisons is particularly tricky:
|
||||
|
||||
```js
|
||||
console.log(null > 0); // false
|
||||
console.log(null == 0); // false
|
||||
console.log(null >= 0); // true
|
||||
```
|
||||
|
||||
`undefined`, on the other hand, always converts to `NaN` in numeric contexts, which makes all numeric comparisons with `undefined` return `false`:
|
||||
|
||||
```js
|
||||
console.log(undefined > 0); // false
|
||||
console.log(undefined < 0); // false
|
||||
console.log(undefined == 0); // false
|
||||
```
|
||||
|
||||
Given these nuances, it's generally recommended to use the strict equality operator when comparing values, especially when dealing with `null` and `undefined`. This approach helps avoid unexpected type coercion and makes your code's behavior more predictable.
|
||||
|
||||
In summary, while `null` and `undefined` are both used to represent the absence of a value, they behave differently in comparisons. Understanding these differences is key to writing clear and error-free JavaScript code.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
+87
@@ -10,6 +10,93 @@ dashedName: what-are-switch-statements-and-how-do-they-differ-from-if-else-chain
|
||||
|
||||
Watch the video lecture and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are `switch` statements and how do they differ from `if/else if/else` chains?
|
||||
|
||||
`switch` statements and `if/else if/else` chains are both control flow structures in programming that allow us to execute different code blocks based on certain conditions. However, they have distinct characteristics and use cases.
|
||||
|
||||
A `switch` statement evaluates an expression and matches its value against a series of `case` clauses. When a match is found, the code block associated with that `case` is executed. Here's a basic structure of a `switch` statement:
|
||||
|
||||
```js
|
||||
switch (expression) {
|
||||
case value1:
|
||||
// code to be executed if expression === value1
|
||||
break;
|
||||
case value2:
|
||||
// code to be executed if expression === value2
|
||||
break;
|
||||
default:
|
||||
// code to be executed if expression doesn't match any case
|
||||
}
|
||||
```
|
||||
|
||||
The `break` statement at the end of each `case` is crucial. It tells the program to exit the switch block once a matching `case` has been executed. Without it, the program would continue executing subsequent cases, a behavior known as "fall-through".
|
||||
|
||||
`switch` statements are typically used when you're comparing a single variable against multiple possible values. They're especially useful when you have many potential conditions to check against a single variable. Here is an example using a `switch` statement for the days of the week:
|
||||
|
||||
```js
|
||||
let dayOfWeek = 3;
|
||||
|
||||
switch (dayOfWeek) {
|
||||
case 1:
|
||||
console.log("It's Monday! Time to start the week strong.");
|
||||
break;
|
||||
case 2:
|
||||
console.log("It's Tuesday! Keep the momentum going.");
|
||||
break;
|
||||
case 3:
|
||||
console.log("It's Wednesday! We're halfway there.");
|
||||
break;
|
||||
case 4:
|
||||
console.log("It's Thursday! Almost the weekend.");
|
||||
break;
|
||||
case 5:
|
||||
console.log("It's Friday! The weekend is near.");
|
||||
break;
|
||||
case 6:
|
||||
console.log("It's Saturday! Enjoy your weekend.");
|
||||
break;
|
||||
case 7:
|
||||
console.log("It's Sunday! Rest and recharge.");
|
||||
break;
|
||||
default:
|
||||
console.log("Invalid day! Please enter a number between 1 and 7.");
|
||||
}
|
||||
```
|
||||
|
||||
`switch` statements can be more readable and concise when dealing with many possible values for a single variable.
|
||||
|
||||
`if/else if` statements on the other hand are more flexible. They can evaluate complex conditions and different variables in each clause. This makes them suitable for a wider range of scenarios. Here is an example of when you might use an `if/else` statement over a `switch` statement:
|
||||
|
||||
```js
|
||||
let creditScore = 720;
|
||||
let annualIncome = 60000;
|
||||
let loanAmount = 200000;
|
||||
|
||||
let eligibilityStatus;
|
||||
|
||||
if (creditScore >= 750 && annualIncome >= 80000) {
|
||||
eligibilityStatus = "Eligible for premium loan rates.";
|
||||
} else if (creditScore >= 700 && annualIncome >= 50000) {
|
||||
eligibilityStatus = "Eligible for standard loan rates.";
|
||||
} else if (creditScore >= 650 && annualIncome >= 40000) {
|
||||
eligibilityStatus = "Eligible for subprime loan rates.";
|
||||
} else if (creditScore < 650) {
|
||||
eligibilityStatus = "Not eligible due to low credit score.";
|
||||
} else {
|
||||
eligibilityStatus = "Not eligible due to insufficient income.";
|
||||
}
|
||||
|
||||
console.log(eligibilityStatus);
|
||||
```
|
||||
|
||||
In this example, we have a person’s annual income and credit score and checking what types of loan they would qualify for. Since we are dealing with more complex logical evaluations and multiple variables, it is better to use an `if/else` statement here versus a `switch` statement.
|
||||
|
||||
It's worth noting that `switch` statements in JavaScript use strict comparison (`===`), which means they don't perform type coercion. This can be an advantage in terms of predictability and avoiding subtle bugs.
|
||||
|
||||
In summary, while both `switch` statements and `if/else if` chains allow for multiple-branch logic in your code, they have different strengths. `switch` statements excel at handling multiple possible values for a single variable, while `if/else if` chains offer more flexibility for complex conditions. The choice between them often comes down to the specific requirements of your code and personal or team coding style preferences.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
Reference in New Issue
Block a user