Vanilla Javascript Cheat Sheet and Interview Questions

Question 1

What is the output of these order of operations? Explain why:

console. log(2+’2’);
console. log(2-‘2’);

Answer 1

First line prints 22
Second line prints 0

Reason is because + sign can be applied to strings (via string concatenation) while - sign cannot.

Remember this rule in Javascript.

Question 2

Remove duplicates, but do so on one line and without using any loops or lambdas:

let nums = [1,2,2,3];

Answer 2

let arr = [... new Set(nums)];
console.log(arr);

Question 3

What are the 6 possible data types in Vanilla javascript?

Answer 3

Object
number
text
null
undefined
boolean

Question 4

What are the 3 possible prototype functions for attaching an object to a function?

Answer 4

call();

apply();

bind();

Question 5

Explain the 3 most common Object.prototype utility methods (hint: get, has, set)

Answer 5

getPrototypeOf(a);

hasOwnProperty(‘propertystring’);

setPrototypeOf({
newprop : “something”
});

Question 6

Show syntax for Javascript object creation:

Answer 6

//Regular object creation:
var x = {
a: 1,
b : 2,
c : 'stuff'
};

Question 7

What is the syntax for an object created with a constructor? Include a function.

Answer 7

function Graph() {
this.vertices = [];
this.edges = [];
} //Creates a type of object called Graph

Graph.prototype = {
addVertex : function(v) {
this.vertices.push(v);
}
}

var g = Graph();
g.addVertex(5);

Question 8

How do you solve Palindrome in Javascript? (Note: no loops or Lambdas are allowed.)

Followup: How do you do this on one line?

Answer 8

const palindrome = function(text) {
	let orig = [...text];
	let rev = Array.from(orig);
	rev.reverse();
	if(JSON.stringify(orig) === JSON.stringify(rev)) {
		return true;
	}
	else {
		return false;
	}
}
console.log(palindrome('abcba'));
console.log(palindrome('something'));

//On one line: split reverse join
let text2 = 'abcba';
if(JSON.stringify(text2) === JSON.stringify(text2.split('').reverse().join(''))) {
	console.log(true);
}
else {
	console.log(false);
}

JSON.stringify(text2) === JSON.stringify(text2.split(‘’).reverse().join(‘’)) ? console.log(true) : console.log(false);

Question 9

TRICKY JAVASCRIPT CONVERSIONS 1 :

1. ) Convert a number 123 to text ‘123’;
2. ) Convert text ‘123’ to number 123
3. ) Convert array [1,2,3] to number 123
4. ) Convert array [‘1’,’2’,’3’] to number 123 and ‘123’
5. ) Convert number 123 to array [1,2,3]
6. ) Convert text ‘123’ to array [1,2,3] and [‘1’,’2’,’3’]

Answer 9

number conversions

Question 10

Create a random number between 0 and 9

Create a random number between 1 to 10

Create a random numbers between 10 to 100

Create a function to create a random number between two integers a and b

Answer 10

//Math.random() always returns a number between 0 to 1 in Javascript.  
//The "trick" is that you must multiply times one number greater than the place value you are looking for

//To get a number from 0 to 9:
Math.floor(Math.random() * 10); 

//To get a number from 1 to 10
Math.floor(Math.random() * 10) + 1; 

//To get a number from 10 to 100:
Math.floor(Math.random() * 90) + 10;

//Function to get random between two values
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

Question 11

TRICKY JAVASCRIPT CONVERSIONS 2:

Convert a float number .12345 to a string
Convert a string .12345 to a float number

Write a function to add ‘.0’ to the end of an integer number after converting it to text.

Write a function to pad take a number, convert it to text, and pad it to 5 0’s after the decimal point. Eg: convertAndPad(5.67) => 5.67000 in text.

Answer 11

Float conversions

Question 12

Explain about Map and all of its functions.

Answer 12

new Map() – creates the map.

map. set(key, value) – stores the value by the key.
map. get(key) – returns the value by the key, undefined if key doesn’t exist in map.
map. has(key) – returns true if the key exists, false otherwise.
map. delete(key) – removes the value by the key.
map. clear() – removes everything from the map.
map. size – returns the current element count.

Question 13

Explain about Set and all of its functions

Answer 13

A Set is a special type collection – “set of values” (without keys), where each value may occur only once.

Its main methods are:

new Set(iterable) – creates the set, and if an iterable object is provided (usually an array), copies values from it into the set.

set. add(value) – adds a value, returns the set itself.
set. delete(value) – removes the value, returns true if value existed at the moment of the call, otherwise false.
set. has(value) – returns true if the value exists in the set, otherwise false.
set. clear() – removes everything from the set.
set. size – is the elements count.

Question 14

Write a function to update a digital clock in the DOM, assuming there is a span element called hourEl and minuteEl

Answer 14

//Update clock:
const updateTime = () => {
  const currentTime = new Date();
  let currentHour = currentTime.getHours();
  const currentMinute = currentTime.getMinutes();
  if (currentHour > 12) {
    currentHour -= 12;
  }
  hourEl.textContent = currentHour.toString();
  minuteEl.textContent = currentMinute.toString().padStart(2, '0');
}
setInterval(updateTime, 1000);
updateTime();

Question 15

What is the difference between for-in and for-of loops in Javascript?

Answer 15

//for in loop:
const obj = {
	a: 1,
	b: 2,
	c: 3,
	d: 4
}
for (const key in obj) {
	console.log( obj[key] )
}
// Result: 1, 2, 3, 4
//Used for iterating over objects.
//cannot be guaranteed that the iteration happens in sequence

//for of loop:
const array = ['a', 'b', 'c', 'd'];
for(let v of array) {
    console.log(v);
}
const sentence = "Hello";
for(let ch of sentence) {
    console.log(ch);
}
//for of introduced in ES2015
//used for iterating over "iterable collections". These are objects that have a [Symbol.iterator] property.
//general purpose iterator for array, string, set