Data Types

1. What are the basic data types in JavaScript?

// String, Boolean, Number
// Null, Undefined
// Symbol, BigInt
// object

• Boolean, String and Number – are simple primitive types. Not objects.
• Null and undefined are the same, but with one feature – they as types have only one value.
• Symbol and BigInt are fresh types for rear cases.
• object – computational type that can have methods and properties.

2. What are the built-in object data types in JavaScript, and how are they used?

var name = 'Alex'

console.log(name.length)
console.log(new String(name).length)

How is it possible, that a string value has methods and properties like length? JavaScript in runtime makes an object out of that value.

new keyword explicitly makes an object, simple String() run static stringify method.

3. How do you leverage the typeof and instanceof operators to determine the data type of a variable?

var user = {
  name: 'Alex',
  age: 29,
  hasCar: false,
  drivingLiscence: null,
  nextYearSalary: undefined,
  currentYearSalary: 42n,
  taxNumber: Symbol('tax_number'),
};

typeof user; // 'object'
typeof user.name; // 'string'
typeof user.age; // 'number'
typeof user.hasCar; // 'boolean'
typeof user.drivingLiscence; // 'object'
typeof user.nextYearSalary; // 'undefined'
typeof user.currentYearSalary; // 'bigint'
typeof user.taxNumber; // 'symbol'

user = null;
typeof user; // 'object'

Null has type object, because it was used to point that object is empty now. It wasn't fixed since these days.

4. What is the difference between null and undefined?

var test;
console.log(test)
test = null
console.log(test)

Use null to explicitly make something zero/empty/none valueable.

Undefined is a default value for variables.

5. What is NaN in JavaScript and how can you check for it?

var name = 'Alex';
var age = 29;

var test = name - age

console.log(test);
Number(name);
NaN - 29;

isNaN(test)
isNaN('sad')

Number.isNaN(test)

! (test === test)

• NaN is special number in type number!
• Any mathematical operations with NaN result NaN.
• Check it with Number.isNaN (window.isNaN checks almost for falsy values).

6. What is a truthy value in JavaScript?

var test = () => false;
if (test) {
  console.log('truthy');
} else {
  console.log('falsy');
}

// !
typeof test

Everything in if() statement works as if it were in Boolean() global object. Boolean() global object only looks up Table 12: ToBoolean Conversions.

7. What is the difference between == and === in JavaScript?

42 == '42';
42 == Number('42');
42 == 42;

var test = [];
[] == [];
typeof [];

test == test;

• == works with 7.2.15 IsLooselyEqual ( x, y ).
• === works with 7.2.16 IsStrictlyEqual ( x, y ).

Objects are equal if they point to the same value/memory cell.

8. How to check if it’s array?

var arr = []
Array.isArray(arr)
arr instanceof Array

Array.isArray() is most elegant way nowadays.

9. Can you explain the concept of coercion in JavaScript?

// From Left -> Right

1 + '2'; // '12'
true + '2'; // 'true2'
// String > Number

true + 1; // 2
// Number > Boolean

true + 1 + '2'; // '22'
1 + 1 + '2'; // '22'
2 + '2'; // '22'

1 + 2 + 3; // 6
1 + '2' + 3; // '123'
1 + + '2' + 3; // 6
1 + 2 + 3; // 6

1 < 2 < 3; // true
true < 3; // true
1 < 3; // true

3 > 2 > 1; // false
true > 1; // false
1 > 1; // false

1. + operator converts operands to strings if one of it is a string. And concatenate them.
2. + operator converts operands to numbers in other cases.
3. Everything is executed from left to right, operation by operation. So true + 1 + '2' breaks into true + 1 and 22 + '2'.
   1. 1 < 2 < 3 breaks into 1 < 2 and true < 3. That leads to Number(true) < 3. That leads to 1 < 3. That results true.
4. Using + operator without left hand operator turns the operation into unary. So it convert right hand operand into number. It also has higher priority over addition.

10. What is a Symbol data type in JavaScript, and how is it used?

var privateKey = Symbol('42');

var obj = { name: 'Alex', [privateKey]: 'private info' };

// any level nested code / components

obj[privateKey]; // 'private info'

---

Mastering JavaScript data types and operators is crucial for effective frontend development. Whether you're working with React, Redux, or GatsbyJS.

These fundamental concepts will help you write cleaner, more efficient code. Stay tuned for more insights into JavaScript, TypeScript, Webpack, and more!