Javascript

Question 1

What is .toISOString() for

Answer 1

The toISOString() method converts a Date object into a string, using the ISO standard.

The standard is called ISO-8601 and the format is: YYYY-MM-DDTHH:mm:ss.sssZ

Question 2

what is .toLocalString() for

Answer 2

The toLocaleString() method converts a Date object to a string, using locale settings.

The default language depends on the locale setup on your computer.

Question 3

What does CRUD stand for

Answer 3

Create Read update delete

Question 4

Truthy

Answer 4

A truthy value is a non-Boolean value that evaluates to true in a Boolean context

Question 5

Falsy

Answer 5

A falsy value is a non-Boolean value that evaluates to false in a Boolean context

Question 6

conditional operator

Answer 6

Condition ? Expression1 : Expression2

Question 7

Switch Statement

Answer 7

The switch statement evaluates an expression, matching the expression’s value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

Question 8

Local scope

Answer 8

A variable declared inside a function has local scope, so only the function that defines the variable has access to the local variable

Question 9

global scope

Answer 9

A variable declared outside a function has global scope, and all functions have access to a global variable

Question 10

The var Keyword and Scope - inside function

Answer 10

A variable declared inside a function with var has function scope: the variable is accessible anywhere within the function, but not outside

Question 11

let scope

Answer 11

A variable declared inside a function with let has block scope: the variable is accessible only within the enclosing pair of braces

Question 12

What does math.floor() do

Answer 12

Returns a whole integer

Question 13

what does

document.writeln(“<div>test</div>”) do

Answer 13

adds the child to the DOM

Question 14

what does window.location access

Answer 14

is a location object that contains information about the window’s current URL

Question 15

what does window.navigator access

Answer 15

is a navigator object that contains information about the browser

Question 16

what does window.innerHeight and window.innerWidth access

Answer 16

the windows dimensions in pixels

Question 17

what does window.alert() do?

Answer 17

displays an alert dialog box

Question 18

what does window.confirm() do

Answer 18

window.confirm() displays a confirmation dialog box with OK and Cancel buttons

Question 19

what does console.dir() access

Answer 19

displays a JavaScript object to the console. The browser usually supports a method for compactly representing the object. Ex: a hierarchical tree representation allowing a developer to expand and collapse the object contents

Question 20

what does clone node do cloneNode(true)

Answer 20

cloneNode() copies another DOM node along with the node’s children when passed the argument true.

Question 21

createElement()

Answer 21

createElement() creates the requested HTML element. Ex: document.createElement(“a”) creates a new hyperlink DOM node.

Question 22

createTextNode()

Answer 22

createTextNode() creates a node to hold content for a particular HTML element. Ex: document.createTextNode(“stuff”) creates a new text node with the value “stuff”.

Question 23

cloneNode(false)

Answer 23

cloneNode(false) copies another DOM node but excludes the node’s children when passed the argument false.

Question 24

get (getter)

Answer 24

The get syntax binds an object property to a function that will be called when that property is looked up.

Question 25

Lexical Scope

Answer 25

In JavaScript, both const and let variables have lexical scope. Lexical scope means that the scope of a variable is determined by its location in the source code during the lexical analysis phase of the program. Variables declared with const and let adhere to this lexical scoping rule.

const Variables:

Variables declared with const are block-scoped, meaning their scope is limited to the block (enclosed by curly braces) in which they are defined.
Once a const variable is declared and assigned a value, its binding cannot be reassigned.

Question 26

Higher order fuctions

Answer 26

What is a Higher Order Function?
A higher order function is a function that takes one or more functions as arguments, or returns a function as its result.

There are several different types of higher order functions like map and reduce. We will discuss these later in this tutorial. But before that let’s first dive deep into what higher order functions are.

// Callback function, passed as a parameter in the higher order function
function callbackFunction(){
console.log(‘I am a callback function’);
}

// higher order function
function higherOrderFunction(func){
console.log(‘I am higher order function’)
func()
}

higherOrderFunction(callbackFunction);
In the above code higherOrderFunction() is an HOF because we are passing a callback function as a parameter to it.

Question 27

function expressions

Answer 27

The function keyword can be used to define a function inside an expression.

const getRectArea = function (width, height) {
return width * height;
};

console.log(getRectArea(3, 4));
// Expected output: 12

Question 28

block scope

Answer 28

Block scope is a scope in programming that is defined by a pair of curly braces {}. In JavaScript, variables declared with const and let have block scope. This means that the scope of these variables is limited to the block (set of curly braces) in which they are defined.

Question 29

returning functions

Answer 29

The return statement ends function execution and specifies a value to be returned to the function caller.

function getRectArea(width, height) {
if (width > 0 && height > 0) {
return width * height;
}
return 0;
}

console.log(getRectArea(3, 4));
// Expected output: 12

console.log(getRectArea(-3, 4));
// Expected output: 0

Question 30

keyword “this”

Answer 30

A function’s this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called (runtime binding). It can’t be set by assignment during execution, and it may be different each time the function is called. The Function.prototype.bind() method can set the value of a function’s this regardless of how it’s called, and arrow functions don’t provide their own this binding (it retains the this value of the enclosing lexical context).

const test = {
prop: 42,
func: function () {
return this.prop;
},
};

console.log(test.func());
// Expected output: 42

Question 31

adding methods to objects

Answer 31

JavaScript methods are actions that can be performed on objects.

A JavaScript method is a property containing a function definition.

// Create an object
const person = {
firstName: “John”,
lastName: “Doe”,

// Define a method named ‘getFullName’
getFullName: function() {
return ${this.firstName} ${this.lastName};
}
};

// Call the method
const fullName = person.getFullName();
console.log(fullName); // Output: John Doe

Question 32

function scope

Answer 32

Function scope in JavaScript refers to the scope or visibility of variables defined within a function. In other words, variables declared inside a function are only accessible within that function and are not visible outside of it. This concept contrasts with variables declared using var, which can have a broader scope.

Question 33

What two values are printed to the console:

let deadlyAnimal = “Blue-Ringed Octopus”;

function handleAnimal() {
let deadlyAnimal = “Scorpionfish”;
console.log(deadlyAnimal);
}

handleAnimal();
console.log(deadlyAnimal)

Answer 33

Scorpionfish
Blue-Ringed Octopus

Question 34

what is a method

Answer 34

A method is a function that is attached to an object and operates on data stored in the object. Methods are called by prefacing the method with the object. Ex: myArray.method();.

Question 35

When should I use getStaticProps?

Answer 35

You should use getStaticProps if:

The data required to render the page is available at build time ahead of a user’s request

The data comes from a headless CMS

The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situation by using a Middleware to rewrite the path.

Question 36

what is getStaticProps in next.js

Answer 36

If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

Question 37

in next.js can you query data on the server using getStaticProps?

Answer 37

yes you can. you can adjust when the fuction runs and can query data on the server during the build/ see example below:
// posts will be populated at build time by getStaticProps()
export default function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}

// This function gets called at build time on server-side.
// It won’t be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
// Call an external API endpoint to get posts.
// You can use any data fetching library
const res = await fetch(‘https://…/posts’)
const posts = await res.json()

// By returning { props: { posts } }, the Blog component
// will receive posts as a prop at build time
return {
props: {
posts,
},
}
}

Question 38

Can you write server side code directly in next js using getStaticProps?

Answer 38

Yes.

As getStaticProps runs only on the server-side, it will never run on the client-side. It won’t even be included in the JS bundle for the browser, so you can write direct database queries without them being sent to browsers.

This means that instead of fetching an API route from getStaticProps (that itself fetches data from an external source), you can write the server-side code directly in getStaticProps.

Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from getStaticProps. This produces an additional call, reducing performance. Instead, the logic for fetching the data from the CMS can be shared by using a lib/ directory. Then it can be shared with getStaticProps.

running this function serve side allows us to cut out the extra step on calling an api to handle the requests of grabbing posts from our cms improving performance dramatically see bellow how this works:

// pages/blog.js
import { loadPosts } from ‘../lib/load-posts’

// This function runs only on the server side
export async function getStaticProps() {
// Instead of fetching your /api route you can call the same
// function directly in getStaticProps
const posts = await loadPosts()

// Props returned will be passed to the page component
return { props: { posts } }
}

Question 39

What is GraphQL

Answer 39

A query language for your API

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Question 40

how does the var variable act

Answer 40

It’s important to note that var declarations are hoisted to the top of the function or global scope, which means they are processed before the rest of the code. This can lead to unexpected behavior.

Question 41

What is apollo?

Answer 41

Appollo is an api that works with your application in order to impliment and use graphql. https://www.apollographql.com/

Question 42

Whye are these arguments in curley brackets:
import Image from “next/image”;

export const Cover = ({ children, background }) => {
return(
<div className="h-screen text-white bg-slate-800 relative min-h-[400px] flex justify-center items-center">
<Image alt=”cover” src={background} fill className=” mix-blend-soft-light object-cover”/>
<div className=" max-w-5xl z-10">{children}</div>
</div>
)

};

Answer 42

The curly braces {} used in the context of the Cover component’s parameters in your example are a JavaScript feature known as “destructuring assignment”. Specifically, this is an example of “object destructuring”. When used in a function’s parameter list, destructuring allows for directly extracting properties from an object passed as an argument to the function, making the code more concise and readable.

Here’s a breakdown of why and how it’s used in your example:

Traditional Method Without Destructuring
Traditionally, if you didn’t use destructuring, your component definition might look something like this:

jsx
Copy code
export const Cover = (props) => {
return (
<div className="h-screen text-white bg-slate-800 relative min-h-[400px] flex justify-center items-center">
<Image alt=”cover” src={props.background} fill className=” mix-blend-soft-light object-cover”/>
<div className=" max-w-5xl z-10">{props.children}</div>
</div>
);
};
In this version, props is an object that contains all the properties passed to the Cover component. You access these properties by referring to props.background and props.children.

With Destructuring
Using destructuring, the function signature becomes clearer and more direct by specifying which properties the function expects to use:

jsx
Copy code
export const Cover = ({ children, background }) => {
return (
<div className="h-screen text-white bg-slate-800 relative min-h-[400px] flex justify-center items-center">
<Image alt=”cover” src={background} fill className=” mix-blend-soft-light object-cover”/>
<div className=" max-w-5xl z-10">{children}</div>
</div>
);
};
Here, { children, background } is extracting the children and background properties directly from the props object passed to the Cover component. This means inside the function body, you can directly use children and background instead of props.children and props.background.

Question 43

What does JSON.parse() do

Answer 43

takes a string that is a stringafied object and converts it back to an object. for example ‘{name: Trent}’ will be turned into {name: trent}

Question 44

expain what happens when you set a function argument to a value like this:
const gettextAlign = (textAlign = ‘left’) =>{}

Answer 44

this is a default value. wen you create a function you can set a peramiters default value if nothing is provided when the function is called. for example gettextAlign() will asign ‘left’ and gettextAlign(‘right’) will asign “right”

Question 45

why do i need to specify a directory in the tailwind config file if i am injecting dynamic tailwind classes?

Answer 45

Tailwind CSS processes and purges CSS during the build step.

Key Points:
Static vs. Dynamic Classes:

Hardcoded Classes: When you write Tailwind classes directly in your JSX (like <div className="bg-blue-500">), these classes are easily detectable by Tailwind during the build process. Tailwind knows to include these classes in the final CSS output.
Dynamic Classes: If you generate classes dynamically (e.g., using props or a variable), Tailwind can’t automatically identify those classes at build time because it doesn’t know the possible values that might be generated.
Purge Configuration:

Tailwind’s purge feature analyzes your files to determine which classes are actually used. If you don’t specify the directories where you’re using Tailwind classes, it might miss those dynamically generated classes because it doesn’t scan those files.
Why the Directory Matters:

By specifying the directories in your next.config.js, you tell Tailwind to look in those files for any class usage, including the dynamic cases. This helps ensure that all classes, whether hardcoded or generated, are considered when building the CSS.

Question 46

what does the reducer method do?

Answer 46

In JavaScript, the reduce() method is an array method that iterates over each element in an array and accumulates a single value based on a provided reducer function.

an example would be iterating through an arra an accumulating all of the values together like this:
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0); // 0 is the initial value of the accumulator

console.log(sum); // Output: 15

Question 47

how do you import and export function in es6

Answer 47

export:

you can export inline the function you want to export like this:
export function functionName(){ }

to import you can iumport like css with the import keyword like this:

import { functionName } from “/path_to_file_With_Function”

Question 48

how do you export and import functions pre es6

Answer 48

you nered to export using module.exports and you need to use a variable with that is assigned to the require function.