JS fundamentals

Question 1

What is alert function ?

Answer 1

It shows a message and waits for the user to press “OK”.

For example:

alert(“Hello”);
The mini-window with the message is called a modal window. The word “modal” means that the visitor can’t interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case – until they press “OK”.

Question 2

What is prompt function ?

Answer 2

The function prompt accepts two arguments:

result = prompt(title, [default]);
It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel.

title -The text to show the visitor.
default - An optional second parameter, the initial value for the input field.
The square brackets in syntax […] -The square brackets around default in the syntax above denote that the parameter is optional, not required.

The visitor can type something in the prompt input field and press OK. Then we get that text in the result. Or they can cancel the input by pressing Cancel or hitting the Esc key, then we get null as the result.

The call to prompt returns the text from the input field or null if the input was canceled.

Question 3

What is confirm function ?

Answer 3

The syntax:

result = confirm(question);
The function confirm shows a modal window with a question and two buttons: OK and Cancel.

The result is true if OK is pressed and false otherwise.

For example:

let isBoss = confirm(“Are you the boss?”);

alert( isBoss ); // true if OK is pressed

Question 4

How string conversion happens ?

Answer 4

String conversion happens when we need the string form of a value.

For example, alert(value) does it to show the value.

We can also call the String(value) function to convert a value to a string:

let value = true;
alert(typeof value); // boolean

value = String(value); // now value is a string “true”
alert(typeof value); // string
String conversion is mostly obvious. A false becomes “false”, null becomes “null”, etc.

Question 5

Numeric conversion
alert( “6” / “2” );
Output ?

Answer 5

3 , because it is automatically converted

Question 6

How to explicitly convert to number ?

Answer 6

We can use the Number(value) function to explicitly convert a value to a number:

let str = "123";
alert(typeof str); // string

let num = Number(str); // becomes a number 123

alert(typeof num); // number
Explicit conversion is usually required when we read a value from a string-based source like a text form but expect a number to be entered.

If the string is not a valid number, the result of such a conversion is NaN. For instance:

let age = Number(“an arbitrary string instead of a number”);

alert(age); // NaN, conversion failed

Question 7

alert( Number(“ 123 “) );

Answer 7

123 without whitespaces

Question 8

alert( Number(“123z”) );

Answer 8

NaN (error reading a number at “z”)

Question 9

alert( Number(true) );

Answer 9

1

Question 10

alert( Number(false) );

Answer 10

0

Question 11

alert( Boolean(1) );

Answer 11

true

Question 12

alert( Boolean(0) );

Answer 12

false

Question 13

alert( Boolean(“hello”) );

Answer 13

true

Question 14

alert( Boolean(“”) );

Answer 14

false

Question 15

alert( Boolean(“0”) );

Answer 15

true

Question 16

alert( Boolean(“ “) );

Answer 16

// spaces, also true (any non-empty string is true)

Question 17

What is an operand ?

Answer 17

An operand – is what operators are applied to. For instance, in the multiplication of 5 * 2 there are two operands: the left operand is 5 and the right operand is 2. Sometimes, people call these “arguments” instead of “operands”.

Question 18

What is an operator ?

Answer 18

An operator is unary if it has a single operand. For example, the unary negation - reverses the sign of a number:

let x = 1;

x = -x;
alert( x ); // -1, unary negation was applied
An operator is binary if it has two operands. The same minus exists in binary form as well:

let x = 1, y = 3;
alert( y - x ); // 2, binary minus subtracts values

Question 19

alert( ‘1’ + 2 );

alert( 2 + ‘1’ );

Answer 19

// "12"
// "21"

Question 20

alert( +true );

alert( +”” );

Answer 20

// 1
0
It actually does the same thing as Number(...), but is shorter.

Question 21

let counter = 1;
let a = ++counter; 

alert(a);

Answer 21

// 2

Question 22

let counter = 1;
let a = counter++; 

alert(a);

Answer 22

// 1

Question 23

let result = 5 > 4;
alert( result );

Answer 23

let result = 5 > 4; // assign the result of the comparison
alert( result ); // true

Question 24

alert( ‘Z’ > ‘A’ );
alert( ‘Glow’ > ‘Glee’ );
alert( ‘Bee’ > ‘Be’ );

Answer 24

alert( ‘Z’ > ‘A’ ); // true
alert( ‘Glow’ > ‘Glee’ ); // true
alert( ‘Bee’ > ‘Be’ ); // true

To see whether a string is greater than another, JavaScript uses the so-called “dictionary” or “lexicographical” order.

In other words, strings are compared letter-by-letter.

Question 25

“A” == “a” Are these equal ?

Answer 25

case matters. A capital letter “A” is not equal to the lowercase “a”. Which one is greater? The lowercase “a”. Why? Because the lowercase character has a greater index in the internal encoding table JavaScript uses (Unicode). We’ll get back to specific details and consequences of this in the chapter Strings.

Question 26

alert( ‘2’ > 1 );

alert( ‘01’ == 1 );

Answer 26

alert( ‘2’ > 1 ); // true, string ‘2’ becomes a number 2
alert( ‘01’ == 1 ); // true, string ‘01’ becomes a number 1
When comparing values of different types, JavaScript converts the values to numbers.

Question 27

let a = 0;
alert( Boolean(a) ); 

let b = "0";
alert( Boolean(b) ); 

alert(a == b);

Answer 27

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

It is possible that at the same time:
1-Two values are equal.
2-One of them is true as a boolean and the other one is false as a boolean.

From JavaScript’s standpoint, this result is quite normal. An equality check converts values using the numeric conversion (hence “0” becomes 0), while the explicit Boolean conversion uses another set of rules.

Question 28

alert( 0 == false );

alert( ‘’ == false );

Answer 28

alert( 0 == false ); // true
alert( ‘’ == false ); // true

A regular equality check == has a problem. It cannot differentiate 0 from false:

This happens because operands of different types are converted to numbers by the equality operator ==. An empty string, just like false, becomes a zero.

What to do if we’d like to differentiate 0 from false?

A strict equality operator === checks the equality without type conversion.

In other words, if a and b are of different types, then a === b immediately returns false without an attempt to convert them.

Let’s try it:

alert( 0 === false ); // false, because the types are different
There is also a “strict non-equality” operator !== analogous to !=.

The strict equality operator is a bit longer to write, but makes it obvious what’s going on and leaves less room for errors.

Question 29

alert( null === undefined );

Answer 29

alert( null === undefined ); // false

These values are different, because each of them is a different type.

Question 30

alert( null == undefined );

Answer 30

alert( null == undefined ); // true
There’s a special rule. These two are a “sweet couple”: they equal each other (in the sense of ==), but not any other value.

Question 31

alert( null > 0 );
alert( null == 0 );
alert( null >= 0 );

Answer 31

alert( null > 0 ); // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

Question 32

alert( undefined > 0 );
alert( undefined < 0 );
alert( undefined == 0 );

Answer 32

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

Why does it dislike zero so much? Always false!

We get these results because:

Comparisons (1) and (2) return false because undefined gets converted to NaN and NaN is a special numeric value which returns false for all comparisons.
The equality check (3) returns false because undefined only equals null, undefined, and no other value.

Question 33

let age = prompt(‘age?’, 18);

let message = (age < 3) ? ‘Hi, baby!’ :
(age < 18) ? ‘Hello!’ :
(age < 100) ? ‘Greetings!’ :
‘What an unusual age!’;

alert( message );

Would this work, if yes then explain.

Answer 33

It may be difficult at first to grasp what’s going on. But after a closer look, we can see that it’s just an ordinary sequence of tests:

The first question mark checks whether age < 3.
If true – it returns ‘Hi, baby!’. Otherwise, it continues to the expression after the colon ‘”:”’, checking age < 18.
If that’s true – it returns ‘Hello!’. Otherwise, it continues to the expression after the next colon ‘”:”’, checking age < 100.
If that’s true – it returns ‘Greetings!’. Otherwise, it continues to the expression after the last colon ‘”:”’, returning ‘What an unusual age!’.

Question 34

alert( 1 || 0 );

alert( null || 1 );
alert( null || 0 || 1 );

alert( undefined || null || 0 );

Answer 34

alert( 1 || 0 ); // 1 (1 is truthy)
alert( null || 1 ); // 1 (1 is the first truthy value)
alert( null || 0 || 1 ); // 1 (the first truthy value)
alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)

The OR || operator does the following:

Evaluates operands from left to right.
For each operand, converts it to boolean. If the result is true, stops and returns the original value of that operand.
If all operands have been evaluated (i.e. all were false), returns the last operand.
A value is returned in its original form, without the conversion.

In other words, a chain of OR || returns the first truthy value or the last one if no truthy value is found.

Question 35

let firstName = “”;
let lastName = “”;
let nickName = “SuperCoder”;

alert( firstName || lastName || nickName || “Anonymous”);

Answer 35

let firstName = “”;
let lastName = “”;
let nickName = “SuperCoder”;

alert( firstName || lastName || nickName || “Anonymous”); // SuperCoder

Question 36

true || alert(“printed”);
false || alert(“printed”);
Short circuiting in OR

Answer 36

only the second message is printed:
Another feature of OR || operator is the so-called “short-circuit” evaluation.
It means that || processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument.
The importance of this feature becomes obvious if an operand isn’t just a value, but an expression with a side effect, such as a variable assignment or a function call.

In the first line, the OR || operator stops the evaluation immediately upon seeing true, so the alert isn’t run.
Sometimes, people use this feature to execute commands only if the condition on the left part is falsy.

Question 37

alert( 1 && 0 );

alert( 1 && 5 );

Answer 37

// if the first operand is truthy,
// AND returns the second operand:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

The AND && operator does the following:

Evaluates operands from left to right.
For each operand, converts it to a boolean. If the result is false, stops and returns the original value of that operand.
If all operands have been evaluated (i.e. all were truthy), returns the last operand.
In other words, AND returns the first falsy value or the last value if none were found.

The rules above are similar to OR. The difference is that AND returns the first falsy value while OR returns the first truthy one.

Question 38

alert( null && 5 );

alert( 0 && “no matter what” );

Answer 38

// if the first operand is falsy,
// AND returns it. The second operand is ignored
alert( null && 5 ); // null
alert( 0 && “no matter what” ); // 0

The AND && operator does the following:

Evaluates operands from left to right.
For each operand, converts it to a boolean. If the result is false, stops and returns the original value of that operand.
If all operands have been evaluated (i.e. all were truthy), returns the last operand.
In other words, AND returns the first falsy value or the last value if none were found.

The rules above are similar to OR. The difference is that AND returns the first falsy value while OR returns the first truthy one.

Question 39

alert( 1 && 2 && null && 3 );

Answer 39

alert( 1 && 2 && null && 3 ); // null

We can also pass several values in a row. See how the first falsy one is returned:

Question 40

Between && and || which has higher precedence ?

Answer 40

The precedence of AND && operator is higher than OR ||.

So the code a && b || c && d is essentially the same as if the && expressions were in parentheses: (a && b) || (c && d).

Question 41

How NOT operator works ?

Answer 41

The operator accepts a single argument and does the following:

Converts the operand to boolean type: true/false.
Returns the inverse value.
For instance:

alert( !true ); // false
alert( !0 ); // true

Question 42

alert( !!”non-empty string” );

alert( !!null );

Answer 42

alert( !!”non-empty string” ); // true
alert( !!null ); // false

the first NOT converts the value to boolean and returns the inverse, and the second NOT inverses it again. In the end, we have a plain value-to-boolean conversion.

Question 43

What is nullish coalescing operator ?

Answer 43

The nullish coalescing operator is written as two question marks ??.

As it treats null and undefined similarly, we’ll use a special term here, in this article. We’ll say that an expression is “defined” when it’s neither null nor undefined.

The result of a ?? b is:
if a is defined, then a,
if a isn’t defined, then b.

In other words, ?? returns the first argument if it’s not null/undefined. Otherwise, the second one.

Question 44

Give a use case for ?? with an example

Answer 44

The common use case for ?? is to provide a default value for a potentially undefined variable.

For example, here we show user if defined, otherwise Anonymous:

let user;

alert(user ?? “Anonymous”); // Anonymous (user not defined)
Here’s the example with user assigned to a name:

let user = “John”;

alert(user ?? “Anonymous”); // John (user defined)
We can also use a sequence of ?? to select the first value from a list that isn’t null/undefined.

Question 45

Since || and ?? does almost the same thing, then What is the difference between them ?

Answer 45

The important difference between them is that:

|| returns the first truthy value.
?? returns the first defined value.
In other words, || doesn’t distinguish between false, 0, an empty string “” and null/undefined. They are all the same – falsy values. If any of these is the first argument of ||, then we’ll get the second argument as the result.

In practice though, we may want to use default value only when the variable is null/undefined. That is, when the value is really unknown/not set.

For example, consider this:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0
The height || 100 checks height for being a falsy value, and it’s 0, falsy indeed.
so the result of || is the second argument, 100.

The height ?? 100 checks height for being null/undefined, and it’s not,
so the result is height “as is”, that is 0.

In practice, the zero height is often a valid value, that shouldn’t be replaced with the default. So ?? does just the right thing.

Question 46

Which has higher presedence - || or ??

Answer 46

The precedence of the ?? operator is the same as ||. They both equal 4 in the MDN table.

Question 47

let x = 1 && 2 ?? 3;

Answer 47

let x = 1 && 2 ?? 3; // Syntax error
Due to safety reasons, JavaScript forbids using ?? together with && and || operators, unless the precedence is explicitly specified with parentheses.

Use explicit parentheses to work around it:

let x = (1 && 2) ?? 3; // Works

alert(x); // 2

Question 48

What is do..while loop and when we use it ?

Answer 48

The condition check can be moved below the loop body using the do..while syntax:

do {
  // loop body
} while (condition);
The loop will first execute the body, then check the condition, and, while it’s truthy, execute it again and again.

For example:

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

This form of syntax should only be used when you want the body of the loop to execute at least once regardless of the condition being truthy. Usually, the other form is preferred: while(…) {…}.

Question 49

how to make an infinite loop in a for loop ?

Answer 49

for (;;) {
  // repeats without limits
}

Question 50

Can we use break/continue statements with the ternary operator ?

Answer 50

No

Question 51

How labels for break/continue work ?

Answer 51

Sometimes we need to break out from multiple nested loops at once.

For example, in the code below we loop over i and j, prompting for the coordinates (i, j) from (0,0) to (2,2):

for (let i = 0; i < 3; i++) {

for (let j = 0; j < 3; j++) {

let input = prompt(`Value at coords (${i},${j})`, '');

    // what if we want to exit from here to Done (below)?
  }
}

alert(‘Done!’);
We need a way to stop the process if the user cancels the input.

The ordinary break after input would only break the inner loop. That’s not sufficient – labels, come to the rescue!

A label is an identifier with a colon before a loop:

labelName: for (…) {
…
}
The break statement in the loop below breaks out to the label:

outer: for (let i = 0; i < 3; i++) {

for (let j = 0; j < 3; j++) {

let input = prompt(`Value at coords (${i},${j})`, '');

    // if an empty string or canceled, then break out of both loops
    if (!input) break outer; // (*)

    // do something with the value...
  }
}
alert('Done!');
In the code above, break outer looks upwards for the label named outer and breaks out of that loop.

So the control goes straight from (*) to alert(‘Done!’).

Question 52

In switch statement, which type of equality is checked ?

Answer 52

switch(x) {
case ‘value1’: // if (x === ‘value1’)
…
[break]

case ‘value2’: // if (x === ‘value2’)
…
[break]

default:
…
[break]
}
The value of x is checked for a strict equality to the value from the first case (that is, value1) then to the second (value2) and so on.
If the equality is found, switch starts to execute the code starting from the corresponding case, until the nearest break (or until the end of switch).
If no case is matched then the default code is executed (if it exists).

Question 53

What happens if there is no break statement in the switch case ?

Answer 53

If there is no break then the execution continues with the next case without any checks.

An example without break:

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}
In the example above we’ll see sequential execution of three alerts:

alert( ‘Exactly!’ );
alert( ‘Too big’ );
alert( “I don’t know such values” );

Question 54

let a = "1";
let b = 0;

switch (+a) {
case b + 1:
alert(“A runs “);
break;

default:
alert(“B runs”);
}

Answer 54

A runs

Any expression can be a switch/case argument
Both switch and case allow arbitrary expressions.

For example:

let a = "1";
let b = 0;

switch (+a) {
case b + 1:
alert(“this runs, because +a is 1, exactly equals b+1”);
break;

default:
alert(“this doesn’t run”);
}
Here +a gives 1, that’s compared with b + 1 in case, and the corresponding code is executed.

Question 55

Can we group cases in a switch statement ?

Answer 55

Several variants of case which share the same code can be grouped.

For example, if we want the same code to run for case 3 and case 5:

let a = 3;

switch (a) {
case 4:
alert(‘Right!’);
break;

  case 3: // (*) grouped two cases
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

default:
alert(‘The result is strange. Really.’);
}
Now both 3 and 5 show the same message.

The ability to “group” cases is a side-effect of how switch/case works without break. Here the execution of case 3 starts from the line (*) and goes through case 5, because there’s no break.

Question 56

let arg = prompt("Enter a value?");
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

case ‘2’:
alert( ‘Two’ );
break;

  case 3:
    alert( 'Three' );
    break;
  default:
    alert( 'An unknown value' );

Answer 56

let arg = prompt("Enter a value?");
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

case ‘2’:
alert( ‘Two’ );
break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' );

For 0, 1, the first alert runs.
For 2 the second alert runs.
But for 3, the result of the prompt is a string “3”, which is not strictly equal === to the number 3. So we’ve got a dead code in case 3! The default variant will execute.

Question 57

is it a good practice to have low to none global variables ?

Answer 57

Variables declared outside of any function, such as the outer userName in the code above, are called global.

Global variables are visible from any function (unless shadowed by locals).

It’s a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data.

Question 58

What is a parameter ?

Answer 58

A parameter is the variable listed inside the parentheses in the function declaration (it’s a declaration time term)

Question 59

What is an argument ?

Answer 59

An argument is the value that is passed to the function when it is called (it’s a call time term).

Question 60

Does javascript throws an error if an argument is not passed to a function ?

Answer 60

If a function is called, but an argument is not provided, then the corresponding value becomes undefined.

For instance, the aforementioned function showMessage(from, text) can be called with a single argument:

showMessage(“Ann”);
That’s not an error. Such a call would output “Ann: undefined”. As the value for text isn’t passed, it becomes undefined.

We can specify the so-called “default” (to use if omitted) value for a parameter in the function declaration, using =

Question 61

How default values are given to the function ?

Answer 61

We can specify the so-called “default” (to use if omitted) value for a parameter in the function declaration, using =:

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage(“Ann”); // Ann: no text given
Now if the text parameter is not passed, it will get the value “no text given”

Here “no text given” is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible:

function showMessage(from, text = anotherFunction()) {
  // anotherFunction() only executed if no text given
  // its result becomes the value of text
}

Question 62

Can we pass another function as a default value in any function in JS ?

Answer 62

YES
function showMessage(from, text = anotherFunction()) {
  // anotherFunction() only executed if no text given
  // its result becomes the value of text
}

In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter.

In the example above, anotherFunction() isn’t called at all, if the text parameter is provided.

On the other hand, it’s independently called every time when text is missing.

Question 63

A function with empty return or without it returns _____?

Answer 63

A function with an empty return or without it returns undefined
If a function does not return a value, it is the same as if it returns undefined:

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true
An empty return is also the same as return undefined:

function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

Question 64

What is the practice of One function- One action ?

Answer 64

A function should do exactly what is suggested by its name, no more.

Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two).

A few examples of breaking this rule:

getAge – would be bad if it shows an alert with the age (should only get).
createForm – would be bad if it modifies the document, adding a form to it (should only create it and return).
checkPermission – would be bad if it displays the access granted/denied message (should only perform the check and return the result).
These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they’re not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.

Question 65

Values passed to a function as parameters are copied to its local variables before using it in the function. is it True or False ?

Answer 65

True

Question 66

What is an function expression ?

Answer 66

There is another syntax for creating a function that is called a Function Expression.

It allows us to create a new function in the middle of any expression.

For example:

let sayHi = function() {
  alert( "Hello" );
};
Here we can see a variable sayHi getting a value, the new function, created as function() { alert("Hello"); }.

As the function creation happens in the context of the assignment expression (to the right side of =), this is a Function Expression.

Question 67

Can we omit a function name in function expressions ?

Answer 67

Yes

Question 68

Why is there a semicolon at the end of an function expression?
function sayHi() {
  // ...
}

let sayHi = function() {
  // ...
};

Answer 68

Since a function is a value, therefore, 
The semicolon would be there for a simpler assignment, such as let sayHi = 5;, and it’s also there for a function assignment.

Question 69

What are callback functions, explain with an example ?

Answer 69

Let’s look at more examples of passing functions as values and using function expressions.

We’ll write a function ask(question, yes, no) with three parameters:

question
Text of the question
yes
Function to run if the answer is “Yes”
no
Function to run if the answer is “No”
The function should ask the question and, depending on the user’s answer, call yes() or no():

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "You agreed." );
}

function showCancel() {
  alert( "You canceled the execution." );
}

// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);
In practice, such functions are quite useful. The major difference between a real-life ask and the example above is that real-life functions use more complex ways to interact with the user than a simple confirm. In the browser, such function usually draws a nice-looking question window. But that’s another story.

The arguments showOk and showCancel of ask are called callback functions or just callbacks.

The idea is that we pass a function and expect it to be “called back” later if necessary. In our case, showOk becomes the callback for “yes” answer, and showCancel for “no” answer.

Question 70

What are anonymous functions ?

Answer 70

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
“Do you agree?”,
function() { alert(“You agreed.”); },
function() { alert(“You canceled the execution.”); }
);
Here, functions are declared right inside the ask(…) call. They have no name, and so are called anonymous. Such functions are not accessible outside of ask (because they are not assigned to variables), but that’s just what we want here.

Question 71

Give a brief difference between function declaration and function expression.

Answer 71

The more subtle difference is when a function is created by the JavaScript engine.

A Function Expression is created when the execution reaches it and is usable only from that moment.

Once the execution flow passes to the right side of the assignment let sum = function… – here we go, the function is created and can be used (assigned, called, etc. ) from now on.

Function Declarations are different.

A Function Declaration can be called earlier than it is defined.

Question 72

Can we call a function before it is defined in JS ? if yes, then how ?

Answer 72

A “Function Declaration” can be called earlier than it is defined.

For example, a global Function Declaration is visible in the whole script, no matter where it is.

That’s due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an “initialization stage”.

And after all Function Declarations are processed, the code is executed. So it has access to these functions.

For example, this works:

sayHi(“John”); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}
The Function Declaration sayHi is created when JavaScript is preparing to start the script and is visible everywhere in it.

…If it were a Function Expression, then it wouldn’t work:

sayHi(“John”); // error!

let sayHi = function(name) {  // (*) no magic any more
  alert( `Hello, ${name}` );
};
Function Expressions are created when the execution reaches them. That would happen only in the line (*). Too late.

Question 73

let age = prompt(“What is your age?”, 18);

// conditionally declare a function
if (age < 18) {

  function welcome() {
    alert("Hello!");
  }

} else {

  function welcome() {
    alert("Greetings!");
  }

}

// ...use it later
welcome();

Answer 73

// Error: welcome is not defined

In strict mode, when a Function Declaration is within a code block, it’s visible everywhere inside that block. But not outside of it.

For instance, let’s imagine that we need to declare a function welcome() depending on the age variable that we get during runtime. And then we plan to use it some time later.

If we use Function Declaration, it won’t work as intended:
That’s because a Function Declaration is only visible inside the code block in which it resides.

Question 74

let age = prompt(“What is your age?”, 18);

let welcome;

if (age < 18) {

welcome = function() {
alert(“Hello!”);
};

} else {

welcome = function() {
alert(“Greetings!”);
};

}

welcome();

Answer 74

welcome() runs at the end

it works because, we have used function expression which makes the function available outside the scope

Question 75

When to choose Function Declaration versus Function Expression?

Answer 75

As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.

That’s also better for readability, as it’s easier to look up function f(…) {…} in the code than let f = function(…) {…};. Function Declarations are more “eye-catching”.

…But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we’ve just seen an example), then Function Expression should be used.

Question 76

What is the syntax for arrow functions ?

Answer 76

There’s another very simple and concise syntax for creating functions, that’s often better than Function Expressions.

It’s called “arrow functions”, because it looks like this:

let func = (arg1, arg2, ..., argN) => expression;
This creates a function func that accepts arguments arg1..argN, then evaluates the expression on the right side with their use and returns its result.

Question 77

how we can dynamically create functions using arrow function syntax ?

Answer 77

let age = prompt(“What is your age?”, 18);

let welcome = (age < 18) ?
() => alert(‘Hello’) :
() => alert(“Greetings!”);

welcome();

Question 78

What are multiline arrow functions ?

Answer 78

The examples above took arguments from the left of => and evaluated the right-side expression with them.

Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal return within them.

Like this:

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3