2022/12/10

【My Study Note】Javascript Codes

JavaScript Programming

Conditional Statements

Truthy and Falsy

Sometimes, you’ll want to check if a variable exists and you won’t necessarily want it to equal a specific value — you’ll only check to see if the variable has been assigned a value.

let myVariable = 'I Exist!';
 
if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

The code block in the if statement will run because myVariable has a truthy value; even though the value of myVariable is not explicitly the value true, when used in a boolean or conditional context, it evaluates to true because it has been assigned a non-falsy value.

Falsy Values

• 0
• Empty strings like “” or ”
• null which represent when there is no value at all
• undefined which represent when a declared variable lacks a value
• NaN, or Not a Number

Truthy and Falsy Assignment

Say you have a website and want to take a user’s username to make a personalized greeting. Sometimes, the user does not have an account, making the username variable falsy. The code below checks if username is defined and assigns a default string if it is not:

let username = '';
let defaultName;
 
if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}
 
console.log(defaultName); // Prints: Stranger

If you combine your knowledge of logical operators you can use a short-hand for the code above. In a boolean condition, JavaScript assigns the truthy value to a variable if you use the || operator in your assignment:

let username = '';
let defaultName = username || 'Stranger';
 
console.log(defaultName); // Prints: Stranger

Because || or statements check the left-hand condition first, the variable defaultName will be assigned the actual value of username if it is truthy, and it will be assigned the value of ‘Stranger’ if username is falsy. This concept is also referred to as short-circuit evaluation.

Ternary Operator

Original Codes

let isNightTime = true;
 
if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
}

Ternary Operator

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');

• The condition, isNightTime, is provided before the ?.
• Two expressions follow the ? and are separated by a colon :.
• If the condition evaluates to true, the first expression executes.
• If the condition evaluates to false, the second expression executes.

Functions

Default Parameters

function makeShoppingList(item1 = "milk", item2 = "bread", item3 = "eggs"){
  console.log(`Remember to buy ${item1}`);
  console.log(`Remember to buy ${item2}`);
  console.log(`Remember to buy ${item3}`);
}

Concise Body Arrow Functions

Functions that take only a single parameter do not need that parameter to be enclosed in parentheses. However, if a function takes zero or multiple parameters, parentheses are required.

const functionName = () => {};
const functionName = ParamOne => {};
const functionName = (ParamOne, ParamTwo) => {};

A function body composed of a single-line block does not need curly braces. Without the curly braces, whatever that line evaluates will be automatically returned. The contents of the block should immediately follow the arrow => and the return keyword can be removed. This is referred to as implicit return.

Original Code

const squareNum = (num) => {
  return num * num;
};

Concise Version

const squareNum = num => num * num;

JavaScript Programming

• Tweet
• LINE
• facebook