Technical (JavaScript) Trivia

What are the 7 falsey values in JavaScript?

0, "", NaN, -0, null, undefined, false

In what order with the numbers 1-4 be logged to the console when the code below is executed? Why? function counter() { console.log(1); setTimeout(() => console.log(2), 1000); setTimeout(() => console.log(3), 0); console.log(4); } counter();

1, 4, 3, 2. 1 and 4 come first because they are logged without delay. 3 comes before 2 because it has a shorter asynchronous delay. Even though 3 has a delay of 0, it is still placed on the event queue while the browser is busy. You can think of a setTimeout of 0 as meaning "as soon as possible".

If const a= 2, b = 3 what would be the value of a && b

3

What is a closure in javascript?

: A closure is an inner function that has access to the variables in the outer (enclosing) function's scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function's scope, and (3) global variables.

Name three pseudo selectors:

:hover, :nth-of-type, :visited, :focus, :link, :first, :child, :checked, :last-child, :target, etc.

How would you differentiate div, section, and article?

<section> , group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It's a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp's tabbed interface. A section normally has a heading (title) and maybe a footer too. <article> , represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. <div> , on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.

== vs. ===

== equality with coercion and === strict equality One operator that does not trigger implicit type coercion is ===, which is called the strict equality operator. The loose equality operator == on the other hand does both comparison and type coercion if needed. == will not check types and === will check whether both sides are of same type. == will convert to its convenient type to have both in same type and then do the comparison.

What does the global object refer to in JavaScript?

A POJO that exists to provide all built-in methods and global variables

What is JavaScript?

A level interpreted programming language. It is dynamic, weakly typed, prototype-based, multi-paradigm, single-threaded, concurrent, and never blocking

What is a primitive datatype in JavaScript?

A primitive datatype is not an object, is immutable, and has no attributes/methods defined directly on it

What is a potential pitfall with using typeof bar === "object" to determine if bar is an object? How can this pitfall be avoided?

Although typeof bar === "object" is a reliable way of checking if bar is an object, the surprising gotcha in JavaScript is that null is also considered an object!

Concurrent

Capable of delegating multiple tasks simultaneously

What is the differences between div and span?

Div is a block element and span is inline element.

Why do you need a doctype?

Doctype is an instruction to the browser to inform about the version of the html document and how browser should render it.

Event Table

Every time you call a setTimeout function or you do some async operation — it is added to the Event Table. This is a data structure which knows that a certain function should be triggered after a certain event. Once that event occurs (timeout, click, mouse move) it sends a notice. Bear in mind that the Event Table does not execute functions and does not add them to the call stack on it's own. It's sole purpose is to keep track of events and send them to the Event Queue.

What does float do?

Float removes the element from the normal flow of the document and pushes the element to the sides of the page with text wrapping around it.

What is position sticky?

From MDN: It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" (it doesn't move) until meeting the opposite edge of its containing block.

How can you generate a public key in html?

Html has a keygen element that facilitates generation of a key and submission via a form. (<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">)

Never-Blocking

I/O does not interfere with user input and activity

Is JavaScript compiled or interpreted?

Interpreted

JavaScript Engine

Interprets your JS code and turns it into runnable commands

What is the use of the data~* attribute?

It allows you to store extra information/ data in the DOM. You can write valid html with embedded private data. You can easily access the data attribute by using javascript and hence a lot of libraries like knockout use it.

Dynamic

It can execute many common behaviors at runtime rather than having to be compiled

Single-threaded

It can only execute one action at a given time

Does javascript pass parameter by value or by reference?

It depends on the datatype. Primitive types (string, number, etc.) are passed by value and objects are passed by reference. If you change a property of the passed object, the object will be affected.

What is the difference between window and document?

JavaScript has a global object and everything runs under it. window is that global object that holds global variables, global functions, location, history everything is under it. document is also under window. document is a property of the window object. document represents the DOM and DOM is the object oriented representation of the html markup you have written

Call Stack

JavaScript has a single call stack in which it keeps track of what function we're currently executing and what function is to be executed after that. A stack is an array-like data structure but with some limitations — you can only add items to the back and only remove the last item.

Hoisting

JavaScript's default behavior of moving all declarations to the top of the current scope(ie. current script or function) At a broad level, hoisting is the concept of having access to named functions and variables (only vars) before they are declared in your code. This works because variable and function declarations are put into memory during the compile phase. This is useful because declared functions can be called before they are defined Variables are partially hoisted Var declarations are hoisted but not its assignments let and const are not hoisted

Describe the concept of memoization?

Memoization is a programming technique which attempts to increase a function's performance by caching its previously computed results. POJO's are often used to implement these caches.

What is NaN? What is its type? How can you reliably test if a value is equal to NaN?

NaNs type is Number. NaN compared to anything, even itself, is false. One way to check if they are equal is using the built in isNaN() function.

Are CSS properties case sensitive?

No

Can you directly compare two objects in Javascript?

No

Does margin-top or margin-bottom effect inline elements?

No

Does padding-top or padding-bottom effect inline elements?

No

Is null an object?

No. Even though typeof null returns object, this is a bug. You can not put any attributes on null, as it is a primitive datatype.

Prototype-Based

OOP style based on sharing behavior through objects or 'prototypes'

Multi-paradigm

Permits the use of different programming paradigms. Supports both object-oriented and functional programming

What is the difference between a canvas element and an SVG?

SVG: Object Model-based (SVG elements are similar to HTML elements). Graphical elements become part of the DOM. Visual presentation created with markup and modified by CSS or script. API supports accessibility. API does not support accessibility; markup-based techniques must be used in addition to canvas. Canvas: Pixel-based (canvas is essentially an image element with a drawing API). Single HTML element similar to in behavior. Visual presentation created and modified programmatically through script.

If you create a function that takes 2 arguments, but invoke it with 3 arguments, how can you access the third variable?

The arguments keyword that is available in all functions.

What does bind do?

The bind method creates a new function that, when called, has its this keyword set to the first parameter passed into it. All subsequent parameters are arguments for that bound function.

When you zoom in on your browser and the page gets bigger, what exactly happens?

The browser increases the size of each pixel by the percentage of the zoom.

Asynchronicity in JS

The combination of callbacks and promised on top of the task queue and event loop are what give us asynchronicity in JS Synchronous programming means code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O. Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result.

What is position fixed?

The computed position of an element where it's position is constant or 'fixed' in relation to the window. Its' position and presence never change.

What is position absolute

The computed position of the element where it can be spaced after being removed to from the normal flow of the document. It is spaced in relation to its' first non-static parent container with top, bottom, left, and right.

What is position relative?

The computed position of the element where it can be spaced in relation to its' normal position in the flow of the document using top, bottom, left, and right

What is position static?

The default position value for an html element. Not relative, absolute, fixed, or sticky.

Consider the following two functions below. Will they both return the same thing? Why or why not? function foo1() { return { bar: "hello" }; } function foo2() { return { bar: "hello" }; }

The first function will return Object { bar: "hello" }. The second function will return undefined. This is because of semicolon insertion. The compiler will automatically put a semicolon after the return in the second function, therefor returning undefined.

What does the "length" property of the JavaScript Function object return?

The number of arguments taken by the function (not including rest parameters)

How could you run event handler in the capturing phase not in bubble phase?

There is a third (optional) parameter in addEventListener and removeEventLister. You can pass true or false to useCapture phase.

Does the following code throw a reference errors? Why/Why not? sayHello(); // OUTPUT: "Hello"; function sayHello() { return "Hello"; }

This does not throw an errors because named functions are hoisted and can be used before their declaration.

What is the Temporal Dead Zone?

This has to do with the topic of hoisting. The temporal deadzone is the time between entering a scope where a variable is declared (i.e. an if statement or while loop), and the actual declaration and initialization of that variable. During this period, let and const variables cannot be accessed (you will get a Reference Error), even though they have been hoisted. Example: console.log('out of scope'); if (true) { // Enter temporal deadzone. `x` is created and hoisted as soon as we enter scope. console.log('In the scope!'); // TEMPORAL DEADZONE // TEMPORAL DEADZONE let x = "Test Variable"; // No longer in the temporal deadzone } The time between the hoisting of a variable and the variables assignment in the code. When var returns undefined and when let and const return Errors

Event Loop

This is a constantly running process that checks if the call stack is empty. Imagine it like a clock and every time it ticks it looks at the Call Stack and if it is empty it looks into the Event Queue. If there is something in the event queue that is waiting it is moved to the call stack. If not, then nothing happens.

What are two-way data binding and one-way data flow, and how are they different?

Two-way data binding means that UI fields are bound to model data dynamically. I.e., when a UI field changes, the model data changes with it and vice-versa. An example of this is Angular.js, which uses two-way binding. One way data flow means that the model is the single source of truth. A change in UI is not directly bound to the model. An example of a one-way data flow framework is React. Only the model, or store in this case, has access to the application's state.

Consider the following expression var y = 1, x= y = typeof x. What is the value of x?

Undefined

What is the difference between null and undefined?

Undefined means the value of a variable is not defined. JS has a global variable called undefined whose value is undefined. null means empty or non-existent value which is used by programmers to indicate "no value". Must be explicitly assigned.

How can you apply css rules specific to media/screen-size?

Use @media to set rules based on media width, orientation, etc. Example: @media (max-width: 700px) and (orientation: landscape){}

How can you highlight text in html?

Use mark element

Are let and const hoisted?

Yes

Do padding-left, padding-right, margin-left, or margin-right effect inline elements?

Yes

Does style1.css have to be downloaded before Paragraph 1 is rendered? <head> <link href="style1.css" rel="stylesheet"> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> <link href="style2.css" rel="stylesheet"> </body>

Yes

Will the browser make an http request for the following case? <img src="mypic.jpg" style="visibility: hidden" alt="My photo">

Yes

Is there an implicit return function in JavaScript?

Yes, via one line big arrow functions or big arrow functions that wrap their block in parentheses.

How could you capture all the text in a web page?

`

Callback

a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action

What is the Value of this inside of a constructor function?

a newly created object

What is a prototype in Javascript?

an object

Promise

an object that represents the eventual completion (or failure) of an asynchronous operation (Promises allow us to wait for asynchronous code and then execute other code upon completion)

Name all 6 primitive data-types in JS?

boolean, string, number, null, undefined, and symbol (ES6 only)

When inspecting a MouseEvent object, which of the following do target and currentTarget represent?

currentTarget: the element the listener is set on, target: the element the mouse is on.

Which of these executes first: document.onload or window.onload ?

document.onload executes first

What are the three phases of event propagation?

i. Capturing phase: Events begin at the top level and move inwards towards the target (the node you clicked) ii. Target node: If there are registered handlers at the target node, they are run. iii. Bubbling phase: Event walks back outwards towards root; all encountered event handlers are run on the way.

List css specificity rules from most specific to least specific:

inline, ID, class, element, universal

Parallelism

multiple processes can run at exactly the same time (Javascript is not parallel) Parallel environments can be described as concurrent but not all concurrent environments are parallel

What is an optional closing tag?

p, li, td, tr, th, html, body, etc. do not have to provide an end tag. However, you have to escape the tag.

Concurrency

processes can run independently of one another, but they do not necessarily run at the same time (Javascript is concurrent)

What is the Value of this inside of a setTimeout function?

the window

What are the proper keywords for error handling in JavaSCript?

try and catch

Weakly Typed

types are not declared or firmly adhered to making thinks like type coercion possible

How can you change the direction of html text?

use bdo (bidirectional override) element of html. <p><bdo dir="rtl">This text will go right to left.</bdo></p>

JavaScript Runtime Environment

Supports your HS by providing it with common objects and ways to communicate with the world outside your code

Why can we call methods on certain primitive datatypes?

Technically, you can't. But, certain primitive datatypes, like strings, numbers, and booleans, have non-primitive counterparts (String, Number, Boolean). So, if you call "string".slice(5), that string will be implicitly cast to a String object, and the slice method will be called on that.