1. Numeric conversion, unary +
The plus + exists in two forms: the binary form that we used above and the unary form.
The unary plus or, in other words, the plus operator + applied to a single value, doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.

Example:

// No effect on numbers
let x = 1;
alert( +x ); // 1
let y = -2;
alert( +y ); // -2
// Converts non-numbers
alert( +true ); // 1
alert( +"" );   // 0

2. Increment/decrement

let counter = 1;
let a = ++counter;
alert(a); // 2

The prefix form ++counter increments counter and returns the new value, 2. So, the alert shows 2.

Now, let’s use the postfix form:

let counter = 1;
let a = counter++;
alert(a); // 1

The postfix form counter++ also increments counter but returns the old value (prior to increment). So, the alert shows 1.

If the result of increment/decrement is not used, there is no difference in which form to use:

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, the lines above did the same

If we’d like to increase a value and immediately use the result of the operator, we need the prefix form:

let counter = 0;
alert( ++counter ); // 1

If we’d like to increment a value but use its previous value, we need the postfix form:

let counter = 0;
alert( counter++ ); // 0

3. Nullish coalescing operator ‘??’
The nullish coalescing operator ?? provides a short syntax for selecting a first “defined” variable from the list.

The result of a ?? b is:

    a if it’s not null or undefined,
    b, otherwise.

let a = null;
let b = null;
let c = "InfallibleTechie";

// show the first not-null/undefined value
alert(a ?? b ?? c ?? "XYZ"); // InfallibleTechie

4. function with no return statement in JavaScript

1. Without Return

function show() {
  alert( "Hello" );
}

alert( show );
alert( show() );

Output:
It will alert
function show() {
  alert( “Hello” );
}

It will alert
Hello

It will alert
Undefined

2. With Return

function show() {
  alert( "Hello" );
  return "Sample";
}

alert( show );
alert( show() );

Output:
It will alert
function show() {
  alert( “Hello” );
  return “Sample”;
}

It will alert
Hello

It will alert
Sample

5. Function Expression vs Function Declaration

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

// Function Declaration
function sum(a, b) {
  return a + b;
}

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 let sum = function(a, b) {
  return a + b;
};

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

6. backtick quotes `
backtick quotes ` allow to split the string into multiple lines

var x = "testing
test";// is not allowed

var x = `testing
test`;//is allowed

7. What happens when an object variable is copied?
When an object variable is copied, the reference is copied and the object is not duplicated.

let user = { name: "John" };
let admin = user; // copies the reference

Now we have two variables, each one with the reference to the same object.

Two objects are equal only if they are the same object.

Here two variables reference the same object, thus they are equal:

let a = {};
let b = a; // copy the reference
alert( a == b ); // true, both variables reference the same object
alert( a === b ); // true

And here two independent objects are not equal, even though both are empty:

let a = {};
let b = {}; // two independent objects
alert( a == b ); // false

Object.assign should be used to copy without reference.

let user = { name: "John" };
let user1 = Object.assign({}, user);
user1.name = "Cat";
alert(user.name); // John
alert( user1.name ); // Cat

8. this keyword
The value of this is evaluated during the run-time, depending on the context.

Arrow functions have no “this”
Arrow functions are special: they don’t have their “own” this. If we reference this from such a function, it’s taken from the outer “normal” function.

9. Constructor function
1. Constructor functions technically are regular functions.
2. They are named with capital letter first.
3. They should be executed only with “new” operator.

Example:

function User(name) {
  this.name = name;
  this.isAdmin = false;
}
let user = new User("John");
alert(user.name); // John
alert(user.isAdmin); // false

When a function is executed with new, it does the following steps:
1. A new empty object is created and assigned to this.
2. The function body executes. Usually it modifies this, adds new properties to it.
3. The value of this is returned.

But if there is a return statement, then the rule is simple:
1. If return is called with an object, then the object is returned instead of this.
2. If return is called with a primitive, it’s ignored.
In other words, return with an object returns that object, in all other cases this is returned.

Example:
Here return is primitive. So, this will be returned.

function User(name) {
  this.name = name;
  this.isAdmin = false;
  return "sample";
}
let user = new User("John");
alert(user.name); // John
alert(user.isAdmin); // false

Example:
Here return is an object. So, object will be returned.

function User(name) {
  this.name = name;
  this.isAdmin = false;
  return { name : "Frank" };
}
let user = new User("John");
alert(user.name); // Frank
alert(user.isAdmin); // undefined

10. Optional chaining ‘?.’
The optional chaining ?. is an error-proof way to access nested object properties, even if an intermediate property doesn’t exist.

Example:

let user = {};

//alert(user.address.street); // Error!. If you uncomment this code. The exectuion will stop due to Type Error

alert( user?.address?.street );// Undefined

11. Symbol in JavaScript
Symbol is a primitive type for unique identifiers.

Object.getOwnPropertySymbols(obj) allows us to get all symbols. Also there is a method named Reflect.ownKeys(obj) returns all keys of an object including symbolic ones.

Symbols allow us to create “hidden” properties of an object, that no other part of code can accidentally access or overwrite.

Example:

let user = { // belongs to another code
  name: "Frank"
};
let id = Symbol("id");
user[id] = 1;
alert( user[id] ); // we can access the data using the symbol as the key

Symbols are skipped by for…in
Symbolic properties do not participate in for..in loop.

let id = Symbol("id");
let user = {
  name: "Frank",
  age: 30,
  [id]: 123
};

for (let key in user) alert(key); // name, age (no symbols)

// the direct access by the symbol works
alert( “Direct: ” + user[id] );

12. Difference between Square brackets and charAt in JavaScript
The square brackets are a modern way of getting a character, while charAt exists mostly for historical reasons.

The only difference between them is that if no character is found, [] returns undefined, and charAt returns an empty string:

let str = `Hello`;alert( str[1000] ); // undefined
alert( str.charAt(1000) ); // '' (an empty string)

13. pop/push, shift/unshift methods in JavaScript

Push
push adds an element to the end.

Pop
pop takes an element from the end.
shift

Shift
Extracts/Removes the first element of the array and returns it.

Unshift
Add the element to the beginning of the array.

Methods push/pop run fast, while shift/unshift are slow.

14. splice and slice methods in JavaScript
Splice:
Syntax:

splice(index[, deleteCount, elem1, ..., elemN])

index – start index to delete
deleteCount – how many elements to delete
elem1, …., elemN – Elements to add it to the Array. Adding starts from the index position mentioned.

Example

let arr = [0, 1, 2, 3, 4, 5];
arr.splice( 2, 2, "a", "b", "c", "d" );
alert( arr );//0, 1, a, b, c, d, 4, 5

Slice:
It returns a new array copying to it all items from index start to end (not including end)
Syntax:

slice([start], [end])

Example:

let arr = [“t”, “e”, “s”, “t”];
alert( arr.slice(1, 3) ); // e,s (copy from 1 to 3)

15. JSON.stringify
To convert objects into JSON.
The method JSON.stringify() takes the object and converts it into a string.

Syntax:

JSON.stringify(value[, replacer, space])

value
    A value to encode.
replacer
    Array of properties to encode or a mapping function function(key, value).
space
    Amount of space to use for formatting

Example:

let user = {
  name: "John",
  interests: [ { sport : "Cricket" }, { sport: "Painting" } ]
};

let user1 = JSON.stringify( user, function replacer( key, value ) {
  if ( key == 'name' )
    return "Mathews";
    return value;
} );

alert( user1 );

Output:

{name: “John”, interests: [{sport:”Cricket”},{sport:”Painting”}]}

Example:

let user = {
  name: "John",
  interests: [ { sport : "Cricket"}, { sport: "Painting"} ]
};

alert( JSON.stringify( user, [ "interests" ], 4 ) );

Output:
{
    “interests”: [
        {},
        {}
    ]
}

Example:

let user = {
  name: "John",
  interests: [ { sport : "Cricket" }, { sport: "Painting" } ]
};

alert( JSON.stringify( user, [ "interests", "sport" ], 4 ) );

Output:
{
    “interests”: [
        {
            “sport”: “Cricket”
        },
        {
            “sport”: “Painting”
        }
    ]
}

Example:

let user = {
  name: "John",
  interests: [ { sport : "Cricket" }, { sport: "Painting" } ]
};

alert( JSON.stringify( user, [ "interests", "sport", "name" ], 4 ) );

Output:
{
    “interests”: [
        {
            “sport”: “Cricket”
        },
        {
            “sport”: “Painting”
        }
    ],
    “name”: “John”
}

JSON.parse
To convert JSON back into an object.

Syntax:

JSON.parse(str, [reviver])

Example:

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() );//30. If the date is not converted using Date(), it will throw an error