Several Ways to Write Default Values in JavaScript

 Front-end interview question bank ( necessary for interview) recommendation: ★★★★★            

Address: front-end interview question bank

In practice, when you need to assign a value to a variable, if the data source is uncontrollable, you usually set a default value for it (just like the empty object mode). There are many syntaxes in JavaScript that support setting such default values, such as function parameter default values, destructuring assignment default values, etc. But this article mainly discusses the 3 default value setting methods during manual assignment:

1. Use conditional judgment to set the default value, such as:let result = input || {}
2. Use the empty judgment operator, such as:let result = input ?? {}
3. Set the default value in conjunction with typeofthe judgment type, such as:let result = typeof(input) !== 'undefined' ? input : {}

 

|| operator

  This form mainly utilizes  Boolean() the type conversion and  || the short-circuit characteristics of the operator, which can also be rewritten into a ternary operator ( ?:) or an If-else statement; restricted by Boolean type conversion, all  false values ​​will be considered unassigned.

// 当 input 为：undefined、null、''、0、NaN、false 时会被忽略
let input;
// 即 result 值不会为：undefined、null、''、0、NaN、false
let result;


result = input || {};



// 变体（1）：三目运算符形式
result = input ? input : {};
// 变体（2）：If-else 语句
if(input) {
    result = input;
} else {
    result = {};
}


// 若只涉及一个变量，还可简写
obj ||= {};

?? operator

  Since  all false values ​​will be ignored, TC39 proposes   an operator  || in the ES2020 proposal that only  evaluates the expression on the right when the operand on the left is  or  . Often used in conjunction  with the optional chaining operator .??nullundefined?. 

// 当 input 为：undefined、null 时会被忽略
let input;
// 即 result 值不会为：undefined、null；可以是：''、0、NaN、false
let result;


result = input ?? {}; 


// 若只涉及一个变量，还可简写
obj ??= {};

typeof operator

  There are also scenarios where the input  undefined is considered invalid only when the input is , null that is, it is considered a valid input. typeof At this time , operators  can be used  to judge whether the input type is undefined to distinguish; if it is clear that the input variable has been declared, the variable can be  undefined compared to judge whether it is equal.

// 当 input 为：undefined 时会被忽略
let input;
// 即 result 值不会为：undefined；可以是：null、''、0、NaN、false
let result;


result = (typeof(input) !== 'undefined') ? input : {};


// 变体：直接和 undefined 判断，需注意若input未声明会报错
result = (input !== undefined) ? input : {};

Summarize

  In the process of object-oriented programming, most scene variables refer to objects. In these cases,  ?? the cooperation  ?. will be more in line with the writing method of modern programming languages, and it is also officially recommended.

const EMPTY_WALLET = {
    money: 0
}

function consume(user = null, goods = null) {
    if (null === (goods?.price ?? null)) {
        return false;
    }
    let wallet = user?.info?.wallet ?? EMPTY_WALLET;
    if (wallet.money < goods.price) {
        return false;
    }
    wallet.money -= goods.price;
    return true;
}

Front-end interview question bank ( necessary for interview) recommendation: ★★★★★            

Address: front-end interview question bank