DEV Community: MahoMori

Comparing similar JavaScript methods and how to use them

MahoMori — Thu, 16 Jun 2022 02:40:29 +0000

Introduction

When my teacher at school started teaching us JavaScript, he began with string conversions such as reversing a string and checking if it is a palindrome. He used one method in one function and used another in other functions, but I found it difficult to differentiate them as a person who started coding a few months ago.
One year later, I was reading a teammate's code review when one question struck me, which was “what is the difference between ‘if-else’ and ‘switch’?” I became curious and thought about what other things are similar and confusing. I remembered the time when I started learning JavaScript. As I have more experience now, It is a good time to solve unsolved mysteries of similar methods in JS.

"for of" and "for in"

Difference

for of It is used to retrieve elements one by one in an array.
for in It is used to retrieve keys one by one in an object.

Examples

for of

const nameArray = [“Alex”, “Ben”, “Charlie”]

for(let name of array) {
  console.log(name)
}

// Alex
// Ben
// Charlie

for in

const userObject = {
  name: “Ellen”,
  age: ”24”,
  occupation: ”a musician”
}

for(let key in userObject) {
  console.log(key)
}

// name
// age
// occupation

"substring", "slice" and "substr"

DIfference

Examples

(First argument, Second argument)

const text = "ABCDEFGHIJ"
console.log(text.substring(2, 4))
console.log(text.slice(2, 4))
console.log(text.substr(2, 4))

// CD
// CD
// CDEF

When the argument is negative

const text = "ABCDEFGHIJ"
console.log(text.substring(-2, 3))
console.log(text.slice(-4, -1))
console.log(text.substr(-4, 3))
console.log(text.substr(-4, -3))

// ABC
// GHI
// GHI
// (empty)

First argument > Second argument

const text = “ABCDEFGHIJ"
console.log(text.substring(4, 1))
console.log(text.slice(4, 1))

// BCD
// (empty)

splice

While substring, slice and substr create a new array with items taken out from the original array, splice can remove, replace and add items in the array. It doesn’t create a new array.

splice(first index to change, number of items to delete, item to add/replace-1, item to add/replace-2, ….)

Examples

Remove items

const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3)
console.log(array)

// [“D”, “E”]

Replace items

const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3, "AA", "BB", "CC")
console.log(array)

// ["AA","BB","CC","D","E"]

Add items

const array = ["A", "B", "C", "D", "E"]
array.splice(5, 0, "F")
console.log(array)

// ["A","B","C","D","E","F"]

"map", "filter", "reduce", "some", "every", "foreach" and "find"

DIfference

map - iterate over all items in an array and return all
reduce - iterate over all items in an array and return one item
some - return true if there is at least one which matches the condition
every - return true if all items match the condition
find - return the first item which matches the condition
filter - return all items which matches the condition
forEach - iterate over all items in an array and process each item, but returns nothing (it becomes “undefined”)

Examples

map multiplies every item by 2 and return an array

const mapResult = 
  [1, 2, 3, 4, 5].map((value) => {
    return value * 2
  })
console.log(mapResult)


// [2, 4, 6, 8, 10]

reduce add all items and return the sum

const reduceResult = 
  [1, 2, 3, 4, 5].reduce((previousValue, currentValue)  => {
    return previousValue + currentValue
  })
console.log(reduceResult)

// 15

some checks all items and returns true if at least one item equals or is more than 5.

const someResult = 
  [1, 2, 3, 4, 5].some((value) => {
    return value >= 5
  })
console.log(someResult)


// true

checks all items and returns true if at least one item equals or is more than 10.

const someResult = 
  [1, 2, 3, 4, 5].some((value) => {
    return value >= 10
  })
console.log(someResult)

// false

every checks all items and returns true if all items equal or are more than 1.

const everyResult = 
  [1, 2, 3, 4, 5].every((value) => {
    return value >= 1
  })
console.log(everyResult)

// true

checks all items and returns true if all items equal or are more than 5.

const everyResult = 
  [1, 2, 3, 4, 5].every((value) => {
    return value >= 5
  })
console.log(everyResult)

// false

find iterates over an array and returns the first item which equals or is more than 3.

const findResult = 
  [1, 2, 3, 4, 5].find((value) => {
    return value >= 3
  })
console.log(findResult)

// 3

filter checks if each item is more than 3 and returns in an array

const filterResult = 
  [1, 2, 3, 4, 5].filter((value) => {
    return value >= 3
  })
console.log(filterResult)

// [3, 4, 5]

forEach iterates over all items in an array, double each item and logs in the console

const forEachResult = 
  [1, 2, 3, 4, 5].forEach((value) => {
    console.log(value * 2)
  })

// 2
// 4
// 6
// 8
// 10

it does not return anything

const forEachResult = 
  [1, 2, 3, 4, 5].forEach((value) => {
    return(value * 2)
  })
console.log(forEachResult)

// undefined

Conclusion

There are a lot of methods that help you write efficient codes, and it is important to understand them. I hope it is more clear for you how some methods are similar but different!

A (Very) Simple Explanation of How Redux Works

MahoMori — Sat, 04 Dec 2021 18:19:15 +0000

Introduction

React.
Sounds cool.

Redux.
Sounds ok... wait, what? What is happening to React with Redux??

This was my reaction when my teacher showed the class how to use Redux a week ago. I still can’t be friends with it. It is supposed to make React easier, but there are many codes and files scattering inside project file making Redux seem complicated.

So, I have decided to dedicate this article to get to know Redux better.

Preparation to learn Redux...

To teach myself Redux, I created a simple React app.

When "🐈Meow" button is clicked, a cat face appears, and when "🐕Bark" is clicked, one cat disappears from bottom.

Explanation of Redux and its flow

Redux needs (roughly) 5 things.

dispatch
Action
Reducer
State
Store

1. dispatch - instruction

Imagine there is a tiny person working inside an app. Let's call him "Mr. Store". (If I'm confusing you, please stop reading and search for more suited Redux articles for you!)

Us, humans, click a button "🐈Meow" and it fires an onClick event.

<button onClick={increaseCatFunc}>🐈Meow</button>

What is increaseCatFunc of this onClick event?
It dispatches increaseCat function:

const mapDispatchToProps = (dispatch) => {
  return {
    increaseCatFunc: () => dispatch(increaseCat()),
    decreaseCatFunc: () => dispatch(decreaseCat()),
  };
};

increaseCat is the instruction that Mr. Store receives. He starts to take a look into Action.

2. Action - index

What I mean index here is the one you can find at the back of books.
Mr. Store searches for increaseCat ...and there he finds!

export const increaseCat = () => {
  return { type: INCREASE_CAT };
};

This function returns an object which has INCREASE_CAT. Now Mr. Store knows what to refer to in Reducer.

3. Reducer - manual

Reducer is like a manual. It shows Mr. Store what to do.

Inside Reducer, each action is specified within each switch case.

export const catReducer = (state = initState, action) => {
  switch (action.type) {
    case INCREASE_CAT:
      const newCatArr = [...state.cats];
      newCatArr.push('(=^・・^=)');
      return { ...state, cats: newCatArr };

    case DECREASE_CAT:
      const decreaseCatArr = [...state.cats];
      decreaseCatArr.pop();
      return { ...state, cats: decreaseCatArr };

    default:
      return state;
  }
};

For INCREASE_CAT, Reducer tells Mr. Store to copy the current state array, push a cat face into it and return an updated state.

4. State

State is pretty easy to understand. It is a current "state" of something.
In the same file as Reducer, the code declare an initial state.

const initState = {
  cats: [],
};

Mr. Store can know that state.cats is an array.
With INCREASE_CAT action, he inserts a new cat face in this array.

cats:['(=^・・^=)']

Every time we click the button, the cat face is inserted to the end of the array.

cats:['(=^・・^=)', '(=^・・^=)', '(=^・・^=)', ...]

(And we can have an infinite number of cats!)

Inside Cats.js, each entry in the array is rendered by using map.

<div>{catsArr && catsArr.map((cat) => <p>{cat}</p>)}</div>

5. Store

Finally, it is time to talk about Mr. Store. What is he?

Well, Store is the one that receives dispatch, refers to Action and change State according to Reducer.

Take a look at index.js.

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { catReducer } from './reducers/index.reducers';

const store = createStore(catReducer);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Reducer is imported and passed to createStore. Then, we wrap <App /> with <Provider> component and pass store.
By doing this, we can now make use of Store.

Here is the image description of what I went through above.

For better resolution (Go to Google Drive)

Conclusion(=^・・^=)

After writing this article, I feel that I am now a little closer to understanding Redux. Although I didn't explain further deep in detail, I was able to grasped the idea and flow of it.
Hopefully this article is useful to someone who's new to Redux like me!

Reference: https://www.mitomex.blog/redux-concept/ (Japanese)

Introduction to JavaScript with Simple Tutorial

MahoMori — Sat, 02 Oct 2021 20:56:37 +0000

Introduction

Okay, you studied the core of HTML and CSS, and can create simple websites now. ...What next? Oh, JavaScript.

I assume that is the natural thinking process when you start to learn how to create websites. So you start studying JavaScript.
After several hours of going through JavaScript material, one question will cross your mind.

How JavaScript work with HTML and CSS?

In this article, I will give you an idea of how you can use JavaScript with HTML and CSS.

Overview of walkthrough

You will be creating a simple website that you can enter a specific year, month and day and it will show you the date.
This is how it will look like.

Preparation

Create HTML, CSS and JavaScript files. Copy and paste codes below.

<div class="outer-container">
        <div class="container">
            <input type="text" id="year" placeholder="year (yyyy)">
            <input type="text" id="month" placeholder="month (mm)">
            <input type="text" id="date" placeholder="date (dd)">
            <button id="button">Check</button>
            <h2></h2>
        </div>
</div>

body {
    background-color: cadetblue;
}

.outer-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container {
    width: 300px;
    height: 200px;
    text-align: center;
}

input {
    height: 25px;
    width: 250px;
    margin: 10px;
}

button {
    height: 40px;
    width: 100px;
    background-color: #141414;
    color: white;
    border: none;
}

When you are done copying and pasting, it will look like this:

Step 1: querySelector()

You will want to execute a function that shows date when you click a button. To interact with HTML elements, you need to select them in JavaScript.
Write this line below in JavaScript file.

const btn = document.querySelector("button")

We are selecting a button element with document.querySelector() and assigning it to btn.

querySelector() method is useful as you can use not only element names, but also ids and class names.
For example:

document.querySelector("#id")
document.querySelector(".class")

There are also getElementById() and getElementsByClassName() methods to select ids and classes specifically. When using these methods, you don't need "#" and "." before name.

Step 2: addEventListener()

Next step is to assign an event to execute when the button is clicked.
Copy and paste the code below.

btn.addEventListener('click', function(){

})

The codes that are written inside function will be executed when the button is clicked.
There are several other events such as mouseover. You can check some of them here.

Step 3: Retrieving value inside `input`

btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")
})

Here, we are combining querySelector method and .value to get value from inputs. Also, we are selecting h2 element to show a result.

Step 4: Date() Object

For calculating day from entered year, month and date, we will pass these values to Date() object.

btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")

    const day = new Date(year, month-1, date)
})

Pass arguments and create an instance of Day().
Giving a small explanation of Day() function, it returns current time when no arguments are passed. It has several methods to acquire hours, milliseconds and such. (Read this for reference.)
If you check one part of code, which is const day = new Date(year, month-1, date), you might wonder why month is decreased by 1. This is because of the uniqueness of Day() object.
It returns month and day with numbers. For example, January is 0, February is 1, March is 2... and so on. That is why we need to decrease month input by 1.

Step 5: textContent

Finally, we will reflect the result to the webpage.

btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")

    const day = new Date(year, month-1, date)

    const daysList = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

    text.textContent = daysList[day.getDay()]
})

Let's break it down. Continuing from Step 4, I'll explain getDay() first.
At the last sentence, you can see text.textContent = daysList[day.getDay()].
getDay() is a method for Date() that returns day in numbers. Starting from Sunday which is 0, Monday is 1, Tuesday is 2... just like how numbers are assigned to each months.
To easily understand the result, we create an array, which is daysList in our code. day.getDay() becomes an index in daysList and is assinged to text.textContent.
This textContent is selecting inside text of h2 element so that when button is clicked, the result will be shown on screen.

Conclusion

The whole JavaScript code should look like this.

const btn = document.querySelector("button")


btn.addEventListener('click', function(){
    const year = document.querySelector("#year").value
    const month = document.querySelector("#month").value
    const date = document.querySelector("#date").value

    const text = document.querySelector("h2")

    const day = new Date(year, month-1, date)

    const daysList = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

    text.textContent = daysList[day.getDay()]
})

Did it work?
There are still a lot to improve. Even if you don't enter anything or month and date inputs are not between 1 - 12 and 1 - 31, it still returns something.
However, this tutorial is to give a rough idea of interacting with HTML through JavaScript. You can expand and go beyond from here.

I hope you are now a little familiar with DOM!

Algorithm

MahoMori — Thu, 27 May 2021 22:30:00 +0000

An algorithm has been such a pain in the neck for me since the course began. It made me feel back in time when I was 13 and started learning complex math at school.

I did not think the meaning of algorithm until now, or rather, I did not have a space in my brain to wonder.
So, I researched.

What is an algorithm? -- It is a way and procedure to solve problems.
It sounds very mathematical. However, you are using algorithms in your everyday life.

When you go to school, you

leave your house.
walk to a train station.
take a train.
get off the train.
walk to school.

When you want to make a sandwich, you

peel and wash lettuce.
slice tomato.
paste mayonnaise on breads.
put lettuce and tomato on a bread.
sandwich with another bread.

Just like these examples, we use algorithms unconsciously.
When coding, it can be illustrated as if you are telling someone to cook pasta, and this person doesn't know how to cook.
In this case, the person is a computer and your direction is a code.
Okay, it sounds less scary now.

What is it used for in our daily lives? --Many many things.
They range from dating apps to solar panels on ISS. Probably, the most popular one is Google search.

Google search uses an algorithm to optimise search result. It is updated on a regular basis and number of variables is enormous. It is almost impossible to understand all.

Another one that we use often is a navigation app. It searches the fastest route to go to one place from another.

Social networks such as twitter and Facebook also uses an algorithm to show information that is assumed to be important to you. This information is based on what you post, your friends and browsing history.

Lastly, dating apps, which are similar to the above. They gather data from you, whether you like someone tall/short, with/without beard, outgoing/stay-at-home type, etc. Based on these, a computer suggests people you might like.

More detailed explanation
Let's pick navigation apps to take a look in detail. The algorithm used for navigation is called Dijkstra method.

Here is how it works:
A is the current location and E is the destination. Numbers are time that needed to go to each nodes connected with paths.

There are three paths from node A, and we look for the closest node.
The closest is node D. From there, there is only one path. So we calculate time, which is 5 + 9 = 14.
Second closest node is B. There are two paths, but we can go to node C directly from A. In this case, we discard that path and only calculates the path to E, 6 + 6 =12. The sum is smaller than 14, so we keep this route as the fastest.
We do the same with third path from node A. We can go to node B directly from A, and only the path to node E is calculated, which is 8 + 5 = 13. This route is also longer than the one before.
The result will be A - B - E route.

Knowing what algorithms are used for gave me a clear view to study them.
There are tons of things that can be done with them and they make me wonder what I can do in the future.

*One last thing before going back to studying...
While researching, I suddenly recalled a song that is played in a TV show for toddlers in Japan. The song is called "Algorithm Koshin" (Algorithm March).
One website taught me that this march falls into a pipeline processing. It reduces time for running algorithm, and it is also used for improving CPU capability.

It is surprising that I could learn algorithm from a song!

DEV Community: MahoMori

Comparing similar JavaScript methods and how to use them

Introduction

"for of" and "for in"

Difference

Examples

"substring", "slice" and "substr"

DIfference

Examples

splice

Examples

"map", "filter", "reduce", "some", "every", "foreach" and "find"

DIfference

Examples

Conclusion

A (Very) Simple Explanation of How Redux Works

Introduction

Preparation to learn Redux...

Explanation of Redux and its flow

1. dispatch - instruction

2. Action - index

3. Reducer - manual

4. State

5. Store

Conclusion(=^・・^=)

Introduction to JavaScript with Simple Tutorial

Introduction

Overview of walkthrough

Preparation

Step 1: querySelector()

Step 2: addEventListener()

Step 3: Retrieving value inside input

Step 4: Date() Object

Step 5: textContent

Conclusion

Algorithm

Step 3: Retrieving value inside `input`