DEV Community: Alaster

I Coded a Website with 60k+ Daily Visitors Using ChatGPT

Alaster — Wed, 22 Feb 2023 16:13:55 +0000

ChatGPT, a groundbreaking language model that made its debut at the end of last year, has been increasingly used many different disciplines. Nevertheless, some people complaint the responses from ChatGPT was not very good. The root cause of this issue lies in imprecise and poor-quality prompts.

To address this problem, we have developed a user-friendly webpage that enables users to copy precise and useful ChatGPT prompts with just one click. These prompts can be modified to fit individual needs. You can paste them into ChatGPT to get helpful responses. We have curated both a English and Chinese version. You can check them out below.

Currently this website has around 60k+ daily visitors, and it was built with the assistance of ChatGPT. If you are an engineer, I will offer you valuable insights on how to maximize your productivity with ChatGPT. If you are not an engineer, I would also like to show you that if you can leverage AI tools, you can complete your own projects without the need for a dedicated engineer. With a step-by-step approach, you can also implement the desired functionality by yourself.

Tips for using ChatGPT to write programs

When utilizing ChatGPT to help you write code, there are several important things to keep in mind, including:

Choice of programming language: To inform ChatGPT which language and framework to use, you can use the prompt Act as an expert of [a particular programming language], such as Act as an expert of python.
Specify a paradigm or design pattern: If you have a specific design pattern or paradigm in mind, be sure to indicate it. As there are many different ways to achieve a certain functionality, it is essential to provide ChatGPT with this instruction if you want it to write code that aligns with your coding style. For instance, the prompt Implement [a certain functionality] using functional programming can instruct ChatGPT to write that functionality with functional programming.
Clear description: It is crucial to provide a clear and concise description of your logic. Although ChatGPT is powerful, the reality is ChatGPT cannot read your mind. Thus, your logic must be conveyed explicitly and coherently for ChatGPT to write the code that meets your expectations. Unclear or erroneous instructions may result in ChatGPT failing to write the desired code.
Provide examples: Providing examples can help ChatGPT better understand what you are looking for. For example, if you need ChatGPT to help you write a function, you can provide an input and the expected output.
Write tests: When writing codes, it is crucial to test the code yourself to ensure that it functions as expected. If you prefer to automate the testing process, you can use ChatGPT to write test cases with the prompt Write 5 test cases for [a section of code] and run those test cases to verify that everything is working as expected.

Now that we have reviewed the essential considerations for using ChatGPT to write code, let us explore how we can leverage this powerful tool to actually help us build our website. To keep this article concise, we will showcase three practical examples that ChatGPT successfully write the program. These examples are representative in that they require a level of proficiency in React and JavaScript that may take quite some time for beginner programmers to implement.

Implement `highlightText` function

When visiting Useful ChatGPT Prompts website,
as you can see from each prompt, we have highlighted the words that need to be replaced with a light blue color.

But how did we manage to accomplish this task? Of course, we did not manually highlight every word in every prompt. If there were a thousand prompts, it would be impractical to do so. From a programming perspective, we can parse a specific format and automatically convert it into highlighted words.

But how might we do this? How can we automatically highlight the programming language in the sentence You are now an expert in [a programming language]? Without ChatGPT, we would likely need to do the following steps:

First of all, we would need to identify whether the text in [] match a specific pattern in a given string.
This is typically done by using regular expressions (Regex), but since I am not well-versed in Regex, I would probably need to check out StackOverflow, a website frequently used by developers to seek answers, and try different solutions on StackOverflow to achieve it.
After identifying the pattern of [], we would need to write a function to replace the text in [] with the highlighted format.

Basically, if you can articulate your ideas, ChatGPT can write code based on those ideas. Here is what I wrote to ChatGPT:

Please help me write a highlightText function in TypeScript that accepts a string with [text] and detects the text inside the brackets. The function should replace the text inside the brackets with <span className="bg-sky-100 text-slate-800">.

For example:
Input: You are now a [programming language] expert
Output: You are now a <span className="bg-sky-100 text-slate-800">programming language</span> expert

I was amazed by what ChatGPT wrote. It used the correct regular expression /\[(.*?)\]/g; and then used split and map methods to replace each set of [] with the highlighted text. In less than five minutes, I was able to accomplish this highlightText function.

Scroll Back To Top Button

In Useful ChatGPT Prompts, if you scroll down, you will notice a round button with an upward arrow in the bottom right corner of the web page. This is a common feature on many websites, and when clicked, the page automatically scrolls back up to the top. How can we implement this common functionality? Let us ask ChatGPT for help.

Here is the prompt I gave ChatGPT:

You are now an expert in TypeScript, React, and TailwindCSS. Today, I want to utilize these three tech stacks to create a component. This component is a round button that appears in the bottom right corner of a page only after scrolling down. If the page is at the top, the button should not be visible. When the user clicks on the button, the page should scroll back to the top. Once the page reaches the top, the button should be hidden until the user scrolls down again.

Let us see the code ChatGPT wrote for us

Since the entire program is a bit too long, I only screenshot the top half. But you can see, it took ChatGPT less than 1 minute to implement this component. ChatGPT used const [showButton, setShowButton] = useState(false); to manage the state, and use window.pageYOffset > 0 to conditionally show the button.

As the code was written in React, ChatGPT recognized that if it needed to interact with external systems outside of React (in this case, the runtime of the browser), the logic must be written in useEffect. Additionally, since a scroll listener was registered here, it was imperative to remove this listener at the end of the React component lifecycle to avoid memory leaks. This is something many React beginners forget to do, but ChatGPT did not forget. It correctly used removeEventListener to remove the listener.

useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

You can try it out for yourself by entering the prompt above into ChatGPT. You will find that you too can create the common scroll-to-top button that is frequently seen on many websites - it is that simple!😉

Filtering by Category

The last example is also a very common one in many website. In Useful ChatGPT Prompts you can see, there is a row of ChatGPT-colored categories. When you click on a category, the website automatically filters the content to show only items belonging to that category. This functionality can be implemented in two common ways.

For smaller data sets, all data is stored on the frontend, and filtering is done on the client-side. For larger data sets, data is stored in a database, and when a user clicks on a category, the category parameter is passed to the backend for filtering. The filtered data is then sent back to the frontend for display.

Since in Useful ChatGPT Prompts, currently, we do not have so many prompts that require storing them in a separate database (after testing it, we found that making an API call to retrieve the data would add too much network latency for now). Therefore, we temporarily store all the prompts on the frontend and perform filtering on the client-side.

Let us take a look at the prompt I entered and the codes written by ChatGPT. Once again, in less than a minute, ChatGPT has successfully implemented the functionality I requested. Also, variable naming was clear and easy to understand, very impressive 😎

Some Final Thoughts — Rapid Prototyping

Building Useful ChatGPT Prompts took much less time compared to coding my other side projects. The time spent on developing a website prototype is significantly lower with the help from Copilot and ChatGPT. This means that you can turn your ideas and creativity into reality in a much faster way. So what are you waiting for? Let us start building and make the world a better place with the help of ChatGPT!

Test Your JavaScript Knowledge with These 12 Basic Quizzes!

Alaster — Mon, 30 Jan 2023 09:31:36 +0000

Do you know JavaScript? If yes, how well are you familiar with JavaScript? In this article, we will go through some common JavaScript questions. Try them out to see your level of familiarity with JavaScript 😎

Variables
- What is the differences between var, let and const?
- How to compare two values? What is the difference ==, === and Object.is?
Data types
- What are data types in JavaScript?
- What is the difference between Map and Object?
Array
- What is the difference between slice, split and splice?
Object
- What is this? What is the difference between call, apply and bind?
- Can you explain how new operator work?
Function
- What is arrow function?
- What is IIFE (Immediately invoked function expression)?
Class
- What is the difference between class and constructor in JavaScript?
Closures
- What is closure?
Prototypes
- What is prototypes?
- What is prototypal inheritance?
Scope
- What is scope in JavaScript?
Hoisting
- What is Hoisting?
Promise/Async await
- What is Promise?
- What is Promise.race and Promise.all?
ES6+
- What is destructuring in JavaScript and how does it work in ES6?
- Are you aware of the latest updates and features in the latest ES version?

If you're unable to answer it effectively, these helpful links may assist you in finding the solution.

Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at explainthis.io.

I have got frontend engineer offers from both startup and FAANG companies. I would like to help as many people as possible to land a job. If you have any questions regarding to frontend engineering or frontend interview. Feel free to reach out to me at hello@explainthis.io

What is the difference between ==, === and Object.is() in JavaScript

Alaster — Thu, 26 Jan 2023 12:42:54 +0000

The post was originally published on ExplainThis with title 《What is the difference between ==, === and Object.is() in JavaScript》

There are many ways to compare equality in JavaScript. The three most common are === (strict comparison), == (loose comparison), and Object.is (equal comparison). What's the difference between the three? Let's take a look at this question that is often asked in interviews.

`==` Loose comparison (loose equality)

When using ==, before two values are compared, the type will be converted first.

For example, in the following three examples, the reason why true will be printed is precisely because before the comparison, the type is converted.
Otherwise, the number 1 and the string '1' represent different values in JavaScript, and strictly speaking, they should not be equal.

Similarly, undefined and null are different types and different values in JavaScript, but if == is used, true will be returned.

console.log(1 == '1'); // true
console.log(0 == false); // true
console.log(undefined == null); // true

== can cause some confusion for developers because of the type conversion. Therefore, in most cases, it is not recommended to use ==.

`===` Strict comparison (strict equality)

=== does not convert the type and value, so comparing the two will return false if they are of different types.
If the value is different, false will also be returned.

There are two exceptions though, strict comparisons will return true when we compare +0 and -0, and comparisons NaN and NaN will return false.

+0 === -0; // true
NaN === NaN; // false

These two situations are when equality comparison Object.is comes in handy.

`Object.is` Same-value comparison (same-value equality)

Same-value comparison, as the name implies, compares whether two values are equal.
Although it starts with Object, any two values can be compared. For example:

console.log(Object.is(1, 1)); // true
console.log(Object.is(1, '1')); // false

The above two problems in === can be fixed by using Object.is

console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

However, if you want to check the equality of NaN, there is a method called isNaN in JavaScript. Whether to use it depends on the habits of the development team. If you are unfamiliar with Object.is, you can choose to use Number.isNaN.

Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at explainthis.io.

My TikTok (ByteDance) Frontend Software Engineer Interview Experience

Alaster — Wed, 25 Jan 2023 14:10:22 +0000

The post was originally published on ExplainThis with title 《My TikTok (ByteDance) Frontend Software Engineer Interview Experience》

This is a blog post on my interview experience with TikTok in summer 2022. The role I interviewed for was Frontend Software Engineer.

I applied this frontend software engineer position through TikTok's career website, but somehow I was contacted by a ByteDance recruiter. It's because ByteDance is TikTok's parent company. It's kinda like applying Facebook but get contacted by Meta a recruiter. I must say ByteDance's efficiency was very impressive. I submitted my resume in the morning and received an interview invitation in the afternoon in the same day.

After each round of interview, I was arranged the next round within an hour. It took only two weeks from application to finishing all interviews. ByteDance is already a company with more than 100K employees, and it's very impressive that they still maintain this kind of efficiency and speed. Because ByteDance did not specifically sign a confidentiality clause for the interview part, and most people directly share the questions they did on the Internet, I will also directly share the questions I was asked.

First Round

The interviewer was a senior frontend engineer. The interviewer asked me to do a self-introduction first. Then he started asking questions about past projects I put on the resume, and he followed up with "what is the most challenging project you have done".

After the resume question, he asked questions related to frontend. The questions included

What Hooks have you used?
Talk about the detail of useEffect.
What is the dependency array for? How does it work?
Why does useEffect only execute once when the component is mounted if the dependency array is empty?
What happens if you put an object or an array in the dependency array?
What happens if a ref is passed in the dependency array?
What is the difference between useLayoutEffect and useEffect? When should you which?

After the React questions, he asked basic networking questions, mainly for HTTP

Please talk about HTTP caching.
Between eTag or Last Modified, which one is preferred? Why?
What is the response body of 304?

After network questions, he asked me JavaScript questions.

First is on Event Loop, Microtasks, and Macrotasks, (see this article for details)
Second is a JavaScript whiteboard question, which was to implement .get of lodash.

Second Round

The interviewer was a senior frontend engineer. After self-introduction, he asked questions on my resume, and asked me about my experience in writing unit tests and E2E tests in the past. Then he asked a few JavaScript questions, including

What is the difference between a Map object in JavaScript and a general object?
What is the current trend of JavaScript?
What is new in React 18

This round ended with a whiteboard question, which was a LeetCode Medium string question.

Third Round

This interview is not the same as the previous two rounds. There was no self-introduction. The interviewer asked a LeetCode Medium question in the very beginning, which is basically a variation of 3Sum. After that, he asked me a few frontend questions

What problems does React Fiber solve?
How does HTTP work?
What is the s in HTTPs?

Finally, there is a front-end system design question. It took about 20 minutes to discuss how to design a Typeahead front-end.

After the three technical interviews, I feel that they pretty much covered everything from JavaScript, React, Networking, algorithm and system design. So if you want to prepare for the TikTok frontend interview, you need to prepare a lot!

Fourth Round (Human Resources)

After successfully passing the three rounds of technical interviews, I finally entered the HR round. The HR first introduced the culture of ByteDance and what the team I interviewed was doing. Many people shared on the internet that you should not take this round lightly, and you must prepare well for various behavioral interview questions. The question asked by HR was mainly to see your fit with the company culture, so it will be helpful to read the company culture in advance.

I received the offer one week after the HR round.

My Journey from Designer to Big Tech Frontend Engineer

Alaster — Tue, 24 Jan 2023 13:58:14 +0000

The post was originally published on ExplainThis with title 《My Journey from Designer to Big Tech Frontend Engineer》

This is a blog post on my experience from a designer to a frontend engineer at a big tech company. I pivoted my career three years ago. And now I am working at a big tech company as a frontend engineer. My journey wasn't smooth-sailing, and I hope it gave you a more realistic picture on switching career to frontend engineering.

My motivation to learn coding

When I was a student, I chose to major in Econ. I didn't choose it because I loved it, but because I didn't know what to choose. After declaring my major for a year, I regretted it. I wasn't interested in the classes I took. Most of my friends went to banking or consulting for internship, but I didn't think those were for me.

A pivotal moment in my college life was that I took a design course, and I absolutely loved it. I loved that I could design something out of nothing, and design a solution to solve a problem. That's why I decided to start my career in design after graduating from college.

Working in the field of design, I sometimes needed to work with engineers, especially with frontend engineers. When I worked with them, I always felt they were cool, because they were doing something I had no idea about. I'd never learnt anything related to coding and programming. I couldn't understand any line of codes they wrote. Nevertheless, it's still fascinating to me because my frontend engineers colleges always turned my design idea into reality. Without the help from them, my design wouldn't be able to interact with the real users. This experience planted a seed in me. I started to think about learning how to code.

How I got started

In the very beginning 2019, I asked my frontend engineer colleges what to learn. They recommended me HTML, CSS, and JavaScript. In retrospect, I think this is generally a good recommendation. There are many programming languages you can learn. But if you want to work on the frontend, you probably don't need to learn Java or Python despite their popularity.

I bought a few books on HTML, CSS, and JavaScript. However, reading books are not very helpful to me. So I tried to search for different learning materials. That's when I found freeCodeCamp. I like that in freeCodeCamp, you learn coding in an interactive environment. I think this is particularly important. You must learn coding by doing. Reading books or watching tutorials are not enough. In fact, there is a term called Tutorial Hell. It refers to people who watch a lot of tutorials but code nothing It's like a hell because you would never truly learn how to code by doing so.

Committing myself to frontend engineering

After around 6 months of learning during night and weekend, I felt I've grasped the basic idea of coding. I started to think about switching my career from design to frontend engineering. However, I wasn't very sure about the jump. So I took a safe route, I went to a part-time online coding bootcamp. It's part-time so I didn't need to quit my day job, but it's still very intense.

When I was in the bootcamp, I felt very tired every day. After working for 8 hours a day, there wasn't much energy left for the assignments and projects from the bootcamp. But I didn't give up, because I thought of it as a test. I wanna to see if I really like frontend engineering. If I gave up, then it meant I probably didn't like it as much as I thought. I always like the brick walls quote from Randy Pausch. It was what I told myself during the coding bootcamp.

"Brick walls are there for a reason. The brick walls are not there to keep us out. The brick walls are there to show how badly we want something. Because the brick walls are there to stop the people who don't want something badly enough." -- Randy Pausch

By the end of the bootcamp, I built two projects and put them on my resume. One was a simple Twitter clone, and the other was a simple Yelp clone. I built them using JavaScript with React for the frontend, and Node.js with Express for the backend. Since my goal was to get a frontend engineering job, I put much more time and effort on the frontend part, making sure both the design and the code look good for the frontend.

Imposter Syndrome in my first job

I was able to secure a frontend engineering job after graduating from the bootcamp in March 2020. I have to say, getting a job is just a beginning. Compared with my time at bootcamp, it was much harder in the first few months in my first frontend engineering job. In my first job, I experienced what people call Imposter Syndrome. I still remember I received more than 20 comments in my first pull request. It made me feel like I did not know how to write code.

If you are feeling the same in your first software engineering job, don't worry about it. I know it's hard, but it's only temporary. When you gradually get yourself familiar with the codebase and coding convention in the team, things will get better. Trust me!

First FAANG offer

In 2022, I got multiple offers from different big tech companies, including FAANG companies (Amazon) and the largest unicorn startup in the world (TikTok). But I am not going to sugar coat it. It wasn't smooth at all. In fact, I gave big tech companies a try in 2021 after gaining two years of full-time experience in frontend development. But I got 0 offer.

That's why I spent almost a year, preparing both LeetCode style interviews and frontend interviews. That's also the reason why I built ExplainThis with my friends. ExplainThis is a free interview prep website, aiming to help people like me to prepare their interview well. We've curated the most common interview questions and solutions, and we share them for free. I believe if a normal guy with only a liberal arts degree like me can get an offer from the big tech company, you can do it too!

Struggle optimistically

It's a long 3-year journey, but when I look back, there wasn't a single moment that I regret. Even though I am in a big tech company now, I still feel struggling all the time. Especially seeing the recent layoffs from almost all big tech companies, I feel very insecure to be honest. But I know, I cannot control what I cannot control. What I can do is keep learning and growing.

I'm optimistic though. Software is still eating the world. Even though most big tech companies are cutting jobs, there are still many opportunities in non-big-tech companies. So if you are also struggling now, let's struggle optimistically together. And if there is anything I can help you with, send me an email at hello@explainthis.io 😊

What array traversal methods are there in JavaScript? (for loop, for...in, for...of, forEach, map, filter, every, some)

Alaster — Mon, 23 Jan 2023 11:50:44 +0000

In basic JavaScript interview, the method of traversing the array is often asked.

This article lists the most commonly used array traversal methods in JavaScript, including for loops, native methods of arrays (forEach, map...), and common array traversal questions in interviews.

This article is divided into two parts:

8 ways to iterate over the array
What is the difference between for...of and for...in?

Traversing an array in 8 different ways

`for` loop

You can use break to end the loop or use continue to jump out of the current loop
Imperative writing is more verbose

  let arr = [0, 1, 2, 3, 4, 5];

  for (let i = 0; i < arr.length; i++) {
    if (i > 2) break;
    console.log(arr[i]);
  }
  // 0 1 2

`for...of`

This is a ES6 feature. It is more concise than the for loop
Like the for loop, it can be used with break, continue and return

`for...in`

When using for...in, key:value is being iterated, and the key in an array is the index

Below are the native methods you can use to iterate an array

`forEach`

forEach will execute the callback function for each element
The forEach method will only iterate over the original array and will not return a new array. So if you need to construct a new array from an old array, you should use the map method
The declarative writing method is preferred by many developers, but you cannot use break and continue syntax to jump out of the loop in forEach, as shown in image figure below

`map`

map executes the provided callback function for each element and returns an new array

`filter`

filter returns a new array, and filter out elements that do not pass the condition in the provided callback function

`every`

every will check whether each element in the array passes the condition in the provided callback function, and finally returns a Boolean.

If every element passes, it will return true, but if one of the element does not meet is false, it will end early and return false

The difference with some is that every method requires that every element in the array must pass the condition. But for some, only one element needs to pass the condition.

[12, 5, 8, 130, 44].every((x) => x > 10); // false
[12, 54, 18, 130, 44].every((x) => x > 10); // true

`some`

The method is similar to every, it will test whether each element of the array passes the condition of the provided callback function, if one of the element meets the condition, it will end early and return true
The difference with every is that with the some method, as long as there is an element in the array that meets the condition in callback function, it will return true

[2, 5, 8, 1, 4].some((x) => x > 10); // false
[12, 5, 8, 1, 4].some((x) => x > 10); // true

Bonus question: Which methods will change the original array?

The array methods mentioned above will not directly change the original array by default, unless the function we pass in does some processing on the original array.

Bonus question: Which methods will return a new array?

map and filter will return a new array, so if you are writing immutable code in React, you often need to use these two methods.

Bonus question: What is the difference between `for` loop and `forEach`?

There is a difference in wording, forEach is more concise
forEach cannot end the entire interation early, nor can it be used with break and continue syntax. Also using return will also be ignored in forEach

Bonus question: What is the difference between `for...of` and `for...in`?

for...of iterates the element value (value) in the array; and for...in iterates the key: value.

var arr = [10, 20, 30];

for (let value of arr) {
   console.log(value);
}
//10 20 30

var arr = [10, 20, 30];

for (let value in arr) {
   console.log(value);
}
//0 1 2

In most cases, for...in will be used to iterate objects, but it is not recommended to use for...in to iterate arrays, the main reasons are as follows:

a. When there is an empty item in the array, using the for...in method ignores the item.

let a = ['a', , 'c'];

for (let x in a) {
  console.log(x);
}

// 0 2

for (let x of a) {
  console.log(x);
}

// a undefined c

b. for... in will check whether the properties of the object are enumerable.

If true, it will iterate out all the names of these properties.

Since some JavaScript libraries may create methods on the Array prototype, if you use for...in method, you may operate on values that are not present in the array. But using for...of can avoid this issue.

Array.prototype.foo = 1;

let a = [1, 2, 3];

for (let x in a) {
   console.log(x);
}

// 0 1 2 foo

c. Although the key:value iterated by for…in is index, for…in will use the String type as the key:value.

So if we take index to do calculations may cause unexpected results.

let a = [1, 2, 3];
for (let x in a) {
  console.log(x + 1);
}
// 01 11 21

d. The iteration of for...in does not guarantee that the order is correct.

This situation is very difficult to use on an array, because when we want to iterate the values in the array, we usually want the order to be correct.

And for...of will first check the [Symbol.iterator] property of the object, and then use [Symbol.iterator].next() to iterate out the values one by one to ensure that the order is correct.

But since Object does not have the property [Symbol.iterator], for...of cannot be used on Object.

Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at explainthis.io.

Will passing (a,b) => b - a in JavaScript builit-in sort a be in ascending or descending order? Why?

Alaster — Sun, 22 Jan 2023 02:29:43 +0000

Arrays in JavaScript have a built-in sort method, which allows us to have a high-performance sorting without writing our own sorting algorithm. However, do you know how to use sort? How does the compareFn passed in sort work? When compareFn is (a, b) => b - a, will the sort be ascending or descending? Why?

This is not only commonly used in work, but also a frequently asked question in interviews.

Make sure you have a good understanding of this concept. If you are not familiar with it, let us find out through this article.

How to use `sort`

If you look at the MDN documentation, you can see that sort is used like this.

sort(compareFn);

Among them, compareFn requires two parameters a and b. In the comparison rules, it must return 1, 0 or -1. The rules to be followed are as follows:

function compareFn(a, b) {
   if (a is greater than b) {
     return 1; // means a is placed after b
   }

if (a is smaller than b) {
     return -1; // means a is placed before b
   }

   // a is equivalent to b
   return 0; // means the position between a and b remains unchanged
}

But when writing comparisons between numbers, we tend to write a little more concisely.

In the following example, compareFn is (a, b) => b - a. Here comes a classic interview question, will (a, b) => b - a be in ascending or descending order? And why?

let arr = [3, 22, 17, 35, 2, 66];
arr.sort((a, b) => b - a);
// Will arr be [2, 3, 17, 22, 35, 66] or [66, 35, 22, 17, 3, 2] ?

`(a,b) => b - a` is ascending or descending? Why?

Will (a, b) => b - a be ascending or descending? The answer is descending, so arr in the above example would become [66, 35, 22, 17, 3, 2] .

let arr = [3, 22, 17, 35, 2, 66];
arr.sort((a, b) => b - a); // [66, 35, 22, 17, 3, 2]

Conversely, if the compareFn is (a, b) => a - b, it will be in ascending order, making arr become [2, 3, 17, 22, 35, 66].

let arr = [3, 22, 17, 35, 2, 66];
arr.sort((a, b) => b - a); // [2, 3, 17, 22, 35, 66]

Why is this so? Remember we mentioned in the previous paragraph that in compareFn,

If a is greater than b, return 1
If a is smaller than b, return -1
Returns 0 if a is equal to b

Let's look at the following deduction next:

When (a, b) => a - b,

If a > b, then a - b will be greater than 0, then return 1, a is placed after b, the order will be b, a, because a is greater than b, so it is ascending
If a < b, then a - b will be less than 0, then return -1, a is placed before b, the order will be a, b, because a is smaller than b, the result is also ascending

Similarly, when (a, b) => b - a,

If a > b, then b - a will be less than 0, then return -1, b will be placed after a, the order will be a, b, because a is greater than b, so it is descending
If a < b, then b - a will be greater than 0, then return 1, b is placed before a, the order will be b, a, because a is less than b, the result is also descending

As can be seen from the above example, when (a, b) => a - b, no matter a is greater than b, or a is less than b, it will be ascending.

Conversely, when (a, b) => b - a, no matter a is greater than b, or a is less than b, it will be descending.

If you can explain through such an example in the interview, I believe you can pass this interview question.

Thanks for reading.

If you like the content, check out the free frontend interview prep resources my friends and I curated at explainthis.io.

DEV Community: Alaster

I Coded a Website with 60k+ Daily Visitors Using ChatGPT

Tips for using ChatGPT to write programs

Implement highlightText function

Scroll Back To Top Button

Filtering by Category

Some Final Thoughts — Rapid Prototyping

Test Your JavaScript Knowledge with These 12 Basic Quizzes!

If you're unable to answer it effectively, these helpful links may assist you in finding the solution.

What is the difference between ==, === and Object.is() in JavaScript

== Loose comparison (loose equality)

=== Strict comparison (strict equality)

Object.is Same-value comparison (same-value equality)

My TikTok (ByteDance) Frontend Software Engineer Interview Experience

First Round

Second Round

Third Round

Fourth Round (Human Resources)

My Journey from Designer to Big Tech Frontend Engineer

My motivation to learn coding

How I got started

Committing myself to frontend engineering

Imposter Syndrome in my first job

First FAANG offer

Struggle optimistically

What array traversal methods are there in JavaScript? (for loop, for...in, for...of, forEach, map, filter, every, some)

Traversing an array in 8 different ways

for loop

for...of

for...in

forEach

map

filter

every

some

Bonus question: Which methods will change the original array?

Bonus question: Which methods will return a new array?

Bonus question: What is the difference between for loop and forEach?

Bonus question: What is the difference between for...of and for...in?

Will passing (a,b) => b - a in JavaScript builit-in sort a be in ascending or descending order? Why?

How to use sort

(a,b) => b - a is ascending or descending? Why?

Implement `highlightText` function

`==` Loose comparison (loose equality)

`===` Strict comparison (strict equality)

`Object.is` Same-value comparison (same-value equality)

`for` loop

`for...of`

`for...in`

`forEach`

`map`

`filter`

`every`

`some`

Bonus question: What is the difference between `for` loop and `forEach`?

Bonus question: What is the difference between `for...of` and `for...in`?

How to use `sort`

`(a,b) => b - a` is ascending or descending? Why?