Week 1 (Beginning Jan 10th) Learning Week Cycle 2 - emcsquared2/2022-Learning Wiki

Week 1 (Beginning Jan 10th) Learning Week Cycle 2

GCSE Computer Science

The use of basic string manipulation Basic file handling operations

Takeaway learning

Basic recap over string manipulation methods I am familiar with Intro to a program reading and writing data from and to text files (.txt)


MIMO Mobile app

Takeaway learning

Revising the language of 'passing'... We access array elements from within a function by passing the array to the function


Professor Steve

1.Ternary Operator 2. Introduction to Arrays

Takeaway learning

1.I'm pretty confident with this already but good to revise at the beginning of the year (when using the command prompt...Arrow up on the terminal console repeats the previous command!) 2. Revision of array methods .push adds an element on the end .pop removes one off the end shift off of the start arr.shift() removes element 0 unshift on at the star arr.unshift('FirstPlace')


Codewars Exercise (Level 8) Grasshopper - Object syntax debug

My Solution

I debugged the code constaining nested objects

Takeaway learning

When you next an object in another object you don't use an equal sign. Just use a colon as below

var rooms = {
  first: {

JS Practice

The next exercise in the JS track is about "null" and "undefined". It's a somewhat confusing explanation so will look at a Professor Steve Video for help....

Professor Steve

Null and Undefined

Takeaway learning

Null and undefined are falsy values Null is something that you put inside a variable to say that there is nothing there - empty, void Undefined is the lack of something being set

console.log(typeof null);   //object
console.log(typeof undefined);   //undefined

console.log(null===undefined)  //false
// (=== is object equivalency i.e. are these two the same object?)
console.log(null==undefined)    //true
// (== is the value equivlalent?  i.e. both truthy or both falsy?)


var x ;
console.log(x);  //undefined

function abc(){  

};
console.log(abc())   //undefined


function abc(){  
return null
};
console.log(abc())   //null


//If an object exists but a property doesn't e.g.
var x = global.blah;

console.log(x)  // undefined

//If an object doesn't exist
var x = glob.blah;

console.log(x)  //ReferenceError: glob is not defined


//Finally.  Null can be used intentionally

var y = null;
console.log(y); // null

JS Practice

Now I have watched Professor Steve's video, I understand this better. There is a bit extra added on in the JS Practice... Optional chaining using the '?'

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.zipCode;
// => undefined

obj.residence.street;
// => TypeError: Cannot read property 'street' of undefined

obj.residence?.street;
// => undefined

//JavaScript only tries to access the nested key if the parent was not `null` or `undefined`.

Nullish Coalescing
let amount = 0;
amount = amount ?? 6;

console.log(amount)  // 6

// If to the left of the ?? is null or undefined then it returns the value on the right (6)
//If not then return the value to the left instead

let amount = 0;
amount = amount ?? 6;

console.log(amount) // 0  (because amount to the left is defined as 0

var amount;
amount = amount ?? 'hello';
console.log(amount) // hello

JS Practice

This practice exercise felt tough but was really good practice. I probably spent too much time playing and trying to work everything out on my own. The community solutions were vital to help me with the nullish coalescing bit.

My solution

There's a lot of code and explanation for this exercise so not worth pasting all.

After a while, you get feedback from the employees that they want the ticket status to be easier to understand at the first glance.
They only want to see either the name of the visitor or that the ticket is invalid.

Write a function `simpleTicketStatus` that accepts the same arguments as `ticketStatus` in task 3.
This function only returns one of two different results.

- the name of the visitor if the ticket was sold
- `'invalid ticket !!!'` if the ticket was not sold yet or the identifier was not found in the tracking object

```javascript
const tickets = {
  '0H2AZ123': null,
  '23LA9T41': 'Verena Nardi',
};

ticketStatus(tickets, '23LA9T41');
// => 'Verena Nardi'

ticketStatus(tickets, '0H2AZ123');
// => 'invalid ticket !!!'

ticketStatus(tickets, 'RE90VAW7');
// => 'invalid ticket !!!'



//SOLUTION

export function simpleTicketStatus(tickets, ticketId) {
  
  return tickets[ticketId] ?? "invalid ticket !!!"
  
  /*
  //My original solution

  for (let id in tickets){
    if(tickets[ticketId] === undefined || tickets[ticketId] === null){
    return "invalid ticket !!!"
  } else if (id === ticketId){
    return `${tickets[ticketId]}`
      } 
  }*/


  throw new Error('Please implement the simpleTicketStatus function.');
}


//Last question...

Due to new legal requirements, newly created visitor objects now also contain detailed information on the "General Terms & Conditions" (GTC) that the user agreed to.
You can see an example of the new visitor object below.

The cashiers of the amusement park now need to check whether a visitor needs to sign a new version of the GTC.
For this, implement a function `gtcVersion` that accepts a visitor object as an argument and returns the GTC version if it is available.
If the version information is not available, nothing should be returned.

SOLUTION
function gtcVersion(visitor) {

  return visitor.gtc?.version
}

Udacity (Object Orientated JavaScript - Free Course)

Invoking Object Methods

Takeaway learning

You can name a function as an object method but it's not essential e.g.

const greeter = {
  greet: function sayHello() {
    console.log('Hello!');
  }
};

It is still invoked in the same way as an anonymous function...

greeter.greet();

// 'Hello!'

Good recap of the .this keyword which allows us to access the properties of the object that it is called on. It can be used to access and mutate properties within the object.

/*

Create an object called `chameleon` with two properties:

1. `color`, whose value is initially set to 'green' or 'pink'
2. `changeColor`, a function which changes `chameleon`'s `color` to 'pink'
    if it is 'green', or to 'green' if it is 'pink'

*/

const chameleon = {
    color: 'green',
    changeColor: function(){
     this.color = 'pink';   
    }
};

Code Signal

My Solutions