# Odin Project- Q & A

## Shorthand

**[1. Introduction](##1.-Introduction)**
**[2. Foundations course](##2.-Foundations-course)**

## 1. Introduction

These are the answers to the questions presented in the Odin Projects what have you learned portions. I began doing this document during the Box Model- part, which is the reason this doesn't start from the beginning.

## 2. Foundations course
**[2.1 CSS](###2.1CSS)**
 **[2.1.1 Box Model](####2.1.1-The-Box-Model)**
 **[2.1.2 Block and Inline](####2.1.2-Block-and-Inline)**
 **[2.1.3 Introduction to Flexbox](####2.1.3-Introduction-to-Flexbox)**
 **[2.1.4 Growing and Shrinking](####2.1.4-Growing-and-Shrinking)**
 **[2.1.5 Axes](####2.1.5-Axes)**
 **[2.1.6 Alignment](####2.1.6-Alignment)**

**[2.2 Javascript](###2.2Javascript)**
 **[2.2.1 Introduction](####2.2.1-Introduction)**
 **[2.2.2 Introduction 2](####2.2.2-Introduction-2)**
 **[2.2.3 Developer tools](####2.2.3-Developer-tools)**
 **[2.2.4 Function introduction](####2.2.4-Function-introduction)**
 **[2.2.5 Problemsolving](####2.2.5-Problemsolving)**
 **[2.2.6 Understanding errors](####2.2.6-Understanding-errors)**
 **[2.2.7 Clean code](####2.2.7-Clean-code)**
 **[2.2.8 Installing Node.js](####2.2.8-Installing-Node.js)**
 **[2.2.9 Fundamentals part4](####2.2.9-Fundamentals-part4)**
 **[2.2.10 DOM Manipulation and Events](####2.2.10-DOM-Manipulation-and-Events)**
 **[2.2.11 Intro to Objects](####2.2.11-Intro-to-Objects)**

### 2.1 CSS
#### 2.1.1 The Box Model

**- From inside to outside, what is the order of box-model properties?**

element, padding, border, margin

**- What does the box-sizing CSS property do?**

with box-sizing it is possible to define which parts of the box counts as inside of the box. With border-box padding and border are also counted as part of the box, so their width or height won't make the box larger

**- What is the difference between the standard and alternative box model?**

standard box's size can be altered with border and padding values. Alternative box is fixed size, so border and padding values are part of the inside box.

**- Would you use margin or padding to create more space between 2 elements?**

Margin, padding creates space inside the box.

**- Would you use margin or padding to create more space between the contents of an element and its border?**

Padding, same reason as above.

**- Would you use margin or padding if you wanted two elements to overlap each other?**

Margin. In a way, margin moves the whole element. Also padding cannot have negative values.

**- How do you set the alternative box model for all of your elements?**

This is considered to be one of the best standards as of writing (9/29/23)

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

**- How do you center an element horizontally?**

By setting Margin for left and right as auto.

[To the top](##1.-Introduction)

#### 2.1.2 Block and Inline

**-What is the difference between a block element and an inline element?**

In a simple way, block elements will start on a new line and inline elements will stay on the line of the previous block element

**-What is the difference between an inline element and an inline-block element?**

inline elements box will be the size of it's content. Using padding, margin or border won't expand the size of it's box. Example: a padding of 50px is added to a certain word inside a paragraph by using span-element. The padding of that span will now cover 50px from every side of this word and possibly hide other words underneath it.

Inline-block elements box will respect padding, margin and border sizes, but still be positioned on the same line as the parent block element.

**-Is an h1 block or inline?**

Block

**-Is button block or inline?**

Inline

**-Is div block or inline?**

Block

**-Is span block or inline?**

Inline

[To the top](##1.-Introduction)

#### 2.1.3 Introduction to Flexbox

**What’s the difference between a flex container and a flex item?**

Flex-container is the element that in a way is a box that surrounds the area where flex-items can be arranged inside. Flex-items are child elements inside a flex-container. Flex-items can also be flex-containers so their child elements can be arranged using different rulesets within the flex-item / container.

**How do you create a flex item?**

First an element that surrounds the flex item has to be declared as flex-container. This will automatically mean that any child element within the container element is a flex-item.

Basic code:

flex-container{
    display: flex
}

flex-item{
    flex: 1;
}

[To the top](##1.-Introduction)

#### 2.1.4 Growing and Shrinking

**What are the 3 values defined in the shorthand flex property (e.g. flex: 1 1 auto**

In order they are flex-grow, flex-shrink and flex-basis.

**What are the 3 defined values for the flex shorthand flex:auto?**

flex: auto is a shorthand for flex: 1 1 auto.
using longhand it would be

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

[To the top](##1.-Introduction)

#### 2.1.5 Axes

**How do you make flex items arrange themselves vertically instead of horizontally?**
By changing the flex-direction to column.

flex-container{
    flex-direction: column;
}

**In a column flex-container, what does flex-basis refer to?**

To the items height property

**In a row flex-container, what does flex-basis refer to?**

To the items width property

**Why do the previous two questions have different answers?**

Flex-direction changes the main axis of the flex-items within the container, which is what flex-basis also refers to.

[To the top](##1.-Introduction)

#### 2.1.6 Alignment

**What is the difference between justify-content and align-items?**

Justify-content is used to move items in the container on the main axis. Fe. If Justify-content is set to start, all of the items inside the container will be pushed to the start of the container and they will take the space they require. Rest of the container is then empty space, if all of the space is not taken.

Align-items will move items in the container on the cross-axis. Fe. In a default flexbox, using align-items: center, all of the items are located in a way, that their center is on a same line as the center of the containers horizontal line.

**How do you use flexbox to completely center a div inside a flex container?**

By setting both justify-content and align-items to center.

**What’s the difference between justify-content: space-between and justify-content: space-around?**

Space-between will push items on the edges to the start and end of the container. In space-around all of the items will have a certain unit on both sides of the item. These empty spaces are also in the start and end of the flex-container. If there are two items next to each other, they will have their empty spaces added to create the space.

[To the top](##1.-Introduction)

### 2.2 Javascript
[To the top](##1.-Introduction)

#### 2.2.1 Introduction

New lessons:

1) In browsers console, it is possible to run javascript commands, that will be added to the code during runtime. Naturally these won't be saved in to the actual scriptfile, but browsers memory will remember them.
2) With any other operator than "+", Javascript can treat numbers inside a string as number operands. FE: x = "10" / "5" // x will be 2
3) Comparing two JavaScript objects always returns false.

Important notes:

1) I've known this for a long time, but it is still an important reminder. In Javascript "+" works in two ways. When there are strings involved, + works as concat. With numbers it will work as normal arithmetic operator.
1a) In case there are multiple attributes being used in a single line divided by multiple + operators, operation starts from left to right. This means that if there is an actual arithmetic operation in the beginning, Javascript will do the math instead of concat. FE. x = 10 + 20 + "30"; x will be 3030.

**Name the three ways to declare a variable**

The three ways are let, const and var. Let works in the scope it was declared in and the value can be changed. Const works in a scope it was declared in and it's value cannot be changed. Var works in the whole scope and it's value can be changed.

**Which of the three variable declarations should you avoid and why?**

Nowadays using Var should be avoided, as it's scope is the whole of program.

**What rules should you follow when naming variables?**

Variable names should represent well enough what they mean. There are also different versions of using uppercase first letters, if the variable contains multiple words.

**What happens when you add numbers and strings together?**

It depends on how many different operands there are. Basically when the next operand is a string, everything before that will be concatted with the string. FE. x = 10 + 15 + "25"; // output: 2525

**How does the Modulo (%), or Remainder, operator work?**

First the operands are divided and the return value will be the remainder of that operation: FE. x = 3 % 2; // output: 1

**Explain the difference between == and ===.**

=== Is a strict comparison, so it will take in to account also the datatype. FE:

let a = 10;
let b = "10"; 

(a == b) ? console.log("true") : console.log("false"); // Outputs true

(a === b) ? console.log("true") : console.log("false"); // outputs false

**When would you receive a NaN result?**

If one of the operands is not a number or cannot be converted in to a number.

**How do you increment and decrement a number?**

Using ++ for increment and - - for decrement.

**Explain the difference between prefixing and postfixing increment/decrement operators.**

Either operator is a shorthand for an operation and depending on which side it is, the operation is a bit different. In a way they can be written as.

x++ = x = x + 1;
++x = (x = x + 1);

It is easier to show this in code.

let c = 1;

//prefixing
let prefix = ++c; // prefix = (c = c+1);
console.log(prefix); // output: 2
console.log(c); // output: 2

//postfixing
c = 1;
let postfix = c++; // postfix = c = c + 1;
console.log(postfix); // output: 1
console.log(c); // output: 2

//not using prefix shorthand
let test = (c = c + 1);
console.log(c + ", " + test); // output: 3, 3 

**What is operator precedence and how is it handled in JS?**

Operator precedence means that some operators are calculated before some other operands. Basic math precendences are in effect in javascript, so in short. () > */ > +-

**How do you access developer tools and the console?**

This depends on the browser being used. I am using Chrome, so I right-click on a page and press "inspect". From there the console tab can be chosen.

There is also a shorthand CTRL-Shift-J. [I for devtools]

**How do you log information to the console?**

console.log(content to be logged);

**What does unary plus operator do to string representations of integers? eg. +”10”**

It will try to turn the datatype of the value inside the string in to a number. Similar to Number(string);

[To the top](##1.-Introduction)

#### 2.2.2 Introduction 2

New things:

1) Not entirely new thing, but a good refresher was using backticks. Backticks allow embedding Javascript in to the strings. When there are multiple variables that are added to a string, using backticks will make the code more readable.

In this example, we can see that the string that is formed is literally what has been written inside the backticks.

const greeting = "Hello";
const name = "Juho";
console.log(`${greeting}, ${name}`); // "Hello, Juho"

When using backticks, embedded code is written inside ${}.

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
  (score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

Backticks also respect linebreaks / multiline strings

const newline = `One day you finally knew
what you had to do, and began,`;
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

**Assignment screenshots:**
Enter a number:
Follow:
Math:
Troubleshooting:

**Knowledge check:**

**What are the eight data types in JavaScript?**

number, bigint, string, boolean, null, undefined, object, symbol

**Which data type is NOT primitive?**

Object, as it stores more data than just one attribute.

**What is the relationship between null and undefined?**

In a way both resemble a value that is "nothing". Null means that the value is literally nothing or something unknown. Undefined means that the variable has been declared, but not given any value

**What is the difference between single, double, and backtick quotes for strings?**

Single and double quotes are for creating basic strings. Backticks can be used to embed javascript in to the string.

**What is the term for joining strings together?**

Concatenate strings.

**Which type of quote lets you embed variables/expressions in a string?**

Backtick quotes.

**How do you embed variables/expressions in a string?**

Code can be embedded inside curly brackets when using ${} Inside the backtick quote.

**How do you use escape characters in a string?**

By adding \ infront of the character.

**What is the difference between the slice/substring/substr string methods?**

Slice can use negative values as it's parameters. It will then start counting from the end of the string.
Substring interprets negative values as 0, and always start from the beginning.
Substr doesn't have end point. Instead it is given a numeric value for how many characters should be sliced.

**What are the three logical operators, and what do they stand for?**

AND: condition is met if all of the values are the same
OR: condition is passed if one of the operations is true
NOT: condition is passed if one of the operations is not the operands value

**What are the comparison operators?**

"==" Loosely eguals
"===" Strictly eguals
">,<" Greater or lower than. Adding = will add "Eguals or" 
"!=" Loosely not egual
"!==" Strictly not egual

**What are truthy and falsy values?**

Falsy values are values that default to false when converted to a boolean. These are 0, "", null, undefined and NaN.

Other values can be considered as truthy.

**What are the falsy values in JavaScript?**

0, "", null, undefined and NaN.

**What are conditionals?**

conditionals are kind of logical ports that will control how the program is executed.

**What is the syntax for an if/else conditional?**

if(condition_is_true){
    Executed when true
}
else{
    Executed when false
}

**What is the syntax for a switch statement?**

switch(x){
        case something1:
            x was something1
            break;
        case something2:
            x was something2
            break;
        
        -- any number of cases --
        
        // Finally
        default:
            x was something different
            break;
}

**What is the syntax for a ternary operator?**

condition ? execute this if true : execute this if false;

**What is nesting?**

Nesting is having conditionals inside conditionals.

Example:

let a = 1;
let b = 2;

if(a === 1){
    //This is a nested conditional
    if(a == b){
        console.log("A and B are the same")
    }
    else{
        console.log("A and B are not the same");
    }
}
else{
    console.log("A wasn't 1")
}

[To the top](##1.-Introduction)

#### 2.2.3 Developer tools

This section contained a lot of helpful information that I can't really subtract in to a smaller package. The information in this section is more of something that will be usable, when the use-case happens.For now it is better to know generally what kind of options are available in the DevTools, but not memorize everything in this moment.

**Knowledge check:**

**How do you open developer tools?**

There are three ways to open DevTools.
1) From the menus
2) Right-click on page and select inspect
3) Keyboard shortcut CTRL-Shift-C

**How do you change screen size of a website using developer tools?**

By activating device toolbar from DevTools (upper left corner). Keyboard shortcut is CTRL-Shift-M. When this mode is opened, there are options to change screen size in multiple different ways.

**What is a breakpoint?**

Breakpoint is a point in the code where it's execution is paused. This is helpful for debugging purposes as it is possible to see what values variables might have and if there are any errors.

**How do you set a breakpoint?**

Chrome DevTools have multiple ways of setting breakpoints, so listing all of the possibilities would require an essay. [This](https://developer.chrome.com/docs/devtools/javascript/breakpoints/) link lists all of the possibilities of creating breakpoints.

For now the main ways of making breakpoints are
1) Just clicking on the line of code where the execution should stop
2) Adding breakpoint for a certain event listener. In the material it was added to "click"- event.

[To the top](##1.-Introduction)

#### 2.2.4 Function introduction

This topic was pretty much a reminder section for me, as I am fairly familiar with functions in general and in Javascript.

**Knowledge check**

**What are functions useful for?**

When some block of a code is repeated multiple times it should be usually migrated to a function

**How do you invoke a function?**

By calling the functions name with parenthesis at the end. If there are parameters, they'll be written inside the parenthesis

**What are anonymous functions?**

Anonymous functions are functions without a given name. They are usually used as parameters for other functions, as they are executed within other functions, which is why they don't require a specific name.

**What is function scope?**

Function scope is the block of code in which certain variables can be used. If a variable is declared inside a function, it cannot be used outside of that function. Variables that are defined in the global scope can be used within functions.

**What are return values?**

In majority of cases functions will return some data depending on what the purpose of the function is. That data is called the return value.

**What are arrow functions?**

Arrow functions are a way to write anonymous functions in a more readable way.

[To the top](##1.-Introduction)

#### 2.2.5 Problemsolving

During this section I did a few problemsolving tasks that were mentioned in the texts. One was made straight in to a webbrowser and one as a complete javascript file, which is in the github (FindThirdHighest).

There was also a YouTube- video that I watched during this section: [Link](https://www.youtube.com/watch?v=azcrPFhaY9k)

**Knowledge check**

**What are the three stages in the problem solving process?**

1) Understanding the problem
2) Planning
3) Pseudocoding and turning creating the solution in to smaller pieces

**Why is it important to clearly understand the problem first?**

It is not possible to create a complete solution to a problem that is not understood.

**What can you do to help get a clearer understanding of the problem?**

Try to reword, rephrase and/or draw the problem in your way of thinking. This can be also done physically in to a piece of paper or in a word processor or in any helping way.

Problem is usually then understood when it can be passed on to others in plain english.

**What are some of the things you should do in the planning stage of the problem solving process?**

Chop the problem in to smaller pieces and use pseudocode to write a plain version of how the program works.

**What is an algorithm?**

Algorithm is the whole solution from beginning to finish to the problem. Algorithm contains all the necessary steps in plain english that the program requires to do.

**What is pseudocode?**

Pseudocode is a "generalization" language that can be used to describe the logic of a program without using any specific programming languages syntax. Any programmer or mathematician should be able to grasp the idea behind the logic of the program with any (or none) programming language background from pseudocode.

**What are the advantages of breaking a problem down and solving the smaller problems?**

Breaking a problem down to smaller pieces will help with finding the solutions to smaller specific problems rather than trying to tackle the whole problem as a big chunk. Reaching small solutions during the process will help with the flow of developing the whole program.

[To the top](##1.-Introduction)

#### 2.2.6 Understanding errors

New lessons:

1) When facing TypeError, it is important to take it with a face value. This means that the error has something to do with the type you are dealing with. The error could be calling a known function, but that function doesn't exist in that types function list. In the examples this was shown with this snippet, which shows that trying to use push() causes type error, because strings do not have push()-function.

const str1 = "Hello";
const str2 = "World!";
const message = str1.push(str2);

**Knowledge check**

**What are three reasons why you may see a TypeError?**

1) Trying to do an operation that doesn't belong to that type
2) Trying to do an operation using wrong type
3) Trying to modify a constant value

MDN's official listing is:

- an operand or argument passed to a function is incompatible with the type expected by that operator or function;
- or when attempting to modify a value that cannot be changed;
- or when attempting to use a value in an inappropriate way.

**What is the key difference between an error and a warning?**

An error will stop the programs execution. Warnings usually let the program continue execution, but they usually are in indication of something that can cause future problems.

**What is one method you can use to resolve an error?**

Errors usually have pretty good amount of information about why it they've been thrown. Errors will tell the type of error and where the error happened in the source code. If in doubt, Google

[To the top](##1.-Introduction)

#### 2.2.7 Clean code

**Knowledge check**

**Why is it important to write clean code?**

Clean code will help people, including the one who wrote it, to review the code much easier even after a lot of time has passed since writing it. Clean code is a must when working with teams to save time and trouble.

**Name 5 clean code principles previously mentioned**

1) Use descriptive variable names (and camelCase)
2) Use intendation (personal preference or team standard)
3) Visualize the flow of program structure (code blocks, line breaks)
4) Use comments to describe what certain parts are supposed to do
5) Avoid making long and big functions. Usually the can be broken down to smaller functions

**What is the difference between good comments and bad comments?**

Good comments will tell anyone reading the code what certain parts are supposed to do. This way even people who don't know anything about coding languages can visualize what certain parts of the code do in order to provide a solution to the problem it tackles.

Bad comments are non-descriptive, non-informative or repeat information otherwise available.

[To the top](##1.-Introduction)

#### 2.2.8 Installing Node.js

No knowledge check on this one. As I am using Windows the installation process was a bit different.

I had a previous installation on my machine, so I wanted to update it. Windows doesn't have a formal version of NVM, but there is a 3rd party application for it. I downloaded that and updated my Node.

Afternote: I had to reinstall NVM and node afterwards as this NVM doesn't like it when there is a previous node installation on machine, even tho it tries to include it. I deleted both NVM and node and made a clean installation using only NVM this time.

[To the top](##1.-Introduction)

#### 2.2.9 Fundamentals part4

I'll copy and paste the new lessons from Assignment- diary in to here.

New lessons

1) Javascript functions have an invisible argument list, that can have "infinite" number of arguments. It is accessed by numeral indices and arguments won't have to be declared in the function declaration. Arguments works as an array, so normal array functions work.

const arrayWithMultipleArguments = function(){
    let firstArgument = arguments[0];
}

2) Type comparison can be done by doing. [Type-table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#description)

    if(typeof variable == "type-in-string")     

**Knowledge check**

**What is an array?**

Array is a javascript object that can store multiple values that are stored in to their own index.

**What are arrays useful for?**

Arrays are useful when storing multiple different attributes with the same variable style. FE.

names = ['Alex', 'John', 'Henry'];

**How do you access an array element?**

Array elements are accessed by using their index numbers.

**How do you change an array element?**

Array elements can be changed by stating which array element is accessed and giving it a new value.

**What are some useful array properties?**

One of the most usable is the array.length which gives the number of elements that the array stores.

**What are some useful array methods?**

Very usable ones are sort(), splice(), pop(), push(). [List](https://www.w3schools.com/js/js_array_methods.asp) of array methods

**What are loops useful for?**

Loops are useful when a same block of code is used multiple times in a row.

**What is the break statement?**

Break statement breaks the execution of a loop completely.

**What is the continue statement?**

Continue statement breaks off the current iteration of the loop and goes on to the next one.

**What is the advantage of writing automated tests?**

Automated tests can be used to make sure that the code can handle all kinds of different use-cases, even the most absurd ones. Automated tests can also include deliberate mistakes for checking out error handling.

[To the top](##1.-Introduction)

#### 2.2.10 DOM Manipulation and Events

This one was one of the bigger sections in this project, so a lot of topics to cover.

**Knowledge check**

**What is the DOM?**

Document Object Model, which shows all of the nodes in a tree view. DOM "evolves" during websites runtime as it is the real time representation of everything that is within the HTML document at that time.

Nodes are a general name for all of the elements and text that are in the DOM at given time.

**How do you target the nodes you want to work with?**

Currently the best approaches are by using parentNode.querySelector("css-style-selector") or parentNode.querySelectorAll("css-style-selector").

By default "document" is a preselected "parent node", so searching for the first node to be accessed the code would be

document.querySelector("css-style-selector");

**How do you create an element in the DOM?**

const newElement = document.createElement("string-of-element-shorthand")

**How do you add an element to the DOM?**

Best practice is to append elements in to their parent node.

const firstDiv = document.querySelector(".firstDiv");

const addedHeader = document.createElement("h1");

firstDiv.appendChild(addedHeader);

**How do you remove an element from the DOM?**

element.remove();

**How can you alter an element in the DOM?**

**When adding text to a DOM element, should you use textContent or innerHTML? Why?**

textContent as using innerHTML makes it possible to add HTML-content in to the field. This can create a risk as someone could be able to add their own HTML-code, including scripts, in to the field. textContent will only add basic strings with no possibility of turning it to HTML or scriptfiles.

**Where should you include your JavaScript tag in your HTML file when working with DOM nodes?**

If there are no functions used to wait for DOM to load before loading javascript, it should be added to the very end of HTML file before closing HTML. There are also other options to include the file in other parts of the HTML file too, but they are their own topic.

**How do “events” and “listeners” work?**

Events are certain moments that can happen during the runtime of a script. Events can be pretty much anything from changes to DOM to user given inputs, such as mouse or keyboard clicks

Listeners are added to elements to wait for certain events so that additional code could be run.

**What are three ways to use events in your code?**

1) Add the event to HTML file as inline declaration
2) Add the event as an attribute to the element in script
3) Add an event listener to an element

**Why are event listeners the preferred way to handle events?**

Event listeners are easiest to read / format syntaxwise. They are declared in the script and they won't alter the DOM, as the event is not added to the HTML element.

**What are the benefits of using named functions in your listeners?**

Named functions can be reused if other parts of the program needs similar functionality. Named functions will also improve the readability and flow of the code.

**How do you attach listeners to groups of nodes?**

Listeners can be added to

**What is the difference between the return values of querySelector and querySelectorAll?**

querySelector returns a reference to an element. querySelectorAll returns a nodelist of all the nodes that match the selector

**What does a “nodelist” contain?**

Nodelist is an object that contains all the nodes found by using querySelectorAll. Nodelist is not an array, eventho it is very similar to it. Nodelist can be turned in to an array:

const arrayNodeList = Array.from(nodelist);

**Explain the difference between “capture” and “bubbling”.**

Capture means that when an event occurs, the program will start looking from top (body -> nextNestedElement -> next NestedElement) to bottom where the event has happened. At this point, if there is a function that should be invoked, has not been invoked yet.

Bubbling means going from bottom to top through the capture list and fire functions in all of those elements that have a function attached to that specific event.

Propagation means that it allows events to "bubble up". By telling the program to stop propagation inside the function invoked by the event, only the element that was clicked will invoke the function.

[To the top](##1.-Introduction)

#### 2.2.11 Intro to Objects

New lesson 1:

There will be no errors if a property doesn't exist. Non-existing propertys return undefined. There are two ways to check if a property exists, but using "in" is a better way if it is possible for a property to have "undefined" as value. The ways to test if a property exists are these:

let user = {};

alert( user.noSuchProperty === undefined ); // true means "no such property"

// OR

let user = { name: "John", age: 30 };

alert( "age" in user ); // true, user.age exists
alert( "blabla" in user ); // false, user.blabla doesn't exist

Cool lesson 1:

A multitool to access any property in an object is by using square brackets:

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

Cool lesson 2:

More about square brackets in using for.. in Loop.

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // values for the keys
  alert( user[key] ); // John, 30, true
}

[To the top](##1.-Introduction)