DEV Community: front_end_shifu_2022

When and where should we use normal function as opposed to arrow function ?

front_end_shifu_2022 — Fri, 04 Jun 2021 07:17:02 +0000

##When and where should we use normal function as opposed to arrow function ?##
"this" binding
Unlike regular functions, arrow functions don’t have their own this or arguments binding. Instead, those identifiers are resolved in the lexical scope like any other variable

“arguments” binding
Arguments objects are not available in arrow functions, but are available in regular functions.
Regular function:
let myFunc = {
showArgs(){
console.log(arguments);
}
};
myFunc.showArgs(1, 2, 3, 4);
Arrow function:
let myFunc = {
showArgs : ()=> {
console.log(arguments);
}
};
myFunc.showArgs(1, 2, 3, 4);// error

Arrow functions cannot be called with “new"
If a function is constructible, it can be called with new. If a function is callable, it can be called without new.
Regular functions created through function declarations / expressions are both constructible and callable.
Arrow functions are only callable i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.

When Not to Use Arrow Function
Here are few cases where you shouldn't look at arrow function:
1:)Object methods
var david = {
burger: 3,
eatBurger: () => {
this.burger--;
}
}
When you call david.eatBurger, the number of burgers does not decrease. It is because this is not bound to anything, and will inherit the value of this from its parent scope.

2:) When it makes your code less readable
. With regular functions, people know what to expect. With arrow functions, it may be hard to decipher what you are looking at straight away.

Arrow functions, the basics

front_end_shifu_2022 — Thu, 03 Jun 2021 17:47:08 +0000

Arrow functions

Arrow functions is very simple and short syntax for creating functions, it’s often better than Function Expressions.
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.
Let’s see a solid example:
let add = (x, y) => x + y;
alert( add(1, 2) ); // 3
/* This arrow function is a shorter form of:
let add = function(x, y) {
return x + y;
};*/

If we have only one arg, then parentheses around parameters can be ignored, making that even smaller.
e.g.
let num = n => n * 2;
// roughly the same as: let num = function(n) { return n * 2 }
alert( num(3) ); // 6

If there are no arguments, parentheses will be empty (but they should be present):
let myName = () => alert("Talha!");
myName();

Multiline arrow functions
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

For now, we can already use arrow functions for one-line actions and callbacks.
I will share more in my upcoming posts.
Thanks for reading

Function expressions

front_end_shifu_2022 — Thu, 03 Jun 2021 07:26:48 +0000

Function expressions3

syntax:
let sayHi = function() {
alert( "Hello" );
};

look above, the function is created and assigned to the variable clearly , like any other value. No matter how the function is defined, its just a value stored in the variable sayHi.
The meaning of these code samples is the same: "create a function and put it into the variable sayHi".

We can copy a function to another variable:

function name() { // (1) create
alert( "liliang" );
}
let myName = name; // (2) copy
myName(); // liliang // (3) run the copy (it works)!
name(); // liliang // this still works

Why is there a semicolon at the end of function expression?
A function expression is not a codeblock but its an assignment.The semicolon ; is recommended at the end of it, no matter what the value is.
So the semicolon here is not related to the Function Expression itself, it just terminates the statement.

Callback functions
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);

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

We can use Function Expressions to write the same function much shorter:

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 inside the ask(...) call. They are without name, so its called anonymous. functions like this are not accessible outside of ask (because they are not assigned to variables), but that’s just what we want here.

Function Expression vs Function Declaration

Function Declaration: a function, declared as a separate statement, in the main code flow.

// Function Declaration
function sum(x, y) {
return x + y;
}
A Function Declaration can be called earlier than it is defined

Function Expression: a function, created inside an expression or inside another syntax construct. Here, the function is created at the right side of the “assignment expression” =:

// Function Expression
let sum = function(x, y) {
return x + y;
};
A Function Expression is created when the execution reaches it and is usable only from that moment.

When to choose Function Declaration versus Function Expression?
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 , then Function Expression should be used.

Functions

front_end_shifu_2022 — Tue, 01 Jun 2021 17:34:03 +0000

Functions

Functions are the main “building blocks” of the program. They allow the code to be called many times without repetition.
Function Declaration
To create a function we can use a function declaration.It looks like this:

function showText() {
alert( 'Hello everyone!' );
}

function goes first,then name of function then list of parameters between curly braces(separated by coma)and then main body of the function.
Our new function can be called by its name: showText().

e.g.
function showText() {
alert( 'Hello everyone!' );
}

showText();

Local variables
A variable declared inside a function can only be accesd inside that function.we can't acces it from outside .
e.g.
function showMessage() {
let message = "Hello, I'm JavaScript!"; // local variable
alert( message );
}
showMessage(); // Hello, I'm JavaScript!
alert( message ); // <-- Error! The variable is local to the function

Outer variables
A function can access an outer variable as well.
e.g.
userName = 'Talha';
function showName() {
let message = 'Hello, ' + userName;
alert(message);
}
showName(); // Hello, Talha

The function has full access to the outer variable. It can edit modify it as well.
e.g.
let userName = 'Talha';
function showName() {
let userName = 'cagebreaker';
let message = 'Hello, ' + userName;
alert(message);
}
showName(); // Hello, cagebreaker

note:The outer variable is only used if there’s no local one.

If a same-named variable is declared inside the function then it ignore the outer one and use local variable.
e.g.
let userName = 'Talha';
function showName() {
let userName = 'cagebreaker';
let message = 'Hello, ' + userName;
alert(message);
}
showName(); // Hello, cagebreaker
alert( userName ); // Talha, unchanged, the function did not access the outer variable.

Global variables
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).
Note: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.

Parameters
It's also called function argument.
We can pass arbitrary(any) data to functions using parameters.
e.g. look at the example below the function has two parameters: fullName and LastName:

function showMessage(fullname, lastName) { // arguments: fullName, LastName
alert(fullName + ': ' + LastName);
}
showMessage('Talha', 'Khan'); // Talha: Khan! ()
showMessage('Hasnian', "Afridi:)>"); // Hasnain:Afridi ()
When the function is called in lines () and (**), the given values are copied to local variables from and text. Then the function uses them.
this is all for now I will share more in my upcomming posts

switch statement

front_end_shifu_2022 — Tue, 01 Jun 2021 05:20:29 +0000

syntax:
switch(x) {
case 'value1': // if (x === 'value1')
...
[break]

case 'value2': // if (x === 'value2')
...
[break]

default:
...
[break]
}
Switch
Switch statement is a part of JavaScript "Conditional" Statements, which are used to perform different actions based on different conditions. Use switch to select one of many blocks of code to be executed. ... without break, if condition is true the all the next block will be executed .If no case is matched then the default code is executed (if it exists).

e.g.
let add = 1 + 3;

switch (add) {
case 3:
alert( 'small' );
break;
case 4:
alert( 'Correct' );
break;
case 5:
alert( 'big' );
break;
default:
alert( "no values" );
}

In the above example switch start to compare add to first case which is 3 .The match fails now it will the second case which is 4.well That's the correct match.so the execution start from match 4 until the nearest break.
Note:If there is no break then the execution continues with the next case without any checks.

Grouping of “case”

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

let add = 3||5;

switch (add) {
case 4:
alert('wrong!');
break;
case 3: // (*) grouped two cases
case 5:
alert('right!');
alert("3 or 5");
break;
default:
alert('not matched" );
}

I hope you will get the idea from a example above.

Type matters:
Let’s make a point of that the equality check is always strict. The values must be of the same type to match.

e.g.

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

case 2:
alert( 'not a string ');
break;

case 3:
alert( 'Nnot a string');
break;
default:
alert( 'no match');
}

For 0, 1, the first alert runs.

But for 2 and 3 the result of the prompt is a string "2" "3", which is not strictly equal === to the number 2 or 3.So we’ve got a dead code in case in both Thus default variant will execute.

loop skipping parts,break ,continue

front_end_shifu_2022 — Fri, 28 May 2021 17:49:00 +0000

for loop skipping part:
any part of for loop can be skipped

we can omit begin if we don’t need to do anything at the loop start.

Like here:
let i = 0; // we have i already declared and assigned
for (; i < 3; i++) { // no need for "begin"
alert( i ); // 0, 1, 2
}

We can also remove the step part:
let i = 0;
for (; i < 3;) {
alert( i++)
}

We can actually remove everything, creating an infinite loop:
for (;;) {
// repeats without limits
} );
}

Note
the two for semicolons ; must be present. Otherwise, there would be a syntax error.

Break
we can break loop any time using the special break directive.

e.g.

let sum = 0;
while (true) {
let value = +prompt("Enter a number", '');
if (!value) break; // (*)
sum += value;
}
alert( 'Sum: ' + sum );

In the above example if none of value is entered or cancled The break directive is activated at the line (*) . It stops the loop immediately, passing control to the first line after the loop. Namely, alert.

continue
The continue directive is a “lighter version” of break. It doesn’t stop the whole loop. Instead, it stops the current iteration and forces the loop to start a new one (if the condition allows).

We can use it if we’re done with the current iteration and would like to move on to the next one.

e.g.
loop uses continue to output only odd values:

for (let i = 0; i < 10; i++) {
// if true, skip the remaining part of the body
if (i % 2 == 0) continue;
alert(i); // 1, then 3, 5, 7, 9
}
For even values of i, the continue directive stops executing the body and passes control to the next iteration of for (with the next number). So the alert is only called for odd values.

loops

front_end_shifu_2022 — Fri, 28 May 2021 17:05:29 +0000

Loops are a way to repeat the same code multiple times.
while loop
syntax:
while (condition) {
// code
// so-called "loop body"
}
when the condition is true ,while loop can be executed.

let z = 0;
*while (z < 4) {
alert( z );
z++;
}
in the above example it will show 0 then 1 the 2 then 3 and z<4 which is false so the loop will stop. *

A single execution of the loop body is called an iteration.
if z++ were missing then the loop would execute infinite times.
Any expression or variable can be a loop condition, not just comparisons: the condition is evaluated and converted to a boolean by while.

For instance, a shorter way to write while (i != 0) is while (i):

let i = 3;
while (i) { // when i becomes 0, the condition becomes falsy, and the loop stops
alert( i );
i--;
}

The “do…while” loop
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.
e.g.
let z = 0;
do {
alert( z );
z++;
} while (z<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.

for loop
syntax:
for (begin; condition; step) {
// ... loop body ...
}
it's complex and most commonly used loop.
It begin executes once, and then it iterates: after each condition test, body and step are executed.

// for (let z = 0; z < 2; z++) alert(i)

// run begin
let z = 0
// if condition → run body and run step
if (z < 2) { alert(z); z++ }
// if condition → run body and run step
if (z < 2) { alert(z); z++ }
// ...finish, because now z == 2

Inline variable declaration
if variable in declared in loop is called inline loop

for (let i = 0; i < 3; i++) {
alert(i); // 0, 1, 2
}
alert(i); // error, no such variable

logical operater(Not !)

front_end_shifu_2022 — Thu, 27 May 2021 11:07:35 +0000

! (NOT)

Converts the operand to boolean type: true/false.
Returns the inverse value.
he syntax is pretty simple: result = !value;
e.g.
alert( !true ); // false
alert( !0 ); // true

A double NOT !! is sometimes used for converting a value to boolean type:
e.g
alert( !!"talha" ); // true
alert( !!0 ); // false

logical operater(&&And)

front_end_shifu_2022 — Thu, 27 May 2021 10:57:00 +0000

&& (AND)

In classical programming, AND returns true if both operands are true.otherwise its false.

alert( true && true ); // true
alert( false && true ); // false
alert( true && false ); // false
alert( false && false ); // false
e.g.
prompt(1&&0); //return 0

Now lets talk about multiple AND values:
result = value1 && value2 && value3;
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.

e.g.
prompt(null && 1 && 2);// output is null.
prompt(1 && 2 && "ppp");// output is ppp.

let person1=0;
let person2;
let person3='talha';
alert(person1||person2||person3||'no one');*
above output is 0.

Logical operators(|| OR)

front_end_shifu_2022 — Thu, 27 May 2021 09:20:00 +0000

|| (OR)

the logical OR Return true If any of its arguments are true otherwise it returns false..
e.g.
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false

If an operand is not a boolean, it’s converted to a boolean for the evaluation.

For instance, the number 1 is treated as true, the number 0 as false
e.g.
if (1 || 0) {
alert( 'truthy!' );
}
in above the output is truthy.cause true||false return True.

Now lets talk about multiple OR’ed values:
result = value1 || value2 || value3;

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.
e.g.
alert(''||0||1);//return 1 which is first truthy value
alert(null,0,undefined);// all falsy ,return last value.
*
let person1='';
let person2;
let person3='talha';
alert(person1||person2||person3||'no one');*
above output is talha.

Falsy values

front_end_shifu_2022 — Thu, 27 May 2021 06:48:43 +0000

what are truthy and falsy values?
truthy values:
these values are actually not a boolean values but they act like True .

falsy values:
These values are actually not false(boolean) but they act as a false. it includes 0,null,"",undefined,false,NAN.

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

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

Note: All values are truthy unless they are defined as falsy.

String obj:

front_end_shifu_2022 — Tue, 25 May 2021 19:04:18 +0000

string Objects

in js strings are objects.
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
Use the following syntax to create a String object :
let value = new String(string);

string property

length Returns the length of the string.
e.g.
let human = " john pepper";
human.length;
let length = human.lenght;
console.log(human.length);

String Methods

CharAt():

return the character at specified index.
let human = " john pepper";
console.log(human.charAt(1)) // o

indexOf():

Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
let human = " john pepper";
console.log(human.indexOf(e)); // 6

toLowerCase():

Returns the calling string value converted to lower case.
*let human = " John Pepper";
console.log(human.toLowerCase()); //john pepper

toUpperCase():

Returns the calling string value converted to upperCase.
let human = " John Pepper";
console.log(human.toUpperCase()); //JOHN PEPPER

slice()

Extracts a section of a string and returns a new string.
let human = " John Pepper";
console.log(human.slice(1,4)); //OHN

This is all for now I'll share more in my upcoming posts.