More JavaScript Notions

Null vs Undefined

Okay, let’s make it fun!
I hope this way will make it stick to you.

Variables are like the remote controls in JavaScript that control the objects.
So, when a proper object cannot be assigned to a variable JavaScript says “Hey you, your remote control is not programmed to control any of my objects. I am tagging your remote control (variable) as ‘undefined’ “.

1. var x;

2. console.log(x);

3. => undefined

So, Undefined is a special type, whereas ‘null’ is an object in JavaScript.

1. console.log(typeof null);

2. => object

It is a special-purpose object that does not do anything.

When you want to defuse your remote control, you assign it to the ‘null’ object. You program the remote control to do nothing.

11.7K views

View 6 upvotes

== vs ===

JavaScript is a loosely typed language, and with type-coercion, i.e converting the type of data you described in your program by force, the interpreter tries to convert the values before comparing.

This allows for you to have statements like:

1. Input: ‘hello ‘ + 100

2. Output: ‘hello 100’

The output is a string where the type number (100) gets converted to a string.

In case of == and === operator,

The == operator will compare for equality after doing the necessary type conversion.

1. “7” == 7 //true, because string 7 is converted to type number 7 before comparing

The === operator on the other hand does not do the conversion, so of the values are not the same type, it will return false

1. “7” === 7 //false, because string 7 is not converted to a number before comparing

In short, the == operator returns true, if the values of the operand are same after type-coercion.

the === operator returns true, only if the operands have the same value and are of the same type.

Bind vs Apply vs Call

CALL

Function.call allows us to set the this value of a function manually. Instead of simply calling a function like fn(), we use fn.call(param), passing in the object we want this to equal as the parameter. This code block shows the output if we were running it in Chrome.

1. function logThis() {

2. console.log(this);

3. }

4.

5. var obj = { val: ‘Hello!’ };

6.

7. logThis(); // -> Window {frames: Window, postMessage: ƒ, …}

8. logThis.call(obj); // -> { val: ‘Hello!’ };

call also allows us to pass in parameters to the function being called. Anything given after the object to be bound to thiswill be passed along to the function.

1. function logThisAndArguments(arg1, arg2) {

2. console.log(this);

3. console.log(arg1);

4. console.log(arg2);

5. }

6.

7. var obj = { val: ‘Hello!’ };

8.

9. logThisAndArguments(‘First arg’, ‘Second arg’);

10. // -> Window {frames: Window, postMessage: ƒ, …}

11. // -> First arg

12. // -> Second arg

13.

14. logThisAndArguments.call(obj, ‘First arg’, ‘Second arg’);

15. // -> { val: ‘Hello!’ }

16. // -> First arg

17. // -> Second arg

APPLY

Function.apply works the same exact way as call, except instead of passing in arguments one by one, we pass in an array of arguments that gets spread into the function.

1. function logThisAndArguments(arg1, arg2) {

2. console.log(this);

3. console.log(arg1);

4. console.log(arg2);

5. }

6.

7. var obj = { val: ‘Hello!’ };

8.

9. logThisAndArguments(‘First arg’, ‘Second arg’);

10. // -> Window {frames: Window, postMessage: ƒ, …}

11. // -> First arg

12. // -> Second arg

13.

14. logThisAndArguments.apply(obj, [‘First arg’, ‘Second arg’]);

15. // -> { val: ‘Hello!’ }

16. // -> First arg

17. // -> Second arg

BIND

Function.bind works differently than the other two. Similarly to call, it takes in a this value and as many more parameters as we’d like to give it, and it’ll pass those extra parameters to the function being called.

However, instead of calling the function immediately, bind returns a new function. This new function has the this value and the parameters already set and bound. When it’s invoked, it’ll be invoked with those items already in place.

1. function logThisAndArguments(arg1, arg2) {

2. console.log(this);

3. console.log(arg1);

4. console.log(arg2);

5. }

6.

7. var obj = { val: ‘Hello!’ };

8.

9. var fnBound = logThisAndArguments.bind(obj, ‘First arg’, ‘Second arg’);

10.

11. console.log(fnBound);

12. // -> [Function: bound logThisAndArguments]

13.

14. fnBound();

15. // -> { val: ‘Hello!’ }

16. // -> First arg

17. // -> Second arg

Find Largest element of Array in Javascript

var array = [3 , 6, 2, 56, 32, 5, 89, 32];

var largest= 0;

for (i=0; i<=largest;i++){

if (array[i]>largest) {

var largest=array[i];

}

}

console.log(largest);

Find factorial of a number using for loop
var inputNum = prompt("please enter and integer");
var total = 1;
for(i = inputNum; i > 1; i--){
total *= i;
}
console.log(total);
function factorial(n) {
return (n != 1) ? n * factorial(n — 1) : 1;
}
Console.log( factorial(5) );
Fibonacci series using Recursive
functionfibNaive(n) {
if (n<= 1) return n;
returnfibNaive(n - 1) + fibNaive(n - 2);
}
Using for loop
var i;
var fib = []; // Initialize array!
fib[0] = 0;
fib[1] = 1;
for (i = 2; i <= 10; i++) {
// Next fibonacci number = previous + one before previous
// Translated to JavaScript:
fib[i] = fib[i - 2] + fib[i - 1];
console.log(fib[i]);
}
Prime number: function Prime()
{
var i,flag=0,number;
number = Number(document.getElementById("N").value);
for(i=2; i <= number/2; i++)
{
if(number%i == 0)
{
flag = 1;
break;
}
}
if(flag == 0)
{
window.alert(number+"-The inputed number is Prime");
}
else
{
window.alert(number+"-The inputted number is not Prime");
}

In simple terms, it’s a function that runs when another function finishes. A callback function is usually passed as an argument to another function.

For example:

const done = function (answer) {
console.log(‘Answer is’, answer)
}
const sum = function (a, b, callback) {
let total = a + b
callback(total)
}
sum(2,2, done) // Output: Answer is 4
sum(1,2, done) // Output: Answer is 3

In the example above, done is the callback function. sum is the function that accepts a callback as an argument.

Callbacks can be nested… sometimes very deeply. Too many “levels” of nesting is commonly known as “callback hell”.

DOM in JavaScript :

· Every web page resides inside a browser window which can be considered as an object.

· A document object represents the HTML document that is displayed in that window.

· The way a document content is accessed and modified is called Document Object Model.

· The objects are organized in a hierarchy, This hierarchical structure applies to the organization of objects in web document.