DEV Community: Dirask-JavaScript

JavaScript - basic array operations with examples

Dirask-JavaScript — Thu, 31 Mar 2022 09:43:10 +0000

Have you ever had any difficulties using basic array methods in JavaScript?

In today's post I will try to explain the basic operations on arrays as simply as possible, stay tuned! 🔥

Before we start, I would highly recommend you to check out the runnable examples for the solution on our website:
JavaScript - basic array operations

Below I've presented the six most common methods used on arrays that you may find useful:

map()
filter()
find()
fill()
some()
every()

1. `map()` method

In this example, I've used the map() method to create a new array filled with the results of calling a provided function on every element in the calling array.

const array1 = ['🟦', '🟦', '🟦', '🟦'];

const array2 = array1.map((item) => '🔵');

console.log('array1: ' + array1);
console.log('array2: ' + array2);

Output:

array1: 🟦,🟦,🟦,🟦
array2: 🔵,🔵,🔵,🔵

2. `filter()` method

In this example, I've used the filter() method to create a new array filled with all elements that pass the test implemented by the provided function.

const array1 = ['🟦', '🔵', '🟦', '🟦'];

const array2 = array1.filter((item) => item == '🟦');

console.log('array1: ' + array1);
console.log('array2: ' + array2);

Output:

array1: 🟦,🔵,🟦,🟦
array2: 🟦,🟦,🟦

3. `find()` method

In this example, I've used the find() method to get the first element in the provided array that satisfies the provided testing function.

const array = ['🟦', '🟦', '🔵', '🔵'];

const item = array.find((item) => item == '🔵');

console.log('array: ' + array);
console.log('item: ' + item);

Output:

array: 🟦,🟦,🔵,🔵
item: 🔵

📝 Note:

If there's no value that satisfies the testing function, undefined is returned.

4. `fill()` method

In this example, I've used the fill() method to change all elements in an array to a specific value, from a start index 1 (default is 0) to an end index (default array.length).

const array = ['🟦', '🟦', '🟦', '🟦'];
console.log('array: ' + array);

array.fill('🔵', 1); // filling since index 1
console.log('array: ' + array);

array.fill('🔵');    // filling since index 0
console.log('array: ' + array);

Output:

array: 🟦,🟦,🟦,🟦
array: 🟦,🔵,🔵,🔵
array: 🔵,🔵,🔵,🔵

5. `some()` method

In this example, I've used the some() method to test whether at least one element in the array passes the test implemented by the provided function. The method returns true if, in the array, it finds at least one element for which the provided function returns true.

const array = ['🟦', '🔵', '🟦', '🔵'];

const result = array.some((item) => item == '🟦');

console.log('array: ' + array);
console.log('result: ' + result);

Output:

array: 🟦,🔵,🟦,🔵
result: true

6. `every()` method

In this example, I've used the every() method to test whether all elements in the array pass the test implemented by the provided function. The method returns true or false.

const array = ['🟦', '🟦', '🟦', '🔵'];

const result = array.every((item) => item == '🔵');

console.log('array: ' + array);
console.log('result: ' + result);

Output:

array: 🟦,🟦,🟦,🔵
result: false

You can run these examples here

If you found this solution useful let me know in the comment section or just leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

How to use optional chaining in JavaScript ES2020?

Dirask-JavaScript — Thu, 11 Mar 2021 19:12:03 +0000

Why worry about `undefined` or `null` values when optional chaining can be used?

When something comes from the outside but you are not sure if it is defined or you just want to simplify the logic of your app use this solution. 🔽

Before we start, I would highly recommend you to check out the runnable examples for the solution on our website:
How to use optional chaining in JavaScript ES2020?

Let's start by briefly explaining how the optional chaining operator works.

ES2020 introduced ?. operator that gives the possibility to avoid testing if an object or property before ?. notation exists, returning undefined value if not. The operator can be used with variables, properties, objects, arrays, functions, etc.

The ?. operator is similar to the . chaining operator, except that instead of causing an error if a reference is null or undefined, the expression returns undefined value.

📝 Note:

The ?. optional chaining operator is supported in the latest Babel compiler and TypeScript by default.

Syntax looks following way:

Syntax	Description
`obj?.prop`	object property access
`obj?.[expr]`	object property access with brackets
`arr?.[index]`	array item access by index
`func?.(args)`	function calling

Simple object example:

const user = {
  name: 'Kate',
  age: 25,
};

console.log(user?.name);             // Kate

// console.log(user.address.street)  // causes error
console.log(user.address?.street)    // undefined

Various types examples:

// accepted: uninitialised, undefined or null

var obj;
var arr = undefined;
var func = null;

console.log(obj?.items);        // undefined
console.log(obj?.['name']);     // undefined
console.log(arr?.[10]);         // undefined
console.log(func?.('Hello!'));  // undefined

You can run these examples here

If you found this solution useful let me know in the comment section or leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

How to round div corners using CSS

Dirask-JavaScript — Mon, 08 Mar 2021 19:06:18 +0000

Did you know that you can assign different radiuses of curvature to different edges in an HTML div element?

Today, I'd like to show you how to easily round corners in HTML elements using CSS. 😊

Before we start, I would highly recommend you to check out the runnable examples for the solution on our website:
How to round div corners using CSS

Final effect:

There are several ways to round element depending on which corners you want to round.

Round each corner with the same value

In this solution, we use border-radius property with one value to round each corner of the div with the given value.

Practical example:



<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 25px; /* <---------- use this to round all corners in div */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

You can run this example here

Round diagonally opposite corners

In this solution, we use border-radius property with two values to round diagonally opposite corners of the div with two different values.

Practical example:



<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 25px 45px; /* <---------- use this to round the opposite corners */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

You can run this example here

Round each corner with a different value

In this solution, we use border-radius property with four values to round each corner of the div with a different value, clockwise.

Practical example:



<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 10px 30px 20px 40px; /* <----- use this to round all corners in div */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

You can run this example here

Custom rounded corners

In this solution, we use border-radius property with three values to round corners of the div in the following way:

first value describes top-left corner - 20px radius,
second value describes opposite top-right and bottom-left corners - 45px radius,
third value describes bottom-right corner - 30px radius.

Practical example:



<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 20px 45px 30px; /* <---------- use this to round corners*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

You can also manually specify which corner you want to round with given value like this:



<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-top-left-radius: 25px; /* <----- top-left corner round      */
        border-top-right-radius: 30px; /* <----- top-right corner round     */
        border-bottom-right-radius: 40px; /* <----- bottom-right corner round  */
        border-bottom-left-radius: 50px; /* <----- bottom-left corner round   */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

You can run this example here

Circle div example

We can also use border-radius property with percentage values. In this solution I've set the property value to 50% to make a circle div.

Runnable example:



<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 100px;
        background-color: #b5edc2;
        border-radius: 50%; /* <------ use this to make circle div (NOTE: height=width) */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

You can run this example here

If you found this solution useful let me know in the comment section or leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

CSS - animation with transition property example

Dirask-JavaScript — Thu, 04 Mar 2021 21:22:43 +0000

Hello there! 👋😊

In this article, I would like to show you how to use one of the coolest style property in CSS - transition. 😎⏭

Before we start, I would highly recommend you to check out the runnable example for the solution on our website:
CSS - animation with transition property example

Final effect:

Below example presents three CSS styles:

.normal which is the default style of our div element,
.transformed which is transformed style of our div element,
.button which is style of our button element.

The styles of our div have transition value set to '1s'. It means our component will change it's property values smoothly, over a given duration (over 1s). Additional transform parameter describes moving of an element. In our case transform rotates the element during 2s.

Runnable example:

<!doctype html>
<html>
  <head>
    <style>
      .normal {
        margin: 50px;
        padding: 20px;
        border-radius: 10px;
        width: 100px;
        height: 100px;
        background: #06F2FF;
        box-shadow: 5px 5px 5px #04bd57;
        transition: 1s,  transform 2s
      }

      .transformed {
        margin: 50px;
        padding: 20px;
        border-radius: 10px;
        width: 150px;
        height: 150px;
        background: #06FF76;
        box-shadow: 5px 5px 5px #3085d6;
        transition: 1s, transform 2s;
        transform: rotate(180deg)
      }

      .button {
        padding: 2px;
        border: 2px solid white;
        background: black;
        box-shadow: 5px 5px 5px grey;
        text-shadow: 1px 1px 1px black;
        font-weight: 900;
        color: white;
        border-radius: 10px;
      }
    </style>
    <script>
      function myFunction() {
        var element = document.getElementById("my-div");
        if(element.classList[0] == "normal"){
          element.classList.remove("normal");
          element.classList.add("transformed");
        }
        else if(element.classList[0] == "transformed"){
          element.classList.remove("transformed");
          element.classList.add("normal");
        }
      }
    </script>
  </head>
  <body>
    <div style="height: 300px">
      <div id="my-div" class="normal">
        <button class="button" onclick="myFunction()">Click me</button>
      </div>
    </div>
  </body>
</html>

You can run this example here

📝 Note:
If the duration is not specified, the transition will have no effect, because the default value is 0.

If you found this solution useful and would like to receive more content like this leave a comment or reaction 💗🦄💾.
Thanks for your time and see you in the upcoming posts! 😊

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

Stop infinite loop in JavaScript debugger - Google Chrome

Dirask-JavaScript — Wed, 03 Mar 2021 21:36:43 +0000

Have you ever written an infinite loop that freezes an entire page in your browser?

In this article, I will try to show you how to deal with such a problem.

Before we start, I would highly recommend you to check out the original post with the solution on our website:
Stop infinite loop in JavaScript debugger - Google Chrome

Now let's go to the solution 😊🔽

Using Google Chrome, there are few ways to stop JavaScript debugging:

stop button in Chrome DevTools,
end process by closing tab or window,
end process button in Task manager.

1. Stop button in Chrome DevTools example ⏯🛑

📝 Note:

To use this approach DevTools should be turned on before JavaScript code will be executed. Otherwise you won't be able to open the tools with F12 because Chrome window will freeze. You will still be able to turn on the tools with browser menu, but the tools won't connect to the executing source code to stop it - in this case, code execution can only be stopped by closing a tab or window. Sometimes, with a low amount of RAM or a large amount of open tabs, DevTools may have trouble with stopping the infinity loop

There are several steps you need to take to get this done:

open Chrome DevTools with F12, Ctrl+Shift+i or from menu Main menu→More tools→Developer tools,
open web page that you want to debug,
run some code that has infinity loop,
click Chrome DevTools window to get focus on it,
pause script with F8, Ctrl+\ or by clicking Pause script execution button,
press mouse button for 1-3 seconds on the button again to see more options,
move click action to square stop button on expanded menu to stop permanently script execution.

2. End process by closing tab or window

Use close button to stop the process. If it does not help use Task manager described in next solution.

3. End process button in Task manager

In this solution you need to:

open Chrome Task manager with Shift+Esc or from menu Main menu→More tools→Task manager,
find the process on list by tab name or biggest CPU load (use column sort option),
select process and click End process button.

If you found this solution useful let me know in the comment section or just leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔥

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

JavaScript - remove duplicated lines

Dirask-JavaScript — Tue, 02 Mar 2021 16:37:08 +0000

Hello there! 👋 😊

In this article, I would like to show you two ways to remove duplicated lines from some text in JavaScript. 🔠

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
JavaScript - remove duplicated lines

We're gonna use two methods:

filter()
reduce()

`filter()` based example

This approach uses a functional programming pattern.

On the text I've used set of operations to remove duplicated lines:

split() method to split text into lines that take a newline character in 4 different variants which is a universal approach,
filter() method that creates new array of elements tested with provided function,
join() method to merge items back.

Practical example:

const newLineExpression = /\r\n|\n\r|\n|\r/g;

const removeDuplicatedLines = (text) => {
    return text.split(newLineExpression)
        .filter((item, index, array) => array.indexOf(item) === index)
        .join('\n');
};

// Usage example:

const text = `a
b
b
a
a
c
c`;

console.log(removeDuplicatedLines(text)); // a
                                          // b
                                          // c

You can run this example here

`reduce()` based example

This approach was created to show that it is possible to get the same effect as in the example above with reduce() method.

Practical example:

const newLineExpression = /\r\n|\n\r|\n|\r/g;

const removeDuplicatedLines = (text) => {
    const blocker = {}; // prevents lines dupplication
    return text.split(newLineExpression)
        .reduce((result, line) => {
            if (blocker.hasOwnProperty(line)) {
                return result;
            }
            blocker[line] = true;
            return result + line + '\n';
        }, '');
};

// Usage example:

const text = `a
b
b
a
a
c
c`;

console.log(removeDuplicatedLines(text)); // a
                                          // b
                                          // c

You can run this example here

If you found this solution useful you can react to this post or just leave a comment to let me know what you think. Thanks for reading and see you next time! 😊

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

DEV Community: Dirask-JavaScript

JavaScript - basic array operations with examples

Have you ever had any difficulties using basic array methods in JavaScript?

Below I've presented the six most common methods used on arrays that you may find useful:

1. map() method

2. filter() method

3. find() method

4. fill() method

5. some() method

6. every() method

Write to us! ✉

How to use optional chaining in JavaScript ES2020?

Why worry about undefined or null values when optional chaining can be used?

Let's start by briefly explaining how the optional chaining operator works.

Write to us! ✉

How to round div corners using CSS

Did you know that you can assign different radiuses of curvature to different edges in an HTML div element?

Round each corner with the same value

Round diagonally opposite corners

Round each corner with a different value

Custom rounded corners

Circle div example

Write to us! ✉

CSS - animation with transition property example

Write to us! ✉

Stop infinite loop in JavaScript debugger - Google Chrome

Have you ever written an infinite loop that freezes an entire page in your browser?

1. Stop button in Chrome DevTools example ⏯🛑

2. End process by closing tab or window

3. End process button in Task manager

Write to us! ✉

JavaScript - remove duplicated lines

filter() based example

reduce() based example

Write to us! ✉

1. `map()` method

2. `filter()` method

3. `find()` method

4. `fill()` method

5. `some()` method

6. `every()` method

Why worry about `undefined` or `null` values when optional chaining can be used?

`filter()` based example

`reduce()` based example