Aha..!! That's JavaScript

Aha..!!  That's JavaScript

 kind of mixed feelings, I'll post  - JavaScript, TypeScript, vue.js, react, angular.

 This might help in Interviews as well.

TYPE of 

typeof null          // "object" (not "null" for legacy reasons)

typeof undefined     // "undefined"

null === undefined   // false

null  == undefined   // true

null === null        // true

null  == null        // true

!null                // true

isNaN(1 + null)      // false

isNaN(1 + undefined) // true

typeof(NaN)     // number

FAT Arrow function - ES6

Syntax difference 

// Regular Function Syntax ES5:var add = function(x, y) { return x + y;};// Arrow function ES6let add = (x, y) => { return x + y };

Arguments binding

// Object with Regular function.

let getData = {

// Regular function

    showArg:function(){

      console.log(arguments);

    }  

}

getData.showArg(1,2,3); // output {0:1,1:2,2:3}

------------------------------------------------------------------

// Object with Arrow function.

let getData = {

// Arrow function

    showArg:()=>console.log(arguments)

}

getData.showArg(1,2,3); // Uncaught ReferenceError: arguments is not defined

Use of this keyword

let name ={
	fullName:'Vandna Kapoor',
	printInRegular: function(){
	console.log(`My Name is ${this.fullName}`);
	},
	printInArrow:()=>console.log(`My Name is ${this.fullName}`)
	}
	name.printInRegular();
	name.printInArrow();

Using a new keyword

let add = (x, y) => console.log(x + y);

new add(2,3);

No duplicate named parameters

Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode.

However, We can use duplicate named parameters for regular function in non-strict mode.

found this on YouTube: link ref below

1. Use TS + tRPC to ensure you have type safety. 

2. Use AbortSignal to invalidate previous requests when a new character is input.

tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC

AbortSignal - Web APIs | MDN (mozilla.org)

 avoid debouncing: it's a programming pattern or a technique to restrict the calling of a time-consuming function frequently, by delaying the execution of the function until a specified time to avoid unnecessary CPU cycles and API calls and improve performance.

             It's a higher-order function that returns another function, to create closure around the function params (foo, timeout) and the timer intervals.

CSS stuffs too:

LESS  SASS SCSS MIXINS --- source geeksforgeeks

LESS stands for Leaner Style Sheets. It is a backward-compatible language extension for CSS. It allows us to use features like variables, nesting, mixins, etc, all in a CSS-compatible syntax. LESS is influenced by SASS and has influenced the newer “SCSS” syntax of SASS. LESS was used in Bootstrap 3 but was replaced by SASS in Bootstrap 4. 

File Type: All LESS files must have the .less file extension.

Working: A web browser does not understand the LESS code itself. That is why you will require a LESS pre-processor to change LESS codes into simple standard CSS code.

Working Steps:

• Write the LESS code in a file.
• Compile the LESS code into CSS code using the command lessc style.less style.css.
• Include the compiled CSS file in the html file.

Features:

• Variables: Variables can be used to store CSS values that may be reused. They are initialized with @. 

@lt-gray: #ddd;

@background-dark: #512DA8;

@carousel-item-height: 300px;

h1 {

    color:@lt-gray;

    background:@background-dark;

}




To compile the above less code to CSS code write the following command-

lessc style.less style.css

h1 {
  color: #ddd;
  background: #512DA8;
}

Mixins: Mixins are a way of including a bunch of properties from one rule-set into another rule set. 
zero-margin {
    margin:0px auto;
    background: white;
}
 
.row-header {
    margin:zero-margin;
    padding:0px auto;
}
 
.row-content {
    margin:zero-margin;
    border-bottom: 1px ridge;
    min-height:400px;
    padding: 50px 0px 50px 0px;
}

To compile the above less code to CSS code write the following command-
lessc style.less style.css
compiled below:
zero-margin {
  margin: 0px auto;
  background: white;
}
.row-header {
  margin: zero-margin;
  padding: 0px auto;
}
.row-content {
  margin: zero-margin;
  border-bottom: 1px ridge;
  min-height: 400px;
  padding: 50px 0px 50px 0px;
}

Nesting: LESS gives you the ability to use nesting
@lt-gray: #ddd;
@background-dark: #512DA8;
@carousel-item-height: 300px;
.carousel {
    background:@background-dark;
 
    .carousel-item {
        height: @carousel-item-height;
        img {
            position: absolute;
            top: 0;
            left: 0;
            min-height: 300px;
        }
    }
}

To compile the above less code to CSS code write the following command-
lessc style.less style.css
The compiled CSS file comes to be: 
style.css
CSS
.carousel {
  background: #512DA8;
}
.carousel .carousel-item {
  height: 300px;
}
.carousel .carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 300px;
}
Mathematical Operations: Arithmetical operations +, -, *, / can operate on any number, color, or variable. 
style.less

CSS

@lt-gray: #ddd;
@background-dark: #512DA8;
@carousel-item-height: 300px;
 
.carousel-item {
    height: @carousel-item-height;
}
 
.carousel-item .item-large {
    height: @carousel-item-height *2;
}
Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css
The compiled CSS file comes to be: 

style.css

CSS



.carousel-item {
  height: 300px;
}
.carousel-item .item-large {
  height: 600px;
}
Functions: LESS provides a variety of functions like math, list, string, color operations, color blending, etc. 
style.less

CSS

@base:0.5;
@width: 0.8;
 
.class {
    width: percentage(@width); // Returns `80%`
    color: saturate(@base, 5%);
    background-color: light(@base, 25%), 8;
}
Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be: 

.class {
  width: 80%;
  color: saturate(0.5, 5%);
  background-color: light(0.5, 25%), 8;
}

------------------------------------------------
some concepts: 
var, let, const
conditionals
debugging
classes and objects
inheritance 
private, protected, getter/setter functions
error handling - try/catch, extending errors, validations, exception
promise, callbacks, promise chaining, microtasks, Async/await
generators, async iteration and generators
modules, import, export, defer, dynamic imports 
proxy, reflect, currying, string intervals
DOM querySelectors, styles, window sizing, scrolling, browser events, custom events
event bubbling, capturing, animations, mouse/pointer events, keyboard
fetch api, form, polling, XHR, URL objects, cross-origin reqs, websocket, server events
cookies, local and session storage
-----------------------

JavaScript Hoisting: