More Modern JS Concepts | Part 2

 1. Operators

1.1 Ternary Operator

A Ternary Operator can be used to replace

if...else

statements in some situations.

Syntax:

condition ? expressionIfTrue : expressionIfFalse

1

2

3

4

let speed = 70;

let message = speed >= 100 ? "Too Fast" : "OK";

console.log(message); // OK

JAVASCRIPT

2. Conditional Statements

2.1 Switch Statement

A Switch statement is a conditional statement like

if...else

statement used in decision making.

Syntax:

switch (expression) {

case value1:

/*Statements executed when the

result of expression matches value1*/

break;

case value2:

/*Statements executed when the

result of expression matches value2*/

break;

...

case valueN:

/*Statements executed when the

result of expression matches valueN*/

break;

default:

/*Statements executed when none of

the values match the value of the expression*/

break;

}

Collapse

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

let day = 1;

switch (day) {

case 0:

console.log("Sunday");

break;

case 1:

console.log("Monday"); // Monday

break;

case 2:

console.log("Tuesday");

break;

case 3:

console.log("Wednesday");

break;

case 4:

console.log("Thursday");

break;

case 5:

console.log("Friday");

break;

case 6:

console.log("Saturday");

break;

default:

console.log("Invalid");

break;

}

JAVASCRIPT

Collapse

2.1.1 What happens if we forgot a break?

If there is no

break

statement, then the execution continues with the next case until the

break

statement is met.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

let day = 4;

switch (day) {

case 0:

console.log("Sunday");

break;

case 1:

console.log("Monday");

break;

case 2:

console.log("Tuesday");

break;

case 3:

console.log("Wednesday");

break;

case 4:

console.log("Thursday");

case 5:

console.log("Friday");

case 6:

console.log("Saturday");

default:

console.log("Invalid");

}

JAVASCRIPT

Collapse

3. Defining Functions

There are multiple ways to define a function.

• Function Declaration
• Function Expression
• Arrow Functions
• Function Constructor, etc.

3.1 Arrow Functions

An Arrow function is a simple and concise syntax for defining functions.

It is an alternative to a function expression.

Syntax:

let sum = (param1, param2, …) => {

// statement(s)

};

sum();

1

2

3

4

5

let sum = (a, b) => {

let result = a + b;

return result;

};

console.log(sum(4, 3));

JAVASCRIPT

3.1.1 Simple Expressions

In arrow functions, the

return

statement and curly braces are not required for simple expressions.

1

2

3

let sum = (a, b) => a + b;

console.log(sum(4, 3)); // 7

JAVASCRIPT

3.1.2 One parameter

If there is only one parameter, then parentheses are not required.

1

2

3

let greet = name => `Hi ${name}!`;

console.log(greet("Rahul")); // Hi Rahul!

JAVASCRIPT

3.1.3 No parameters

If there are no parameters, parentheses will be empty, but they should be present.

1

2

3

let sayHi = () => "Hello!";

console.log(sayHi()); // Hello!

JAVASCRIPT

3.1.4 Returning Objects

1

2

3

4

5

6

7

let createUser = name => {

return {

firstName: name

};

};

console.log(createUser("Rahul")); // Object {firstName: "Rahul"}

JAVASCRIPT

Simple Expression

1

2

3

let createUser = name => { firstName: "Rahul" };

console.log(createUser()); // undefined

JAVASCRIPT

JavaScript considers the two curly braces as a code block, but not as an object syntax.

So, wrap the object with parentheses to distinguish with a code block.

1

2

3

let createUser = name => ({ firstName: "Rahul" });

console.log(createUser()); // Object {firstName: "Rahul"}

JAVASCRIPT

Try out the Ternary Operator, Switch Statements, Arrow Functions in the JavaScript Code Playground.