DEV Community: Megan Lo

for...in vs for...of in JavaScript

Megan Lo — Wed, 25 Aug 2021 06:14:54 +0000

For quite a while, I have been struggling to fully understand the differences between for...in and for...of. If you found this via Google or the dev.to feed, I can safely assume that you are probably wondering the same thing. for...in and for...of are the alternative of the for loop that we are all familiar with. However, for...in and for...of are used in different occasions depends on what you are looking for while the for loop we know can be used in basically in any situation.

We will first go over the examples/usages, then we'll break down each of them.

Examples/Usages

`for`

const arr = [1, 2, 3, 4, 5]

function printArr(arr) {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}

console.log(printArr(arr));

// 1
// 2
// 3
// 4
// 5

`for...in`

const obj = { a: 1, b: 2, c: 3 }

function printObj(obj) {
  for (let prop in obj) {
    console.log(`prop: ${prop}`)
    console.log(`obj[prop]: ${obj[prop]}`)
  }
}

console.log(printObj(obj));

// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3

`for...of`

const arrOf = [1, 2, 3, 4, 5]

function printArrOf(arr) {
  for (let ele of arr) {
    console.log(ele);
  }
}

console.log(printArrOf(arrOf));

// 1
// 2
// 3
// 4
// 5

Now you saw how they are used, let's break them down one by one!

Our Dear Best Friend, The `for` Statement

This basic for loop can be used anytime when we need iteration in anything.

Basic Syntax

for ([initialization]; [condition]; [final-expression]) {
  statement
}

The iteration usually happens inside the block (a.k.a {}). We would put multiple statements inside the block for the loop to be executed. You may use break, continue, etc. to continue or break the for loop based on the conditions.

Example with break

for (let i = 0;; i++) {
  console.log(i);
  if (i > 5) break;
}

// Expected Output: 
// 0
// 1
// 2
// 3
// 4
// 5
// 6

// Explanation: The loop breaks when i is larger than 5.

Quick Note: All those expressions inside the parentheses are optional.

Example with continue

for (let i = 0; i < 10; i++) {
  if (i === 7) continue;
  else console.log(i);
}

// Expected Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 8
// 9

// Explanation: if i is equal to 7, we will skip that i and move on to the next index.

`for...in`, Protagonist #1

for...in loop iterates over all enumerable properties of an object.

If you don't know what enumerable is, I'll do my best to explain what it is. Basically you can think of enumerable property is the key of the key-value pair in an object. It will also show up in the Object.keys() method. So if we look at our example from the section above...

const obj = { a: 1, b: 2, c: 3 }

function printObj(obj) {
  for (let prop in obj) {
    console.log(`prop: ${prop}`)
    console.log(`obj[prop]: ${obj[prop]}`)
  }
}

console.log(printObj(obj));

// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3

prop is the key in the key-value pair and that's our enumerable properties. If you have basic understand on how to retrieve the value of an object, we treat the key like index in an array and put it in a square bracket -> obj[prop], like this.

const obj = { 
  name: "Megan", 
  age: "do the Math", 
  role: "front-end developer" 
}

for (const property in obj) {
  console.log(property);
}

// Expected Output:
// name
// age
// role

So far, our examples are all in object, or {} (as array is also an object), it is not recommended/ good practice to use for...in to iterate over an array, where the index order is important.

Yes, array indexes are also enumerable properties but in integer. It behaves quite unpredictably if we use for...in to iterate an array. It is not guarantee that the elements are iterated in a specific order. Also, if you want to extend the array by assigning to an index that is beyond the current size of the array, it may not reflect the correct index. Therefore, for...of, forEach, or for loop with a numeric index is a better method to iterate an array. Check out the examples demonstrated in this article below 👇🏻

`for...of`, Protagonist #2

Now here's our second protagonist, for...of. In case you don't know, for...of is introduced in ES6. for...of has become a useful iteration method for a lot of JavaScript developers. for...of can iterate over any iterable objects. You name it, String, Array, Object...

String

const name = "Megan";

for (const alphabet of name) {
  console.log(alphabet);
}

// Expected Output:
// M
// e
// g
// a
// n

Array (copied from the Example section)

const arrOf = [1, 2, 3, 4, 5]

function printArrOf(arr) {
  for (let ele of arr) {
    console.log(ele);
  }
}

// Expected Output:
// 1
// 2
// 3
// 4
// 5

Object (With the help of Object.entries())

const obj = {
  name: "Megan", 
  age: "do the Math", 
  role: "front-end developer" 
};

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
  console.log(`${key}: ${value}`);
}

// Expected Output:
// name Megan
// name: Megan
// age do the Math
// age: do the Math
// role front-end developer
// role: front-end developer

// Explanation: the [key, value] is a destructure of the result from Object.entries.

🐧 Sidebar Note 🐧
Object.entries() returns an array of a given object's own enumerable string-keyed property.

const obj = {
  name: "Megan", 
  age: "do the Math", 
  role: "front-end developer" 
};

Object.entries(obj)
// [
//  [ 'name', 'Megan' ],
//  [ 'age', 'do the Math' ],
//  [ 'role', 'front-end developer' ]
// ]

When Should We Use Which One? 😯

The purpose of this section is put these two for statements "side by side", so we can have a comparison.

Here's a simple way to remember this:
⭐️ Use for...in when iterating the object's enumerable string-keyed property pairs. You know the { blah1: blah blah, blah2: blah blah blah }. BUT NOT ARRAY!! Remember think of whatever it is logged will be like logging the index of an array, but the string, so if you want to log/return the value, make sure print it with obj[key].
⭐️ Use for...of when iterating over iterable objects: String, Array, etc.

I Relearned JavaScript with Scrimba

Megan Lo — Tue, 03 Aug 2021 03:26:39 +0000

(Neither a sponsor nor promotion! It's just my experience with the website!)

Just a few days ago, I came across this website called Scrimba. Scrimba, the company, is based in Oslo, Norway. It provides both interactive IDE and code screenshot videos, much like its competitors, which I would explain more in a bit. With the amazing features, it only took less than 10 min to convince myself after discovering the website to start a course with them.

For those who don't know me, let me tell you a bit of my background. I graduated from college last August in sociology. I went to Flatiron School, one of the well known coding bootcamps, in the same month I graduated from college. Then, I graduated from Flatiron in Dec 2020. In Flatiron, I learned how to develop full-stack websites with ReactJS and Ruby on Rails. Now I am already 6 months in my job search journey.

✨ Why did I relearn JS? ✨

Throughout my job search journey, I have been using a lot of resources to brush up and improve my skills. However, I had not found one that works for me. What Flatiron has helped me is that not only I have multiple projects to showcase, but they also helped me build the programming foundation. But because the program went by so fast (I think that's quite typical for most coding bootcamps), I graduated feeling like I couldn't fully comprehend the JavaScript language, i.e. it took me more than 3 months to realize that JavaScript belongs to both object-oriented programming and functional programming. I am pretty sure that was taught at Flatiron, but the whole process went by in a blur and there were so many concepts to take in at once. My brain can't absorb everything! It also took me a few months of practices in data structures, working in small projects and couple interviews to finally have a better intuition on using JavaScript array and string methods.

Most of the articles I have written, if not all, is related to JavaScript. It is easy to write about array/string methods, the concept of each data structure, etc., but it becomes hard when you have to put these concepts in practice. I could write an article about Array.prototype.reduce but still don't fully understand on how to use it. It's like how you know 1 + 1 is equal to 2. But what if you have 1 apple on your left hand and 1 apple on your right hand, how do you come to a conclusion that you have two apples in total? -- This may be a more extreme example, but I hope you understand what I meant.

After graduation, I came across a few resources on building simple vanilla JS apps, like a random background color generator or a counter app. I was pretty sure it was not imposter syndrome, because I was literally scared to build one of these apps and I didn't feel confident at all to build one, as I was so used to ReactJS -- kinda ironic, right?.

Please don't misunderstand that I am blaming Flatiron for their curriculum. NOT AT ALL! It was definitely me and my learning style. I know some of my peers did really well throughout the bootcamp and got a job pretty soon. I am absolutely grateful that I enrolled to Flatiron and they gave me a courage and really pushed me to keep learning new programming concepts and languages.

✨ Scrimba and other resources ✨

You might have come across well-known sites, like CodeCademy and FreeCodeCamp. Scrimba has very similar style to these two free sites. They are all great and extremely informative.

But here's my critics for Scrimba's competitors:

CodeCademy

You need to subscribe to their Premium subscription in order to have access to the projects. I actually did subscribe with them a while back. But after I learned all the basic stuff and worked on their projects with the detailed guidelines, I remembered feeling like "coming out of a tutorial hell" and "I don't feel comfortable enough to start my own project from scratch".

Quick note: I have to thank Codecademy for teaching me to write my first line of HTML and CSS. I like their interactive experience, which I think they did an excellent job on explaining. They made web dev even more fun for me. I think it's perfect for people who learns best at hands-on experience and reading.

FreeCodeCamp

I think it's really great for newbies who is just getting started. I would say a newbie would get the best outcome by using the platforms of FreeCodeCamp and Codecademy (provided that you are willing to pay for the premium subscription) together. But here's what happened, I recently revisited FreeCodeCamp and looked back all the tutorials I have finished. I gotta be honest with ya, I have no memory that I finished most of the basic CSS responsive design curriculum.

I do have to mention that FreeCodeCamp is a non-profit organization. All the articles and curriculums are written by volunteers. They would also send a weekly newsletter on new curriculums and article highlights, which I very much enjoy.

Anyways, with all these reasons above was the reasons that made me appreciate Scrimba.

Scrimba

Scrimba also provides Pro subscription, just like CodeCademy. The difference is, Scrimba actually offers a few free FULL courses in languages and framework, like JavaScript and Vue. I think it's good enough for people who needs a refresher or even a newbie, who just want to try it out!

In the JavaScript course, it includes building a few fun apps, like a blackjack game. As someone who has basic JS knowledge, I feel like this course is a really great refresher. As for someone who used to be afraid to start my very small app, as a user, you learn the concept and you have a chance to put these concepts into an actual JS app, which YOU build FROM SCRATCH. I found that learning style suits me so much better and I wish I discovered this website way sooner.

However, one thing that could be quite confusing is the interactive IDE and the video being on the same page.

👆🏻 This is simultaneously a video and an interactive code editor as you can see from this GIF.

To solve this confusion, I tried it out not too long ago and finally figured it out. It looks like you can edit the code by clicking on the IDE, and whatever you typed on the IDE will be saved on a "different branch" and a separate note which you can refer later on as it is saved on the timestamp.

What I appreciate the most is that before each new concept, there always will have a quick and clear concept breakdown, like "what is a DOM?" and will be demonstrated on the code where you are building the JS app on.

There is also a discord channel you can join to connect with other learners -- which I think it's quite typical. Another cool part of Scrimba is that you can participate the weekly web dev challenge. This week's weekly web dev challenge is "Name Beautifier". Great for people who want to brush up on their CSS. There will be live streams on the discord channel to showcase everyone's solutions/submissions at the end of each week and anyone who is selected as winner would have a chance to get free 1-year pro subscription. In a way, it reminds me of Frontend Mentor, but you got a deadline and the entire community to participate this type of challenge with you.

I also have to mention, I love their web design! I am a huge fan of their pastel color, and I love how minimalistic and cute the web design and the color palette is. (For those who noticed my cover picture, thank you for noticing. I actually got the background color and the font color from the website -- unfortunately not the font 😅, 'cause I already downloaded the picture and I was too lazy to remake it.)

Conclusion

I have to be honest, I have never been so quick to write an article about a resource that I used. But I just love everything about this website... so far!

Long lectures can be boring. Sometimes it is hard to just read documentations because there are so many technical words, especially for those who do not have computer science background. If you are someone who is both a visual learner and needs hands-on experience, this website is perfect for you!

I am only day 2 into the course. At this point, it is more a refresher for me, but at least I am building small apps with vanilla JS (and making commits to Github LOL) (I am actually very excited to build the blackjack game). I literally feel like I am relearning JS as I go!

PUT vs PATCH & PUT vs POST

Megan Lo — Mon, 26 Jul 2021 06:06:58 +0000

Introduction

In one of my interviews recently, I was asked to explain the difference between PUT vs PATCH. You might be thinking, "Oh yeah, that's a common interview question!" But you know what, as common as you think it is, I actually didn't know how to answer this question (and yep, got rejected too haha🥲). Now I learned my lesson, I decided to write an article not only to help myself to understand but for those who are preparing for your (next) interviews!

For those who found this article via your feed or from Google, welcome! I will not necessarily provide you the direct answer for your interview in this article, but I hope it is thorough enough to help prepare for your interview(s). Also, I am not providing any new materials/founds/insights, but please consider this more of a thorough cheatsheet!

In this article, I assume you have already understood the basics of the HTTP methods in REST, but let's do a brief review before diving into the differences.

`POST`, `PUT` & `PATCH`

What is `POST`?

Create in CRUD
A method to create a new (subordinate) resource into the collection of resources
When creating a new resource, the server will automatically assign an ID to this new resource.
If successfully created, will return the HTTP status code 201 (CREATED) and return a location-header with a link, like https://www.example.com/recipes/1.
This method is neither safe nor idempotent. In other words, invoking two identical POST requests will result in two different resources containing the same information

Syntax with Axios (Example from Educative.io)

const axios = require('axios')

axios.post('https:sample-endpoint.com/user', {
    Name: 'Fred',
    Age: '23'
  })
  .then(function (response) {
    console.log(response);
  })

What is `PUT`?

Update in CRUD
A method to primarily update existing resource. If the resource does not exist, the API may decide to create a resource.
If successfully updated, will return the HTTP status code 200 (OK), or 204 (No Content) if nothing is updated. If successfully created, will return the HTTP status code 201 (CREATED).
This method is not safe, since it modifies (or creates) states within the resource.
It is however idempotent, since the resource will be the same and has the same state as it did in the same call if it is created or updated a resource with the same call again.

Syntax with Axios (Example from Jason Watmore)

const article = { title: 'React PUT Request Example' };
axios.put('https://reqres.in/api/articles/1', article)
  .then(response => this.setState({ updatedAt: response.data.updatedAt }));

What is `PATCH`?

(Also) Update in CRUD
A method to make partial update on the resource.
If successfully updated, will return the HTTP status code 200 (OK), or 204 (No Content) if nothing is updated.
This method is neither safe nor idempotent.

Syntax with Axios (Example from Mastering JS)

const res = await axios.patch('https://httpbin.org/patch', 'hello=world');

res.data.headers['Content-Type']; // application/x-www-form-urlencoded
res.data.json; // { hello: 'world' }

Okay, now let's talk about the differences.

`PUT` vs `POST`

1. Create and/or Update?

The most obvious difference is that PUT can both create and modify a resource while POST can only create a resource.

For PUT, if the Request-URI refers to an already existing resource, an update operation will happen, otherwise, it will create a new resource IF the Request-URI is a valid resource URI.

Request-URI stands for:

The request URI is the uniform resource identifier of the resource to which the request applies. While URIs can theoretically refer to either uniform resource locators (URLs) or uniform resource names (URNs), at the present time a URI is almost always an HTTP URL that follows the standard syntax rules of Web URLs.

More details here

Its request syntax will look something like this: PUT /users/{user-id}

Whereas for POST, the origin server accept a request as a new subordinate of the resource identified by the Request-URI.

Its request syntax will look something like this: POST /users

2. Idempotence

The PUT method is idempotent. Meaning if you (re)try to send a request multiple times, this is equivalent to a single request modification.

Whereas, the POST method is NOT idempotent. If you retry to send a request multiple times, you will end up having multiple resources with multiple different URIs on the server.

3. In Practice

Generally speaking, the PUT method is used for UPDATE operations while the POST method is used for the CREATE operations.

`PUT` vs `PATCH`

1. Update Partially or Fully a.k.a Replace?

PUT and PATCH can both be used for updating resources. However, the biggest difference between these two is that one can update and replace the resource while the other one can update partially.

In other words, when making a PUT request, the enclosed entity (a specific place you are making request on) is viewed as the modified version of the resource, and the client is requesting to replace with the new info; when making a PATCH request, it modifies only some part of the resource.

I found this great resource which use building houses as an example, here's the link and here's how the author demonstrated:

Let's say we have this house:

// House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 20
}

PUT

// PUT request payload to update windows of House on plot 1
{
  address: 'plot 1',
  owner: 'segun',
  type: 'duplex',
  color: 'green',
  rooms: '5',
  kitchens: '1',
  windows: 21
}

PATCH

// Patch request payload to update windows on the House
{
  windows: 21
}

2. Idempotence

PUT is idempotent with reasons mentioned above, while PATCH is not idempotent. If a request is reattempted to be made, it will result a failed request (Method Not Allowed). If a PATCH request is made to a non-existent URI, it would simply fail without creating a new resource like PUT.

Before You Go...

Hope you have some takeaway from this article! To recap this article, the main differences with these methods are the idempotence and how they operate with the requests from clients!

PUT vs POST: YAS to creating new resources, but only PUT can update/modify resources and it is idempotent but not for POST
PUT vs PATCH: YAS to modify/update resources. PATCH allows us to modify the enclosed entity partially, while PUT basically replaces the entire thing.

I will attach some further readings if you are interested in learning more!

Last but not least, happy coding!

Resources

HTTP Methods for RESTful Services (Part 1)

Megan Lo — Mon, 19 Jul 2021 06:55:32 +0000

HTTP Methods -- one of the commonly asked interview topics for web developers.

What are they? Why do they exist? How are they useful for web development? If you are preparing for your tech interview, I hope this article will be helpful to you!

I am splitting this into two parts to avoid the article getting too lengthy as I would like to discuss some common interview questions as we continue our discussion!

Introduction

According to MDN,

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource.

If you are familiar with full-stack, you probably know the CRUD operation, which stands for Create, Read/Retrieve, Update, Delete. The HTTP methods are closely associated with CRUD and are used to communicate with servers whenever there's data involved.

A common example where you will see these actions is when a platform involves users, like Twitter and Facebook. However, a lot of resources have used this as examples. Therefore, I would use recipes as example.

HTTP Methods	CRUD	What For?	Example Request URIs
`GET`	Read/Retrieve	Retrieve the recipes from our server	`http://www.example.com/recipes` or `http://www.example.com/recipes/1`
`POST`	Create	Create a new recipe that is sent from client side	`http://www.example.com/recipes/new`
`PUT`	Update/Replace	Update an existing recipe that is sent from client side	`http://www.example.com/recipes/{:id}`
`PATCH`	Update/Modify	Update an existing recipe partially that is sent from client side	`http://www.example.com/recipes/{:id}`
`DELETE`	Delete	Remove/Delete an existing recipe from the resource	`http://www.example.com/recipes/{:id}`

Let's break down each of them one by one!

`GET`

We use GET requests to retrieve information only -- not to modify the information in any way. Since the GET request does not modify anything, it is considered a "safe method". On top of that, GET APIs should be idempotent, which means making multiple identical requests must and will produce the same result.

✋🏻Sidebar✋🏻

Question 1️⃣ : What does "idempotent" mean?
Answer: Something Idempotent (or idempotence in noun form) in RESTful API standpoint means the client can make as many requests as they want and the fetch result will still be the same, i.e. the resource is not going to be modified just because someone make multiple calls. We will see this keyword again later in this article.

Question 2️⃣ : Why is GET method defined as "safe"?
Answer: A method is defined as "safe" when they are intended to retrieve data only, which makes the method idempotent in other words, since multiple identical requests will behave the same. HEAD, OPTIONS and TRACE in REST are also defined as "safe" methods. However, we will not cover these three methods in this article -- hopefully something I will cover in future articles!
My resource for the definition of idempotent and safe method (REST API tutorial)

(And continue)
Whenever we make any GET request, if the resource is found on the server, it must return HTTP response code 200 (OK) -- along with the response body, which is usually XML or JSON content. If the resource is not found, the server must return the infamous HTTP response code 404 (NOT FOUND). If the resource is determined that the GET request is incorrectly formed, the server will return 409 (BAD REQUEST).

Syntax

axios({
  method: 'get',
  url: 'https://geek-jokes.sameerkumar.website/api?format=json',
});

(This is a working API, here's the repo for this API!)

`POST`

We would use the POST method because we want to create a new (subordinate) resource into the collection of resources, e.g. adding a newly found recipe to our collection of recipe! When creating new resource, the server will automatically assign an ID (new resource URI) to this new resource.

If successfully created, the server will return the HTTP status code 201 (CREATED), returning a location header with a link to the newly-created resource with the 201 HTTP code. (like https://www.example.com/recipes/1)

POST methods are neither safe nor idempotent and invoking two identical POST requests will result in two different resources containing the same information.

Syntax

axios('/login', {
  firstName: 'Megan',
  lastName: 'Lo'
});

`PUT`

We use the PUT method primarily to update existing resource. If the resource does not exist, then the API may decide to create a resource or not. On a successful update, the server will return 200 (OK), or 204 (NO CONTENT). If PUT is used for creation and success, the server will return 201 (CREATED), like POST.

PUT is not a safe operation, since it modifies (or creates) states within the resource, however it is idempotent. If you create or update a resource with the same cal again, the resource is still there and has the same state as it did in the same call. (It is however not idempotent, if you are trying to increment a state.)

Syntax

const article = { title: 'React PUT Request Example' };
axios.put('https://reqres.in/api/articles/1', article)
  .then(response => this.setState({ updatedAt: response.data.updatedAt }));

(Code Example from here)

There you go! You learned what GET, POST, PUT are in this article. In the next article, I will like to dive into the difference between POST and PUT (common interview question). We will also discuss what PATCH and DELETE are.

Stay tuned and see you in the next article!!

Class Components vs Functional Components in React

Megan Lo — Sun, 11 Jul 2021 08:19:43 +0000

Disclaimer: This article is not about which components are better, but more of a discussion on the differences.

When I started learning React with my bootcamp, we mainly focused on using class components -- if there is initial state, and presentational components if we are just grabbing props. I heard of functional components, but never felt comfortable using it until I started learning Hooks (Remember you can only use Hooks in functional components, not class components).

Let's break down the syntax difference in each of these components!

Difference 1: Rendering JSX

🕹 Syntax 🕹

Class Component (without ES6 destructuring)

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Functional Component

import React from 'react';

function App() {
  return <h1>Hello, World!</h1>;
}

🍳 Breakdown 🍳

As you can see above, there are a couple obvious differences in functional component:

We don't need to extend a component
We also don't need to use the render keyword.

Q: Why do we need to extend the React.Component class in class component?
A: In React, by extending the React.Component class, it allows us to pass props to a user defined class/component and inherit methods from React.Component class, like the lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount, render) and setState.

📝 Note 📝

In case you don't know, render is one of the lifecycle methods and the only required method in a class component. It would examine this.props and this.state and return types like React elements (JSX), array and fragments, etc. Do not expect it will modify component state!

The React documentation has a very precise and clear explanation on the render method, as well as the rest of the lifecycle methods. here

⭐️ Additional Note ⭐️

Here's a rule of thumb 👍🏻:
If you only have the render method in your class component, use functional component (which is referred as stateless component sometimes) instead. In functional component, everything defined in the function's body is the render function which returns JSX in the end.

That's how Hooks comes in place as well. In case you want to make a state change in that functional component, you can easily add it without changing to class component by using useState and useEffect for lifecycle methods (will cover that in a bit!).

Resources

Extending React (JavaScript January)
Why we do extends React.Component when creating the class component in React? (Stack Overflow)

Difference 2: Passing Props

🕹 Syntax 🕹

Let's say we have a props name from this Component:
<ExampleComponent name="Megan" />

Class Component

class ExampleComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }!</h1>

   // or without destructuring, it will look like this:
   // return <h1>Hello, { this.props.name }!</h1> 
  }
}

Functional Component

// with destructuring
const ExampleComponent = ({ name }) => {
  return <h1>Hello, { name }!</h1>
}

// without destructuring
const ExampleComponent = (props) => {
  return <h1>Hello, { props.name }!</h1>
}

🍳 Breakdown 🍳

In class component, since it is a class, we have to use this to refer to the props, or we can destructure it to get name inside props. Or if we have multiple props, we can do that too:

class ExampleComponent extends React.Component {
  render() {
    const { name, age, occupation } = this.props;
    return (
      <div>
         <h1>Hello, { name }!</h1>  
         <p>I am { age } yo and I work as a { occupation }.</p>
      </div> 
    )
}

As for functional components, we are passing props as an argument of the function. Same as above, if we have mutliple props, we can do this:

// with destructuring
const ExampleComponent = ({ name, age, occupation }) => {
  return (
      <div>
         <h1>Hello, { name }!</h1>  
         <p>I am { age } yo and I work as a { occupation }.</p>
      </div> 
  )
}

// without destructuring
const ExampleComponent = (props) => {
  return return (
      <div>
         <h1>Hello, { props.name }!</h1>  
         <p>I am { props.age } yo and I work as a { props.occupation }.</p>
      </div> 
  )
}

Difference 3: Handling and Updating state

Before React 16.8 (released in Feb 2019), class component was the only component that can handle state. With the introduction of Hooks and its useState in React 16.8, we can handle state in functional component! yay!

In case you are not familiar with Hooks and wondering what so special about this Hooks thing, this Intro to Hook from React documentation explains pretty thoroughly.

(Off topic: I personally enjoy reading the React documentation because they are able to explain the most technical concepts in a not so robotic and boring tone, really unlike a lot of the documentations I have read. I highly recommend you to spend some time reading the doc!)

🕹 Syntax 🕹

Class Component

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "Megan"
    };
  }

  // or you can write this without constructor():
  // state = {
  //  count: 0,
  //  name: "Megan"
  // };

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click to add 1
        </button>
      </div>
    )
  }
}

Alternatively, you can write the function inside onClick event before render():

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "Megan"
    };
  }

  // or you can write this without constructor():
  // state = {
  //  count: 0,
  //  name: "Megan"
  // };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
        <button onClick={this.handleClick}>
        // or <button onClick={() => this.handleClick()}>
          Click to add 1
        </button>
      </div>
    )
  }
}

Functional Component

// by the way, I don't want to continue this without explanation
// This is the arrow function, in case you are not familiar
// Alternatively, you can also write 
// function ExampleComponent()
// They are basically the same thing.


import React, { useState } from 'react';
// ES6 destructure ^

const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  // or without destructuring, this will be React.useState(0)

  return (
    <div>
      <h1>Hello, {this.state.name}</h1>
      <button onClick={this.handleClick}>
      // or <button onClick={() => setCount(count + 1)}>
         Click to add 1
       </button>
    </div>
  )
}

🍳 Breakdown 🍳

In class component, we can access the value of the state by using this.state inside JSX and we would use setState to update the value of the state. You can set the function inside the event or outside of the render() method -- for readability.

In functional component, we would use useState to assign initial state and we would use setCount (in our example) to update the state. If we want to access the value of the state, we can omit this.state and call the name of the state instead, in our case, it would just be count.

Q: What's with the square bracket, like [count, setCount]?
A: The [count, setCount] syntax is called "array destructuring"!! We are basically making two new variables, in other words,

let countVariable = useState(0);
let count = countVariable[0];
let setCount = countVariable[1];

This can be quite confusing by accessing with 0 and 1 as they have a specific meaning, so React use the "array destructuring" instead.

This is simply the highlight I got from the React documentation, here's the section where you can read in details!

Last but not least...

Difference 4: Lifecycle Methods

useEffect is the combination of componentDidMount, componentDidUpdate and componentWillUnmount.

`componentDidMount`

It is invoked immediately after a component is mounted (Mounting means when an instance of a component is being created and inserted into the DOM -- React Doc).

🕹 Syntax 🕹

Class Component

class ExampleComponent extends React.Component {
  this.state = {
    data: []
  }
  componentDidMount() {
    fetch(someUrlHere)
      .then(res => res.json())
      .then(data => this.setState(data))
  }

  render() {
   ...
  }
}

Functional Component

const ExampleComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(someUrlHere)
      .then(res => res.json())
      .then(data => setData(data))
  }, []);

  return (
    ...
  )
}

🍳 Breakdown 🍳

In class component, componentDidMount is only called once after the first render.

In functional component, we replace componentDidMount with useEffect. As we can see there's a [] in the second argument, we usually would put some state we like to update/change, let's say you want to restart a quiz app. useEffect will only be called if there's any selected changes.

In our case right now, since it is an empty array, useEffect will be called once on mounting, similar to componentDidMount.

As you can see in both components, we can set state inside the methods.

`componentWillUnmount`

It is invoked immediately before a component is unmounted and destroyed. It is usually used for performing any necessary cleanups. One of the most straightforward examples is clear an interval (clearInterval duh).

🕹 Syntax 🕹

(Code reference from this Stack Overflow post)

Class Component

class ExampleComponent extends React.Component {
  this.state = {
    data: []
  }

  // say we have a mounted function that returns a boolean
  mounted = () => {
   ...
  }

  componentDidMount() {
    this.mounted = true;

    fetch(someUrlHere)
      .then(res => res.json())
      .then(data => {
         if (this.mounted)) {
            this.setState(data)
         }
      })
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
   ...
  }
}

Functional Component

const ExampleComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    let isMounted = true;

    request.get(url)
      .then(result => {
        if (isMounted) {
          setData(result);
        }
      });
     return () => {
        isMounted = false;
     };
   }, []);

  return (
    ...
  )
}

🍳 Breakdown 🍳

Not so much of a breakdown, but as you can see:
Cool thing about useEffect is that you can write functions for both mounting and unmounting in the same place.

componentWillUnmount is useful when doing cleanups as mentioned above, without that, it can cause severe memory leaks on a bigger project.

Conclusion

As this article is getting longer, I promise I will keep this conclusion section short but short enough to give you room to think about.

React Hooks are taking over in modern React, as it is created to be more relevant and timeless (according to the React doc).

From the comparisons above, we can see how functional components are written shorter and simpler, which makes it easier to read, write and test -- because they are just plain JS functions. However, the rendering time and performance in either components do not make a lot of differences.

I do not necessarily think one is better than the other. A functional programmer may find easier to use functional components, while that applies the same to an object oriented programmer may find easier to use class components.

As I mentioned in the introduction, I started with class components and I am currently in the transition of using functional components, as I like React Hooks a lot and I feel like I can do a lot more with it, but I still feel more comfortable to use the lifecycle methods in class component.

There are a lot of discussions out there which one is better than which and why one prefer over the other. Let me know what you think and let's start a discussion down below!

Async/Await in JavaScript

Megan Lo — Mon, 21 Jun 2021 07:52:00 +0000

YOU ARE ALMOST THERE!!!

This will be the last article of the series.

There are 4 parts in this series:

Intro to Asynchronous JS
Promises in JavaScript
More Promises in JavaScript
async, await (this article)

Note: If you are not familiar with the concepts of either callbacks or Promises, I highly recommend you to visit the previous articles first. Promises and callbacks are the precedents of async and await and they are the reasons why async and await exists.

Introduction

As mentioned in the previous article, Promises were introduced in ES2015 and it were meant to solve the callback hell issues. Turns out Promises were not enough. The keywords async and await were introduced in ES2018 to reduce the boilerplate of Promises and to solve the limitation of "don't break the chain" in promises chaining.

Let's see the difference between Promises and async/await!

A promise:

const promise = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve("done!"), 1000);
  })
};

async/await:

const promise = async () => {
  console.log(await promiseAsync());
};

A promise:

const promise = () => {
  return Promise.resolve(1);
};

async/await:

const promise = async () => {
  return 1;
};

By appending the async keyword to any function, the function will return a promise.

Rewriting a promise with `async` and `await`

Remember how we printed a list of Harry Potter characters from our previous article? Here's the code as a refresher:

// grab that main element 
const main = document.getElementById("main");

// fetch the third-party API
// I modified this to just a fetch,
// instead of assigning to a variable
fetch("http://hp-api.herokuapp.com/api/characters")
  .then(response => {
      return response.json();
  })
  .then(characters => {
      main.innerHTML = mapCharacters(characters);
  });

const mapCharacters = (characters) => {
  const names = characters.map(character => `<li>${character.name}</li>`);
  return `<ul>${names}</ul>`
}

Let's rewrite this with aysnc/await!

We'll replace .then to await
We should make the function async for them to work!

async function fetchCharacters() {
  // read JSON
  let response = await fetch("http://hp-api.herokuapp.com/api/characters");
  let characters = await response.json();

  main.innerHTML = mapCharacters(characters);
};

fetchCharacters();

const mapCharacters = (characters) => {
  const names = characters.map(character => `<li>${character.name}</li>`);
  return `<ul>${names}</ul>`
}

Now we replace all the .then with await! It's so much cleaner and less boilerplate!!

And for error handlers, all we have to do is (unfortunately, they don't have the await way of doing this to handle error 🥲):

fetchCharacters()
  .catch(error => {
    console.log(error)
  });

A few things to remember

💯 `await` won't work in the top-level code

When we see await inside a function, there's an async append to the function. However, just a reminder, await won't work in the top-level code. In other words, you can't straight up using the await keyword on a variable:

// this won't work since it's not wrapped
// in an asynchronous function
let response = await fetch("http://hp-api.herokuapp.com/api/characters");

We have to wrap await inside an asynchronous function.

💯 You can catch errors with `try...catch`

One thing I didn't mention earlier in the previous article (and I apologize) is that Promise.reject(new Error("...")) is equivalent to throw new Error("...").

With try...catch, you can do this:

async function fetchCharacters() {
  try {
    let response = await fetch("http://hp-api.herokuapp.com/api/characters");
    let characters = await response.json();

    main.innerHTML = mapCharacters(characters);
  } catch(err) {
    console.log(err);
  }
}

💯 `async/await` works in `Promise.all` as well!!

If you came from the previous article, you might still be digesting the concept of Promise.all. But no worries, we are only going to cover very briefly, so you have an idea.

I am going to use the example from the previous article.

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(1)), 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(2)), 2000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(3)), 3000);
});
const p4 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(4)), 4000);
});
const p5 = new Promise((resolve, reject) => {
  reject(new Error('reject'));
});

// we wrap the promises in Promise.all and then await
let results = await Promise.all([
  p1, 
  p2, 
  p3, 
  p4, 
  p5
])

That's it!!

✨ And there you go!! ✨ Now that not only you learned Promises, you also learned more about async/await! Just remember with async/await, promise.then/catch is rarely used. async/await together provides a great framework to write asynchronous code that is easy to read and write!

Before You Go

Since this is the last article of the series, let's end with a good note by wrapping up what we learned in this series:

JavaScript is synchronous and single-threaded. Since JS program is typically event-driven, therefore we care about asynchronous programming.
Promises were introduced in ES2015 to solve the callback-hell issue
The three states of Promises are pending, resolved, rejected.
When a promise object is fulfilled, the result is a value; when a promise object is rejected, the result is an error object.
The three consumer handlers in promise: .then, .catch, .finally
We can do chain promises with .then
We can fetch multiple promises with Promise.all
async and await were introduced in ES2018 to reduce the boilerplate of Promises and the limitation of "don't break the chain" of chaining promises.
When async/await is used, promise.then/catch is rarely used.

And that's it! I am more than happy if you need to bookmark this series for any refresher in the future!

YAY! You made it to the end! Be proud of yourself! And...

If there's any mistake or inaccuracy (with the terminology, etc.) in this series, please feel free to comment below. Like a lot of you who are reading this series, I wrote as I learned.
Hope this series help you build a foundation in asynchronous programming and get rid of the struggle before you read the series!

Last but not least, happy coding!!

Resources

🌟 Modern Asynchronous JavaScript with Async and Await (NodeJS documentation)
🌟 Making asynchronous programming easier with async and await (MDN)
🌟 Async/await
🌟 JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦

More Promises in JavaScript

Megan Lo — Sun, 20 Jun 2021 19:42:53 +0000

Welcome back! Excited to have you in this journey with me!

There are 4 parts in this series:

Intro to Asynchronous JS
Promises
More Promises (this article)
async/await

Introduction

In the last article, we covered the basics of Promises. Now we are learning something a little bit more advanced!

Here's a quick recap from the last article, we learned:

The different states of a promise: pending, resolved, rejected
The Consumers in Promises: .then, .catch, .finally

With the knowledge above, in this article, we would cover chaining promises and fetching multiple promises.

Chaining Promises + Real Example

Now that we learned about handler methods, it is time to put them in a more practical example. We usually see multiple .then in a promise as we want to do more things. Do you still remember one of the asynchronous callbacks: network request from Intro to Asynchronous JavaScript (or if you didn't read the article, that's fine too!)?

We are going to use that and make it a promise and we'll use our handlers in this example. Fetching data/third-party API is pretty common and we usually fetch data asynchronously.

We will use Fetch API, which is registered with the fetch() method. You may wonder why fetch(). fetch() not only is very similar to our old friend XMLHttpRequest, but also starts a request and returns a promise. Therefore, you'll see fetch() in a lot of articles related to asynchronous programming in JS, including this one.

Without further ado, let's see how it works!

Note: If you want to code along, please create a new HTML file, add a <div id="main"></div> and attach <script> at the bottom of the HTML <body>!

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Characters from Harry Potter</title>
  </head>
  <body>
    <h1>Characters from Harry Potter</h1>
    <div id="main"></div>
    <script>
    </script>
  </body>

</html>

Step 1: Check out the HTTP request first.

// fetch the third-party API
const fetchHP = fetch("http://hp-api.herokuapp.com/api/characters")

console.log(fetchHP);

As we can see above, it is not returning above but a pending promise. As we are making an HTTP request as an asynchronous operation, fetch will not return any data.

Step 2: Next, we'll use the .then method to attach a callback once our promise is fulfilled!

// fetch the third-party API
const fetchHP = fetch("http://hp-api.herokuapp.com/api/characters")

fetchHP.then(response => console.log(response));

Step 3: Knowing that the response works (i.e. the promise is fulfilled), we want to return this response in json() method. As json() is also a promise, we would need to create a promise chain for this:

// fetch the third-party API
const fetchHP = fetch("http://hp-api.herokuapp.com/api/characters")

fetchHP.then(response => {
  return response.json();
}).then(characters => console.log(characters));

After you refresh your browser and when you check your console, now it returns all the characters from the API:

Step 4: Now that we have all the characters, I will create another function to map the character's name one by one with another and to print all the names onto our web page:

// fetch the third-party API
const fetchHP = fetch("http://hp-api.herokuapp.com/api/characters")

// grab that main element 
const main = document.getElementById("main");

fetchHP.then(response => {
      return response.json();
})
  .then(characters => {
      main.innerHTML = mapCharacters(characters);
  });

const mapCharacters = (characters) => {
  const names = characters.map(character => `<li>${character.name}</li>`);
  return `<ul>${names}</ul>`
}

With all that combined, you should see this (please ignore the ","):

Last but not least, let's go ahead and add .catch handler, in case any errors with our promise:

// fetch the third-party API
const fetchHP = fetch("http://hp-api.herokuapp.com/api/characters")

// grab that main element 
const main = document.getElementById("main");

fetchHP.then(response => {
      return response.json();
})
  .then(characters => {
      main.innerHTML = mapCharacters(characters);
  });
  // HERE: error handler
  .catch(error => {
    console.log(error)
  });

const mapCharacters = (characters) => {
  const names = characters.map(character => `<li>${character.name}</li>`);
  return `<ul>${names}</ul>`
}

There you go! You got all your Harry Potter characters on your web app. You can play around by adding images, houses, etc.!

🙋🏻‍♀️ Author's note:

As you may have noticed, I have been using GIFs from the MCU throughout the series. As much as I would love to use Marvel API as demonstration, however, they don't have a public API and requires an API key. Therefore, we'll be using Harry Potter API instead.
If you are still interested in using the Marvel API, here's the documentation.
As of June 20, 2021, the Harry Potter API I initially would like to use is currently under maintenance. Hopefully by the time when you read this article, they are available for use. There may be some difference with the key-pairs in the API.

Now that we learned about chaining promises, let's switch the gears a bit! There is a possibility that we have to fetch multiple promises. Let's see how it's done in the next section.

`Promise.all`

There are 6 static methods in the Promise class, including: Promise.all, Promise.allSettled, Promise.race, Promise.any, Promise.resolve(value), Promise.reject(error).

Promise.all is the most common in practice, therefore I will only cover this in this article.

Q: When would we use Promise.all?
A: When we have multiple promises to execute in parallel. Examples like fetching multiple URLs in parallel and process the content.

Promise.all takes an array of promises and returns a new promise. Let's how it looks like with setTimeOut():

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 2000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000)),
  new Promise(resolve => setTimeout(() => resolve(3), 2000)),
]).then(alert);

(Code reference from javascript.info)

Quick demo:

Let's include error handler and finally handler and see how it looks like:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(1)), 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(2)), 2000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(3)), 3000);
});
const p4 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(console.log(4)), 4000);
});
const p5 = new Promise((resolve, reject) => {
  reject(new Error('reject'));
});

Promise.all([p1, p2, p3, p4, p5])
  .then(values => console.log(values))
  .catch(error => console.log(error))
  .finally(() => console.log("Promise done!"));

Quick demo:

If you are interested in seeing what it is like fetching multiple URLs, please check out here. They use an example of fetching multiple Github profile and print the user names on the alert.

Also allow me to give you a reminder -- if you are a semicolon person, make sure to put the semicolon after you are done with ALL the handlers, there's no need to put the semicolon at the end of every handler.

There you go! This is more like a high level of slightly advanced Promise knowledge, but hopefully you get the gist of what Promise chaining is like, as well as fetching promises!

Next up, we'll discuss the newer asynchronous operator: async/await!

To make up the lack of the MCU GIF in this article...

Resources

🌟 How to make HTTP requests using Fetch API and Promises (Medium blog by Armando Amador)
🌟 Graceful asynchronous programming with Promises: Chaining the blocks together (MDN)
🌟 Promise.all() (MDN)
🌟 Promise API (javascript.info)

Promises in JavaScript

Megan Lo — Sun, 20 Jun 2021 07:14:11 +0000

Hope you had a great break before continuing the series!

In this article, we would cover Promises. If you haven't read the previous article (Intro to Asynchronous JS), I highly recommend you to first read it before coming back to this article, as it builds an important foundation for this article.

There are 4 parts in this series:

Intro to Asynchronous JS
Promises (this article)
More Promises
async/await

Introduction

Promises was introduced in ES6 to simplify asynchronous programming.

I would divide this article into the following sections:

Why was Promises introduced? (Spoiler Alert: Trouble with callbacks)
Promise Terminology
Basic Promise usage
Promise Consumer: then, catch, finally

In the next article, we'll cover:

Chaining Promise
Fulfilling multiple Promises

Before Promises: Old-style Callbacks

Before the introduction of Promises in ES6, asynchronous was commonly handled with callbacks (calling a function within another function). This is important to know before diving into Promises.

Let's see some callback example. Imagine you are ordering Starbucks coffee on a Monday morning and you are feeling cranky. Unfortunately, you don't just get your coffee with a snap.

You have to first decide what kind of coffee you want, then you place your order with the barista, then you get your coffee, last but not least,

Here's how the callback's going to look like (reference to MDN doc on Promise):

chooseCoffee(function(order) {
  placeOrder(order, function(coffee) {
    drinkCoffee(coffee);
  }, failureCallback);
}, failureCallback);

As you can see, it's very messy-looking! This is what is often referred to as "callback-hell". Promises allow these kinds of nested callbacks to be re-expressed as Promise chain, which we would cover more in the next article.

In the following section, we would first cover the terminology, then we'll dive into the basic Promise usage using the callback functions we saw in the series.

Promise Terminology

Here's the basic syntax of Promise:

let promise = new Promise(function(resolve, reject) {
  // executor
});

The arguments resolve and reject are the two callbacks provided by JavaScript.

Here are the three states in a promise you need to know:

pending: when a promise is created, it is neither in success or failure state.
resolved: when a promise returns, it is said to be resolved.
fulfilled: when a promise is successfully resolved. It returns a value, which can be accessed by chaining a .then block onto the end of the promise chain (will discuss this later in the article)
rejected: when a promise is unsuccessfully resolved. It returns a reason, an error message why it is rejected (Error: Error here). This can be accessed by chaining a .catch block onto the end of the promise chain.

Here's a more visual graph from javascript.info

Basic Promise usage

In a promise, there can be only one result or error. So let's say we have this Promise function:

let promise = new Promise(function(resolve, reject) {
  resolve("done");
  reject(new Error("Not okay!")); // ignored
})

The result will immediately show "done" and the error will be ignored.

This is the easy version. This is what you can expect how a promise will look like:

  let example = () => {
   return new Promise(function(resolve, reject) => {
     let value = function1();
     if (job success) {
       resolve(value);
     } else (job unsuccessful) {
       reject(console.log("something's wrong!! :("));
     }
   }).then(function(value)) {
     // success
     return nextFunction(value);
   }).catch(rejectFunction);
  }

Okay, it's getting a lot and we've got some new friends in the above function. What's .then and .catch? We will get to them in the next section, but just a quick breakdown from above:

As a promise is created, if the function is passed successfully, the promise will be resolved.
On the other hand, if the function is passed unsuccessfully, the promise will be rejected and "something's wrong!! :(" will be printed on the console.

This is all you need to know for now! Let's move to our consumers in Promises!

Consumers: `.then`, `.catch`, `.finally`

A Promise object serves as a connection between the executor (you know the resolve, reject) and the consuming functions. Consuming functions can be registered with methods: then, catch, finally (which you've already seen .then and .catch in the previous section!).

Here's the promise cycle:
1️⃣ A promise is created (State: Pending)
2️⃣ a
👉🏻 A promise is resolved (State: resolved)
👉🏻 Promise chain with .then
2️⃣ b
👉🏻 A promise is rejected (State: rejected)
👉🏻 .catch to handle errors
3️⃣ .finally to give the final result of the promise 💯

`.then`

As I learned how to use these consumer methods, I like to think .then as... then what would you like to do after we resolved the promise?

Consider .then is similar to AddEventListener(). It doesn't run until an event occurs (i.e. the promise is resolved).

let promise = new Promise(function(resolve, reject) {
  setTimeOut(() => resolve("done!!"), 1000);
});

promise.then(
  // shows "done!" in console after 1 second
  result => console.log(result) 
);

Note: You can show errors using .then.

`.catch`: Error Handling

Promises is not always resolved, but there are cases where promises is rejected. Therefore .catch is here to catch errors.

Here's how we remember:

.then works when a promise is resolved.
.catch works when a promise is rejected.

If we are interested in seeing errors, here's how we use .catch:

let promise = new Promise(function(resolve, reject) {
  setTimeOut(() => reject(new Error("NO!")), 1000);
});

// shows the error after 1 second
promise.catch(result => console.log(result));

Feel free to copy the code above to your terminal/Chrome DevTool (if you are using Chrome). You should see the following:

Note: .then(null, func) is the same as .catch(func)

`.finally`

.finally, which is introduced in ES2018, is like a decent closure for the promise. Think of it like finally we are done and it's time to disclose the final result. In other words, it works no matter the promise is resolved or rejected.

.finally is a good handler for performing cleanup, like stopping the loading indicator.

If a promise is resolved:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("done!"), 2000);
})

promise.finally(() => console.log("Promise ready"));
promise.then(result => console.log(result));

Quick Demo:

If a promise is rejected:

let promise = new Promise((resolve, reject) => {
  throw new Error("error");
})
promise.finally(() => console.log("Promise ready"))
promise.catch(err => console.log(err));

Quick Demo:

Well let's put all these together, shall we?

Let's apply our new knowledge to our Monday morning coffee from the callback-hell section, but I will add one more condition is that we will only buy coffee if our mood rates lower than or equal to 5 (out of 10):

function orderCoffee() {
  return new Promise((resolve, reject) => {
    let rating = Math.random() * 10;
    // this is only a reference so that 
    // we know what the rate of mood is
    console.log(rating);
    if (rating > 5) {
      resolve("I AM FEELING GREAT!");
    } else {
      reject(new Error("We are going to Starbucks..."));
    }
  });
}

orderCoffee()
  .then(mood => console.log(mood))
  .catch(err => console.log(err))
  .finally(() => console.log("Decision's been made!"));

(Code reference from MDN's Promise.prototype.finally())

If the mood rates higher than 5 (i.e. the promise is resolved) (You can see the number on the first line after the handlers):

If the mood rates lower than or equal to 5 (i.e. the promise is rejected):

Feel free to copy the code above on your ChromeDevTool/terminal to play around!!

A quick recap on this section:

If a promise is resolved, .then will take over the rest.
If a promise is rejected, .catch will take over and return the error.
.finally is good for performing cleanup as it works no matter the promise is resolved and rejected.

Alright, these are the basics of Promises! In the next article, we'll talk more about chaining promises and fetching multiple promises!

Here's a quick glimpse using Promise chain from our callback example:

chooseCoffee()
.then(order => placeOrder(order))
.then(coffee => drinkCoffee(coffee))
.catch(failureCallback);

Resources:

🌟 Highly Recommend: Promise (javascript.info)
🌟 Eloquent JavaScript Chapter 11: Asynchronous Programming
🌟 JavaScript The Definitive Guide by David Flanagan (7th Edition) Chapter 13.2: Promises (Pg. 346 - 367) (Amazon)
🌟 Graceful asynchronous programming with Promises (MDN)
🌟 JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦 (FreeCodeCamp)
🌟 How To Implement Promises in JavaScript?

🦄 If you are looking for more explanation (or a different way of explaining) on this concept, I'd like to recommend my friend, Arpita Pandya's article:
JavaScript Promises

Intro to Asynchronous JavaScript

Megan Lo — Sun, 20 Jun 2021 00:53:40 +0000

Let's all be honest and address the elephant in the room. As a beginner developer, asynchronous programming is one of the hardest and confusing JavaScript concepts to grasp.

A bit out of context, but can't we agree that the async concept can be as confusing as Bruce Banner didn't know there's an Ant-Man and a Spider-Man? 😅

I struggled to learn Promises and async and await in the past few months, and I have seen async and await in my interviews. I decided to write a series of Async JS to break this struggle and hopefully will help anyone who is trying to understand asynchronous programming in JavaScript.

There are 4 parts in this series:

Intro to Asynchronous JS (this article)
Promises
More Promises
async/await

Introduction

Before we start talking about Promises, async, await, we need to first understand why do we care about handling asynchronously?

(Disclaimer: I understand the importance of learning how async works in both client-side and server-side. But in this article, I will mainly focus on client-side JS rather than server-side. I would like to write more about server-side in the future.)

First off, we have to understand JavaScript is always synchronous and single-threaded. In other words, when one block of code is being executed, no other block of code will be executed.

As you can see from above, the console printed the values according to the order.

JavaScript programs in web browser is typically event-driven. In other words, JavaScript is not going to do anything until the user tap or click on something. That's the client side. As for the JS-based server side, it usually waits for client requests to arrive over internet before doing anything.

We would use asynchronous JS in cases like fetching or accessing some kind of resource from a third party API.

Say you have a pretty large image on top of your website from a server, if we follow the JS synchronous style, the web browser has to completely finish loading the image before loading the rest of the content. For user experience, this behavior is not ideal, because you don't know how long the image will take to load.

If we use the fetch method to fetch the image from a server for the website, since fetch is asynchronous, when running the next line, it will throw an error as the response is not yet available (I PROMISE -- pun intended -- this will make more sense later on).

(You probably notice the images/GIFs in this article took a little bit time to load while the text is available -- a real example of asynchronous programming)

Asynchronous Programming with Callbacks

Before we dive into Promise (will be introduced in the next article), the most fundamental concept we have to understand is callbacks (passing another function in a function and will be invoked when some condition is met or some event is occured). This is also the old-fashioned way of handling asynchronous programming before the introduction of Promise in ES6. But some of these callbacks are still commonly seen without Promise.

Timers (`setTimeOut()`)

Using the example above from the Introduction section, a quick refresher of what we want in the following order:

ice cream
boba tea
iced coffee
beach

What if I want boba tea after I go to beach, let's add setTimeOut() and get it 2 seconds (1000 milliseconds = 1 second) after I go to beach? Let's see how it looks like:

As you can see, "boba tea" appears ~2 sec after everything is printed on the console!

The first argument of setTimeOut() is a callback function and the second argument is a time interval measured in milliseconds.

There's another type of timer function called setInterval(). It is useful if you want a function to run repeatedly, but I will not cover in this article. Feel free to check this out here for more info about setInterval() on MDN.

Events

Speaking of events, you probably heard of addEventListener(). As mentioned in the intro, client-side JavaScript programs are almost universally event-driven. The web browser invokes these callback functions whenever a specified event occurs (as you may be familiar with hovering, clicking a mouse button, pressing a key on the keyboard). These callback functions are known as event listener and event handler.

addEventListener() is the method to perform these callback functions based on specified event in a specified content. The second parameter of addEventListener() method is an example of async callback.

Here is the example from W3Schools:

let btn = document.getElementById("myBtn");

// a callback function to be invoked when the user clicks on
// that button
btn.addEventListener("click", () => {
  document.getElementById("demo").innerHTML = "Hello World";
});

Here's what happened, when a user clicks on a button that represent the HTML <button> element that has an ID myBtn, the text "Hello World" will show up.

The callback function is not immediately executed. Once any specified event occurs (in this case is "clicking"), the callback function will be performed asynchronously somewhere inside the HTML body.

✨ Pause for this iconic MCU GIF before we get to the final callbacks ✨

(I also needed to take a quick tea break here 😬)

Network Events/XMLHttpRequest

Last but not least, fetching data from a web server is another common source of asynchrony in JS programming (Like the example of fetching a large image I mentioned earlier in the intro section).

We would use an API object called XMLHttpRequest to interact with servers.

According to MDN,

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.

Here's how it looks like (from MDN):

function loadData(url, type, callback) {
  let request = new XMLHttpRequest();
  request.open("GET", url);
  response.responseType = type;

  request.onload = function() {
   callback(request.response);
  };

  request.send();
}

function displayImg(pic) {
  let objectURL = URL.createObjectURL(pic);

  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image); 
}

loadData('starbucks.jpg', 'pics', displayImg);

Quick breakdown:

We separate two functions:

loadData to fetch the data from another server with XMLHttpRequest and displayImg to create an image to display the fetched data.
We then take the displayImg as a callback function, as well as the URL and the content type. As the web browser loads the JS program, the XMLHttpRequest class plus the callback function would handle the server's response asynchronously and make HTTP request.

I know that's a lot to learn, but understanding the fundamental of callbacks helps understanding why Promises was introduced. In the next article, we will look into using Promises to simplify asynchronous programming.

See you in the next article!

Resources

🌟 Asynchronous JavaScript (MDN)
🌟 Eloquent JavaScript Chapter 11: Asynchronous Programming
🌟 JavaScript The Definitive Guide by David Flanagan (7th Edition) Chapter 13: Asynchronous JavaScript (Pg. 341 - 344) (Amazon)

Big-O Notation from a Non-CS Perspective

Megan Lo — Tue, 01 Jun 2021 21:29:56 +0000

Hi everyone!

Welcome to the second post in our Data Structures & Algorithm series! Last time we reviewed the crossovers in JavaScript arrays and strings. This time we will cover Big-O notation, diving into time and space complexity.

Since both of us (Waverley and I) graduated from bootcamp, after learning Ruby on Rails, JavaScript, React, etc., we had to spend a lot of our time learning Big-O Notation through many online resources. We hope this will be the place for you if you are looking for a “plain English” explanation of Big-O Notation!

Introduction

In computer science, Big-O notation is used to classify the run time or space requirements of an algorithm as their input size grows. For CS students at college, they have to learn different types of Big- notation (Big O, Big Theta, Big Omega).

But for the sake of software engineering technical interviews, all we care about is the best and worst case scenarios. Although Big O describes an upper bound on the time in the CS concept, the industry uses Big O to try to offer the tightest description of the runtime. (Cracking the Coding Interview by Gayle McDowell provides a really great summary in these concept -- Read P.39)

This graph demonstrates clearly on how the run time and space changes depending on the input of a Big-O Notation. O(1) and O(log n) have the best run time and space complexity while O(n!), O(n²) and O(2ⁿ) have the worst run time and space complexity.

In this article, we will break down all these notations with provided examples and Leetcode questions at the end of each part.

What does it mean by brute force and optimized solution?

Before we start, we would like to explain what brute force and optimized solution mean, as you might see these keywords later in the article.

The easiest way to understand what brute force solution is whatever solution comes to your head first. On the other hand, for optimized solution, after you have the brute force solution, you would think of an optimized solution to either simplify the code or minimize the time and space complexity if possible.

For instance, your brute force solution has a O(n²) time complexity and with optimized solution, you are able to reduce it to the time complexity of O(n).
Understanding this concept is important since this is something you would discuss with your interviewer on how you would make your solution from brute force to more optimized.

Complexity Comparison

Name	Big O Notations
Constant Time	O(1)
Logarithmic Time	O(log n)
Linear Time	O(n)
Linearithmic Time	O(n log n)
Quadratic Time	O(n²)
Exponential Time	O(2ⁿ)
Factorial Time	O(n!)

Constant Time: O(1)

Often referred to as “constant time”, O(1) has the least complexity. I like to think of this as no matter how large or small the input, you can always expect the same number of steps to execute inside the function.

Example:

function sayHelloToFirstFriend(friends) {
   return `Hello ${friend[0]}`
}

sayHelloToFirstFriend([“spongebob”, “patrick”, “sandy”, “squidward”, “gary”])
// “Hello spongebob”

Typical use cases
Accessing an Array through its Index
Inserting (push) or deleting (pop) from a Stack
Inserting or deleting a node in a Linked List
Insertion or deleting from a Queue
Searching, inserting, or deleting from a Hash Table

Logarithmic Time: O(log n)

Don’t be afraid of math! When you see a logarithm it’s asking you, “What power must we raise this base to, in order to get this answer?" In other words, we use logarithms to solve for a variable when that variable is an exponent.

In terms of computer science this translates to: “How many times must we divide n in half in order to get back down to 1?” Therefore, solutions with O(log n) essentially divide the problem in half, determine which half it needs to continue, divide that section in half, repeating this same idea until it finds what it needs or ruling out the set. As a result, while these solutions do grow more than constant time, it nonetheless grows slowly compared to other time complexities.

Typical use cases
Binary Search
Certain Divide and Conquer Algorithms based on Linear functionality
Calculating Fibonacci Numbers

Note: Notice that for all of these use cases the input is sorted and searching for something!

Linear Time: O(n)

Probably the most familiar is O(n), or “linear time”. This is because as the size of the input grows, the time the number of operations takes to execute also grows. In other words, if an array has 10 items a for loop will be executed 10 times whereas if the array has 10,000 items the same for loop would execute 10,000 times as well.

Example 1:

const binarySearch = (list, target) => {
  let start = 0
  let end = list.length - 1

  while (start <= end) {
    const middle = Math.floor((start + end) / 2)
    const guess = list[middle]

    if (guess === target) {
      return middle
    }

    if (guess > item) {
      // search the right side of the list
      end = middle - 1
    } else {
      // search the left side of the list
      start = middle + 1
    }
  }
  return null // if target is not found
}

Example 2:

function sayHelloToFriends(friends) {
   for (let i = 0; i < friends.length; i++) {
      console.log(`Hello ${friends[i]}`)
   }
}

sayHelloToFriends([“spongebob”, “patrick”, “sandy”, “squidward”, “gary”])
// “Hello spongebob”
// “Hello patrick”
// “Hello sandy”
// “Hello squidward”
// “Hello gary”

Typical use cases
Traversing an Array or Linked List
Linear Search
Deletion of a specific element in a Linked List (Not sorted)
Comparing two strings
Checking for Palindrome
Anytime using a `for` loop or iterating

Linearithmic Time: O(n log n)

Building off of typical solutions for O(log n), the extra “n” comes from the extra time cost of sorting. Therefore, a lot of sorting algorithms have the complexity of O(n log n). On the other hand, while it does take more time than O(log n), it’s also important to remember that logarithms grow very slowly. As a result, its path is similar to that of linear time. To explain a bit more of the role n plays, let’s take a look at merge sort.

Starting the same as O(log n), in merge sort you start by dividing the array in half. Next you sort the two halves and then merge the two sorted halves into one sorted whole. However, in order to sort the two halves you repeat the same idea of dividing them, sorting them, merging the sorted halves until you’ve sorted everything.

Example:

function merge(left, right) {
    let arr = []
    // Break out of loop if any one of the array gets empty
    while (left.length && right.length) {
        // Pick the smaller among the smallest element of left and right sub arrays 
        if (left[0] < right[0]) {
            arr.push(left.shift())  
        } else {
            arr.push(right.shift()) 
        }
    }

    // Concatenating the leftover elements
    // (in case we didn't go through the entire left or right array)
    return [ ...arr, ...left, ...right ]
}

function mergeSort(array) {
  const half = array.length / 2

  // Base case or terminating case
  if(array.length < 2){
    return array 
  }

  const left = array.splice(0, half)
  return merge(mergeSort(left),mergeSort(array))
}

Typical use cases
Merge Sort
Heap Sort
Quick Sort
Certain Divide and Conquer Algorithms based on optimizing O(n²) algorithms

Quadratic Time: O(n²)

A function with quadratic time complexity has a growth rate of n². Meaning? If the input size is 2, then the function will take 4 operations. If the input size is 3, then the function will take 9 operations. If the input size is 1000, then the function will take 1,000,000 (1 million) operations.

In other words, O(n²) is going to run really slow, especially since the input size is really large.

Most of the time, we would describe an algorithm that has quadratic time when we have to iterate within the object at least twice, like nested for loops.

Find duplicates and bubble sort are two of the quadratic algorithms examples that you would run into. Bubble sort (as well as insertion sort and selection sort) is like the naive version of merge sort and quick sort. It is slow, but it is always the first concept you would first learn when learning sorting algorithms. It builds a great foundation for the rest of the more complicated sorting algorithms.

What bubble sort does is repeatedly swapping adjacent elements if they are in the wrong order. Let's say we are sorting an unordered array of numbers from smallest to largest. Bubble sort would examine the numbers if they are in the right order by swapping them one by one .

Example of Bubble Sort:

function bubbleSort(arr, n) {
  // double-loop of size n, so n^2
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap (arr, j, j+1);
      }
    }
  }
}

// swap helper method
function swap (arr, first, second) {
  let temp = arr[first];
  arr[first] = arr[second];
  arr[second] = temp;
}

With the nested loop, we have a time complexity of O(n²)

Comparing to Merge Sort, which the array would be cut in half , Bubble Sort would go through each element of the array one by one until everything is sorted in the right place (and then it will go through again one more time even though it is already sorted.)

Typical use cases
Bubble Sort
Insertion Sort
Selection Sort
Find Duplicates (Brute Force)
Find All Possible Ordered Pairs in An Array

Exponential Time: O(2ⁿ)

Base-2 Exponential running time means the calculations will go double with each input size grows.
2² => 4
2³ => 8
2⁴ => 16
...
2¹⁰⁰ => 1,267,650,600,228,229,401,496,703,205,376

As you can see whenever n is increased by 1, the result is doubled. Essentially, the number starts very low and to the end, the number will be very large.

In most cases, please avoid the use of exponential time since the run time is going to get slower. Not that it's the worst one, but obviously it's not great.

Fibonacci Example

function fib(n) {
  if (n <= 1) {
    return n
  }
  return fib(n - 1) + fib (n - 2)
}

Typical use cases
Power Set: Finding all the subsets on a set
Fibonacci Number

Factorial Time: O(n!)

If you understood how factorial works, this is how it's like:
5! = 5 x 4 x 3 x 2 x 1, in other words,
n! = n x (n - 1) x (n - 2) x (n - 3)... x 1

As the input size increases, the run time gets bigger and bigger and BIGGER! I personally have not encountered a factorial problem, therefore I would attach an example below with the link as reference.

Typical use cases
Permutations

Conclusion

We hope this article gives you a better understanding of Big-O Notation! This concept is important since often during interviews, you will need to analyze the Big-O Notation of your solution. Furthermore, knowing this can help you understand which solution has better or worse runtime as you come up with approaches. If you are still having trouble understanding, we have provided more resources down below for you to reference!

Resources

Examples of Algorithms which has O(1), O(n log n) and O(log n) complexities 👀 (Stack Overflow)
Big-O Cheat Sheet
What is Big O Notation Explained: Space and Time Complexity (FreeCodeCamp)
Big-O notation (Wikipedia)
8 time complexities that every programmer should know (With Videos and Examples)
Comparing different solutions for Two Sum (Stanford)

From String to Array to String

Megan Lo — Fri, 23 Apr 2021 20:38:40 +0000

About Writers

Hello everyone!

This is Waverley and Megan! We are both tech enthusiasts and graduated from Flatiron School recently. Both of us enjoy writing blogs to help other programmers learn and we learn from writing as well (win-win!). This will be our first time writing blogs on dev.to and collaborating on a series with each other, and we are so excited to create content for you all! Feedback is appreciated as we continue to navigate this process 🙏

When we first decided to collaborate we came up with a lot of topics to write about. However, as we are both currently in our job search and as bootcamp graduates, we wanted to work on something that will help us now and others in the future. Ultimately, we decided to have this series focus on data structures and algorithms, something we both feel is important to know but not exactly the easiest to understand.

Also, check out our Medium blogs for more of our work:

Intro

Today, we are going to talk about converting array to string, and vice versa. This is one of the commonly seen strategies that is used when solving string-and-array-related coding questions.

Before we get started, if you are interested in knowing array methods, here's Everything JavaScript Arrays & Array Methods! by Waverley; and for string methods, here's When to Use these String Methods in JavaScript by Megan.

Intro
From Array to String
- toString()
- join()
From String to Array
- split()
- Array.from()
- Object.assign([], string)
Bonus
- Spread Operator
Conclusion

From Array to String

Something that we often need to do is convert an array to a string. Thankfully JavaScript has two built-in methods to accomplish this: toString() and join().

`toString()`: Returns a string representing the array and its elements (non-destructive)

Like its name, the toString() method turns the array’s elements it was called on to a string. To be more specific, this method joins the array and returns one string containing each array element separated by commas.

Fun fact: JavaScript calls the toString method automatically when an array is to be represented as a text value or when an array is referred to in a string concatenation.

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// "1,2,a,1a"

`join()`: Join all the elements from an array to a string (non-destructive)

join() creates and returns a string by concatenating, or joining, all of the elements of the array it was called on. By default the elements are separated by commas, however you can specify what you want to join/separate the elements by. On the other hand, if there is only one element in the array, the single item will be returned as a string without separators, and if there are no elements, an empty string is returned.

As mentioned, including an argument for the separator parameter is optional if you want the elements to be joined with a comma. Passing in an empty string as the argument will result in the elements joined without any characters/separators.

Otherwise, the parameter is what you want to separate each pair of adjacent elements of the array for the returned string. If necessary, the separator is converted to a string.

let joinArray = ['Wind', 'Water', 'Fire'];
joinArray.join();      // 'Wind,Water,Fire' b/c no separator so joined with commas and no spaces
joinArray.join(“, “);  // 'Wind, Water, Fire' b/c separator is comma and space
joinArray.join(“ + “); // 'Wind + Water + Fire' b/c separator is space, plus sign, space
joinArray.join(“”);    // 'WindWaterFire' b/c separator is an empty string

Back to the Table of Contents

From String to Array

`split()`

As mentioned above, we can join string from array. We can also split string to array. Here, we are going to utilize the join() example to see the alternative results from above.

let splitToArray = 'Wind, Water, Fire';
splitToArray.split('') 
/* [
     'W', 'i', 'n', 'd', ',',
     ' ', 'W', 'a', 't', 'e',
     'r', ',', ' ', 'F', 'i',
     'r', 'e'
   ], no separators
*/
splitToArray.split(' ') 
// [ 'Wind,', 'Water,', 'Fire' ], split by the whitespaces
splitToArray.split(',') 
// [ 'Wind', ' Water', ' Fire' ], split by commas
// As you can see there're still whitespaces in front of each element
// To solve this, we can do the following:
splitToArray.split(', ')
// [ 'Wind', 'Water', 'Fire' ], split by commas and one additional whitespace

This method is probably the most common way to split a string to an array and join afterwards.

Most of the time, when we want to apply array methods to a given string, this is a go-to method to do so. For instance, if we want to reverse a string:

let example = 'JavaScript';

function reverse(str) {
  return str.split('').reverse().join('');
}

// In comparison to:
function reverse(str) {
  let reversed = '' // having to create a new string takes space
  for (let char of string) {
    reversed = char + reversed
  }
  return reversed;
}

Unless your interviewer specifies reverse() method is not allowed to be used, using the split() and join() method would help create a more readable, cleaner code. Also, since reverse() is not a string method, this is where we can utilize our array method in this case.

Palindrome is also another common question which you can make use of the split() and join()

`Array.from(string)`

There are two ways you can use Array.from(). Either you want to modify and create a new shallow-copied array OR drumroll please 🥁🥁🥁 converting string to array.

// To modify an array (Not the focus of this section)
Array.from([1, 2, 3, 4, 5], x => x * 2)
// [ 2, 4, 6, 8, 10 ]

// Convert string to array
Array.from('JavaScript')
['J', 'a', 'v', 'a', 'S', 'c', 'i', 'p', 't']

Remember, these are just some suggestive ways of converting string to array.
According to this article, using the same reversed example we have above, the runtime of using String.prototype.split() is way faster than using Array.from().
But you know, at least we know Array.from() is one of the possible ways to convert string to array!

`Object.assign([], string)`

You probably heard of Object.keys(), Object.entries() which would return a new array. What about Object.assign()?
Similar deal!
According to MDN, the definition of Object.assign()

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

Object.assign() takes two arguments: target and source. In our case, our target is an empty array [] and our source is the given string (which is an enumerable/ can be iterated object).

const str = "foo";
Object.assign([], str) // ['f', 'o', 'o']

Yay! It works... on the surface... If you move this to TypeScript...

✋🏻PAUSE✋🏻
For those who are not familiar with TypeScript, don't worry. Here's a quick breakdown. You don't have to fully understand TypeScript. All you have to know is that TypeScript is a superset of JavaScript. Most of the time, variables are assigned to a primitive data type in advance.

// In JS
const num = 1;

// In TS
const num : number = 1;

Cool thing about using TypeScript is that you would also see the variable type by hovering over the variable.

(Screenshot Credit: CodeCademy -- Learn TypeScript course)

Capiche? Hopefully you got the gist of it. Back to the topic...

If you move this to TypeScript, the type of this new copied array does not return as an array of string. 😱
If we look at other methods we mentioned above:

const str = 'foo';

const split = str.split('');
const from = Array.from(str);

Feel free to copy and paste the code to the playground and hover over split and from.
They both return split: string[] and from: string[]. (string[] means array of strings.)

However, when you hover over const obj = Object.assign([], str). It returns...

obj : never[] & "foo", a.k.a. it is never an array but a string.

Isn't that interesting? 😮 (thanks to our resource)

Although we have 3 ways to convert strings to array, including the spread operator (will be explained in the Bonus Section below), it seems like split() is the best way to do so!

Back to the Table of Contents

Bonus

Spread Operator

While the spread operator (...) is not specific to arrays, it is something helpful to know and use!

From MDN, the spread operator:

allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

In other words, essentially the spread operator takes each of the elements inside of the passed in object or array and adds it to the array it is being added to.

As a result, it is often used when all elements from an object or array need to be included in another list of some kind; typical use cases include copying arrays or concatenating an array to the end of an existing array. However, specifically for copying an array, the spread operator goes one level deep. Meaning that if you spread an array into another array, the array it was spread into will not be nested.

Furthermore, it’s important to know that you cannot spread objects into an array or an array into an object. This is because objects alone are not iterable. However, when used in an array or with iterating functions (such as map or reduce), they become iterable.

Under the hood, when the merging occurs 2 objects together with the spread operator, it is assumed that another iterating function is used. On the other hand, if you spread a string into an array, it will create an array with each char in the string.

// general example
let elements = [1, 2, 3]
let newElement = 4

let constructorArray = new Array(newElement, ...elements)
// [4, 1, 2, 3]

let literalArray = [new element, ...elements]
// [4, 1, 2, 3]

// copying an array- showing how the spread operator does not nest
let a = [[1], [2], [3]]
let b = [...a]

console.log(a) // [[1], [2], [3]]
console.log(b) // [[1], [2], [3]]

b.shift().shift()

console.log(a) // [[], [2], [3]]
console.log(b) // [[2], [3]]

// cannot spread an object into an array
let obj = {'key1': 'value1'}
let array = [...obj]; // TypeError: obj is not iterable

// spreading a string into an array
let test = [..."hello", ...“world”]
console.log(test) // ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

Before You Go...

Let's conclude what we have discussed!

From Array to String, we have...

toString()
join()

From String to Array, we have...

split()
Assign.from()
Object.assign([], string)

Last but not least, spread operator (...) can be used to convert array to string, and vice versa.

Hope you enjoy our first collab article and please give us feedback if you have!

🙌🏻 Since we can't co-publish articles, we have to publish the same article in our own individual platform. Please give some shoutout to Waverley.

Back to the Table of Contents

Resources:

String <=> Array
- 4 Ways to Convert String to Character Array in JavaScript
- How to convert an Array to a String in JavaScript
Array
- Everything JavaScript Arrays & Array Methods! (by Waverley)
String
- When to Use these String Methods in JavaScript (by Megan)
MDN

When to Use these String Methods in JavaScript

Megan Lo — Fri, 23 Apr 2021 20:11:30 +0000

There are A LOT of strings methods. This includes when you want to find a string, search for a string, extract parts, replace, concat, etc. There are a lot! This guide is more of a refresher and I would like to use this opportunity to categorize when we would use the following methods.

Before we move on, if you are interested in array methods and/or need a refresher on arrays, check out my friend, Waverley's Everything JavaScript Arrays & Array Methods!. Give her some shoutout!

Without further ado, here we go!

Find a String in a String
Extract String Parts
Replace String Content
All Lower Cases <=> All Upper Cases
Concatenation
Remove Whitespace
Methods That Exist in Both String and Array
Conclusion

Find a String in a String

indexOf(), lastIndexOf(), charAt() and search() are the go-to methods.

let findDory = "Where are Dory's parents, Dory's dad and Dory's mom?";

// indexOf() 
// returns the first index of the first occurrence of a specified text in a string 
findDory.indexOf('Dory') // 10

// lastIndexOf() 
// returns the first index of the last occurrence of a specified text in a string 
findDory.lastIndexOf('Dory') // 41

// charAt() 
// returns the character at the specified index in a string
findDory.charAt(10) // 'D'

// search()
// returns the position of the match
findDory.search('Dory') // 10

Note: You might notice how similar search() and indexOf() are. The difference is that search() can take regular expressions (regexp) as parameter and will return -1 for unsuccessful search, while indexOf() can take second parameter as the starting position, but cannot take regexp as parameter.

What about the time when we are not interested in the index, but we just want to find if that particular substring is included in our string. We got another method called includes() (I always forgot the 's' for some reason 😅)

const ratatouille = “Not everyone can become a great artist, but a great artist can come from anywhere.”

// includes()
ratatouille.includes('artist') // true
ratatouille.includes('chef') // false

Note: This is quite similar to array's find(), match(), filter(). Check these methods out in Waverley's article!!

Extract String Parts

slice() and substring() are the go-to methods. (Not going to cover substr() since it is going to be a legacy method.)

let buzzLightyear = "To infinity and beyond!"

// slice(start[, end]) -- immutable
// extracts a section of the string and return as a new string
buzzLightyear.slice(3) // 'infinity and beyond!'
buzzLightyear.slice(3, 11) // 'infinity'

// substring(start[, end]) -- immutable
buzzLightyear.substring(3) // 'infinity and beyond!'
buzzLightyear.substring(3, 11) // 'infinity'

Note 1: slice() and substring() are very similar. However, there are some subtle differences. Here's the breakdown from MDN.

Note 2: The slice() method works for both string and array. You might notice splice() is not in this category. We would use substring() and substr() as alternatives. Here's a Stack Overflow post that breaks down how to utilize the alternate splice() method in string.

Replace String Content

As you can imagine, there's a built-in method called replace().

const js = "Javascript developers learn javascript because javascript is great"

// replace(searchValue, newValue) -- immutable
// returns a new string with only the first instance of the value being replaced. 
// It is also case sensitive.
js.replace("javascript", "JavaScript") 
// 'Javascript developers learn JavaScript because javascript is great'

// we can use RegExp to replace
// /g : perform global replacement to replace every match 
js.replace(/javascript/g, "JavaScript")  
// 'Javascript developers learn JavaScript because JavaScript is great'

// /gi: perform a global, case-insensitive replacement
js.replace(/javascript/gi, "JavaScript")  
// 'JavaScript developers learn JavaScript because JavaScript is great'

All Lower Cases <=> All Upper Cases

These two methods are two of the most commonly used methods: toLowerCase() and toUpperCase(). It's useful when you want to have all lower case characters and upper case characters respectively.

const uppercase = "I AM A JAVASCRIPT DEVELOPER."

// toLowerCase() -- immutable
uppercase.toLowerCase()
// 'i am a javascript developer.'

const lowercase = 'Where is my supersuit?'
// toUpperCase() -- immutable
lowercase.toUpperCase()
// 'WHERE IS MY SUPERSUIT?'

Concatenation

There are a few ways to concat strings:

the + operator
template literal
concat()

// the + operator
const str = "No" + " " + "capes!";
str; 
// 'No capes!'

// template literal
function intro(name, occupation) {
  console.log(`I am ${name} the ${occupation}.`)
}

intro('Megan', 'developer');
// 'I am Megan the developer.'

// concat()
const str = 'Dory said, ';
str.concat('"Just', ' ', 'keep', ' ', 'swimming"');
// 'Dory said, "Just keep swimming"'

Note: concat() is rarely used, since it causes more errors than the + operator. If you must use concat(), it's best to use on an empty string.

''.concat('Just', ' ', 'keep', ' ', 'swimming');
// 'Just keep swimming'

Remove Whitespace

Let's say if the string has whitespace on both ends, trim() is the method to remove the whitespaces.

const woody = "    This isn’t flying. This is falling with style.    "

// trim()
woody.trim();
// 'This isn’t flying. This is falling with style.'

Methods That Exist in Both String and Array

`concat()`

As we discussed earlier, we can use concat() in string. Although in my experience concat() is more often seen in string, turns out we can do the same with array.

String.prototype.concat() and Array.prototype.concat() have similar behavior, which are concatenating two separate objects into one. Let's take a look down below:

// concat() in string
const str = 'Dory said, ';
str.concat('"Just', ' ', 'keep', ' ', 'swimming"');
// 'Dory said, "Just keep swimming"'

// concat() in array
const arr1 = [1, 3, 5, 7];
const arr2 = [2, 4, 6, 8];

arr1.concat(arr2) // [1, 3, 5, 7, 2, 4, 6, 8];

Note: this method is immutable, i.e., does not change the existing arrays, but it would return a new array.

`indexOf()`

So you want to find an index of a character in a string? Well, turns out you can use the same method for array.

Let's take a look at the example:

// String example
let findDory = "Where are Dory's parents, Dory's dad and Dory's mom?";
// returns the first index of the first occurrence of a specified text in a string 

findDory.indexOf('Dory') // 10

// Array Example
const doryFriends = ['nemo', 'marlin', 'destiny', 'crush']
// returns the first index at which a given element can be found in array, otherwise, return -1.

doryFriends.indexOf('destiny'); // 2

Note: JavaScript arrays are zero-indexed, i.e. the index of the first element is 0, not 1.

`slice()`

Similar to our friend, String.prototype.slice(), Array.prototype.slice() behaves quite similar but in array. Array.prototype.slice() returns a shallow copy of a portion of an array into a new array from start to end (which end is not included. Also, it's optional, in this case, to the end of the array.)

// String Example
let buzzLightyear = "To infinity and beyond!"

buzzLightyear.slice(3) // 'infinity and beyond!'
buzzLightyear.slice(3, 11) // 'infinity'

// Array Example
const woodyFriends = ['Buzz Lightyear', 'Jessie', 'Mr and Mrs. Potato Head', 'Slinky Dog', 'Rex'];

woodyFriends.slice(1); 
// [ 'Jessie', 'Mr and Mrs. Potato Head', 'Slinky Dog', 'Rex' ]
woodyFriends.slice(2, 4);
// [ 'Mr and Mrs. Potato Head', 'Slinky Dog' ]

As you can see, all three of these methods behave quite similar to their String counterpart. There are a lot of methods out there sometimes we lost track which is which, now that we know, concat(), indexOf() and slice() can be used in both string and array!

Conclusion

Wow! You made it to the end of this article! Let's conclude what we have discussed!

If we want to find an individual character or index, we use indexOf(), lastIndexOf(), charAt().
If we want to find whether a particular substring is included, we use includes(). (don't forget about the 's'!)
If we want to search for a substring, we use search().
If we want to extract and create a new string, we use slice() and substring().
If we want to replace specific string content, we use replace(). Remember it is case sensitive, otherwise, we can use /i for any case-insensitive situation.
If we want to capitalize our strings or convert every character in a string to lower case, we use toUpperCase() and toLowerCase() respectively.
If we want to concatenate our strings, we can use the + operator, template literal and concat().
Last but not least, if we want to remove the whitespace of both ends of our strings, we use trim().

Alright, that's all we got for now! Hope it helps untangle your confusion if you have any!

Before you go, Waverley (remember my shoutout in the beginning?) and I have co-written our first collaborated article , which covers the crossovers of strings and arrays in our ongoing Data Structures and Algorithm series. Check it out and stay tuned with our series!

P.S. I apologize for the Pixar GIFs if you are not a huge Pixar fan 🙏🏻😅

Resources

JavaScript String Methods
3 Ways to Concatenate Strings in JavaScript
MDN String.prototype.[fill-in-the-blank-method]
MDN Array.prototype.[fill-in-the-blank-method]

DEV Community: Megan Lo

for...in vs for...of in JavaScript

Examples/Usages

for

for...in

for...of

Our Dear Best Friend, The for Statement

for...in, Protagonist #1

for...of, Protagonist #2

When Should We Use Which One? 😯

I Relearned JavaScript with Scrimba

✨ Why did I relearn JS? ✨

✨ Scrimba and other resources ✨

CodeCademy

FreeCodeCamp

Scrimba

Conclusion

PUT vs PATCH & PUT vs POST

Introduction

POST, PUT & PATCH

What is POST?

What is PUT?

What is PATCH?

PUT vs POST

1. Create and/or Update?

2. Idempotence

3. In Practice

PUT vs PATCH

1. Update Partially or Fully a.k.a Replace?

2. Idempotence

Before You Go...

Resources

HTTP Methods

PUT vs POST

PUT vs PATCH

HTTP Methods for RESTful Services (Part 1)

Introduction

GET

✋🏻Sidebar✋🏻

POST

PUT

Further Readings

Understanding and Using REST APIs (and My Resources)

HTTP Response Codes

Random and Fun

Class Components vs Functional Components in React

Difference 1: Rendering JSX

🕹 Syntax 🕹

🍳 Breakdown 🍳

📝 Note 📝

⭐️ Additional Note ⭐️

Resources

Difference 2: Passing Props

🕹 Syntax 🕹

🍳 Breakdown 🍳

Difference 3: Handling and Updating state

🕹 Syntax 🕹

🍳 Breakdown 🍳

Difference 4: Lifecycle Methods

componentDidMount

🕹 Syntax 🕹

🍳 Breakdown 🍳

Further Reading

componentWillUnmount

🕹 Syntax 🕹

🍳 Breakdown 🍳

Conclusion

Further Readings

Async/Await in JavaScript

Introduction

Rewriting a promise with async and await

A few things to remember

💯 await won't work in the top-level code

💯 You can catch errors with try...catch

💯 async/await works in Promise.all as well!!

Before You Go

Resources

More Promises in JavaScript

Introduction

Chaining Promises + Real Example

`for`

`for...in`

`for...of`

Our Dear Best Friend, The `for` Statement

`for...in`, Protagonist #1

`for...of`, Protagonist #2

`POST`, `PUT` & `PATCH`

What is `POST`?

What is `PUT`?

What is `PATCH`?

`PUT` vs `POST`

`PUT` vs `PATCH`

`PUT` vs `POST`

`PUT` vs `PATCH`

`GET`

`POST`

`PUT`

`componentDidMount`

`componentWillUnmount`

Rewriting a promise with `async` and `await`

💯 `await` won't work in the top-level code

💯 You can catch errors with `try...catch`

💯 `async/await` works in `Promise.all` as well!!

`Promise.all`

Consumers: `.then`, `.catch`, `.finally`

`.then`

`.catch`: Error Handling

`.finally`

Timers (`setTimeOut()`)

Quadratic Time: O(n²)

Exponential Time: O(2ⁿ)

`toString()`: Returns a string representing the array and its elements (non-destructive)

`join()`: Join all the elements from an array to a string (non-destructive)

`split()`

`Array.from(string)`

`Object.assign([], string)`

`concat()`

`indexOf()`

`slice()`