JavaScript Flashcards
(34 cards)
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.
