This document discusses the peculiar behaviors of JavaScript, including concepts like hoisting, scope with var, let, and const, and the intricacies of type coercion. It also covers new features introduced in ES6 such as arrow functions, the spread operator, and various JavaScript operations. These topics are explored through code snippets that demonstrate the unique characteristics and functionalities of the language.

1. Session is starting soon…

2. Weird JS Weekends
Session 1
We all know Javascript behaves in a very weird manner.
But let us tell you, this behaviour is apparently weird, but has its own
reasoning behind it.
And in this session, we’ll discuss and explain this weird javascript to you.
Let’s explore the weirdness of javascript.
For that we have brought a few questions

4. Weird JS
Weekends
But all of these have rationale
behind them.
And those are what we’ll be
exploring today !

5. 3 - 1
3 + 1
'3' - 1
'3' + 1
[4] * [4]
[] * []
[4, 4] * [4, 4]
console.log(0.1 + 0.2);
console.log('hello' && 'world');
"b" + "a" + +"a" + "a"; // -> 'baNaNa'
[1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6'
Trailing commas:
let a = [, , ,];
a.length; // -> 3
a.toString(); // -> ',,'
Math with True & false:
true + true; // -> 2
(true + true) * (true + true) - true; // -> 3
Intro To The Weird World Of JavaScript

6. Try Guessing what would the following snippets return!
[] == ![];
true == [];
true == ![];
false == [];
false == ![];
Object.is(NaN, NaN);
NaN === NaN;
Object.is(-0, 0);
-0 === 0;
Object.is(NaN, 0 / 0);
NaN === 0 / 0;
Number.MIN_VALUE > 0;
Adding arrays:
[1, 2, 3] + [4, 5, 6];

7. Give them a try!!
var a = 10;
function foo() {
console.log(a);
var a = 20;
}
foo();
let b = 5;
if (true) {
console.log(b);
let b = 10;
}
const c = 100;
function bar() {
console.log(c);
}
bar();
Ques 1 Ques 2 Ques 3
Scope based questions

8. Try this out
https://jsisweird.com/

9. JS Hoisting
Clearly, variable declared using var
can be hoisted but not the ones
declared using let or const.

10. How to use hoisting
JavaScript Declarations are Hoisted
In JavaScript, a variable can be declared after it has been used.
In other words; a variable can be used before it has been declared.
{
x = 5; // Assign first
console.log(x);
var x;
}

11. How to use hoisting
Explanation: In the above example, hoisting allows variables declared with var to be
accessed before declaration, but not those declared with let or const. Thus, a is
accessible, but b throws a ReferenceError
function codeHoist() {
a = 10;
let b = 50;
}
codeHoist();
Variables using let or const are hoisted, but cannot be
accessed before their declaration

12. But what is hoisting?
Hoisting is JavaScript's default behavior of moving declarations
to the top.
Hoisting is the default behavior in JavaScript where declarations of
variables and functions are moved to the top of their respective
scopes during the compilation phase. This ensures that regardless
of where variables and functions are declared within a scope, they
are accessible throughout that scope.

13. And why does it happen?

15. ECMAScript
ES6
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in
1997.
ECMAScript is the official name of the language.
ECMAScript versions have been abbreviated to ES1, ES2, ES3, ES5, and ES6.
Since 2016, versions are named by year (ECMAScript 2016, 2017, 2018, 2019, 2020).

16. ECMAScript (ES) is a scripting language specification created to standardize JavaScript.
The Sixth Edition, initially known as ECMAScript 6 (ES6) and later renamed to
ECMAScript 2015, adds significant new syntax for writing complex applications, including
classes and modules, iterators and for/of loops, generators, arrow functions, binary data,
typed arrays, collections (maps, sets and weak maps), promises, number and math
enhancements, reflection, and proxies.
In other words, ES6 is a superset of JavaScript (ES5). The reason that ES6 became so
popular is that it introduced new conventions and OOP concepts such as classes.

17. New Features in ES6
The let keyword
The const keyword
Arrow Functions
The ... Operator
For/of
Map Objects
Set Objects
Classes
Promises

18. And today we’re going to learn:
- Let, var, and const
- Arrow functions
- Spread operator

19. Introduction to Let, var,
const and their scopes in JS
In JavaScript, var is function-scoped, while let and
const are block-scoped. let allows reassignment, const
does not. Understanding these scoping rules is crucial
for writing reliable JavaScript code.

20. Here’s the solutions to each of the above questions.You
may check these out!
Solution 1:
In this code, var a is declared inside the foo function.
So, when console.log(a) is executed inside foo, it prints undefined because the local
variable a shadows the global one.
Therefore, the output is undefined.
Solution 2:
Inside the if block, there's a let b declaration.
Variables declared with let are block-scoped.
Due to temporal dead zone (TDZ), accessing b before its declaration results in a
ReferenceError.

21. Solution 3:
When bar() is called, it successfully prints the value of c.
Solution 4:
In short, var x = 10; declares x globally, so console.log(x); outputs 10. Inside the
example() function, var y = 20; declares y, scoped to the function, so console.log(y);
outputs 20. However, console.log(y); outside example() throws a ReferenceError because
y is not accessible outside its function scope.
Solution 5:
console.log(a); outputs 5 due to global declaration with let, while console.log(b);
within the if block outputs 10. However, attempting console.log(b); outside the block
results in a ReferenceError because b is block-scoped.

23. [] == ![]; -> true
Rule:The abstract equality operator converts both sides to numbers to compare them, and both
sides become the number 0 for different reasons.
Rule:Number(true) ; → 1
Rule:Object.is() determines if two values have the same value or not
In JavaScript lingo, NaN and NaN are the same value but they're not strictly equal. NaN === NaN
being false is apparently due to historical reasons.
Rule:Number.MIN_VALUE is 5e-324, i.e. the smallest positive number that can be represented
within float precision, i.e. that's as close as you can get to zero.
Rule: In JavaScript, the expression ('hello' && 'world') evaluates to 'world' because the &&
operator returns the last truthy value if both operands are truthy.

24. "b" + "a" + +"#" + "a"; // -> 'baNaNa'
Explanation –> ++’a’ is not a number. Hence js prints NaN
"foo" + +"bar"; // -> 'fooNaN'
Explanation => ++”bar” is NaN
Adding arrays: [1, 2, 3] + [4, 5, 6]; // -> '1,2,34,5,6'
Number(true); // -> 1
typeof NaN; // -> 'number'
console.log(typeof NaN); // weirdly, type of NaN is a number
● NaN stands for “Not-a-Number.” It’s a special value in JavaScript that represents an undefined or
unrepresentable numeric result.
● Despite its name, NaN is indeed a numeric value. It indicates that a mathematical operation resulted
in an invalid or indeterminate value.

25. Math with True & false:
true + true; // -> 2
(true + true) * (true + true) - true; // -> 3
As,
Number(true); // -> 1

26. Object.is(NaN, NaN):
EXPLANATION
● The Object.is() method determines whether two values are the same value. Unlike the strict
equality operator (===), Object.is() treats NaN as equal to itself.
● When we compare NaN with NaN using Object.is(), it evaluates to true.
NaN === NaN
○ The strict equality operator (===) compares values for equality.
○ However, NaN is a special numeric value in JavaScript, and it is not equal to itself.
○ Therefore, when we compare NaN with NaN using ===, it evaluates to false.

27. Precision : 0.1 + 0.2
● When you add 0.1 and 0.2 in JavaScript, the result is not precisely 0.3.
● The actual result is approximately 0.30000000000000004.
● This behavior arises from how floating-point numbers are stored and rounded
internally.
Precision of 0.1 + 0.2
A well-known joke. An addition of 0.1 and 0.2 is deadly precise:
0.1 + 0.2; // -> 0.30000000000000004
0.1 + 0.2 === 0.3; // -> false

28. Both [] (an empty array) and null are considered objects in JavaScript,
`[]` and `null` are objects
const myArray = [];
console.log(typeof myArray); // object
const myNullValue = null;
console.log(typeof myNullValue); // object

29. Funny Maths
Number + Number -> addition
Boolean + Number -> addition
Boolean + Boolean -> addition
Number + String -> concatenation
String + Boolean -> concatenation
String + String -> concatenation
‘1’ + 1 // → ‘11’
‘11’ - 1 // → 10
‘1’ + 1 - 1 / → 10
‘222’ - ‘111’ // → 111
‘222’ - -’111’ // → 333

30. A relatable meme

31. Arrow Function in JavaScript
Writing one-line functions, or generally small functions, is very common. The general
approach to writing small functions is a long and tedious task. It also sometimes becomes
messy and difficult to debug. The solution is arrow functions.
const name = (parameters) => expression
const addFunction = function (a, b){
var sum = a + b;
return sum;
}
console.log("Sum of 1 and 3:" , addFunction(1,3));

32. var func = (a, b) => {
var sum = a + b;
return sum;
}
console.log("Sum of 1 and 3:" , func(1,3));
const double = a => a * 2;
console.log("Double of 5:" , double(5));

33. const greet = () => console.log("Hello");
greet();
const createObj1 = a => ({'1' : a });
const createObj2 = a => { return {'1' : a }};
console.log("Object with '1' property as 'OK':" , createObj1('OK'));
console.log("Object with '1' property as 'OK':" , createObj2('OK'));
const numbers = [1, 5, 2, 6, 8, 3, 4, 9, 7, 6];
console.log(
numbers.filter(e => e % 2 === 0)
.map(e => e * 2)
.reduce((total, e) => total + e));

34. Spread Operator
Spread Operator literally spreads the contents of an array into its elements
which makes operations like concatenation etc. easier
a = [1,2,3];
b = [4,5,6];
c = a.concat(b);
console.log("c: " + c);
a = [1,2,3];
b = [4,5,6];
c = [...a, ...b];
console.log("c: " + c);

35. let arr = ['a', 'b'];
let arr2 = [...arr, 'c', 'd'];
console.log(arr2);
const originalObj = { x: 1, y: 2 };
const newObj = { ...originalObj, z: 3 };
console.log(newObj);

36. const greeting = 'Hello, World';
const charArray = [...greeting];
console.log(charArray);
const numbers = [1, 2, 3, -1];
const minNumber = Math.min(...numbers);
console.log(minNumber);