Knowing the right Map🗺: .map() vs map()

Fantástico Sr. Fox 📸 — Fri, 15 Jul 2022 17:37:05 +0000

As someone that’s learning the ins and outs of JavaScript and React I found myself becoming inspired, confused, and frustrated with .map() …sorry, I meant map()..hold on, I think .map() was right, then again...

Ok, so in this post I'm going to give you a short rundown on both so you'll know how to choose the right map.

Let’s get started!

.Map()

Array.prototype.map()

This one is a method that creates a new array with populated results from calling a function and iterating through each element within the array. So after it’s all said and done there are two arrays, the original and the array that was created or manipulated with the method.

I was first introduced to this through a React tutorial where EGATOR used it to populate a collection of portfolio projects.

After seeing this and how useful it was, I wanted to incorporate it into my portfolio, but first I needed to understand it more.

Here's a quick and simple example below:

const nums = [12,5,10,7];

I have a simple array with 4 values and I want to multiple every number in the array by 3.

First we create a variable and set it equal to the array with map like this.

const numsByThree = nums.map()

The Array map Method takes a function with two parameters, the current value (required) and the index (optional).

In this example the current value will be 'x'. In order to have the numbers multiplied by 3 we need to get each value in the array, then with an arrow function we take x and multiply it by 3. With everything put together it would look something like this.

const numsByThree = nums.map(x => x * 3)

The first x retrieves the value in each index then once it has the value it’s brought back to complete the action, multiply by 3.

Remember when I had said that with .map(), you’re essentially creating two arrays, well below you can see that we have two outputs with each array. If I were to change the value of the first array then the second would adjust to it.

const nums = [12,5,10,7];
///[12,5,10,7]
const numsByThree = nums.map(x () => x * 3)
///[36,15,30,21]

This type of map is only used in conjunction with an Array to help iterate through the data stored within it. So it can be really useful when you want to manipulate a lot of data from an array.

Map()

Map Object

A map object holds key-value pairs and remembers the original insertion order of the key. (MDN)

With the Map you have 10 methods:

clear()
delete(key)
entries()
get(key)
has(key)
keys()
set(key,value)
values()

When a for...of loop is used with it, it returns an array of the key and value, like this [key,value].

The key in the Map can be anything, a string, a number, symbol, it doesn't matter but not like an Object, I'll go over that in a future post.

Below is a quick snippet of how it works and how to store data.

You start by initializing a new map object by using new Map()

const contacts = new Map()

When adding data, you use the set() method, the first parameter is the key and the second is the value:

contacts.set('Roger', '213-555-1234')

To get the value we use get(). If we

console.log(contacts.get('Roger'));

we will get the phone number.

When it comes to the value parameter you can treat it like an object and include more information, like this:

contacts.set('Roger', {phone:'213-555-1234', type:'cell-phone', address:'412 N Street'})

The only downside to this I've found is that I cannot specifically pinpoint a value. So if I wanted to only output the address I can't. I can only output all the data that's stored under the key when I use .get().

console.log(contacts.get('Roger')); will yield

{
phone:"2123-555-1234",
type:"cell-phone",
address:"412 N Street"
}

So to sum it all up,

.map() is a method of Array that allows you to retrieve and iterate through data within an array.
map() is an object and it’s used to store data in a key, value pair.

If you are trying to manipulate data within an array then the Array Map Method is what you can use but on the other hand if you're trying to store data, this is where you would use the Map Object.

I hope this small post cleared up a lil confusion, but there are lots more information regarding the usage of .Map() and Map().

Installing Typescript/Angular on Terminal

Fantástico Sr. Fox 📸 — Sat, 08 Feb 2020 17:19:23 +0000

I'm trying to install typescript and angular on my Mac to follow along a tutorial but I'm having the hardest time in the world.

Nodejs is installed and to my knowledge is working, but after I input 'npm install -g typescript' I get a long list of npm ERR!'s with the top line being 'npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules'.

I have no clue what that means nor how to resolve the issue, if anyone can help I will greatly appreciate it!

Someone to review & critique code

Fantástico Sr. Fox 📸 — Mon, 30 Dec 2019 17:30:02 +0000

I created a webpage to practice my coding skills and UI design and for my portfolio. I’m hoping to find someone to review & critique my code and give feedback.

My goal is to get a Jr Frontend Dev job or internship by Spring of 2020. Thank you!!

Seeking Frontend Dev Mentor

Fantástico Sr. Fox 📸 — Sun, 08 Sep 2019 23:36:52 +0000

Hello all, I'm reaching out to anything that might know of any possible mentors. I saw there was a beta program but the link is not working. I have pretty general knowledge of HTML, CSS, a bit of JavaScript but of course I want to improve these skills in hopes of getting an Frontend Dev internship!