Js Basics

Question 1

Javascript engine

Answer 1

Ideally interprets the code
But modern browsers do just in time compilation which leads to better performance

Question 2

String functions

Answer 2

charAt()
includes()
startsWith(), endsWith()
toUpperCase()
substr(startIndex, count)
slice(startIndex, endIndex)
string.padStart(5, '-') - makes the length to 5 adding - as prefix
trim(), trimStart(), trimEnd()
split() - converts to array

Question 3

Map

Answer 3

const map = new Map()
map.set(key, value)
map.get(key)
map.size
map.delete(key)
map.clear()

map.keys()
map.values()
map.entries()

Question 4

Set

Answer 4

const set = new Set()
set.add(value)
set.has(value)
set.size
set.delete(value)

set.entries()
set.values()
set.keys()

Question 5

error handling

Answer 5

throw  'my error'
throw new Error('my error')

Question 6

console

Answer 6

console.error
console.debug
console.table
console.count(‘key’), console.countReset
console.time(), console.timeLog(), console.timeEnd

Question 7

strict mode

Answer 7

‘use strict’;
can be used at function level also

Question 8

dom content loaded

Answer 8

window.addEventListener('DOMContentLoaded', ()=>{})

Question 9

difference between var, let

Answer 9

var is hoisted and scoped to function
let is hoisted but in dead temporal zone so not accessible also it is block scoped

Question 10

Array

Answer 10

const arr = new Arr(10).fill(0) - fill the array of size 10 with 0s

Question 11

Data types in js

Answer 11

• Seven primitive data types:
  
  • numberfor numbers of any kind: integer or floating-point, integers are limited by±(2531).
  • bigintfor integer numbers of arbitrary length.
  • stringfor strings. A string may have zero or more characters, there’s no separate single-character type.
  • booleanfortrue/false.
  • nullfor unknown values – a standalone type that has a single valuenull.
  • undefinedfor unassigned values – a standalone type that has a single valueundefined.
  • symbolfor unique identifiers.
• And one non-primitive data type:
  
  • objectfor more complex data structures.

Thetypeofoperator allows us to see which type is stored in a variable.

• Usually used astypeof x, buttypeof(x)is also possible.
• Returns a string with the name of the type, like"string".
• Fornullreturns"object"– this is an error in the language, it’s not actually an object.

Question 12

Type conversions

Answer 12

The three most widely used type conversions are to string, to number, and to boolean.

String Conversion– Occurs when we output something. Can be performed withString(value). The conversion to string is usually obvious for primitive values.

Numeric Conversion– Occurs in math operations. Can be performed withNumber(value).

The conversion follows the rules:

Boolean Conversion– Occurs in logical operations. Can be performed withBoolean(value).

Follows the rules:

| Value | Becomes… |
| — | — |
| 0,null,undefined,NaN,”” | false |
| any other value | true |

Value | Becomes… |
| — | — |
| undefined | NaN |
| null | 0 |
| true/false | 1 / 0 |
| string | The string is read “as is”, whitespaces (includes spaces, tabs\t, newlines\netc.) from both sides are ignored. An empty string becomes0. An error givesNaN. |

Question 13

Nullish coalescing operator ‘??’

Answer 13

The result of a ?? b is:

if a is defined, then a,
if a isn’t defined, then b.
In other words, ?? returns the first argument if it’s not null/undefined. Otherwise, the second one.

Question 14

Strings

Answer 14

Strings are immutable
index of
lastIndexOf
Includes()
Startswith
Endswith
Slice(start, end)
LocaleCompare for comparison
Trim - trims from beginning and end

Question 15

Weakmap and weakset

Answer 15

Similar to map and set but keys need to be object and allows for garbage collection.

Question 16

XMLHttpRequest

Answer 16

const req = new XMLHttpRequest();

req.addEventListener('load', function (){this.responseText})
req.addEventListener('error', function (){this.responseText})

req.open('GET', 'url');
req.send();

Question 17

fetch

Answer 17

const headers = new Headers();
headers.append('Content-Type', 'application/json')
const result = await fetch(url, {
method:'POST',
body: JSON.stringify(bodyObject),
headers
})

new FormData(form)

const abortController = new AbortController()
abortController.abort();
fetch(url, {signal: abortController.signal})

Question 18

Web workers

Answer 18

A browser API for running scripts in a separate thread from the main execution thread.

A worker object is created with the Worker(filePath) constructor function. The argument to this function is a path to another JavaScript file that will run in a separate thread.

Workers can send messages back and forth with the main thread via the postMessage(message) method and the onmessage event. For example:

// main JavaScript file
const worker = new Worker('worker.js');
worker.postMessage('hello');
worker.addEventListener('message', (event) => {
  console.log(event.data); // 'world'
});

// worker.js
postMessage('world');
addEventListener('message', (event) => {
  console.log(event.data); // 'hello'
});

In general, most workers are dedicated workers, meaning they can only communicate with the script that created them. However, a SharedWorker can also be created to share a worker with multiple tabs or iframes. That said, SharedWorkers still do not have widespread support across browsers.

Question 19

Custom event

Answer 19

// Create the custom event
const myEvent = new CustomEvent('myCustomEvent', {
  detail: { 
    message: 'Hello, world!' 
  }
});

// Add an event listener for the custom event
document.addEventListener('myCustomEvent', function(event) {
  console.log('Custom event triggered:', event.detail.message);
});

// Dispatch the custom event
document.dispatchEvent(myEvent);