Javascript some tricky concept you need to know…

Truthy and Falsy values

Truthy: Truthy value is a value that is defined true when run into in a boolean context. Everything else is truthy.

Truthy values are : `0`,`false`,[],{},function(){}
Falsy: Falsy value is a value that is defined false when run into in a boolean
context.
Falsy values are:false,0,null,undefined,NaN

null VS undefined

null: null in JavaScript is a special value that represents a missing object.

var value= null;
console.log(value); // null
console.log(typeof value); // object

undefined: The undefined property indicates that a variable has not been assigned a value, or not declared at all

var x;
console.log(x); //undefined
console.log(typeof x); //undefined

Double Equals (==) VS Triple Equals (===)

Double Equals (==): Double Equals checks for value equality only and, it means that before checking the values, it converts the types of the variables to match each other.

const name = `5`
console.log(5 == name) //true

Triple Equals(===): Triple equals is a strict equality comparison operator in JavaScript, which returns false for the values which are not of a similar type.

const name = `5`
console.log(5 === name) //false

Why does 0.1 + 0.2 === 0.3 return false?

In short, it’s to do with how accurately JavaScript can store floats in binary. If you type the following equations into Google Chrome’s console, you’ll get:

0.1 + 0.2
// 0.300000000000000040.1 + 0.2 - 0.2
// 0.100000000000000030.1 + 0.7
// 0.7999999999999999

This is unlikely to cause problems if you’re performing simple equations without the need for a high degree of accuracy. But it can cause headaches even in simple applications if you need to test for equality. There are a few solutions to this.

What are the differences between var, let and const?

I imagine this has been a pretty common interview question since the release of ES6, by those companies making full use of the more modern syntax. var was the variable declaration keyword from the very first release of JavaScript. But its disadvantages lead to the adoption of two new keywords in ES6: let and const .

These three keywords have different approaches to assignment, hoisting and scope — so we’ll cover each one separately.

i) Assignment

The most basic difference is that let and var can be re-assigned while const cannot. This makes const the best choice for variables that don’t need to change, and it will prevent mistakes such as accidental re-assignment. Note that const does allow for variable mutation, which means that if it represents an array or an object, these can change. You just can’t re-assign the variable itself.

Both let and var can be re-assigned, but — as the following points should make clear — let has significant advantages over var , making it a better choice in most, if not all circumstances where a variable needs to change.

ii) Hoisting

Similar to the difference between function declarations and expressions (discussed above), variables declared using var are always hoised to the top of their respective scope, while variables declared using const and let are hoisted, but if you try to access them before they’re declared, you will get a ‘temporal dead zone’ error. This is useful behaviour, since var can be more prone to errors, such as accidental re-assignment. Take the following example:

var x = "global scope";function foo() {
  var x = "functional scope";
  console.log(x);
}foo(); // "functional scope"
console.log(x); // "global scope"

Here, the result of foo() and console.log(x) are as we expect. But what if we were to drop the second var ?

var x = "global scope";function foo() {
  x = "functional scope";
  console.log(x);
}foo(); // "functional scope"
console.log(x); // "functional scope"

Despite being defined within a function, x = "functional scope" has overridden the global variable. We needed to repeat the keyword var to specify that the second variable x is scoped only to foo() .

iii) Scope

While var is function-scoped, let and const are block-scoped: in general, a block is any code within curly braces {} , including functions, conditional statements, and loops. To illustrate the difference, take a look at the following code:

var a = 0; 
let b = 0;
const c = 0;if (true) {
  var a = 1;
  let b = 1; 
  const c = 1;
}console.log(a); // 1
console.log(b); // 0
console.log(c); // 0

Within our conditional block, the globally-scoped var a has been redefined, but the globally-scoped let b and const c have not. In general, making sure local assignments stay local will make for cleaner code and fewer mistakes.

Apply, Call, and Bind

Apply: It is a method that applies invokes the function and allows you to pass in arguments as an array.

Call: It is a method that call invokes the function and allows you to pass in arguments using commas.

Bind: It is a method that returns a new function and allows you to pass in this array and any number of arguments.

difference between Object Oriented Programming (OOP) and Functional Programming (FP)?

JavaScript is a multi-paradigm language, meaning that it supports multiple different programming styles, including event-driven, functional and object-oriented.

There are many different programming paradigms, but in contemporary computing two of the most popular styles are Functional Programming (FP) and Object-Oriented Programming (OOP) — and JavaScript can do both.

Object-Oriented Programming

OOP is based around the concept of “objects”. These are data structures that contain data fields — known in JavaScript as “properties” — and procedures — known as “methods”.

Some of JavaScript’s in-built objects include Math (used for methods such as random , max and sin ), JSON (used for parsing JSON data), and primitive data types like String , Array , Number and Boolean .

Whenever you rely on in-built methods, prototypes or classes, you are essentially using Object-Oriented Programming.

Functional Programming

FP is based around the concept of “pure functions”, which avoid shared state, mutable data and side-effects. This might seem like a lot of jargon, but chances are you’ve created written many pure functions in your code.

Given the same inputs, a pure function always returns the same output. It does not have side effects: these are anything, such as logging to the console or modifying an external variable, beyond returning the result.

As for shared state, here’s a quick example of it state can change the output of a function, even if the input is the same. Let’s set out a scenario with two functions: one to add a number by 5, and one to multiply it by 5.

const num = {
  val: 1
}; const add5 = () => num.val += 5; 
const multiply5 = () => num.val *= 5;

If we call add5 first and multiply5 second, the overall result is 30 . But if we call the functions the other way around and log the result, we get something different: 10 .

This goes against the principle of functional programming, as the result of the functions differs depending on the context. We can re-write the above code so that the results are predictable:

const num = {
  val: 1
};const add5 = () => Object.assign({}, num, {val: num.val + 5}); 
const multiply5 = () => Object.assign({}, num, {val: num.val * 5});

Now, the value of num.val remains 1 , and regardless of the context add5(num) and multiply5(num) will always produce the same result.