Forem: Star

Write Concise Object Literal Declarations Using Object Property Shorthand

Star — Thu, 03 Nov 2022 20:00:39 +0000

Write Concise Object Literal Declarations Using Object Property Shorthand

ES6 has yet another special feature for defining object literals, ergo, the data propogated into the object can be defined and sorted with built-in shortcuts.

The old way to define x as x and y as y:

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

The “new” 😎 way

const getMousePosition = (x, y) => ({ x, y });

Prompt

Use object property shorthand with object literals to create and return an object with name, age and gender properties.

const createPerson = (name, age, gender) => {
  // Only change code below this line
  return {
    name: name,
    age: age,
    gender: gender
  };
  // Only change code above this line
};

Solution

const createPerson = (name, age, gender) => {
  // Only change code below this line
  return  {name, age, gender
  };
  // Only change code above this line
};

Unfortunately, I cannot see any new understanding in this as I don’t have the experienced perspective of the old way, just that from the example. Makes this post kinda feel like bloat but how else would I remember it?

Create Strings using Template Literals

Star — Thu, 03 Nov 2022 14:26:38 +0000

Create Strings using Template Literals

Apparently a special type of string exists, a Template Literal, a feature of ES6. “Template literals allow you to create multi-line strings and to use string interpolation features to create strings.” I’m not sure wtf this means.
Interpolation
Definition:

the act or process of interpolating or the state of being interpolated.
something interpolated, as a passage introduced into a text.

Prompt

I don’t know who wrote this, but holy shit.
“Use template literal syntax with backticks to create an array of list element (li) strings. Each list element's text should be one of the array elements from the failure property on the result object and have a class attribute with the value text-warning. The makeList function should return the array of list item strings.

Use an iterator method (any kind of loop) to get the desired output (shown below).”

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

const result = {

  success: ["max-length", "no-amd", "prefer-arrow-functions"],

  failure: ["no-var", "var-on-top", "linebreak"],

  skipped: ["no-extra-semi", "no-dup-keys"]

};

function makeList(arr) {

  // Only change code below this line

  const failureItems = [];

  for (let i=0; i < arr.length; i++) {

    failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
  } 
  // Only change code above this line

  return failureItems;

}
const failuresList = makeList(result.failure);

Iiterate as long as i = 0 is less than the length of the array
Any failed items with the List element with the "text-warning" class will be pushed into the currently empty array, failureItems.
Instead of using concatenation, we're using the Template Literal ${variable} within the failureItems.push(argument) in conjunction with the list class element in order to accept any array found within any list elements with a class of 'text-warning'.
When failuresList executes, it prompts the function makeList to propogate the failure results which are produced from the function makeList(arr).
makeList(arr) uses the const failureItems which is an empty array until the for loop is executed, which is nearly at the same time(thanks computers).

Error:

"failuresList should be equal to the specified output. Template strings and expression interpolation should be used."

The problem was me using quotes instead of backticks. FFS.

Use Destructing Assignment to Pass an Object as a Functions Parameters

Star — Thu, 03 Nov 2022 11:08:17 +0000

Rather than destructuring the object within the function, this method aims to show that it can be destructured as an argument.

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;

}

This shows that profileData has a function of const { name, age, nationality, location } = profileData;. This breaks the data submitted as an argument with a function-const.

const profileUpdate = ({ name, age, nationality, location }) => {

}

In this second example, we see the the same const profileUpdate but this time it destructures the incoming data within the argument and has a set of empty function brackets(? I don’t remember what they’re called right now) for the in-argument function to propogate it’s result and return it back to profileUpdate.

I hope I understood all this correctly, this was too easy and it makes me worry that I misunderstood something.

Prompt - Use destructuring assignment within the argument to the function `half` to send only `max` and `min` inside the function.

Original

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

// Only change code below this line
const half = (stats) => (stats.max + stats.min) / 2.0;
// Only change code above this line

Submitted Code

const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};

// Only change code below this line
const half = ({ max, min }) => (max + min) / 2.0;
// Only change code above this line

Here, max and min are being destructured by the const half, but then it also adds them together and divides them by 2.0. I don’t feel the prompt specifies enough that it is requesting for half of the max and min, rather it just asks to send only max and min, not half of max and min.

Destructing Assignment w/ Rest Parameter to Reassign Array Elements

Star — Wed, 02 Nov 2022 21:08:34 +0000

Destructing Assignment w/ Rest Parameter to Reassign Array Elements

MDN Destructing Reference
So this was yet another dumb thing that seemed easy at first, but I’m not sure how I keep getting lost.
I thought that I had to create a new variable to break the source array into arr and list. But what I actually had to do was using the Destructing Assignment Parameter[a, b, …arr] which would automatically take the values in slot A and slot B and drop them off the face of the earth, resulting in just the remaining or THE REST of the array thereafter.

The function removeFirstTwo(list) says there is a const[a, b, …arr] = list; which will seperate slots a, and b just as intended, but I’m not clear on how those two and …arr are not included within list. Why does removeFirstTwo(list) not also show slots a and b?
I think this is due to the return only including arr, which again, confuses me, because why does the function use the parameter of list instead of arr if it is returning arr.
The function uses the parameter of list instead of the returned arr, because list refers to what was gathered within arr. We’re not creating a new array, we’re just modifying the array that was given to the function removeFirstTwo.

I think the MDN example on Destructing seems to explain this a bit clearer

MDN Example - Array Destructing - Basic Variable Assignment

const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

My submitted code

const source = [1,2,3,4,5,6,7,8,9,10];

function removeFirstTwo(list) {

  // Only change code below this line
  
  const [a,b, ...arr] = list; // Change this line

  // Only change code above this line

  return arr;

}

const arr = removeFirstTwo(source);

Starting this again

Star — Wed, 02 Nov 2022 20:48:11 +0000

Goals:

Become proficient enough to be an open source machine
Eat, Drink, and be merry by having a real developer job.
Be a Fullstack Omnipresent being
Destroying Capitalism

How will I get there?

I'm restarting my freecodecamp projects, I'll see them to completion this time
Maintain my Dev.to with my project logs
Find a mentor or sponsor of some kind

What will I do after FCC is complete?

Evaluate what I have completed
Establish an understanding of what I'm capable with the knowledge I have gained from completing FCC.
Understand what I need to learn next

What kind of Dev.to project logs will I have?

I'll post my project logs that I maintain in my Obsidian Vault so that others may understand how I learn and function. Particularly, any potential mentor who happens to observe my work.

How will I find a mentor?

I will see what I can find via Discord or Dev.to over the next month or so

Are there any limitations?

Not necessarily a limitation, but neurological issues; adhd, autism, social panic, ...rest.
Daily physical fatigue and mental fog due to chronic pain.

Forem: Star

Write Concise Object Literal Declarations Using Object Property Shorthand

Write Concise Object Literal Declarations Using Object Property Shorthand

Prompt

Solution

Create Strings using Template Literals

Create Strings using Template Literals

Prompt

Use Destructing Assignment to Pass an Object as a Functions Parameters

Prompt - Use destructuring assignment within the argument to the function half to send only max and min inside the function.

Original

Submitted Code

Destructing Assignment w/ Rest Parameter to Reassign Array Elements

Destructing Assignment w/ Rest Parameter to Reassign Array Elements

MDN Example - Array Destructing - Basic Variable Assignment

My submitted code

Starting this again

Goals:

How will I get there?

What will I do after FCC is complete?

What kind of Dev.to project logs will I have?

How will I find a mentor?

Are there any limitations?

Prompt - Use destructuring assignment within the argument to the function `half` to send only `max` and `min` inside the function.