JavaScript - Intermediate Flashcards
Function declaration
- It defines a named function using the function keyword, followed by the function name and its body.
- Function declarations are hoisted, meaning they are accessible throughout the entire scope in which they are defined.
For example:
function myFunction() {
// function body
}
Function expression
- It assigns a function to a variable or a constant.
- Function expressions are not hoisted and can only be accessed after the assignment.
For example:
const myFunction = function() {
// function body
};
Concept of scope and how it works in JavaScript
- JavaScript uses Lexical scope (also known as static scope). Lexical scope means that the scope is determined by it’s location in the source code and isn’t affected by the way functions are called.
- Before ES6 JavaScript used functional scope which means that wherever a variable or function is defined within a function block or it’s sub blocks that variable/function is hoisted and thus available from anywhere within the function block.
- After the introduction of let and const in ES6 which provided a way to use block scope (instead of functional scope) limiting the scope of the variable to the block in which it is defined rather than hoisting it to the top of the function.
- function expressions scope is determined by whether or not var or let/const are used and follow the above rules accordingly.
- traditional functions are hoisted to the top of the code block that they are defined in and accessible within that code block and sub blocks.
Different ways to create objects in JavaScript
- Object literals
- Constructor function
- Object.create()
- Class Syntax
Object literal code example
For example:
const myObject = {
key1: value1,
key2: value2,
// ...
};
Constructor function code example
For example:
function MyObject(key1, key2) {
this.key1 = key1;
this.key2 = key2;
}
const myObject = new MyObject(value1, value2);
Object.create() code example
For example:
const proto = {
key1: 'no value',
2: 'no value'
}
const myObject = Object.create(proto);
myObject.key1 = value1;
myObject.key2 = value2;
ES6+ Class Syntax code example
For example:
class MyObject {
constructor(key1, key2) {
this.key1 = key1;
this.key2 = key2;
}
}
const myObject = new MyObject(value1, value2);
“this” keyword behavior in regular functions
- In regular functions, the value of this is determined by how the function is called.
- It usually refers to the object on which the function is invoked,
- or it can be explicitly set using call(), apply(), or bind().
“this” keyword behavior in arrow functions
Arrow functions do not bind their own this value.
Therefore if this is used in an arrow function, it will not refer to the parent scope, rather it will refer to the lexical or ancestral scope of the arrow function.
Methods available for iterating over an object’s properties
- for … in
- Object.keys()
- Object.values()
- Object.entries()
for … in code example
Example:
const aPerson = {
name: "Brad Jones",
age: 44,
gender: "male",
ethnicity: "white",
citizenship: "USA",
};
for (const key in aPerson) {
if (Object.hasOwnProperty.call(aPerson, key)) {
const element = aPerson[key];
console.log(element);
}
}
Object.keys() code example
const keys = Object.keys(object);
keys.forEach((key) => {
const value = object[key];
// Use key and value
});
Object.values() code example
const values = Object.values(object);
values.forEach((value) => {
// Use value
});
Object.entries() code example
For example:
const entries = Object.entries(object);
entries.forEach(([key, value]) => {
// Use key and value
});
How does the envent loop enable asynchronous behavior?
- When an asynchronous task (e.g., network request, setTimeout) is encountered, it is offloaded to the browser’s Web API.
- The event loop continues executing other tasks while waiting for the completion of the asynchronous task.
- Once the asynchronous task completes, a callback is pushed into the event queue.
- The event loop constantly checks the event queue and moves callbacks to the call stack when it’s empty, allowing their execution to continue.
- This mechanism enables JavaScript to perform tasks asynchronously, avoiding blocking the main thread and providing responsiveness to user interactions.
How do you handle asynchronous errors using Promises?
Promises have a .catch() method to handle errors that occur during asynchronous operations.
For Example:
asyncFunction()
.then((result) => {
// Handle success
})
.catch((error) => {
// Handle error
});
How do you handle asynchronous errors using async/await?
Async functions can use try/catch blocks to handle errors.
For Example:
async function myFunction() {
try {
const result = await asyncFunction();
// Handle success
} catch (error) {
// Handle error
}
}
How do you handle asynchronous errors using Callbacks?
Callback functions can check for errors as the first argument passed to the callback.
For Example:
asyncFunction((error, result) => {
if (error) {
// Handle error
} else {
// Handle success
}
});
null
null is an assignment value that represents the intentional absence of any object value.
It is a primitive value that signifies the absence of a value.
undefined
- undefined is a primitive value variables have before they are assigned a value.
- It also represents the value returned by functions that do not explicitly return anything.
Promise
- Promises are objects that representing the eventual completion or failure of an asynchronous operation, and their resulting value.
- Promises have three states:
- pending,
- fulfilled,
- or rejected.
- They are initially in the pending state, then transition to either fulfilled (resolved) with a value or rejected with a reason (error).
async/await
- The async keyword is used to declare an asynchronous function.
- Within an async function, you can use the await keyword to pause the execution and wait for a promise to resolve or reject.
