Interview Questions Flashcards
Explain the differences between var, const and let.
The weakest signal available in ES6 is var.
‘Let’ signals that a variable might be reassigned, and can be used for example in loops, for counting.
‘Const’ signals that that identifier will not be reassigned.
What is the difference between == and ===?
The == operator compares two values, without taking into account their types. === compares the values, but also makes their types into account. So 3==’3’ evaluates to True, but 3===’3’ evaluates to False.
What is the difference between textContent and innerHTML?
textContent is a concatenation of the text content of a node and its descendant. It is the fastest of the two.
innerHTML returns the HTML. It parses the text into HTML, which makes it slower.
What is a node?
TBD
What is the DOM?
DOM stands for the Documentation Object Models, and it is a World Wide Web Consortium standard.It defines a standard for accessing documents, and it can be used to access and change the content of the HTML.
What are the JavaScript data types?
There are seven data types: Boolean, Null, Undefined, Number, String, Symbol, Object. The first six are primitives, meaning data types that aren’t objects and do not have any methods.
What are the pop-up boxes types available in JavaScript?
There are 3 pop up boxes: Alert, Confirm and Prompt.
What do the break and the continue statements do?
The break statement is used to exit a current loop. On the other hand, the continue statement continues with the next announcement in the loop.
What is negative infinity in JavaScript?
The result of a negative number divided by 0.
Give us an example of an object declaration.
Var person = {
fullName: ‘Andrew Smith’,
Age: 34,
Email: ‘andrew.smith@gmail.com’
}
Explain the difference between null, undefined or undeclared variables.
Undefined variables have been declared, but no value exists for them. Null is a value of variables, as well as a type of object. Undeclared variables are those declared without the var, const or let keyword.
How do objects, classes, inheritance work in JavaScript?
ES6, introduced classes. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned (initialized) inside a constructor() method.
class Car {
constructor(brand) {
this.carname = brand;
}
}
An object is an instance of the class.
mycar = new Car("Ford");
Inheritance is a mechanism in which one (child) class/object acquires all the properties and behaviors of another (parent) class/object
Classical Inheritance vs Prototypal Inheritance?
Javascript is not a class-based language. JavaScript works on prototype chain.
Classical inheritance creates a copy of the behavior from parent class/object into the child. And after that parent and child class are separate entity.
Prototypal Inheritance (also called called Behavior Delegation Pattern), In JavaScript, when we create the object it does not copy the properties or behavior, it creates a link. (a prototype chain)
Syntax keyword for creating instances of subclass?
“new”
What is the syntax to create a method?
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return "I have a " + this.carname;
}
}
mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present();
What are static methods?
Static methods are defined on the class itself, not the prototype. So you can only call it on the class.
How do you create a class inheritance?
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class:
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
What is hoisting?
The default behavior of JavaScript declarations, moving a function declaration to the top. So for declarations, like functions, you will NOT get an error when you try to use it before it is declared.
However class declarations are not hoisted. That means that you must declare a class before you can use it.
What is strict mode?
In “strict mode” you will get an error if you use a variable without declaring it:
class Car {
constructor(brand) {
i = 0;
this.carname = brand;
}
}
var mycar = new Car("Ford");
What are some Javascript frameworks?
React, Angular, Vue, opeFramework, Cinder
What is WebGL?
WebGL: is the Javascript API that allows you to create 3D graphics in the browser.
What is Three.js?
Three.js a 3D javascript library: A framework build on top of WebGL which makes it easier to create 3D graphics in the browser, it uses a canvas + WebGL to display the 3D scene.
Math.floor()
returns the largest number less than or equal to the given number
console.log(Math.floor(5.95)); // expected output: 5
console.log(Math.floor(5.05)); // expected output: 5
console.log(Math.floor(5)); // expected output: 5
console.log(Math.floor(-5.05)); // expected output: -6
What is JAMStack?
sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.
All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript.
What is Serverless?
running your application on a cloud service rather than your own server
communicate with servers with Javascript API’s (url)
What is FaaS
Functions as a server
Which browsers don’t support CSS Grid?
IE11 and below
JavaScript Map Method for adding +1 to an array [1, 2, 3, 4, 5]?
const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map(function addOne(number) {
return number + 1;
});
console. log(originalArray); // [1, 2, 3, 4, 5]
console. log(newArray); // [2, 3, 4, 5, 6]
JavaScript For Loop for adding +1 to an array [1, 2, 3, 4, 5]?
const originalArray = [1, 2, 3, 4, 5];
const newArray = [];
for (let i = 0; i < originalArray.length; i++) {
newArray[i] = originalArray[i] + 1;
}
console. log(originalArray); // [1, 2, 3, 4, 5]
console. log(newArray); // [2, 3, 4, 5, 6]
JavaScript Map Method with Arrow function for adding +1 to an array [1, 2, 3, 4, 5]?
const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map(number => number + 1);
console. log(originalArray); // [1, 2, 3, 4, 5]
console. log(newArray); // [2, 3, 4, 5, 6]
JavaScript Map Method with Arrow function for adding +1 to an array [1, 2, 3, 4, 5]?
const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.map(number => number + 1);
console. log(originalArray); // [1, 2, 3, 4, 5]
console. log(newArray); // [2, 3, 4, 5, 6]
In JS, diff between .map and .forEach?
forEach doesn’t return anything. In the case of map, the return value of the callback function is used as the transformed value in our new array.
What is jQuery?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is not a programming language instead it is a cross-platform JavaScript library.
Lets you write JavaScript quicker and easier.
Browser compatibility – you can write code which runs across browsers without having to know the various browser intricacies and won’t break.
What is your CSS Processing tool of choice?
Sass
Which CSS framework do you use most frequently on your projects?
Bootstrap
BEM naming convention?
Block = .stick-man Element = .stickman_ _head Modifier = .stickman--blue
What are js- class names for css?
use a js-* class name to denote a relationship with the DOM element in question.
<div></div>
What is CSS Lint?
a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency.
What is webpack?
A module bundler
What is AJAX?
With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.
What are the 5 most common web browsers?
Chrome Safari Internet Explorer (Note: not Edge, referring to IE 9 to IE 11) Firefox Edge
What are WebViews?
Webviews web pages embedded in a native application running on a device (e.g., iOS, android, windows).
What is a web based platform?
any platform that enables you to deliver content, services and applications over the HTTP protocol
What is SEO?
Search Engine Optimization
7 steps to successful SEO?
Crawl accessibility so engines can read your website
Compelling content that answers the searcher’s query
Keyword optimized to attract searchers & engines
Great user experience including a fast load speed and compelling UX
Share-worthy content that earns links, citations, and amplification
Title, URL, & description to draw high CTR in the rankings
Snippet/schema markup to stand out in SERPs
Max columns in CSS Grid?
12
What is HTTP?
Hypertext Transfer Protocol. defines a language for clients and servers to speak to each other
A client sends a HTTP request to a server, and the server responds with content/data/webpage
Two most common package managers?
npm
yarn
What is DNS?
Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website’s real address before it can retrieve the website.
HTML?
Hypertext Markup Language (HTML) is the code that you use to structure your web content and give it meaning and purpose.
HTML head vs body
The HTML head is the contents of the element — unlike the contents of the element (which are displayed on the page when loaded in a browser), the head’s content is not displayed on the page. Instead, the head’s job is to contain metadata about the document.
What is ES6?
ES6 is next gen JavaScript syntax and nothing else. There are also some added features in the ES6 version of JavaScript such as arrow functions , rest and spread operator, destructuring , promises etc.
Px vs rem vs em for font sizes?
pixel values overrides browser default settings
rem sets the font relative to the root/html document
em set the font relative to the parent element
relative vs absolute vs fixed
Relative - the element is positioned relative to its normal position.
Absolute - the element is positioned absolutely to its first positioned parent.
Fixed - the element is positioned related to the browser window.
Sticky - the element is positioned based on the user’s scroll position.
