JavaScript Flashcards
What is variable hoisting?
JavaScript moves variable declarations to the top of the relevant scope
Assignments are not hoisted
Var is initialized as undefined while let and const are not given a value
What is a promise?
A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
What is lazy loading?
https://blog.logrocket.com/understanding-lazy-loading-in-javascript/
What is the CSS box model? What whats the box-sizing property?
The representation of an element as a box and how it obtains its dimensions by means of its own content, padding, border and margin
The box-sizing CSS property sets how the total width and height of an element is calculated.
- content-box* gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
- border-box* tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
What is flexbox?
A set of properties that will allow for an adaptive layout
It will change based on the content
You can fill in a column to be full-height even though the content doesn’t take full height
What does JSON stand for and what is it?
JavaScript Object Notation
It’s a text format for sharing data between clients and servers
Based on javascript objects but not identical
Its not designed to have embedded methods like you can have in regular JS
Its language independent
Easy to read and parse
What does ‘use strict’ do?
Invalid assignments like calling a variable ‘undefined’
Prohibits certain things like deleting undeletable properties, creating duplicate properties in javascript object,
What is an anonymous function?
Aka a function declaration
A function with no name
Ex function(){ … }What are event capturing and bubbling?
Capturing: Goes from top of the DOM to the element you’re targeting
Bubbling: Goes from the element you’re targeting up to the top of the DOM
stopPropagation() : keeps the event from continuing to propagate through the DOM
Event listeners take a third parameter, propagation type, which is a boolean
What is AJAX?
Asynchronous javascript and XML
Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page.
XMLHttpRequest() came before fetch and async await
What is a polyfill?
A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
For example, a polyfill could be used to mimic the functionality of a text-shadow in IE7 using proprietary IE filters, or mimic rem units or media queries by using JavaScript to dynamically adjust the styling as appropriate, or whatever else you require.
The reason why polyfills are not used exclusively is for better functionality and better performance. Native implementations of APIs can do more and are faster than polyfills. For example, the Object.create polyfill only contains the functionalities that are possible in a non-native implementation of Object.create.
Properties of the position attribute?
Fixed, relative, sticky, static, absolute
Sticky: splits between relative and absolute
What are the data types in JS?
6 primitive data types: undef, boolean, number, str, big int and symbol
Structural types: object like set, array, map, weak map, weak set, date, and keyword
Whats a template string or literal?
Template literals are string literals allowing embedded expressions.
Now, with template literals, you are able to make use of the syntactic sugar, making substitutions like this more readable:
let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
What is a pointer?
An address to something in your code like a variable or anything
A key in react is like a pointer. Keys in react are created in a loop
A key is a pointer to that element
How to make a page not discoverable by google?
Meta tag - say “no follow”
Goes in the head of the document
What’s a JavaScript Engine? name one
A JavaScript engine is a computer program that executes JavaScript (JS) code. The first JavaScript engines were mere interpreters, but all relevant modern engines use just-in-time compilation for improved performance. JavaScript engines are typically developed by web browser vendors, and every major browser has one.
V8, owned by google and used in any chrome based browser
Ways to make sure your web page is accessible (i.e. to people using assistive technology due to physical disabilities or with vision issues)
Semantic html Alt text Color contrast Aria labels Tab index
What are some ways to make your application scalable?
- Avoid nested loops
- Use a content delivery system
- Short-circuiting your functions
- jeff’s example about leveraging SQL as much as possible so that backend logic runs quickly
What’s a try-catch?
It allows us to “catch” errors so the script can, instead of dying, do something we’d rather it do.
Can be used in any case where something may fail.
First, the code in try {…} is executed.
If there were no errors, then catch(err) is ignored: the execution reaches the end of try and goes on, skipping catch.
If an error occurs, then the try execution is stopped, and control flows to the beginning of catch(err). The err variable (we can use any name for it) will contain an error object with details about what happened.
Arrow function vs regular function?
Arrow function does not have its own bindings to this or super or self and it just inherits “this” of the function or class it’s inside of
What are the semantic elements added in HTML5?
Header, footer, main, section, aside, nav
Difference between a while loop and a do-while loop?
While loop is never guaranteed to run in your code, but do while loop always runs at least one time
What is XML?
Extensible markup language
Whereas HTML tells a browser application how a document should look, XML describes what’s in the document. In other words, XML is concerned with how information is organized, not how it is displayed.
A markup language is a set of codes, or tags, that describes the text in a digital document.
Why and how to use the reduce() method
The reduce() method is used to apply a function to each element in the array to reduce the array to a single value.
What are the types of conditionals in javascript?
If, else if, else
Explain what pseudo classes and pseudo selectors are
Pseudo class: A way of selecting an existing HTML element.
Selects element based on state or property of element
Examples: :hover, :focus, :first-child, :nth-child, :not
Pseudo element: Creates a virtual element that didn’t exist before
::before, ::after, ::first-letter
What’s your debugging process for a FE issue?
- Check the stack trace in dev tools; determine the file and location in the file where the exception was thrown
- Check the network tab in dev tools to see if it’s a problem with an API request…
- If not backend<>front-end issue, read the front-end code (logic) in my IDE and potentially fix the problem easily
- If still unknown, console.log() key indicators in the logic that could point me to the root problem
What is css-in-js?
CSS-in-JS is a JavaScript library that bundles each JavaScript component with all its belonging CSS rules and dependencies. As a result, components can run independently, without relying on any external CSS file.
CSS-in-JS libraries have been gaining traction since component-based JavaScript frameworks appeared in front-end development. These libraries like react and vue are based on modules called “components” from which you can build up an entire single-page application (SPA)
While styling SPA components, if you use global CSS files then it will be hard to tell what the end result will look like. Due to the cascading nature of CSS (Cascading Style Sheets), stylesheets can load in any order and override each other in any combination.
What happens when you type a URL in the browser? Describe what exactly gets sent from the server to the client.
- You enter a URL into a web browser
- The browser looks up the IP address for the domain name via DNS
- The browser sends a HTTP request to the server
- The server sends back a HTTP response
- The browser begins rendering the HTML
- The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3-5.
- Once the page is loaded, the browser sends further async requests as needed.
part 2:
Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:
1. Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you’ll meet other technologies a bit later.
2. Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.
What is HTTP?
HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.
What are DNS?
Domain name servers are special servers that match up a web address you type into your browser (like “mozilla.org”) to the website’s real (IP) address.
what is MVC?
It is an architectural pattern separates data from the user interface. The model layer contains the data, the view layer sends the data to the user, and the controller is the one that makes changes to the model based on user input.
Most difficult part of a project you did?
stripe API in dance connect
