Objects

Question 1

What is JS Objects?

Answer 1

There are 7 data types in JS. 6 of those are primitive data types:

• string
• number
• boolean
• null
• undefined
• symbol

7th- Objects-> we can you Objects to model real- world things like a basketball.

JS Objects are containers storing related data and functionality.

Question 2

Creating OBJECT literals?

Answer 2

Objects can be assigned to variables just like any other JS data types

We use curly braces { } to designate an object literal.

let spaceship = { } ; // spaceship is an empty object

We fill an object with unordered data.this data is organised into key-value pairs.
A key is like a variable name that holds a value.

   object

let spaceship = {            
'Fuel Types' : 'diesel' ,      
color: 'silver'                        
};                 
    key-value properties

The spaceship object has 2 properties: Fuel type and color. Fuel type has quotation mark because it contains a space character.

Question 3

Accessing Object properties with dot notation

Answer 3

1.with dot notation:

‘hello’.length // returns 5

let spaceship ={
homePlanet: 'Earth',
color: 'silver'
};

spaceship.homePlanet; // Earth
spaceship.color; //silver
| |
objects property name

Question 4

Trying to access a property that doesn’t exist on that Object

Answer 4

Undefined will be returned

spaceship.favoriteIceCream; // undefined

Question 5

Second way to access a key’s value in an Object

Bracket notation

Answer 5

To use Bracket Notation [ ] to access Objects property, we pass in the property name (key) as a string:

let spaceship = {
'Fuel Type' : 'Turbo Fuel' ,
'Active Duty' : true,
homePlanet : 'Earth',
numCrew: 5
};

spaceship [‘Active Duty’]; //true

Question 6

Using variable inside the bracket to select the keys of an Object

Answer 6

let returnAnyProp = ( objectName, propName) =>
objectName [propName];

returnAnyProp (spaceship, ‘HomePlanet’); // Earth

Question 7

Property assignment of Objects

Answer 7

Objects are mutable - we can update them after we create them.
We can use dot notation or bracket notation [ ] and the assignment operator = to add new key- value pairs to an object or change existing property.

spaceship [’ Fuel Type’] = ‘vegetable oil’,
spaceship.color = ‘gold’;

• if the property already exists on the Object, whatever value it held before will be replaced with the newly assigned value.
• if there was no property with that name, a new property will be added to the Object.

Question 8

Deleting a property from an Object

Answer 8

using delete operator

const spaceship = {
' Fuel Type' : ' Turbo Fuel',
homePlanet : 'Earth',
mission: 'Explore the universe'
};

delete spaceship.mission; // removes the mission property

Question 9

Methods in Objects

Answer 9

When data stored on an Object is a function we call that a method

A property is what an Object has.
METHOD is what an Object does!!!

Ex: console is a global JS Object
.log is a method on that Object

Math is a global JS Object.
.floor is a method on it.

Object methods are invoked by appending the Objects name with the dot operator followed by the method name and parenthesis:

const alienship = {
invade ( ) {
      console.log ("Hello....)
}
};

alienship.invade( ); // returns “ Hello ….

Question 10

Nested Objects

Answer 10

An Object might have another Object as a property which in turn might have a property that’s an array of even more Objects.

const spaceship = {
    telescope: {
           year built: 2018,
           model: '910I-XLT',
           focallength: 2032
},
    crew: {
       captain: {
               name: 'Sandra',
               degree: 'Computer Engineering',
               encourage team ( )
     { console.log('We got this!') }
                 }
}
};

Question 11

Pass by Reference

Answer 11

Objects are passed by reference. This means when we want to pass a variable assigned to an Object into a function as an argument, the computer interprets the parameter name as pointing to the space in memory holding that Object.As a result, functions which change Objects properties actually mutate the object permanently (even when the Object is assigned to a const variable).

Question 12

Looping through Objects

Answer 12

Loops are programming tools that repeat a block of code until a condition is met.
we learned how to iterate through arrays using their numerical index, but key-value pairs in Objects aren’t ordered.

JS alternative solution for iterating through Objects with for….in syntax

for ( let variableName in outerObject.innerObject) {
console.log (‘${OuterObject.innerObject[variableName].propertyName}: ${OuterObject.innerObject[variableName].differenPropertyName}’)
};

Question 13

Key-valur pairs

Answer 13

Key-value pairs is a property -when property is a function it is known as a method.

Question 14

Key-valur pairs

Answer 14

Key-value pairs is a property -when property is a function it is known as a method.

Question 15

An Object literal

Answer 15

An Object literal is composed of comma-separated key-value pairs surrounded by curly braces.

Question 16

Properties and values of a JavaScript object

Answer 16

A JavaScript object literal is enclosed with curly braces {}. Values are mapped to keys in the object with a colon (:), and the key-value pairs are separated by commas. All the keys are unique, but values are not.

Key-value pairs of an object are also referred to as properties.

const classOf2018 = {
students: 38,
year: 2018
}

Question 17

Restrictions in Naming Properties

Answer 17

JavaScript object key names must adhere to some restrictions to be valid. Key names must either be strings or valid identifier or variable names (i.e. special characters such as - are not allowed in key names that are not strings).

// Example of invalid key names
const trainSchedule = {
platform num: 10, // Invalid because of the space between words.
40 - 10 + 2: 30, // Expressions cannot be keys.
+compartment: ‘C’ // The use of a + sign is invalid unless it is enclosed in quotations.
}

Question 18

Lexical scope

Answer 18

Let’s define 2 functions, having the functioninnerFunc()is nested insideouterFunc().

function outerFunc() { // the outer scope let outerVar = ‘I am from outside!’; function innerFunc() { // the inner scope console.log(outerVar); // ‘I am from outside!’ } return innerFunc; } const inner = outerFunc(); inner();

Look at the last line of the snippetinner(): theinnerFunc()invokation happens outside ofouterFunc()scope. Still, how does JavaScript understand thatouterVarinsideinnerFunc()corresponds to the variableouterVarofouterFunc()?
The answer is due to lexical scoping.
JavaScript implements a scoping mechanism named lexical scoping (or static scoping). Lexical scoping means that the accessibility of variables is determined statically by the position of the variables within the nested function scopes:the inner function scope can access variables from the outer function scope.
A formal definition of lexical scope:

Thelexical scopeconsists of outer scopes determined statically.

In the example, the lexical scope ofinnerFunc()consists of the scope ofouterFunc().
Moreover, theinnerFunc()is aclosurebecause it captures the variableouterVarfrom the lexical scope.

Question 19

Scope

Answer 19

The scope is an important concept that manages the availability of variables. The scope is at the base closures, defines the idea of global and local variables.
If you’d like to code in JavaScript, understanding the scope of variables is a must

The scope is a policy that manages the availability of variables. A variable defined inside a scope is accessible only within that scope, but inaccessible outside.
In JavaScript, scopes are created by code blocks, functions, modules.
Whileconstandletvariables are scoped by code blocks, functions or modules,varvariables are scoped only by functions or modules.
Scopes can be nested. Inside an inner scope you can access the variables of an outer scope.
The lexical scope consists of the outer function scopes determined statically. Any function, no matter the place where being executed, can access the variables of its lexical scope (this is the concept ofclosure).

Question 20

Hoisting feature in JS

Answer 20

The hoisting feature in JS which allows access to function declaration before they are identified.

Ex. greetWorld ( ); - hoisting allowed

greetWorld ( ) to be called before function was identified

function greetWorld ( ) {
      console.log('Hello, World!');
}

Question 20

Hoisting feature in JS

Answer 20

The hoisting feature in JS which allows access to function declaration before they are identified.

Ex. greetWorld ( ); - hoisting allowed

greetWorld ( ) to be called before function was identified

function greetWorld ( ) {
      console.log('Hello, World!');
}