From f412094d8a450b5b0736d9908b5360cf6a7a7c4f Mon Sep 17 00:00:00 2001 From: hitomipupil Date: Fri, 20 Dec 2024 07:05:45 +0100 Subject: [PATCH 1/4] Initial commit --- .../nullish-coalescing/nullish-coalescing.md | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 content/javascript/concepts/nullish-coalescing/nullish-coalescing.md diff --git a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md new file mode 100644 index 00000000000..742073087da --- /dev/null +++ b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md @@ -0,0 +1,77 @@ +--- +Title: 'Nullish Coalescing' +Description: 'A JavaScript nullish coalescing (??) operator is a logical operator evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value.' +Subjects: + - 'Web Development' + - 'Computer Science' +Tags: + - 'Comparison' + - 'Logical' + - 'Operator' +CatalogContent: +- 'introduction-to-javascript' +- 'paths/front-end-engineer-career-path' +--- + +A JavaScript **nullish coalescing** (??) operator is a logical operator evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value. + +## Syntax + +```pseudo +value1 ?? value2 +``` + +## Difference between `??` and `||` + +The OR (||) operator returns the right-hand operand for any falsy value (e.g., 0, false, NaN, ""). In contrast, the nullish coalescing (??) operator only checks if the left-hand operand is null or undefined. + +For example, when the value is an empty string, `??` returns the right-hand operand: + +```js +const userInput = ""; +const result = userInput ?? "Default"; + +console.log(result); +// Output: "" (empty string is not nullish) +``` + +Meanwhile, `||` returns left-hand operand: + +```js +const userInput = ""; +const result = userInput || "Default"; +console.log(result); // Output: "Default" (because empty string is falsy) +``` + +## Operator Precedence: +When using multiple operators in an expression, those with higher precedence are evaluated first, unless parentheses are used to explicitly define the order. + +Operator Precedence Order: +- `&&` has higher precedence than `||`. +- `??` has lower precedence than both `&&` and `||`. + +To ensure the correct evaluation when combining ?? with other operators, parentheses should be used. + +```js +const a = null; +const b = false; +const c = "Hello"; + +const result1 = a || b && c ?? "Default"; +console.log(result1); // Output: false + +const result2 = a || (b && c ?? "Default"); +console.log(result2)// Output: "Default" +``` + +## Codebyte Example + +The following code checks if the name has a value. If not, it returns default value "Guest". + +```codebyte/js +const name = null; +const defaultName = "Guest"; + +console.log(name ?? defaultName); +// Output: "Guest" +``` \ No newline at end of file From c3501fdbbf2a8136e648ea0f202efe90bc15db3d Mon Sep 17 00:00:00 2001 From: hitomipupil Date: Fri, 20 Dec 2024 13:59:46 +0100 Subject: [PATCH 2/4] removed extra information and modified grammar mistakes --- .../nullish-coalescing/nullish-coalescing.md | 51 ++----------------- 1 file changed, 4 insertions(+), 47 deletions(-) diff --git a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md index 742073087da..5738d5212a8 100644 --- a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md +++ b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md @@ -1,6 +1,6 @@ --- Title: 'Nullish Coalescing' -Description: 'A JavaScript nullish coalescing (??) operator is a logical operator evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value.' +Description: 'A JavaScript nullish coalescing (??) operator is a logical operator that evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value.' Subjects: - 'Web Development' - 'Computer Science' @@ -13,7 +13,7 @@ CatalogContent: - 'paths/front-end-engineer-career-path' --- -A JavaScript **nullish coalescing** (??) operator is a logical operator evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value. +A JavaScript **nullish coalescing** (??) operator is a logical operator that evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value. ## Syntax @@ -21,54 +21,11 @@ A JavaScript **nullish coalescing** (??) operator is a logical operator evaluate value1 ?? value2 ``` -## Difference between `??` and `||` - -The OR (||) operator returns the right-hand operand for any falsy value (e.g., 0, false, NaN, ""). In contrast, the nullish coalescing (??) operator only checks if the left-hand operand is null or undefined. - -For example, when the value is an empty string, `??` returns the right-hand operand: - -```js -const userInput = ""; -const result = userInput ?? "Default"; - -console.log(result); -// Output: "" (empty string is not nullish) -``` - -Meanwhile, `||` returns left-hand operand: - -```js -const userInput = ""; -const result = userInput || "Default"; -console.log(result); // Output: "Default" (because empty string is falsy) -``` - -## Operator Precedence: -When using multiple operators in an expression, those with higher precedence are evaluated first, unless parentheses are used to explicitly define the order. - -Operator Precedence Order: -- `&&` has higher precedence than `||`. -- `??` has lower precedence than both `&&` and `||`. - -To ensure the correct evaluation when combining ?? with other operators, parentheses should be used. - -```js -const a = null; -const b = false; -const c = "Hello"; - -const result1 = a || b && c ?? "Default"; -console.log(result1); // Output: false - -const result2 = a || (b && c ?? "Default"); -console.log(result2)// Output: "Default" -``` - ## Codebyte Example -The following code checks if the name has a value. If not, it returns default value "Guest". +The following code checks if name is null or undefined and if it is, logs a default name to the console. -```codebyte/js +```codebyte/javascript const name = null; const defaultName = "Guest"; From b6498cc176a6f6b6fbcce1899e40d39bdc0426c8 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 24 Dec 2024 14:13:59 +0530 Subject: [PATCH 3/4] Update nullish-coalescing.md minor fixes --- .../nullish-coalescing/nullish-coalescing.md | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md index 5738d5212a8..812f24bd484 100644 --- a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md +++ b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md @@ -1,19 +1,19 @@ --- Title: 'Nullish Coalescing' -Description: 'A JavaScript nullish coalescing (??) operator is a logical operator that evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value.' +Description: 'Returns the right-hand operand if the left-hand operand is null or undefined, otherwise, it returns the left-hand operand.' Subjects: - 'Web Development' - 'Computer Science' Tags: - 'Comparison' - 'Logical' - - 'Operator' + - 'Operators' CatalogContent: - 'introduction-to-javascript' - 'paths/front-end-engineer-career-path' --- -A JavaScript **nullish coalescing** (??) operator is a logical operator that evaluates the left-hand value and returns it if it isn't nullish (null or undefined). If it is, the operator returns the right-hand side value. +A JavaScript **nullish coalescing** (`??`) operator is a logical operator that evaluates the left-hand operand and returns it if it is not nullish (i.e., not `null` or `undefined`). Otherwise, it returns the right-hand operand. ## Syntax @@ -21,14 +21,33 @@ A JavaScript **nullish coalescing** (??) operator is a logical operator that eva value1 ?? value2 ``` +- `value1`: The first operand to check if it is nullish (`null` or `undefined`). +- `value2`: The second operand that acts as the default value, returned only if `value1` is nullish. + +## Example + +The following example demonstrates the use of the nullish coalescing operator to provide a default value when the variable is `null` or `undefined`: + +```js +const age = undefined; +const defaultAge = 18; + +console.log(age ?? defaultAge); +``` + +The above code produces the following output: + +```shell +18 +``` + ## Codebyte Example -The following code checks if name is null or undefined and if it is, logs a default name to the console. +The following example uses the nullish coalescing operator (`??`) to return "Guest" as a fallback value when `name` is `null`: ```codebyte/javascript const name = null; const defaultName = "Guest"; console.log(name ?? defaultName); -// Output: "Guest" -``` \ No newline at end of file +``` From e802a0519dee9801e9172563e48a7bd639a98471 Mon Sep 17 00:00:00 2001 From: Sriparno Roy Date: Wed, 8 Jan 2025 21:15:08 +0530 Subject: [PATCH 4/4] Minor changes --- .../nullish-coalescing/nullish-coalescing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md index 812f24bd484..d7523d3c534 100644 --- a/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md +++ b/content/javascript/concepts/nullish-coalescing/nullish-coalescing.md @@ -1,6 +1,6 @@ --- Title: 'Nullish Coalescing' -Description: 'Returns the right-hand operand if the left-hand operand is null or undefined, otherwise, it returns the left-hand operand.' +Description: 'Returns the right-hand operand in case the left-hand operand is null or undefined. Otherwise, it returns the left-hand operand.' Subjects: - 'Web Development' - 'Computer Science' @@ -9,11 +9,11 @@ Tags: - 'Logical' - 'Operators' CatalogContent: -- 'introduction-to-javascript' -- 'paths/front-end-engineer-career-path' + - 'introduction-to-javascript' + - 'paths/front-end-engineer-career-path' --- -A JavaScript **nullish coalescing** (`??`) operator is a logical operator that evaluates the left-hand operand and returns it if it is not nullish (i.e., not `null` or `undefined`). Otherwise, it returns the right-hand operand. +In JavaScript, the **nullish coalescing** (`??`) operator is a logical operator that evaluates the left-hand operand and returns it if it is not nullish (i.e., not `null` or `undefined`). Otherwise, it returns the right-hand operand. ## Syntax @@ -26,7 +26,7 @@ value1 ?? value2 ## Example -The following example demonstrates the use of the nullish coalescing operator to provide a default value when the variable is `null` or `undefined`: +The following example demonstrates the use of the nullish coalescing operator to return `18` as a default or fallback value when the variable `age` is `null` or `undefined`: ```js const age = undefined; @@ -43,7 +43,7 @@ The above code produces the following output: ## Codebyte Example -The following example uses the nullish coalescing operator (`??`) to return "Guest" as a fallback value when `name` is `null`: +The following codebyte example uses the nullish coalescing operator (`??`) to return `"Guest"` as a fallback value when `name` is `null`: ```codebyte/javascript const name = null;