JavaScript If Else Shorthand
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of JavaScript if else shorthand, in JavaScript, the decision-making is done by the if-else statement.
If the statement mentioned is true then a block of codes will be executed and if false another block of codes will be executed.
To use JavaScript if else shorthand we will use the conditional operator, named the Ternary Operator. We will see two examples here.
Step By Step Guide On JavaScript If Else Shorthand :-
The JavaScript if else Shorthand, the ternary operator syntax can be expressed as,
Expression 1 ? expression 2 : expression 3
Example 1
Let us see a simple example first,
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript if else shorthand </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript if else shorthand </h3>
<script>
// ternary operator
number == 1 ? console.log("one")
: console.log("NotOne") ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- to add JavaScript Create a <script> tag.
- Using the ternary operator. Put ‘?’ before the truthy statement and put ‘: ‘before the falsy statement.
Example 2
We will see an example of complex decision-making.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript if else shorthand </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript if else shorthand </h3>
<script>
let year=2020 ;
leapYear = ( year % 400 == 0 || year % 100 !=0 && year % 4 == 0 ) ? console.log ( 'this is leap year ')
: console.log ( 'this is not leap year ') ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- to add JavaScript Create a <script> tag.
- Creating a variable named year
- Add condition if the year is a leap year or not
- Using the ternary operator. Put ‘?’ before the truthy statement and put ‘: ‘before the false statement.
Conclusion :-
At last here in conclusion, here we can say that with this article’s help, we can use if else shorthand in JavaScript.
I hope this article on JavaScript if else shorthand helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
