DEV Community: Coderslang: Become a Software Engineer

How to get current date in JavaScript

Coderslang: Become a Software Engineer — Tue, 15 Nov 2022 13:48:00 +0000

There are 2 ways you can get current date in JavaScript. You can just create a new Date object without
any arguments, or you can use the function Date.now.

So both new Date() and Date.now() can be used to get current date in JS.

Let's log the results to the console.

console.log(new Date());
console.log(Date.now());

If the first case, we'll see a date + time in UTC timezone, and with Date.now we'll get the number of milliseconds
passed after Jan 1, 1970.

2022-01-13T15:19:32.557Z
1642087172563

Both results represent current date in JavaScript and can be easily compared.

A date object can be converted to milliseconds since Jan 1, 1970 by using a getTime method.

console.log(new Date().getTime()); // 1642087361849

And you can convert milliseconds returned by Date.now() to a Date object, although it's pretty redundant.
If you just need current date, it's better to call new Date() without arguments.

console.log(new Date(Date.now())); // 2022-01-13T15:24:55.969Z

How to update all npm package.json dependencies to the latest version

Coderslang: Become a Software Engineer — Mon, 14 Nov 2022 13:30:00 +0000

It's essential to keep all the node modules of your project up to date as the security patches go out.

In this short tutorial I'll teach you how to update all the node_modules to the latest version with a single command.

By default, once you type npm install <package_name>, node package manager installs the latest version of
the desired package. This version is then added automatically to the file package.json.

The issue is that over time new versions of the packages are being released, and you need to somehow update them.

To check which packages are outdated, you can run the command npm outdated, however
Node Package Manager (npm), doesn't update dependencies from package.json by default.

So, if you're looking to update all the npm modules with a single command, you can use the module npm-check-updates.
It's best to install this module globally with the -g flag.

npm install -g npm-check-updates

After successful installation, you'll be able to use the command ncu from the command line.

ncu -u

Make sure that you navigate to your project directory before using the ncu -u command. Once you execute it,
npm-check-updates will update all the dependencies from package.json to the fresh versions.

The last step is to run the command npm install to download and install updated packages based on the information
in package.json.

The difference between dependencies and devDependencies in package.json

Coderslang: Become a Software Engineer — Sun, 13 Nov 2022 13:45:17 +0000

The file package.json is an integral part of every Node.js project. It stores all the dependencies that your
project needs.

All the dependencies (most often open-source npm modules) are split into two categories: production dependencies
and development dependencies.

The difference between the two is that development dependencies won't be installed in the production environment
as they aren't needed there. It could be something that checks the quality of your code like ESLint, debug tools
like Nodemon ot testing helpers like Chai, Mocha, Enzyme.

You can include production dependencies by running the npm install --save command.

For example, here's how you'd install the module express.

npm install --save express

Once the installation is complete it will appear in the list of dependencies in package.json.

{
  "name": "my_node_project",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.18.11"
  }
}

To install the development dependency, you'll need to use the flag --save-dev instead of the --save.

npm install --save-dev mocha

This way the module will appear in the section devDependencies in package.json.

{
  "name": "my_node_project",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.18.11"
  },
  "devDependencies": {
    "mocha": "^10.0.0"
  }
}

Once it's clear how to add the different types of dependencies (dev and prod) to your Node.js project,
you should learn how to install them separately or all at once.

To install only dev dependencies from an existing package.json you can use either the full command

npm install --only=dev

or a shorter version

npm i -D

To install only production dependencies, you can use the same flag --only, but now with the argument prod.

npm install --only=prod

Thanks for reading! I hope this tutorial helped you understand the difference between development and production
dependencies in package.json and you learned how to use either of them in you Node.js projects.

Programming Methodologies: Agile vs Waterfall

Coderslang: Become a Software Engineer — Wed, 09 Nov 2022 17:10:31 +0000

Programming methodology is a system of rules and guidelines used by programmers to create software. It includes a set of best practices, tools and techniques that help programmers write high-quality code.

There are many different programming methodologies, each with its own strengths and weaknesses. The most popular ones are waterfall and agile.

Waterfall

Waterfall programming methodology is a sequential design process, often used in software development, that is characterized by distinct phases of activity. In waterfall methodology, progress flows in a linear, sequential fashion from one phase to the next.

Waterfall advantages

The main advantage of waterfall methodology is its predictability. Because each phase has specific deliverables and a review process, it is relatively easy to manage risk and identify potential problems early on. This makes waterfall well-suited for projects where requirements are very well understood.

Waterfall disadvantages

Waterfall also has some disadvantages. One is that it can be inflexible; once a project moves into a later stage, it can be difficult to make changes without potentially jeopardizing the entire project. Additionally, because waterfall relies on a linear progression, it does not lend itself well to projects with rapidly changing or unpredictable requirements.

Despite its drawbacks, waterfall remains one of the most popular software development methodologies due to its simplicity and predictability. When applied correctly to an appropriate project, it can help ensure smooth progress and successful delivery.

Agile

Agile is a more modern approach that is based on iteration and constant feedback from users. It is more flexible than waterfall and can handle changes more easily. However, it can be more difficult to plan and estimate timelines for projects using agile.

Agile programming is a methodology for developing software in which requirements and solutions evolve through collaboration between self-organizing, cross-functional teams. It promotes adaptive planning, evolutionary development, early delivery, and continuous improvement, and it encourages rapid and flexible response to change.

The agile approach began in the software development community, but has since been adopted by organizations of all types and sizes. Agile programming is based on the values and principles outlined in the Agile Manifesto.

There are many different agile methods or frameworks, each with its own set of practices and terminology. The most popular agile methods are Scrum, Kanban, Lean, and Extreme Programming (XP).

Agile advantages

Increased flexibility: Agile programming helps organizations respond quickly to changes in market conditions or customer needs. This is because the agile approach encourages constant feedback and allows for course corrections throughout the development process. As a result, organizations can avoid the costly mistakes that can occur when plans are set in stone too far in advance.
Improved quality: The focus on collaboration and constant feedback helps to ensure that errors are caught early and that features are developed with the user in mind. This leads to higher quality software that is more likely to meet the needs of its users.
Greater transparency: The use of short development cycles (known as sprints) makes it easy to track progress and identify issues early on. This transparency helps to build trust between developers and stakeholders.
Enhanced team morale: The collaborative nature of agile programming fosters a sense of ownership and responsibility among team members. This can lead to higher levels of engagement and satisfaction within the team.

Agile Disadvantages

A greater need for discipline: Because agile programming relies heavily on self-organizing teams, it requires a high degree of discipline from both developers and stakeholders. Without this discipline, it can be difficult to stay on track and make progress towards objectives.
Risk of scope creep: The iterative nature of agile programming means that there is always the potential to add new features or make changes to existing ones. This can lead to scope creep – the uncontrolled expansion of a project’s scope – which can ultimately cause delays and cost overruns.
A higher level of complexity: The use of multiple agile methods or frameworks can lead to a higher level of complexity, which can make it difficult for new team members to get up to speed. In addition, the constant change that is characteristic of agile programming can also add to the complexity.

How Long it Takes to Learn CSS

Coderslang: Become a Software Engineer — Mon, 27 Sep 2021 11:49:35 +0000

Like HTML, CSS is also simple to learn because there are few concepts to remember it. These concepts include:

CSS syntax
Common CSS properties
The CSS Box Model
How to find more information

CSS syntax

The first concept to remember is to know the syntax of CSS. In essence, the CSS syntax comes in three parts. They are the selectors, property, and value.

Here's a basic example of the CSS syntax. It tells CSS to change the color of the h1 element into red color:

h1 {
  color: red;
}

Let me explain what's happening in this code:

h1 is the CSS selector, and it points to the HTML element that you want to change styles. In this case, we select the h1 element.
color is the CSS property, and it tells what type of styling you want to apply. In this case, change the color of the h1 element.
red is the CSS property value, and it tells how the style should change. In this case, change the h1 element color to red.

As long as you remember the syntax, then you pretty much know half of the CSS rules. The other half comes from experiences (making mistakes and learning from them) and regular practice.

Common CSS properties

The next concept to know is the CSS properties. While CSS has more than a hundred properties, there are few of them you will use frequently. These common CSS properties include:

Colors
Width and Height
Background
Background color
Font size
Margin and Padding
Border
Display

By knowing these common CSS properties, you will have the foundations to build simple websites. As for the rest of the CSS properties, you will learn them when you need them.

The CSS Box Model

The third concept to remember is knowing what the CSS box model is.

Every HTML element wraps around a box called the box model. This box model consists of multiple properties which are margins, paddings, borders, and content. The purpose of the box model is to help you design and build the layout of a web page. It is also a handy tool for identifying issues in CSS stylings.

Learning CSS Box Model is challenging at first. But with enough time and practice, it will make sense to you. Plus, once you've learned it, you will have a deep understanding of CSS and be able to build complex web designs.

How to find more information

The last concept to remember is knowing how to find more information about CSS.

It is crucial to know how to search because a lot of times, you will spend your time googling how to add stylings in CSS and fix any issues you encounter when building a layout of a web page.

The first place to start is MDN Web Docs. It is an official documentation website where you can learn anything related to CSS. Another good website to look for CSS information is CSS-Tricks and Coderslang.

Conclusion

To sum it up, it will probably take you few weeks to learn the basics of CSS. As long as you keep the CSS concepts in mind, like the box modal, syntax, and practice regularly, you will become good at CSS within one or two months.

I hope you find this article helpful, and good luck learning CSS!

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

How Long it Takes to Learn HTML

Coderslang: Become a Software Engineer — Tue, 21 Sep 2021 13:48:42 +0000

It will take 2-3 weeks to learn the basics of HTML and 1-2 months of practice to be good at it. Depending on how many hours a day you spend learning, you will learn HTML sooner or later. I recommend at least one hour a day for complete beginners.

HTML is quite simple to learn as there are few things to remember about the language, and that is knowing:

What HTML does
What opening and closing tags are
Common element tags used for building a website, and
Where to search for more information

What HTML does

The first important thing to remember is to understand what exactly HTML does. In essence, HTML creates the contents of the web page. HTML can make texts, images, videos, links, navigation, and so on. The article you are reading right now is done in HTML too.

That's pretty much of it. All HTML does is defines the structures and contents of a website. To make your website look more beautiful and professional, you will have to use another tool called CSS. You will learn more about CSS later, but let's focus on HTML for now.

Opening and closing tags

Most HTML elements have two tags, and they are opening tags and closing tags. When you want to create something in HTML, you will start with opening tag <> and end it with a closing tag </>

Examples of opening tags and closing tags:

<h1></h1>

<p></p>

<button></button>

Some elements can have only one tag and do not require opening and closing tags.

Examples of elements with no opening and closing tags:

<img src="" alt="" />

<input type="" />

<link rel="" href="">

<br />

Main element tags

HTML has so many elements, but luckily, you will need a few of them to use every day. Some common elements include:

h1 - this element will create a heading text.
p - this element will create a paragraph.
button - this element will create a button.
a - this element will create a hyperlink.
input - this element will create an input field where a user can enter data.
li - this element will create a bullet point for making a list.
header - this element will create a header of a web page.
nav - this element will create a navigation.
footer - this element will create a footer of the web page.
div - this element will divide the web page into sections.
img - this element will create an image for a web page.

You don't need to memorize them all since you can always look up the reference on the internet. Besides, when you use them regularly, you will eventually remember them on your own.

Where to search for more information

The last important point is that there are still more lot of things you don't know yet. When you want to learn how to build certain things for a website or get more information about HTML, you can search for them with the help of Google.

The first place to start looking for information is MDN Web Docs. It is an official documentation website that has everything you need to know about HTML and web development in general.

Conclusion

In a nutshell, you will probably have to spend at least one hour a day learning HTML. Plus, you have to remember what HTML does, what opening and closing tags are, common element tags used, and where to search for more information.

As long as you keep these points in mind, you'll learn HTML in no time.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

P.S. I'm glad you made it here :). Make sure to smash the like buttons and read my other "How Long it Takes..." articles:

How to Remove Underlines From Links with CSS

Coderslang: Become a Software Engineer — Tue, 21 Sep 2021 13:39:37 +0000

You know how hyperlinks always come with an underline, right? And you want to get rid of it so you can add your style. Well, you can do it by using the text-decoration property.

text-decoration is a CSS property that will specify how to decorate the text. Since the hyperlink by default has a decoration, all you have to do is remove the text-decoration from the link.

An example code

Let us take an example of how to remove underline with the text-decoration property.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
  </head>
  <body>
    <a href="#">Definitely not a clickbait</a>

    <style>
      a {
        text-decoration: none;
      }
    </style>
  </body>
</html>

As shown from the example code above, the text-decoration: none; basically tells the CSS not to have any decoration on the hyperlink. That means the hyperlink no longer has an underline.

And that is pretty much it. Quite simple, right?

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

JavaScript Design Patterns - Decorator

Coderslang: Become a Software Engineer — Tue, 14 Sep 2021 11:34:00 +0000

Decorator is one of the Structural Design Patterns.

You're about to start with gift wrapping for a birthday party. A delicate, fragile gift has to be bubble-wrapped. It is followed by placing it safely in a cardboard box. The box itself may be wrapped with shining wrapping paper. Finally, finishing it off with an elegant winding of a satin ribbon around it.

These layers and more are added to or removed from the gift as randomly as our creative thoughts flow. The gift object, however, remains unperturbed. But, the packaging makes it look a lot better for the handover.

Similar to the example quoted above, the decorator pattern is merely a conceptualized way of enhancing the properties or functionalities of objects with respect to their design.

The decorator aids in adding or removing properties or functionalities to objects without having to alter the structure of the object. To emphasize, the original object remains unmodified/constant. The new features are essentially wrapped around the object without coming in contact with it.

Here is another example of having to build models of Headphones. There are different kinds of them. How about considering Wireless and Waterproof Headphones for now?
Let's take a look at a probable initial design for this:

We have a concrete Headphone class. WirelessHeadPhone and WaterproofHeadPhone are its two subclasses.

class Headphone {
    constructor(model, color) {
      this.model = model;
      this.color = color;
    }
    getPrice() {
      return 100;
    }
}
class WirelessHeadPhone extends Headphone {
    constructor(model, color) {
      super(model, color);
      this.isWired = false;
    }
    getPrice() {
      return 150;
    }
}
class WaterproofHeadPhone extends Headphone {
    constructor(model, color) {
      super(model, color);
      this.isWaterproof = true;
    }
    getPrice() {
      return 120;
    }
}

What if now, there comes a new requirement to make the headphones both waterproof and wireless in combination? What would you do? Should my new WaterProof and Wireless Headphone be extending the WirelessHeadPhone class? Inheritance doesn't provide a way to subclass from multiple classes. A subclass can only have one parent class. How do I decide which class to extend it from now? Extending from any class would not make too much of a difference here. I'd give up and go for doing something like this:

class WaterProofAndWirelessHeadphone extends Headphone {
    constructor(model, color) {
        super(model, color);
        this.isWaterproof = true;
        this.isWired = false;
    }
    getPrice() {
        return 170;
    }
}

This definitely solves the problem. Just when you start thinking you are done with this, now the company wants to introduce Headphones for Kids.

Now you have another class, the Headphone class needs to be extended to.

Finally, this is what we arrive at:

class BabyEarHeadphone extends Headphone {
    constructor() {
        super(model, color);
        this.size = 'Small';
    }
    getPrice(model, color) {
        return 80;
    }
}

The requirements just don't stop there. You may have to have a number of permutations on each of the existing features and will have new incoming features.

This shows that adding a subclass for every new requirement makes them too many in number. This results in what we call class explosion.

Here is where Decorator comes into play, providing a much more elegant and flexible alternative solution.

We have now seen that adding new features to a class can be achieved using class extension/inheritance. But for scenarios where the depth of inheritance increases, it gets out of hand, resulting in too many subclasses. Maintenance of design as such would turn into a nightmare. Decorator pattern helps avoid this problem.

These new features are attached to the objects, using Decorator Pattern, only during runtime, not before that.

The decorator's abstraction has two flavors to it:

The decorator itself acts as an interface to the object it wraps.
The decorator has the properties of the object it wraps.

To keep everything as simple as possible, consider an example for cupcake making. CupCake here is a concrete class. Adding sprinkles, chocolate chips, frosting are its decorators. The pricing for a cupcake depends on the decorators added to it. In its simplest form, the decorator pattern looks like this:

class CupCake {
  constructor(flavour, color) {
    this.flavour = flavour;
    this.color = color;
    this.cost = 3;
  }
}

A cupcake is an object that needs to be decorated.

Let's look at our first decorator, addSprinkles. The decorator accepts an instance of Cupcake as its input. The decorator now wraps the original object to append an additional property to it, keeping the object's structure intact and not modifying it.

//decorator 1
const addSprinkles = function(cupcake) {
  const cost = cupcake.cost + 1;
  return {...cupcake, hasSprinkles: true, cost};
}

We can allow an unlimited number of decorators to wrap around the object, just by sending the instance of it around to each decorator responsible for their individual capability to enhance the object's functionalities.

//decorator 2
const addSkittles = function(cupcake) {
    const cost = cupcake.cost + 2;
    return {...cupcake, hasSprinkles: true, cost};
}

Finally, this is the Cupcake decorated with sprinkles and/or with skittles!

const vanilla = new CupCake('vanilla', 'blue');
const sprinkledVanilla = addSprinkles(vanilla);
const skittleVanilla = addSkittles(vanilla);

//A combination of both sprinkle decorator and skittle decorator.
const fullDecoratedVanilla = addSkittles(sprinkledVanilla); 

console.log(vanilla.cost); //3
console.log(sprinkledVanilla.cost); //4
console.log(skittleVanilla.cost); //5
console.log(fullDecoratedVanilla.cost); //5

Note that Javascript is a dynamic language. The ability to extend its functionality is extremely simple, an inherent feature of the language in itself.
For a statically typed programming language, however, the decorator pattern's flexibility makes much of a difference. The advantage is with the capability to adapt to changes during the run time, especially when compared to the compile-time changes that inheritance provides.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

What does CRUD stand for in programming

Coderslang: Become a Software Engineer — Fri, 10 Sep 2021 07:11:37 +0000

CRUD stands for Create, Read, Update, and Delete. CRUD is the basic operations of the database management system (DBMS), and is used when you want to create, view, edit, or remove the data inside the application's database.

Any organization and application software that needs to store information like user account information, shop items, payments, etc., will often keep them in a database. And to manage these databases, you will need CRUD operations to perform the functions of creating, updating, and removing the data.

A programmer can change these data through writing code, or a user through interacting with graphical user interfaces (GUI).

How CRUD exactly works

To get an idea of how CRUD works, let's pretend that you are managing an e-commerce website.

1. Create

When you got a new product from the supplier and want to list it on your website, so your customers can see the product and buy it, you use the Create operation. The Create operation allows you to add new data to the database.

2. Read

When you are looking for a specific product and use the search bar to find the product, you are using the Read operation. The Read operation allows you to search and retrieve the data that you have created in the database. It won't modify the data or alter it in other ways - you can only read the data, and that's about it.

3. Update

When you spot a typo in one of the product names and want to edit it before the customer sees your mistake, you use the Update operation. The Update operation allows you to change the existing data that you have created in the database. You also use the update operation when you want to add more information to the product.

4. Delete

When you want to remove the product from your website because the manufacturer has stopped producing it, and it's no longer available in the market, you use the Delete operation. The Delete operation allows you to remove the data from the database that you don't need anymore.

Why CRUD is important

The CRUD concept may be simple enough, but all the world's most popular applications follow the CRUD pattern when you think about it. Google, Windows Office, Facebook, PayPal, Amazon, Uber, and others used CRUD as a model to build the application. Without the CRUD operations, it will be impossible to make these applications.

CRUD is very important because it helps you think about how to design an application that relies on user's data. If you understand the CRUD concept and can create, view, modify and remove the data from the database, you can virtually create any application you can imagine.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

What does return do in JavaScript

Coderslang: Become a Software Engineer — Thu, 09 Sep 2021 13:06:21 +0000

Like other programming languages, JavaScript allows using return statements in functions. A return statement does the following:

Halts function execution and returns control to calling module
Returns one or many values. This is optional.

In this tutorial, you'll learn more about syntax and usage of this return statement.

The general syntax

The return statement has the following syntax:

return value;

The keyword value refers to a value that will be returned by your function. This is optional. You can use a return statement without specifying any value.

You can use a single value variable such as string, integer, etc to return a single value.

You can use an array with a return statement, if you need return many values.

The return statement also can return objects of user defined types.

Coding Samples

Here comes a few simple examples. It helps in learning various ways to use return statements in JavaScript functions.

You can use the return statement to put an immediate halt in function execution and return a value -

function checkPrimeNumber(num) {
    if (num == 0)
        return true; 
    if (num == 1)
        return false; 
    for (i = 2; i < num / 2; i++) {
        if (num % i == 0)
            return false;
    }
    return true;
}

console.log(checkPrimeNumber(7));

The function checkPrimeNumber() accepts a number as parameter. It checks if the number is a prime number or not. Once it makes a decision, it halts execution and return a true or false value to calling module.

The example passes a prime number, 7 as input. Thus the program responds with a true value. You can try running the source code with different input values.

Often developers use a return statement with no value, to stop the function execution. The below example uses the function greetUser() to display a greetings message to the user. The function uses a return statement with no value to halt the function execution.

function greetUser(name) {
    alert("Hello " + name + "!");
    return;
}
console.log(greetUser("Steve"));

The program outputs a message, "Hello Steve!".

A return statement can return user-defined types also. The below functions return JavaScript objects and an array of objects.

//Example of a return statement returns an object
function returnObj(FirstName, LastName, Course) {
    var student = {
        firstName: FirstName,
        lastName: LastName,
        course: Course
    };
    return student;
}

console.log(returnObj("John", "Smith", "Chemistry"));

// Example of a return statement returns an array of objects
function returnObjectArray() {
    var student = [{
        firstName: "John",
        lastName: "Smith",
        course: "Physics"
    }, {
        firstName: "Steve",
        lastName: "Owen",
        course: "Chemistry"
    }];
    return student;
}

console.log(returnObjectArray());

Any JavaScript console can run the above source code. You can try experimenting, modifying these programs, or writing something new.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

JavaScript Interview Question #50: How does Intl.Collator work in JS

Coderslang: Become a Software Engineer — Sun, 27 Jun 2021 07:33:05 +0000

What is Intl.Collator and how does it work in JS? What’s the difference between two sorts? What will be logged to the console?

The Intl.Collator object allows you to compare strings with regard to locale and internationalization.

Normal sort compares strings character by character using ASCII codes. First, there will always appear strings that start with capital letters, and only then, the ones that stat with small letters.

console.log(['A', 'Z', 'a', 'z'].sort()); // ['A', 'Z', 'a', 'z']

Intl.Collator solves this problem and several others. For example, in German, the letter ä comes after a, and in Swedish, it’s at the very end of the alphabet, after z.

We can select the desired locale and get a sorted array of strings according to all the rules of that locale.

console.log(['b', 'a', 'z', 'ä'].sort(new Intl.Collator('de').compare));
console.log(['b', 'a', 'z', 'ä'].sort(new Intl.Collator('sv').compare));

['a', 'ä', 'b', 'z']
['a', 'b', 'z', 'ä']

ANSWER: Two sorted arrays will appear on the screen. The first will be collated according to the rules of the en locale for Intl.Collator. The second sorting of strings will be case-sensitive. At the beginning, there will be words starting with a capital letter, and words with small letters at the end.

['America', 'apple', 'bloom', 'Boston', 'zebra']
['America', 'Boston', 'apple', 'bloom', 'zebra']

Learn Full-Stack JavaScript

JavaScript Interview Question #49: Add a new array element by index

Coderslang: Become a Software Engineer — Wed, 23 Jun 2021 03:55:04 +0000

Will the length of the JS array change? What’s the output?

All JavaScript arrays have the push function. It’s used to add new elements to the array:

const arr = [ 1, 2 ];

arr.push(3);   // [ 1, 2, 3]
arr.push(500); // [ 1, 2, 3, 500]

You can also use an array index to read a certain element or modify it:

const arr = [ 1, 2 ];

arr[0] = 123;

console.log(arr); // [ 123, 2]

But what if the length of an array equals 4, and we try to "modify" the sixth element?

JavaScript in this case is very liberal and allows us to shoot our own foot. The new element will be added into the array and the length will change.

But there’s a surprise! Take a look:

Same code with additional logging:

const arr = [ 1, 2, 3, 4 ];
arr[5] = 'Hello, world!';

console.log(arr); // [ 1, 2, 3, 4, <1 empty item>, 'Hello, world!' ]
console.log(arr.length); // 6

ANSWER: The length of the array will change, and the number 6 will be displayed on the screen.

Learn Full-Stack JavaScript