DEV Community

John Au-Yeung
John Au-Yeung

Posted on • Originally published at thewebdev.info

Object-Oriented JavaScript — Arrays and Conditionals

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at arrays and conditionals.

Arrays

An array is a sequence of values.

It’s an object type.

It can have anything in them, including primitive values and objects.

We can define an empty array with:

let a = [];
Enter fullscreen mode Exit fullscreen mode

And we can put values in them by writing:

let a = [1, 2, 3];
Enter fullscreen mode Exit fullscreen mode

Array index is the position of the item. Arrays start with 0 as its index.

So the first item has index 0.

We can access any element using square brackets:

a[0];
Enter fullscreen mode Exit fullscreen mode

then we get 1.

Adding/Updating Array Elements

We can add a value to an array by assigning a value to it.

For instance, we can write:

a[2] = 'foo';
Enter fullscreen mode Exit fullscreen mode

Then we get:

[1, 2, 'foo'];
Enter fullscreen mode Exit fullscreen mode

We can write:

a[3] = 'bar';
Enter fullscreen mode Exit fullscreen mode

Then we get:

[1, 2, 'foo', 'bar'];
Enter fullscreen mode Exit fullscreen mode

We can have gaps in an array.

Gaps are filled with undefined .

Assignment can also be used to update an element.

Arrays of Arrays

We can have an array of arrays.

For instance, we can write:

let a = [[1, 2, 3], [4, 5, 6]];
Enter fullscreen mode Exit fullscreen mode

Then we can access entry by writing:

a[0][0];
Enter fullscreen mode Exit fullscreen mode

We return the first entry of th first array in a ,. so we get 1.

We can also use the square brackets to get a character from a string, so we can write:

let s = 'foo';
Enter fullscreen mode Exit fullscreen mode

And we get:

s[0];
Enter fullscreen mode Exit fullscreen mode

which is 'f' .

Conditions and Loops

Conditional statements include the if and switch statements.

They let us run code depending on the condition given.

Loops include the while , do...while , for , for...in , and for...of loops.

Code Blocks

A code block is a part of a piece of code that’s separated from the outside.

For instance, we can write:

{
  let a = 1;
  let b = 3;
}
Enter fullscreen mode Exit fullscreen mode

to create a block.

let lets us create variables that are only available within the block.

Blocks can be nested, so we can write:

{
  let a = 1;
  let b = 3; {
    let c = a + b; {
      let d = a - b;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

We have blocks that are nested in other blocks.

if condition

We can use the if block to run something given a condition.

To do that, we can write:

if (a > 3) {
  result = 'a is greater than 3';
}
Enter fullscreen mode Exit fullscreen mode

then the body is only run when a is bigger than 3.

We can have any logical expression between the parentheses.

else Clause

The else clause can be added to an if condition if we need to run something if the if condition is false .

For example, we can write:

if (a > 3) {
  result = 'a is greater than 3';
} else {
  result = 'a is not greater than 3';
}
Enter fullscreen mode Exit fullscreen mode

They can be nested like any other blocks.

The if condition is handy for checking if a variable exists.

For instance, we can write:

if (typeof foo !== "undefined") {
  result = "yes";
}
Enter fullscreen mode Exit fullscreen mode

Then we check if foo is initialized by checking if it’s undefined .

Conclusion

Arrays are a sequence of values.

The if statement lets us run code conditionally.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay