DEV Community: Banesa Guaderrama

Coding Bootcamp – About to finish… or, about to start!

Banesa Guaderrama — Fri, 04 Jan 2019 06:04:58 +0000

I have had a busy time over the last five month trying to keep motivated not just to complete every single project the best I can, but to really understand what am I doing, time has fly and even though I am in the last weeks and about to complete the program, I am realizing that I am not about to finish but about to start.

About to start

… yes! About to start coding by myself without the support and instruction of my Instructors and TAs … about to start looking for a job position where I can apply what I have supposed to learn over this past months and the remaining of the time I will be in the bootcamp… just one more month that seems long as I feel physically (and mentally) tired … but at the same time it looks that is not enough time to start planning and completing my final project.

About to finish

Wow…

I can not believe how quick the time went and I feel panic of thinking that I need to be ready to start doing things by myself while the end of the bootcamp approaches. I know, that once the bootcamp finishes I will need to pick up my notes, clean up my code, re-read assignments and re-do some others, read topic related books and blogs, and look for additional resources to keep myself learning.

I am happy I decided to start this journey and I am happy I did not give up when I felt overwhelmed because I learned a new set of skills that allows me to create . And, I did it in the best time of my life.

Coding Resolutions 2019

Banesa Guaderrama — Fri, 04 Jan 2019 05:55:24 +0000

Happy New Year!!!

This year my resolutions are different than other years, this year I have coding and programming resolutions. Its is important for me because I feel I have not dedicated the time as I should, so this is a great time for me to reconsider and reorganize my daily activities, specially related to programming.

1.Don’t be lazy

Code more on my free(no-coding) time.

2.Get more familiar with new programs

Keep an eye and some practice in a new programming language, framework, or library – it always helps to get out of comfort zone.

3.Patience…

Be patient with myself when coding is not rendering as expected, look through the different variables, step by step, without hesitation. And, be patient with others that can require from your help since I have been blessed with more than user an additional pair of eyes over my code when it is not working as intended.

4.Be aware of poor code practices and avoid them

This is a resolution and a best practice that will save me from a non-working code.

5.Network, mentor, and assist

Is important to grow your network, you never know when you will need the help of someone in your field, mentor and assist others since it is not just a way to support others, but it will keep your skills refreshed and up-to-date.

That’s my 2019 coding resolutions and since I have a bad history of keeping resolutions, I will start with just five.

I can do this.

What are your resolutions? Happy New Year!

Arrow Functions

Banesa Guaderrama — Sat, 22 Dec 2018 05:50:09 +0000

Arrow Functions

Arrow function was introduced in ES6 using a new syntax for declaring functions called the arrow syntax. This new syntax uses less verbose syntax.

Arrow function can easily identified by the arrow symbol ‘ => ’ from where it gets its name. As part the syntax and rules for writing arrow functions is that the parameters come before the arrow element and the main body of the function comes after.

Arrow functions are always anonymous, and you need to assign them to a variable, so you can refer to them.

Advantage

There are numerous advantages of using arrow functions over other function declaration methods:

-They are much less verbose
-Do not need to use parentheses for single parameters
-The body of the function does not need to be placed inside a block if it is only one line
-If the return statement is the only statement in the body of the function, the return keyword is not required
-They do not bind their own value of this to the function

Example:

const square = x => x*x;

In this example the ‘x’ did not need to be in parentheses because is only one parameter; multiple parameters needs to go inside parentheses.

Example with two parameters:

const add = (x,y) => x = y;

But if the function does not require any parameters you can use empty parameters before the arrow symbol:

const hello = ( ) => alert(‘Hello World!’);

In all these examples the function fits onto one line, so there is no need to put them inside a block. But for longer functions you will require to use curly brackets to define the body of the function and the return keywork at the end.

const tax = (salary) => {
const taxable = salary – 5000;
const lowerRate = 0.25 * taxable;
taxable = taxable -15000;
const higherRate = 0.4 * taxable;
return lowerRate + higherRate;
}

As you can see the benefit of using arrow functions is lost when using it in a longer function. Arrow functions are a better fit for short and anonymous functions.

Defining Functions

Banesa Guaderrama — Sat, 22 Dec 2018 05:04:44 +0000

Defining a function

Function Declarations

There are different ways to define a function in JavaScript, but I will cover three of the most common.

Function Literal

To define a function literal, you can use a function declaration:

function hello( ) {
console.log(‘Hello World!’);
}

The syntax of this function starts by starting with the function keyword and is followed by the name assigned to the function, in this case ‘hello’ followed by parenthesis and finally followed by a block of code for the function.

Function Expressions

Function expressions is another way to define a function, this is done by assigning an anonymous function to a variable:

const bye = function ( ) {
console.log(‘Bye World’);
};

It is called anonymous function because it does not have a name. It is just created and assigned to a variable.

But, you can also create a named function expression:

const bye = function bye( ) {
console.log(‘Bye World’);
};

In this case the name of the function is ‘bye’ and it is assigned to the variable ‘goodbye’.

Function ( ) Constructors

We can also create a function by using the Constructor Function ( ). It’s body is entered as a string:

const hi = new function (‘console.log(“Hi World”);  ) ;

Although this is another way to define a function, it is not recommended because there are some problems associated with placing a string inside the function body, specially because of the different number of quotation marks in the console.log.

ES6 introduced a new way to define functions using arrow notation, named 'Arrow Function, but I will make a new blog about it.

Sorting Arrays of Strings in JavaScript

Banesa Guaderrama — Thu, 13 Dec 2018 18:26:50 +0000

Sorting Arrays of Strings

In JavaScript arrays have a sort( ) method that sorts the array items into an alphabetical order.

The following illustrates the syntax of the sort( )method:



Array.sort([comparer])

The sort( ) method accepts an optional argument which is a function that compares two elements of the array.

If the compare function is omitted, then the sort( ) method will sort the element based on the elements values.

Elements values rules:

1.If compare (a,b) is less than zero, the sort( ) method sorts a to a lower index than b. In other words, a will come first.
2.If compare (a,b) is greater than zero, the sort( ) method sort b to a lower index than a, i.e., b will come first.
3.If compare (a,b) returns zero, the sort ( ) method considers a equals b and leaves their positions unchanged.

Also, note that the sort( ) method accepts two arguments and will return a value that determines the sort order, the following represents the syntax:



function compare (a, b) {
   / …
}

Note: Remember that a function can be named as you want, but try to make the name meaningful to what you are trying to said through that function for an easy reference.

Sorting Arrays of Strings
Let's practice with an array of string named animals, as follows:



var animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];

To sort the elements of the animals array in ascending order alphabetically, we need to use the sort( ) method without passing the compare function as in the example:



animals.sort();
console.log(animals);
// ["ant", "bee", "cat", "dog", "elephant"]

To sort the animals array in descending order, you will need to change the logic of the compare function and pass it to the sort( ) method as the following example.



// descending order
animals.sort(function (a, b) {
    if (a > b) {
        return -1;
    }
    if (b > a) {
        return 1;
    }
    return 0;
});
console.log(animals);
// ["elephant", "dog", "cat", "bee", "ant"]

Of course, this is only a tiny piece of sorting array elements because we can use the sort( ) method also to sort by upper and lower case, numbers, and objects by property.

JavaScript Fatigue

Banesa Guaderrama — Thu, 06 Dec 2018 22:01:20 +0000

What is JavaScript fatigue?

While researching about JavaScript it came to my attention the term JavaScript Fatigue; over the last months I have spend a lot of time researching on the different related JavaScript topics and for sure I am not alone in this task, it looks that every time I need to learn or understand something new about this topic it takes me to different routes (which I have enjoyed).

JavaScript Growth

JavaScript fatigue is the result of the JavaScript ecosystem growth, its extenuating and continually growth popularity and the demand of Full-Stack developers as well as the different coding bootcamps educating and teaching to code has impacted the use, application, and need to learn not just about JavaScript but the tools that can enhance the development of apps and websites.

Too Many Tools and Frameworks

You can virtually build anything using JavaScript, well, yes! But with the help of ES6, jQuery, React, Redux, Webpack, Babel, TDD, JEST, Git, async, OOP, functional-style, npm, Node.js, Yarn, SQL, NoSQL, Graph databases, MongoDB, Angular, etc., etc, etc.

Using the different frameworks and libraries that better fit to the app or development you are working on will enhance your code workflow. Even though you can do a lot with plain vanilla JavaScript, HTML, and CSS; modern JavaScript provides you with a huge choice of tools that will enrich your development.

It can look overwhelmed specially for beginners at first (including me) but understanding the way the different tools and libraries work will set you apart from the crowd during the job hunt and as professional.

Benefit

The benefit of using the different tools and frameworks is that some are boiler-plate libraries that you can use without restrictions or no need to change to much from the original.

Conclusion

JavaScript is the ecosystem of many other tools, frameworks and libraries, so the importance of been up-to-date with these technologies requires you to be attentive to all the different updates and changes around these tools if you want to use the most recent and new additions while developing your apps or when collaborating with other developers.

Git and GitHub

Banesa Guaderrama — Thu, 06 Dec 2018 18:49:50 +0000

Git and GitHub for Beginners

If you are new to coding, you can be overwhelmed with all the new technologies you will start using, not just by its installation but its use itself. One of the most used and commented between programmers is Git and GitHub.

But what is the difference. Git is a free and distributed version control system, it is considered modern and mature; it is and actively maintained open source. It allows tracking changes in computer files and project collaboration with more than one person; one of its main characteristics is its efficiency handling large projects. In other words, is a tool to manage your source code or repositories.
GitHub is a hosting service for the Git repositories, so even when they are not the same, they work together: Git is a tool, and GitHub is the hosting server for projects using Git.

Install Git and create GitHub Account

You can follow the installation link and it will walk you through all the installation steps, there is also the option to install it through the command line, but I will not include it in this post.

For Mac, follow the link:

http://git-scm.com/download/mac

For windows, follow the link:

http://git-scm.com/download/win

Create a GitHub account

Steps:

1.Go to the GitHub sign up page.

2.Enter a username, valid email address, and letter, one numeral, and seven characters.

3.Review carefully the GitHub Terms of Service and Privacy Policy before continuing. Upon clicking the “Create an account” button you will simultaneously be agreeing to these documents.

4.Choose a plan. You have two choices: Free and paid.

5.Tailor your experience.

6.Your GitHub account is created!

Enjoy your coding !!!

Open Source Contributions

Banesa Guaderrama — Tue, 04 Dec 2018 22:30:51 +0000

Benefits of Contributing an Open Source Project

Opensource is a great way not just to contribute to open source projects but to practice what you have learn while contributing through another person or organizations’ code or project. Without a doubt open source brings benefits not just to the organizations through contributors’ innovative contributions, but the contributor also benefits by putting his or her name on a project, specially if you are looking to gain some exposure.

Another benefit you will find while contributing to open source is that you can get experience working virtually since you do not know the people involved in the project and you base your contribution in written instructions, also by using your critical thinking while reviewing an unknown code or project to provide a solution.

Gain Programming Experience

The beauty of an open source is that anyone can contribute, and if you do not have experience it will let you gain programming experience. If you are afraid to damage the code, do not worry, there are controls in place to prevent it, any submission needs to be approved. So, while new programmers gain experience without risking a program (or their jobs), experience programmers work in other relevant activities without debugging distractions.

Finding Open Source Projects

You can find open source projects through GitHub, but you can also join open source communities through twitter or looking in the websites of specific companies you would like to contribute.

Steps

On GitHub, navigate to the repository you want to contribute
Under the repository name, click Clone or download.
In the Clone with HTTPs section, click to copy the clone URL for the repository.
Open Git Bash.
Change directories to the location of the fork you cloned in Step 2: Create a local clone of your fork.

To go to your home directory, type just cd with no other text.
To list the files and folders in your current directory, type ls.
To go into one of your listed directories, type cd your_listed_directory.
To go up one directory, type cd ...
Type git remote -v and press Enter. You'll see the current configured remote repository for your fork.


    git remote -v
    origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git // (fetch)
    origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git // (push)

Type git remote add upstream, and then paste the URL you copied in Step 2 and press Enter. It will look like this:


    git remote add upstream https://github.com/your_repository

To verify the new upstream repository you've specified for your fork, type git remote -vagain. You should see the URL for your fork as origin, and the URL for the original repository as upstream

    git remote -v
    origin    https://github.com/YOUR_USERNAME/YOUR_FORK.git // (fetch)
    origin    https://github.com/YOUR_USERNAME/YOUR_FORK.git // (push)
    upstream  https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git // (fetch)
    upstream  https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git // (push)

JavaScript: Data Structures (Part 3 - Maps)

Banesa Guaderrama — Sat, 01 Dec 2018 06:33:02 +0000

Maps Data Structures

This is the third and last part of my data structures series, this part as the previous, Arrays (Part 1) and Sets (Part 2) cover another method for organizing data, so it can be used efficiently so your coding can flow in its intended way.

Maps data structures provide with a convenient way of keeping a list of key and value pairs. At first, maps data structure looks like JavaScript objects, but you can differentiate them because:

• Objects use strings for key values and maps can use any data type as a key.
• Objects have methods that can be called, and prototypes used as chains; in the other hand maps only focus on storage and retrieval of key values pairs.
• An objects value can accessed directly, but in maps they restrict you to using the get ( ) method so you can be able to retrieve any values.

Creating Maps

You can create an empty map object by using new operator and Map ( ) constructor:

const romanNumbers = new Map( );

Map Literal Notation

There is no literal notation for creating maps, the only thing I found in my research is that there is some proposal syntax in place, but nothing formalized now.

You will need to use constructors and pass an iterable (an array literal):

Example:

const map = new Map([[“foo”, “Foo”], [“bar”, “Bar”, …]);
const set = new Set([“Foo”, “Bar”, …]);

Adding Entries

Using the set ( ) method allows you to add a key and value pair to a map.

Example:

romanNumbers.set(1, ‘l’); // The first value is the key, and second is the value.
<< Map (1 => ‘l’) // The “hash rocket” symbol (=>) represents the map connection between the key and the value.

Multiple Entries

You can add multiple entries by repeatedly calling the set( ) method.

Example:

romanNumbers.set(2, ‘II’) .set(3, ‘III’) .set(4, ‘IV’) .set(5, ‘V’);
<< Map { 1 => ‘I’, 2 => ‘II’, 3 => ‘III’, 4 => ‘IV’, 5 => ‘V’ }

Map Methods

In Maps you can look for a value based on its key by using the get ( ) method.

Example

romanNumbers.get (4);
<< ‘IV’

Using the has ( ) methods allows you to look if a particular key is in a map, and this method will return a Boolean value (true or false).

Example:

romanNumbers.has(5);
<< true

romanNumbers.has(10);
<< false

You can also add multiple values by using nested arrays as parameter.

Example:

const heroes = new Map([ [‘Clark Kent’, ‘Superman’], [‘Bruce Wayne’, ‘Batman’] ]);

You can look for the number of key and value pair in a map by using the size property:

Example:

heroes.size
<< 2

Removing Entries

By using the delete( ) method you can remove a key and its value from a map.

Example:

heroes.delete(‘Clark Kent’); // To delete a value you need to specify it in the parentheses 
<< true // Will return a Boolean of true if the value was return, or false if not

heroes.size;
<< 1

In the other hand if you use the clear ( ) method, it will remove both, the key and its value.

Example:

heroes.clear( );

heroes.size;
<< 0

Converting Maps to Arrays

[ ...romanNumbers]
<< [ [1, 'I'], [2, 'II'], [3, 'III'], [4, 'IV'], [5, 'V'] ]

Array.from(romanNumbers)
<< [ [1, 'I'], [2, 'II'], [3, 'III'], [4, 'IV'], [5, 'V'] ]

Conclusion

Maps data structures are not intended to replace objects, its use depends on what operation you are going to perform or what data you are going to work with. Maps are more useful over objects when you just need a simple look up structure for data storing.

Hope this post is of any help.

Bootcamp: It has been challenging!

Banesa Guaderrama — Thu, 29 Nov 2018 18:58:34 +0000

Learning to code can be challenging, but rewarding!

After some research about the options, I found out a coding Bootcamp at GATech, its curriculum and the school credentials, as well as the length of the program motivated me to get enrolled. I got accepted and even though they were clear that I would need to spend as a minimum of 20 hour outside the classroom to ensure not just the completion of the assignments but my success in the program, I must to admit that it has been not just demanding but challenging in different ways since the beginning and that I have been spending more than the 20 hours per week to keep up the workload and learning.

It is not enough to be willing to succeed and complete the program but been able to understand every topic and new concepts in a short time, and then complete the required projects. Coding is not about memorizing or just double read the concepts, it is actually about CODING! (yes! I know it is obvious).

But, the fact that sometimes I felt behind the class and stressed with the feeling that I would not be able to complete the assignments kept me in a state of anxiety and alert, too!!! Lucky for me, I have great instructors and TA’s available for help or explain anything, but because of the program nature the classes move so quick, so you need to be prepared to move from topics and go back by yourself to re-learn the topics and keep fresh what at some point you are not looking in a daily basis during class, but eventually you will need to apply in further projects.

If you are planning to enroll into a coding bootcamp just be aware that you will need to put more than the time you are expecting, and that is not a regular class but that you will need to actually commit because you will be challenged in different ways, including family/friends time.

Keep Motivated

Don’t feel bad if you are not the star of the class but be sure you are trying your best every time and with every topic. Over the weeks or months, you will start realizing things you were unable to understand during class or at beginning of the bootcamp.

Look for Resources

Every bootcamp and every instructor will provide you with some additional resources that work for them or they have found helpful for other students but look also for additional resources that you know will work for you, like traditional or old fashion methods, maybe a couple of books or join a study group. Also, there are a ton of resources online if you feel more comfortable.

Write notes

Keep yourself a log of things you are learning at class, concepts, ideas, examples or anything that you can revisit on a notebook (yes, I now you are hitting technology and making notes on your laptop, but don’t underestimate the old fashion methods).

Network

Make connections, I know for some it sounds obvious and for others it sounds crazy when you are new at the field, but start making connections with your classmates, believe me most of my classmates have been of help when I need to ask something, there are some experienced coders in my class (in other programming languages) and some others that learn really quick and willing to share knowledge.

And,

Practice, Practice, Practice…

By the way, the feeling of completing successfully a program, even a small one is what it makes this journey so rewarding.

Share how it has been you coding journey and how you have overcome challenges even as an experienced programmer learning new languages!

JavaScript: Data Structures (Part 2 - Sets)

Banesa Guaderrama — Tue, 27 Nov 2018 17:53:16 +0000

Data Structures: Arrays, Sets, and Maps.

Data structure was defined in the part 1 of a series of 3 blogs that includes Arrays (Part 1), Sets (Part 2), and Maps (Part 3). But, revisiting the concept; data structure refers to how the data is organized, so it can be used efficiently, including the logical statements that allows to control the flow of a program.

The Sets Data Structure

A set data structure is represented by a collection of unique values without duplicating them. Sets offer a useful way to keep track of data by grouping and organizing its data in a set structure by using curly brackets {}.

Creating Sets

An empty set is created by using the operator new and Set( ) constructor:

Example:

const list = new Set ( );

Adding values

Using the add method will allow to add values to a set.

Example:

list.add ( );
<< Set { 1 }

Adding more values

list.add (2 ) .add (3) .add (4) ; // adding multiple values is possible by repeating just the add ( ) method
<< Set { 1 , 2, 3, 4}

Note: If you try to add an existing value to the set, it will ignore since the nature of the set data structure does not allow duplicated values

Adding multiple values using an array

We can also add multiple values to a set as an argument inside an array.

Example:

const numbers = new Set ([ 1, 2, 3 ]);

Using Strings as arguments

Using strings is not different than using numbers, if an element is duplicated then it only will show one element.

const letters = new Set (‘hello’ );
letters
<< Set { ‘h’, ‘e’, ‘l’, ‘o’ } // it eliminates one ‘l’ since in sets values cannot been duplicated

const letters = new Set ( ) .add ( ‘the’)  .add (‘quick’) .add (‘brown’) .add (‘fox’)
words
<< {‘the’, ‘quick’, ‘brown’, ‘fox’}

Non-primitive values (arrays and objects) are considered unique values, even containing the same value allowing to duplicate values that appearing in a set.

const arrays = new Set ( ) .add ([1]) .add ([1]);
arrays
<< Set { [ 1 ], [ 1 ] } // these arrays look the same but are different objects

You can test its strict equality

[ 1 ]  === [ 1 ];
<< false

Set Methods

You can find the number of values in a set by using the size () method:

const jla = new Set ( ) . add(‘Superman’) .add (‘Batman’) .add (‘Wonder Woman’);
<< Set { ‘Superman’,  ‘Batman’, ‘Wonder Woman’ }

jla.size ( );
<< 3

Now, checking a value in a set

jla.has (‘Superman’);
<< true

jla.has (‘Green Lantern’);
<< false

Note: The has ( ) method is more efficient and faster than the includes ( ) or indexOf ( ) methods

Removing Values

You can remove a value by using the delete ( ) method, it will return a Boolean value of true if the value was successfully deleted, or false if it was not.

jla.delete ( ‘Superman’ );
<< true

jla.delete ( ‘Flash’ );
<< false

The clear ( ) method will clear all the values from your set, so be careful if you are using it.

jla.clear ( );
jla
<< Set { }

jla.size 
<< 0

Converting Sets

By using the spread operator, you can convert a set into an array directly inside an array.

Example:

const shoppingSet = new Set ( ) .add (‘Apples’) .add (‘Bananas’) .add (‘Beans’);

shoppingSet
<< Set { ‘Apples’, ‘Bananas’, ‘Beans’}

Now converting it into an array:

const shoppingArray = […shoppingSet]

shoppingSrray
<< [ ‘Apples’, ‘Bananas’, ‘Beans’ ]

Another method to conver it can be Array.from ( )

const shoppingSet = new Set ( ) .add (‘Apples’) .add (‘Bananas’) .add (‘Beans’);
const shoppingArray = Array.from(shoppingSet);

By combining the use of the spread operator and the ability to pass an array to new Set ( ) constructor you are creating a copy of the array with any duplicates removed:

const duplicate = [ 3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9];
<< [ 3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9]

Const nonduplicate = […new Set ( repeatedArray)];
<< [ 3, 1, 4, 5, 9, 2, 6 ]

Conclusion

Just think that data structures store data, and the best stored and organized it is, the more efficient it will be for its intended use; just as words are stored in a dictionary, data is stored in a data structure, and in the same way if words were randomly stored in a dictionary without structure we would struggle to use it, the same would happen with the data.

JavaScript: Data Structures (Part 1 - Arrays)

Banesa Guaderrama — Mon, 26 Nov 2018 21:57:42 +0000

Data Structures: Arrays, Sets, and Maps.

Data structures are used to store lists of values, these data structures are called arrays, sets, and maps. But what is data structure? According Wikipedia, “In computer science, a data structure is a particular way of organizing data in a computer, so it can be used efficiently”, to which I would add that using logical statements allows you to control the flow of a program, as well as loops that would allow us to repeat blocks of code over and over again as needed in our code.

The Array Data Structure

An array data structure or an array is an ordered list of values, or a collection of elements (values or variables) identified by an index or key. The most simple type of array data structure is a linear array.

Creating an array literal will require you to write a pair of square brackets.

Example:

const myArray = [ ];
<< [ ]

We can add a constructor function

Example:

const myArray = new Array( );
<< [ ]

Arrays are not primitive values but a special built-in object, like when using the “typeof” operator:

typeof [ ];
<< ‘object’

Initializing an array

But, How do we initialize an array? Well, we can create an empty array literal.

Example:

const heroes = [ ];

Now, we can find the value of element 0 (zero) in our heroes array

heroes [0];  // to access a specific value in an array, we write its index inside the square brackets
<< undefined

Adding values to an array

Place a new string by assigning the element 0 (zero).

Example:

heroes[0] = ‘Superman’;

We can treat items in the array as a variable and changing its value by using the assignment operator =

Example:

heroes[0] = ‘Batman’;

We can add more values using different indices:

heroes[1] = ‘Wonder Woman’;
heroes[2] = ‘Flash’;
heroes[5] = ‘Aquaman’;

You can repeat the operation until you add all the elements you want or need in your array.

Then, you can review your array by typing your array name (heroes) on your console and look at it.

heroes;
<< [‘Batman’, ‘Wonder Woman’, ‘Flash’, undefined, undefined, ‘Aquaman’]

You can see that those elements assigned with an index appear in the list by its name, but any other unused slots appear as undefined.

Creating array literals

We can create array literals to avoid adding values one by one.

Example:

const avengers = [‘Captain America’, ‘Iron Man’, ‘Thor’, ‘Hulk’];
<< [‘Captain America’, ‘Iron Man’, ‘Thor’, ‘Hulk’]

Removing values from arrays

Using the ‘delete’ operator allows us to delete an item from an array.

Example:

delete avengers[3];
<< true

The action will delete the value store in the index 3 (‘Hulk’), but it also leaves the index as undefined because even when deleting a value the space is still there, meaning that the array still has the same number of elements but the one we deleted will be undefined.

avengers;
<< [‘Captain America’, ‘Iron Man’, ‘Thor’,  ‘undefined’]

Destructuring arrays

Destructuring refers to take values out of the arrays and presenting as individual values, this allows us to assign multiple values at the same time.

const [x, y] = [1, 2];

It means that each variable exists outside the array and you can check its value individually.

Example:

x
<< 1

y
<< 2

Or,

[x, y] = [y, x];
x
<< 2

y
<< 1

This is Arrays (Part 1) of a series of 3 posts about data structures, Sets (Part 2) and Maps (Part 3) will complete the series.