• 🇸🇦 العربية
• 🇪🇬 اللغة العامية
• 🇧🇦 Bosanski
• 🇩🇪 Deutsch
• 🇪🇸 Español
• 🇫🇷 Français
• 🇮🇩 Indonesia
• 🇮🇹 Italiano
• 🇯🇵 日本語
• 🇰🇷 한국어
• 🇳🇱 Nederlands
• 🇵🇱 Polski
• 🇧🇷 Português Brasil
• 🇷o Română
• 🇷🇺 Русский
• 🇽🇰 Shqip
• 🇹🇭 ไทย
• 🇹🇷 Türkçe
• 🇺🇦 Українська мова
• 🇻🇳 Tiếng Việt
• 🇨🇳 简体中文
• 🇹🇼 繁體中文

Within the function, we first declare thename variable with thevar keyword. This means that the variable gets hoisted (memory space is set up during the creation phase) with the default value ofundefined, until we actually get to the line where we define the variable. We haven't defined the variable yet on the line where we try to log thename variable, so it still holds the value ofundefined.

Variables with thelet keyword (andconst) are hoisted, but unlikevar, don't getinitialized. They are not accessible before the line we declare (initialize) them. This is called the "temporal dead zone". When we try to access the variables before they are declared, JavaScript throws aReferenceError.

Because of the event queue in JavaScript, thesetTimeout callback function is calledafter the loop has been executed. Since the variablei in the first loop was declared using thevar keyword, this value was global. During the loop, we incremented the value ofi by1 each time, using the unary operator++. By the time thesetTimeout callback function was invoked,i was equal to3 in the first example.

In the second loop, the variablei was declared using thelet keyword: variables declared with thelet (andconst) keyword are block-scoped (a block is anything between{ }). During each iteration,i will have a new value, and each value is scoped inside the loop.

Note that the value ofdiameter is a regular function, whereas the value ofperimeter is an arrow function.

With arrow functions, thethis keyword refers to its current surrounding scope, unlike regular functions! This means that when we callperimeter, it doesn't refer to the shape object, but to its surrounding scope (window for example).

Since there is no valueradius in the scope of the arrow function,this.radius returnsundefined which, when multiplied by2 * Math.PI, results inNaN.

The unary plus tries to convert an operand to a number.true is1, andfalse is0.

The string'Lydia' is a truthy value. What we're actually asking, is "Is this truthy value falsy?". This returnsfalse.

In JavaScript, all object keys are strings (unless it's a Symbol). Even though we might nottype them as strings, they are always converted into strings under the hood.

JavaScript interprets (or unboxes) statements. When we use bracket notation, it sees the first opening bracket[ and keeps going until it finds the closing bracket]. Only then, it will evaluate the statement.

mouse[bird.size]: First it evaluatesbird.size, which is"small".mouse["small"] returnstrue

However, with dot notation, this doesn't happen.mouse does not have a key calledbird, which means thatmouse.bird isundefined. Then, we ask for thesize using dot notation:mouse.bird.size. Sincemouse.bird isundefined, we're actually askingundefined.size. This isn't valid, and will throw an error similar toCannot read property "size" of undefined.

In JavaScript, all objects interact byreference when setting them equal to each other.

First, variablec holds a value to an object. Later, we assignd with the same reference thatc has to the object.

When you change one object, you change all of them.

new Number() is a built-in function constructor. Although it looks like a number, it's not really a number: it has a bunch of extra features and is an object.

When we use the== operator (Equality operator), it only checks whether it has the samevalue. They both have the value of3, so it returnstrue.

However, when we use the=== operator (Strict equality operator), both valueand type should be the same. It's not:new Number() is not a number, it's anobject. Both returnfalse.

ThecolorChange function is static. Static methods are designed to live only on the constructor in which they are created, and cannot be passed down to any children or called upon class instances. Sincefreddie is an instance of class Chameleon, the function cannot be called upon it. ATypeError is thrown.

It logs the object, because we just created an empty object on the global object! When we mistypedgreeting asgreetign, the JS interpreter actually saw this as:

1. global.greetign = {} in Node.js
2. window.greetign = {},frames.greetign = {} andself.greetign in browsers.
3. self.greetign in web workers.
4. globalThis.greetign in all environments.

In order to avoid this, we can use"use strict". This makes sure that you have declared a variable before setting it equal to anything.

This is possible in JavaScript, because functions are objects! (Everything besides primitive types are objects)

A function is a special type of object. The code you write yourself isn't the actual function. The function is an object with properties. This property is invocable.

In JavaScript, functions are objects, and therefore, the methodgetFullName gets added to the constructor function object itself. For that reason, we can callPerson.getFullName(), butmember.getFullName throws aTypeError.

If you want a method to be available to all object instances, you have to add it to the prototype property:

Person.prototype.getFullName=function(){return`${this.firstName}${this.lastName}`;};

Forsarah, we didn't use thenew keyword. When usingnew,this refers to the new empty object we create. However, if you don't addnew,this refers to theglobal object!

We said thatthis.firstName equals"Sarah" andthis.lastName equals"Smith". What we actually did, is definingglobal.firstName = 'Sarah' andglobal.lastName = 'Smith'.sarah itself is leftundefined, since we don't return a value from thePerson function.

During thecapturing phase, the event goes through the ancestor elements down to the target element. It then reaches thetarget element, andbubbling begins.

All objects have prototypes, except for thebase object. The base object is the object created by the user, or an object that is created using thenew keyword. The base object has access to some methods and properties, such as.toString. This is the reason why you can use built-in JavaScript methods! All of such methods are available on the prototype. Although JavaScript can't find it directly on your object, it goes down the prototype chain and finds it there, which makes it accessible for you.

JavaScript is adynamically typed language: we don't specify what types certain variables are. Values can automatically be converted into another type without you knowing, which is calledimplicit type coercion.Coercion is converting from one type into another.

In this example, JavaScript converts the number1 into a string, in order for the function to make sense and return a value. During the addition of a numeric type (1) and a string type ('2'), the number is treated as a string. We can concatenate strings like"Hello" + "World", so what's happening here is"1" + "2" which returns"12".

Thepostfix unary operator++:

1. Returns the value (this returns0)
2. Increments the value (number is now1)

Theprefix unary operator++:

1. Increments the value (number is now2)
2. Returns the value (this returns2)

This returns0 2 2.

If you use tagged template literals, the value of the first argument is always an array of the string values. The remaining arguments get the values of the passed expressions!

When testing equality, primitives are compared by theirvalue, while objects are compared by theirreference. JavaScript checks if the objects have a reference to the same location in memory.

The two objects that we are comparing don't have that: the object we passed as a parameter refers to a different location in memory than the object we used in order to check equality.

This is why both{ age: 18 } === { age: 18 } and{ age: 18 } == { age: 18 } returnfalse.

The rest parameter (...args) lets us "collect" all remaining arguments into an array. An array is an object, sotypeof args returns"object"

With"use strict", you can make sure that you don't accidentally declare global variables. We never declared the variableage, and since we use"use strict", it will throw a reference error. If we didn't use"use strict", it would have worked, since the propertyage would have gotten added to the global object.

eval evaluates code that's passed as a string. If it's an expression, like in this case, it evaluates the expression. The expression is10 * 10 + 5. This returns the number105.

The data stored insessionStorage is removed after closing thetab.

If you usedlocalStorage, the data would've been there forever, unless for examplelocalStorage.clear() is invoked.

With thevar keyword, you can declare multiple variables with the same name. The variable will then hold the latest value.

You cannot do this withlet orconst since they're block-scoped and therefore can't be redeclared.

All object keys (excluding Symbols) are strings under the hood, even if you don't type it yourself as a string. This is whyobj.hasOwnProperty('1') also returns true.

It doesn't work that way for a set. There is no'1' in our set:set.has('1') returnsfalse. It has the numeric type1,set.has(1) returnstrue.

If you have two keys with the same name, the key will be replaced. It will still be in its first position, but with the last specified value.

The base execution context is the global execution context: it's what's accessible everywhere in your code.

Thecontinue statement skips an iteration if a certain condition returnstrue.

String is a built-in constructor, that we can add properties to. I just added a method to its prototype. Primitive strings are automatically converted into a string object, generated by the string prototype function. So, all strings (string objects) have access to that method!

Object keys are automatically converted into strings. We are trying to set an object as a key to objecta, with the value of123.

However, when we stringify an object, it becomes"[object Object]". So what we are saying here, is thata["[object Object]"] = 123. Then, we can try to do the same again.c is another object that we are implicitly stringifying. So then,a["[object Object]"] = 456.

Then, we loga[b], which is actuallya["[object Object]"]. We just set that to456, so it returns456.

We have asetTimeout function and invoked it first. Yet, it was logged last.

This is because in browsers, we don't just have the runtime engine, we also have something called aWebAPI. TheWebAPI gives us thesetTimeout function to start with, and for example the DOM.

After thecallback is pushed to the WebAPI, thesetTimeout function itself (but not the callback!) is popped off the stack.

Now,foo gets invoked, and"First" is being logged.

foo is popped off the stack, andbaz gets invoked."Third" gets logged.

The WebAPI can't just add stuff to the stack whenever it's ready. Instead, it pushes the callback function to something called thequeue.

This is where an event loop starts to work. Anevent loop looks at the stack and task queue. If the stack is empty, it takes the first thing on the queue and pushes it onto the stack.

bar gets invoked,"Second" gets logged, and it's popped off the stack.

The deepest nested element that caused the event is the target of the event. You can stop bubbling byevent.stopPropagation

If we clickp, we see two logs:p anddiv. During event propagation, there are 3 phases: capturing, targeting, and bubbling. By default, event handlers are executed in the bubbling phase (unless you setuseCapture totrue). It goes from the deepest nested element outwards.

With both, we can pass the object to which we want thethis keyword to refer to. However,.call is alsoexecuted immediately!

.bind. returns acopy of the function, but with a bound context! It is not executed immediately.

ThesayHi function returns the returned value of the immediately invoked function expression (IIFE). This function returned0, which is type"number".

FYI:typeof can return the following list of values:undefined,boolean,number,bigint,string,symbol,function andobject. Note thattypeof null returns"object".

There are 8 falsy values:

• undefined
• null
• NaN
• false
• '' (empty string)
• 0
• -0
• 0n (BigInt(0))

Function constructors, likenew Number andnew Boolean are truthy.

typeof 1 returns"number".typeof "number" returns"string"

When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value ofundefined, but you will see something like:

[1, 2, 3, empty x 7, 11]

depending on where you run it (it's different for every browser, node, etc.)

Thecatch block receives the argumentx. This is not the samex as the variable when we pass arguments. This variablex is block-scoped.

Later, we set this block-scoped variable equal to1, and set the value of the variabley. Now, we log the block-scoped variablex, which is equal to1.

Outside of thecatch block,x is stillundefined, andy is2. When we want toconsole.log(x) outside of thecatch block, it returnsundefined, andy returns2.

JavaScript only has primitive types and objects.

Primitive types areboolean,null,undefined,bigint,number,string, andsymbol.

What differentiates a primitive from an object is that primitives do not have any properties or methods; however, you'll note that'foo'.toUpperCase() evaluates to'FOO' and does not result in aTypeError. This is because when you try to access a property or method on a primitive like a string, JavaScript will implicitly wrap the primitive type using one of the wrapper classes, i.e.String, and then immediately discard the wrapper after the expression evaluates. All primitives except fornull andundefined exhibit this behavior.

[1, 2] is our initial value. This is the value we start with, and the value of the very firstacc. During the first round,acc is[1,2], andcur is[0, 1]. We concatenate them, which results in[1, 2, 0, 1].

Then,[1, 2, 0, 1] isacc and[2, 3] iscur. We concatenate them, and get[1, 2, 0, 1, 2, 3]

null is falsy.!null returnstrue.!true returnsfalse.

"" is falsy.!"" returnstrue.!true returnsfalse.

1 is truthy.!1 returnsfalse.!false returnstrue.

It returns a unique id. This id can be used to clear that interval with theclearInterval() function.

A string is an iterable. The spread operator maps every character of an iterable to one element.

Regular functions cannot be stopped mid-way after invocation. However, a generator function can be "stopped" midway, and later continue from where it stopped. Every time a generator function encounters ayield keyword, the function yields the value specified after it. Note that the generator function in that case doesn’treturn the value, ityields the value.

First, we initialize the generator function withi equal to10. We invoke the generator function using thenext() method. The first time we invoke the generator function,i is equal to10. It encounters the firstyield keyword: it yields the value ofi. The generator is now "paused", and10 gets logged.

Then, we invoke the function again with thenext() method. It starts to continue where it stopped previously, still withi equal to10. Now, it encounters the nextyield keyword, and yieldsi * 2.i is equal to10, so it returns10 * 2, which is20. This results in10, 20.

When we pass multiple promises to thePromise.race method, it resolves/rejects thefirst promise that resolves/rejects. To thesetTimeout method, we pass a timer: 500ms for the first promise (firstPromise), and 100ms for the second promise (secondPromise). This means that thesecondPromise resolves first with the value of'two'.res now holds the value of'two', which gets logged.

First, we declare a variableperson with the value of an object that has aname property.

Then, we declare a variable calledmembers. We set the first element of that array equal to the value of theperson variable. Objects interact byreference when setting them equal to each other. When you assign a reference from one variable to another, you make acopy of that reference. (note that they don't have thesame reference!)

Then, we set the variableperson equal tonull.

We are only modifying the value of theperson variable, and not the first element in the array, since that element has a different (copied) reference to the object. The first element inmembers still holds its reference to the original object. When we log themembers array, the first element still holds the value of the object, which gets logged.

With afor-in loop, we can iterate through object keys, in this casename andage. Under the hood, object keys are strings (if they're not a Symbol). On every loop, we set the value ofitem equal to the current key it’s iterating over. First,item is equal toname, and gets logged. Then,item is equal toage, which gets logged.

Operator associativity is the order in which the compiler evaluates the expressions, either left-to-right or right-to-left. This only happens if all operators have thesame precedence. We only have one type of operator:+. For addition, the associativity is left-to-right.

3 + 4 gets evaluated first. This results in the number7.

7 + '5' results in"75" because of coercion. JavaScript converts the number7 into a string, see question 15. We can concatenate two strings using the+operator."7" + "5" results in"75".

Only the first number in the string is returned. Based on theradix (the second argument in order to specify what type of number we want to parse it to: base 10, hexadecimal, octal, binary, etc.), theparseInt checks whether the characters in the string are valid. Once it encounters a character that isn't a valid number in the radix, it stops parsing and ignores the following characters.

* is not a valid number. It only parses"7" into the decimal7.num now holds the value of7.

When mapping over the array, the value ofnum is equal to the element it’s currently looping over. In this case, the elements are numbers, so the condition of the if statementtypeof num === "number" returnstrue. The map function creates a new array and inserts the values returned from the function.

However, we don’t return a value. When we don’t return a value from the function, the function returnsundefined. For every element in the array, the function block gets called, so for each element we returnundefined.

Arguments are passed byvalue, unless their value is an object, then they're passed byreference.birthYear is passed by value, since it's a string, not an object. When we pass arguments by value, acopy of that value is created (see question 46).

The variablebirthYear has a reference to the value"1997". The argumentyear also has a reference to the value"1997", but it's not the same value asbirthYear has a reference to. When we update the value ofyear by settingyear equal to"1998", we are only updating the value ofyear.birthYear is still equal to"1997".

The value ofperson is an object. The argumentmember has a (copied) reference to thesame object. When we modify a property of the objectmember has a reference to, the value ofperson will also be modified, since they both have a reference to the same object.person'sname property is now equal to the value"Lydia"

With thethrow statement, we can create custom errors. With this statement, you can throw exceptions. An exception can be astring, anumber, aboolean or anobject. In this case, our exception is the string'Hello world!'.

With thecatch statement, we can specify what to do if an exception is thrown in thetry block. An exception is thrown: the string'Hello world!'.e is now equal to that string, which we log. This results in'Oh an error: Hello world!'.

When a constructor function is called with thenew keyword, it creates an object and sets thethis keyword to refer to that object. By default, if the constructor function doesn't explicitly return anything, it will return the newly created object.

In this case, the constructor functionCar explicitly returns a new object withmake set to"Maserati", which overrides the default behavior. Therefore, whennew Car() is called, thereturned object is assigned tomyCar, resulting in the output being"Maserati" whenmyCar.make is accessed.

let x = (y = 10); is actually shorthand for:

y=10;letx=y;

When we sety equal to10, we actually add a propertyy to the global object (window in the browser,global in Node). In a browser,window.y is now equal to10.

Then, we declare a variablex with the value ofy, which is10. Variables declared with thelet keyword areblock scoped, they are only defined within the block they're declared in; the immediately invoked function expression (IIFE) in this case. When we use thetypeof operator, the operandx is not defined: we are trying to accessx outside of the block it's declared in. This means thatx is not defined. Values who haven't been assigned a value or declared are of type"undefined".console.log(typeof x) returns"undefined".

However, we created a global variabley when settingy equal to10. This value is accessible anywhere in our code.y is defined, and holds a value of type"number".console.log(typeof y) returns"number".

We can delete properties from objects using thedelete keyword, also on the prototype. By deleting a property on the prototype, it is not available anymore in the prototype chain. In this case, thebark function is not available anymore on the prototype afterdelete Dog.prototype.bark, yet we still try to access it.

When we try to invoke something that is not a function, aTypeError is thrown. In this caseTypeError: pet.bark is not a function, sincepet.bark isundefined.

TheSet object is a collection ofunique values: a value can only occur once in a set.

We passed the iterable[1, 1, 2, 3, 4] with a duplicate value1. Since we cannot have two of the same values in a set, one of them is removed. This results in{1, 2, 3, 4}.

An imported module isread-only: you cannot modify the imported module. Only the module that exports them can change its value.

When we try to increment the value ofmyCounter, it throws an error:myCounter is read-only and cannot be modified.

Thedelete operator returns a boolean value:true on a successful deletion, else it'll returnfalse. However, variables declared with thevar,const, orlet keywords cannot be deleted using thedelete operator.

Thename variable was declared with aconst keyword, so its deletion is not successful:false is returned. When we setage equal to21, we actually added a property calledage to the global object. You can successfully delete properties from objects this way, also the global object, sodelete age returnstrue.

We can unpack values from arrays or properties from objects through destructuring. For example:

[a,b]=[1,2];

The value ofa is now1, and the value ofb is now2. What we actually did in the question, is:

[y]=[1,2,3,4,5];

This means that the value ofy is equal to the first value in the array, which is the number1. When we logy,1 is returned.

It's possible to combine objects using the spread operator.... It lets you create copies of the key/value pairs of one object, and add them to another object. In this case, we create copies of theuser object, and add them to theadmin object. Theadmin object now contains the copied key/value pairs, which results in{ admin: true, name: "Lydia", age: 21 }.

With thedefineProperty method, we can add new properties to an object, or modify existing ones. When we add a property to an object using thedefineProperty method, they are by defaultnot enumerable. TheObject.keys method returns allenumerable property names from an object, in this case only"name".

Properties added using thedefineProperty method are immutable by default. You can override this behavior using thewritable,configurable andenumerable properties. This way, thedefineProperty method gives you a lot more control over the properties you're adding to an object.

The second argument ofJSON.stringify is thereplacer. The replacer can either be a function or an array, and lets you control what and how the values should be stringified.

If the replacer is anarray, only the property names included in the array will be added to the JSON string. In this case, only the properties with the names"level" and"health" are included,"username" is excluded.data is now equal to"{"level":19, "health":90}".

If the replacer is afunction, this function gets called on every property in the object you're stringifying. The value returned from this function will be the value of the property when it's added to the JSON string. If the value isundefined, this property is excluded from the JSON string.

The unary operator++first returns the value of the operand,then increments the value of the operand. The value ofnum1 is10, since theincreaseNumber function first returns the value ofnum, which is10, and only increments the value ofnum afterward.

num2 is10, since we passednum1 to theincreasePassedNumber.number is equal to10(the value ofnum1). Again, the unary operator++first returns the value of the operand,then increments the value of the operand. The value ofnumber is10, sonum2 is equal to10.

In ES6, we can initialize parameters with a default value. The value of the parameter will be the default value, if no other value has been passed to the function, or if the value of the parameter is"undefined". In this case, we spread the properties of thevalue object into a new object, sox has the default value of{ number: 10 }.

The default argument is evaluated atcall time! Every time we call the function, anew object is created. We invoke themultiply function the first two times without passing a value:x has the default value of{ number: 10 }. We then log the multiplied value of that number, which is20.

The third time we invoke multiply, we do pass an argument: the object calledvalue. The*= operator is actually shorthand forx.number = x.number * 2: we modify the value ofx.number, and log the multiplied value20.

The fourth time, we pass thevalue object again.x.number was previously modified to20, sox.number *= 2 logs40.

The first argument that thereduce method receives is theaccumulator,x in this case. The second argument is thecurrent value,y. With the reduce method, we execute a callback function on every element in the array, which could ultimately result in one single value.

In this example, we are not returning any values, we are simply logging the values of the accumulator and the current value.

The value of the accumulator is equal to the previously returned value of the callback function. If you don't pass the optionalinitialValue argument to thereduce method, the accumulator is equal to the first element on the first call.

On the first call, the accumulator (x) is1, and the current value (y) is2. We don't return from the callback function, we log the accumulator, and the current values:1 and2 get logged.

If you don't return a value from a function, it returnsundefined. On the next call, the accumulator isundefined, and the current value is3.undefined and3 get logged.

On the fourth call, we again don't return from the callback function. The accumulator is againundefined, and the current value is4.undefined and4 get logged.

In a derived class, you cannot access thethis keyword before callingsuper. If you try to do that, it will throw a ReferenceError: 1 and 4 would throw a reference error.

With thesuper keyword, we call that parent class's constructor with the given arguments. The parent's constructor receives thename argument, so we need to passname tosuper.

TheLabrador class receives two arguments,name since it extendsDog, andsize as an extra property on theLabrador class. They both need to be passed to the constructor function onLabrador, which is done correctly using constructor 2.

With theimport keyword, all imported modules arepre-parsed. This means that the imported modules get runfirst, and the code in the file that imports the module gets executedafter.

This is a difference betweenrequire() in CommonJS andimport! Withrequire(), you can load dependencies on demand while the code is being run. If we had usedrequire instead ofimport,running index.js,running sum.js,3 would have been logged to the console.

Every Symbol is entirely unique. The purpose of the argument passed to the Symbol is to give the Symbol a description. The value of the Symbol is not dependent on the passed argument. As we test equality, we are creating two entirely new symbols: the firstSymbol('foo'), and the secondSymbol('foo'). These two values are unique and not equal to each other,Symbol('foo') === Symbol('foo') returnsfalse.

With thepadStart method, we can add padding to the beginning of a string. The value passed to this method is thetotal length of the string together with the padding. The string"Lydia Hallie" has a length of12.name.padStart(13) inserts 1 space at the start of the string, because 12 + 1 is 13.

If the argument passed to thepadStart method is smaller than the length of the array, no padding will be added.

With the+ operator, you can concatenate strings. In this case, we are concatenating the string"🥑" with the string"💻", resulting in"🥑💻".

A generator function "pauses" its execution when it sees theyield keyword. First, we have to let the function yield the string "Do you love JavaScript?", which can be done by callinggame.next().value.

Every line is executed, until it finds the firstyield keyword. There is ayield keyword on the first line within the function: the execution stops with the first yield!This means that the variableanswer is not defined yet!

When we callgame.next("Yes").value, the previousyield is replaced with the value of the parameters passed to thenext() function,"Yes" in this case. The value of the variableanswer is now equal to"Yes". The condition of the if-statement returnsfalse, andJavaScript loves you back ❤️ gets logged.

String.raw returns a string where the escapes (\n,\v,\t etc.) are ignored! Backslashes can be an issue since you could end up with something like:

const path = `C:\Documents\Projects\table.html`

Which would result in:

"C:DocumentsProjects able.html"

WithString.raw, it would simply ignore the escape and print:

C:\Documents\Projects\table.html

In this case, the string isHello\nworld, which gets logged.

An async function always returns a promise. Theawait still has to wait for the promise to resolve: a pending promise gets returned when we callgetData() in order to setdata equal to it.

If we wanted to get access to the resolved value"I made it", we could have used the.then() method ondata:

data.then(res => console.log(res))

This would've logged"I made it!"

The.push() method returns thelength of the new array! Previously, the array contained one element (the string"banana") and had a length of1. After adding the string"apple" to the array, the array contains two elements, and has a length of2. This gets returned from theaddToList function.

Thepush method modifies the original array. If you wanted to return thearray from the function rather than thelength of the array, you should have returnedlist after pushingitem to it.

Object.freeze makes it impossible to add, remove, or modify properties of an object (unless the property's value is another object).

When we create the variableshape and set it equal to the frozen objectbox,shape also refers to a frozen object. You can check whether an object is frozen by usingObject.isFrozen. In this case,Object.isFrozen(shape) would return true, since the variableshape has a reference to a frozen object.

Sinceshape is frozen, and since the value ofx is not an object, we cannot modify the propertyx.x is still equal to10, and{ x: 10, y: 20 } gets logged.

By usingdestructuring assignment syntax we can unpack values from arrays, or properties from objects, into distinct variables:

const{ firstName}={firstName:'Lydia'};// ES5 version:// var firstName = { firstName: 'Lydia' }.firstName;console.log(firstName);// "Lydia"

Also, a property can be unpacked from an object and assigned to a variable with a different name than the object property:

const{firstName:myName}={firstName:'Lydia'};// ES5 version:// var myName = { firstName: 'Lydia' }.firstName;console.log(myName);// "Lydia"console.log(firstName);// Uncaught ReferenceError: firstName is not defined

Therefore,firstName does not exist as a variable, thus attempting to access its value will raise aReferenceError.

Note: Be aware of theglobal scope properties:

const{name:myName}={name:'Lydia'};console.log(myName);// "lydia"console.log(name);// "" ----- Browser e.g. Chromeconsole.log(name);// ReferenceError: name is not defined  ----- NodeJS

Whenever Javascript is unable to find a variable within thecurrent scope, it climbs up theScope chain and searches for it and if it reaches the top-level scope, akaGlobal scope, and still doesn't find it, it will throw aReferenceError.

• InBrowsers such asChrome,name is adeprecated global scope property. In this example, the code is running insideglobal scope and there is no user-defined local variable forname, therefore it searches the predefinedvariables/properties in the global scope which is in the case of browsers, it searches throughwindow object and it will extract thewindow.name value which is equal to anempty string.

• InNodeJS, there is no such property on theglobal object, thus attempting to access a non-existent variable will raise aReferenceError.

A pure function is a function thatalways returns the same result, if the same arguments are passed.

Thesum function always returns the same result. If we pass1 and2, it willalways return3 without side effects. If we pass5 and10, it willalways return15, and so on. This is the definition of a pure function.

Theadd function is amemoized function. With memoization, we can cache the results of a function in order to speed up its execution. In this case, we create acache object that stores the previously returned values.

If we call theaddFunction function again with the same argument, it first checks whether it has already gotten that value in its cache. If that's the case, the cache value will be returned, which saves execution time. Otherwise, if it's not cached, it will calculate the value and store it afterward.

We call theaddFunction function three times with the same value: on the first invocation, the value of the function whennum is equal to10 isn't cached yet. The condition of the if-statementnum in cache returnsfalse, and the else block gets executed:Calculated! 20 gets logged, and the value of the result gets added to the cache object.cache now looks like{ 10: 20 }.

The second time, thecache object contains the value that gets returned for10. The condition of the if-statementnum in cache returnstrue, and'From cache! 20' gets logged.

The third time, we pass5 * 2 to the function which gets evaluated to10. Thecache object contains the value that gets returned for10. The condition of the if-statementnum in cache returnstrue, and'From cache! 20' gets logged.

With afor-in loop, we can iterate overenumerable properties. In an array, the enumerable properties are the "keys" of array elements, which are actually their indexes. You could see an array as:

{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}

Where the keys are the enumerable properties.0123 get logged.

With afor-of loop, we can iterate overiterables. An array is an iterable. When we iterate over the array, the variable "item" is equal to the element it's currently iterating over,"☕""💻""🍷""🍫" get logged.

Array elements can hold any value. Numbers, strings, objects, other arrays, null, boolean values, undefined, and other expressions such as dates, functions, and calculations.

The element will be equal to the returned value.1 + 2 returns3,1 * 2 returns2, and1 / 2 returns0.5.

By default, arguments have the value ofundefined, unless a value has been passed to the function. In this case, we didn't pass a value for thename argument.name is equal toundefined which gets logged.

In ES6, we can overwrite this defaultundefined value with default parameters. For example:

function sayHi(name = "Lydia") { ... }

In this case, if we didn't pass a value or if we passedundefined,name would always be equal to the stringLydia

The value of thethis keyword is dependent on where you use it. In amethod, like thegetStatus method, thethis keyword refers tothe object that the method belongs to. The method belongs to thedata object, sothis refers to thedata object. When we logthis.status, thestatus property on thedata object gets logged, which is"🥑".

With thecall method, we can change the object to which thethis keyword refers. Infunctions, thethis keyword refers to thethe object that the function belongs to. We declared thesetTimeout function on theglobal object, so within thesetTimeout function, thethis keyword refers to theglobal object. On the global object, there is a variable calledstatus with the value of"😎". When loggingthis.status,"😎" gets logged.

We set the variablecity equal to the value of the property calledcity on theperson object. There is no property on this object calledcity, so the variablecity has the value ofundefined.

Note that we arenot referencing theperson object itself! We simply set the variablecity equal to the current value of thecity property on theperson object.

Then, we setcity equal to the string"Amsterdam". This doesn't change the person object: there is no reference to that object.

When logging theperson object, the unmodified object gets returned.

Variables with theconst andlet keywords areblock-scoped. A block is anything between curly brackets ({ }). In this case, the curly brackets of the if/else statements. You cannot reference a variable outside of the block it's declared in, a ReferenceError gets thrown.

The value ofres in the second.then is equal to the returned value of the previous.then. You can keep chaining.thens like this, where the value is passed to the next handler.

With!!name, we determine whether the value ofname is truthy or falsy. If the name is truthy, which we want to test for,!name returnsfalse.!false (which is what!!name practically is) returnstrue.

By settinghasName equal toname, you sethasName equal to whatever value you passed to thegetName function, not the boolean valuetrue.

new Boolean(true) returns an object wrapper, not the boolean value itself.

name.length returns the length of the passed argument, not whether it'strue.

In order to get a character at a specific index of a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case, we want to get the element with index 0, the character"I', which gets logged.

Note that this method is not supported in IE7 and below. In that case, use.charAt().

You can set a default parameter's value equal to another parameter of the function, as long as they've been definedbefore the default parameter. We pass the value10 to thesum function. If thesum function only receives 1 argument, it means that the value fornum2 is not passed, and the value ofnum1 is equal to the passed value10 in this case. The default value ofnum2 is the value ofnum1, which is10.num1 + num2 returns20.

If you're trying to set a default parameter's value equal to a parameter that is definedafter (to the right), the parameter's value hasn't been initialized yet, which will throw an error.

With theimport * as name syntax, we importall exports from themodule.js file into theindex.js file as a new object calleddata is created. In themodule.js file, there are two exports: the default export, and a named export. The default export is a function that returns the string"Hello World", and the named export is a variable calledname which has the value of the string"Lydia".

Thedata object has adefault property for the default export, other properties have the names of the named exports and their corresponding values.

Classes are syntactical sugar for function constructors. The equivalent of thePerson class as a function constructor would be:

functionPerson(name){this.name=name;}

Calling a function constructor withnew results in the creation of an instance ofPerson,typeof keyword returns"object" for an instance.typeof member returns"object".

The.push method returns thenew length of the array, not the array itself! By settingnewList equal to[1, 2, 3].push(4), we setnewList equal to the new length of the array:4.

Then, we try to use the.push method onnewList. SincenewList is the numerical value4, we cannot use the.push method: a TypeError is thrown.

Regular functions, such as thegiveLydiaPizza function, have aprototype property, which is an object (prototype object) with aconstructor property. Arrow functions however, such as thegiveLydiaChocolate function, do not have thisprototype property.undefined gets returned when trying to access theprototype property usinggiveLydiaChocolate.prototype.

Object.entries(person) returns an array of nested arrays, containing the keys and objects:

[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]

Using thefor-of loop, we can iterate over each element in the array, the subarrays in this case. We can destructure the subarrays instantly in the for-of loop, usingconst [x, y].x is equal to the first element in the subarray,y is equal to the second element in the subarray.

The first subarray is[ "name", "Lydia" ], withx equal to"name", andy equal to"Lydia", which get logged.The second subarray is[ "age", 21 ], withx equal to"age", andy equal to21, which get logged.

...args is a rest parameter. The rest parameter's value is an array containing all remaining arguments,and can only be the last parameter! In this example, the rest parameter was the second parameter. This is not possible, and will throw a syntax error.

functiongetItems(fruitList,favoriteFruit, ...args){return[...fruitList, ...args,favoriteFruit];}getItems(['banana','apple'],'pear','orange');

The above example works. This returns the array[ 'banana', 'apple', 'orange', 'pear' ]