Creating Array and Fetching Elements in JavaScript

Summary

In this JavaScript tutorial, David Reddy introduces the concept of arrays, explaining their necessity when dealing with multiple values without keys. He demonstrates two methods of creating arrays: using the 'new Array' constructor and direct assignment within square brackets. Reddy then shows how to assign values to an array, check its length, and use the 'push' method to add elements dynamically. Additionally, he clarifies the zero-based indexing system in arrays and the potential issue of accessing an undefined element beyond the array's length, suggesting a precautionary check before fetching values.

Takeaways

• 📚 The video is part of a series on JavaScript, continuing from previous discussions on objects, primitive types, and the concept that non-primitive data types are objects.
• 🗃 Arrays are introduced as a data structure for when you need to store multiple values without assigning keys to each value, unlike objects.
• 🔑 Arrays can be created using the `new Array()` constructor function or by using square brackets `[]` to assign values directly.
• 📦 Two methods for creating an array are shown: one that initializes an empty array and another that pre-populates the array with values.
• 🔍 The `length` property of an array is used to determine the number of elements it contains, which is demonstrated in the script.
• 📈 The `push` method is explained as a way to add elements to an array after its creation, with examples of how it works.
• 🔑 Accessing array elements is done using index numbers, starting with zero as the index for the first element.
• 🚫 Attempting to access an element at an index that does not exist in the array results in `undefined`, which is a potential source of errors.
• 🔄 The script suggests checking the array's `length` before trying to access an element to avoid errors related to out-of-bounds indices.
• 🔍 The video promises to cover how to add elements to an array using index values in a future video.
• 👋 The presenter invites viewers to comment, subscribe, and engage with the content, indicating an interactive and educational approach.

Q & A

What is the main topic of the video?

The main topic of the video is about arrays in JavaScript.

What are the two ways mentioned in the video to create an array in JavaScript?

The two ways to create an array in JavaScript mentioned in the video are using the 'new Array' constructor function and directly assigning values within square brackets.

What is the purpose of arrays in JavaScript when objects can also store collections of data?

Arrays are used for storing collections of values without the need for keys, unlike objects, which require key-value pairs.

How does the video demonstrate creating an empty array in JavaScript?

The video demonstrates creating an empty array by using 'new Array' and by using an empty square bracket notation, both of which result in an empty array.

What is the property used to check the length of an array in JavaScript?

The 'length' property is used to check the number of elements in an array in JavaScript.

How can you add values to an array that was initially empty?

You can add values to an initially empty array using the 'push' method in JavaScript.

What happens if you try to access an index that is beyond the length of the array?

If you try to access an index beyond the length of the array, JavaScript will return 'undefined'.

How does the video explain the concept of array indexing?

The video explains array indexing by stating that it starts with zero, and each subsequent element increases the index by one.

What is the method used in the video to add a single value to an array?

The 'push' method is used in the video to add a single value to an array.

Why does the video suggest checking the length of an array before accessing its elements by index?

The video suggests checking the length of an array before accessing its elements by index to avoid accessing undefined values or going out of bounds.

How does the video address the issue with 'undefined' when accessing an out-of-bounds index in an array?

The video mentions that it's not ideal to get 'undefined' and suggests that it would be better to get an error or a message indicating the index is out of bounds, similar to Java's 'ArrayIndexOutOfBoundsException'.

Outlines

00:00

📚 Introduction to JavaScript Arrays

In this segment, the host, David Reddy, introduces the concept of arrays in JavaScript, building upon the previous discussions about objects and primitive types. He clarifies the need for arrays as a way to handle multiple values without the need for keys, as opposed to objects. The host explains two methods of creating arrays: using the 'new Array' constructor function or by directly assigning values within square brackets. He also demonstrates how to declare an empty array and how to check if it's empty by printing its values. The segment concludes with a practical example of assigning values to an array and printing them to verify their presence.

05:00

🔍 Understanding Array Length and Indexing

This paragraph delves into the mechanics of determining the length of an array and accessing individual elements through indexing. The host explains the use of the 'length' property to find out how many elements an array contains and demonstrates this with a code example. He then discusses the concept of array indexing, highlighting that computer indexing starts at zero, which can lead to confusion when trying to access the 'first' element (which is actually at index 0). The host provides a step-by-step guide on how to correctly access elements by their index numbers and warns about the potential for 'undefined' results when attempting to access an index that exceeds the array's length. The segment ends with an invitation for viewers to share their thoughts in the comments and a reminder to subscribe for more content.

Keywords

💡JavaScript

JavaScript is a high-level, interpreted programming language commonly used for enhancing web pages with interactive elements. In the video, it is the main programming language being discussed, with a focus on arrays, which are a fundamental data structure in JavaScript for storing collections of values.

💡Arrays

An array in JavaScript is an object that can hold multiple values at a time. It is used when you have a collection of values and you do not need to assign a unique key to each value. The script explains how to create and manipulate arrays, emphasizing their use for handling multiple values without keys.

💡Objects

In JavaScript, an object is a collection of properties, where each property is a key-value pair. The video script contrasts arrays with objects, noting that while objects use keys to access values, arrays use numerical indices. The concept of objects is foundational to understanding the need for arrays when keys are not necessary.

💡Primitive Types

Primitive types in JavaScript refer to the basic data types like number, string, boolean, etc. The script mentions that everything that is not a primitive type is considered an object, which includes arrays. Understanding primitive types helps in distinguishing between them and complex data structures like arrays.

💡Constructor Function

A constructor function in JavaScript is a special type of function used with the 'new' keyword to create new objects. The script demonstrates creating an array using the 'new Array()' syntax, illustrating the concept of constructor functions in the context of array creation.

💡Index

Index refers to the position of an element within an array. The script explains that in JavaScript, array indices start at zero, which is a common point of confusion for beginners. The concept of index is crucial for accessing and manipulating elements within an array.

💡Push Method

The push method is an array function in JavaScript that adds one or more elements to the end of an array and returns the new length of the array. The script uses the push method to demonstrate how to add elements to an array after its creation.

💡Length Property

The length property of an array in JavaScript returns the number of elements in the array. The script mentions using the length property to find out how many elements are in an array, which is essential for understanding the array's size and capacity.

💡Undefined

In JavaScript, 'undefined' is a value representing the absence of a value or when a variable has not been initialized. The script discusses what happens when you try to access an array element beyond its length, which results in 'undefined', highlighting a common error when dealing with arrays.

💡Index Out of Bounds

Index out of bounds is a common error that occurs when trying to access an array element with an index that is outside the valid range of the array's indices. The script touches on this concept when explaining that attempting to access an element with an index higher than the length of the array results in 'undefined'.

Highlights

Introduction to JavaScript arrays as a concept distinct from objects, emphasizing their use for collections of values without keys.

Explanation of the difference between objects and arrays, with objects having key-value pairs and arrays containing only values.

Demonstration of two methods to create an array in JavaScript: using the 'new Array' constructor and direct assignment with square brackets.

Illustration of creating an empty array and the difference between using 'new Array' and an empty square bracket notation.

How to assign values to an array, showcasing the flexibility to include numbers, strings, objects, and functions.

Introduction of the 'length' property to determine the number of elements in an array.

Explanation of the 'push' method for adding elements to an array after its creation.

Demonstration of using the 'push' method to add multiple values to an initially empty array.

Clarification on how to access specific elements in an array using index numbers, starting with zero.

Example of accessing the first, second, and third elements of an array using their respective index numbers.

Discussion on the implications of accessing an index out of the array's bounds, resulting in 'undefined'.

Suggestion to check the array's length before attempting to access elements to avoid 'undefined' results.

Teaser for the next video, which will cover adding elements to an array using index values.

Invitation for viewers to share their thoughts in the comment section and a call to action for subscriptions.

The video's conclusion with a reminder of the key concepts covered and an encouragement for viewers to continue learning about JavaScript arrays.

Transcripts

[Music]

welcome back aliens my name is david

reddy and let's continue with this

series on javascript

in this video we'll talk about arrays

see in the earlier video we have talked

about

objects right and then before that we

have also talked about primitive types

and then we have also discussed that

whatever data is not a type of primitive

it will be an object

now this can be the object which we

created then we have functions which are

objects

and then we have areas which are objects

but then when you have an object

why you need another concept like arrays

so if you look at the

object we have a key and a value right

example when you talked about

aliens or laptop it had a key and a

value pair

example for laptop it can be cpu which

is your key and then i9

i7 those are your values maybe you can

go with another property which is let's

say ram

which is your key and then let's say 16

gb is the value but in this case let's

say you want to have multiple values and

you don't need to have a key

so let's say you have a lot of values

and then you don't want to assign a key

to it

maybe you want to work with the index

values can we do it now if you're coming

from other languages like cc plus with

java most of the languages has this

concept but if you're new don't worry

whenever you have a collection of values

which you don't want to assign a key to

it maybe you can

use numbers to represent them we can use

a concept like arrays how do we create

an array here

so let's say i want to create a array of

values so what we can do is to create an

array we can say new

edit this is one of the syntax which we

can follow so we can select

values equal to new array and now you

can guess this is a constructor function

right because we are using a new keyword

so basically we are trying to create an

object okay there is one way of creating

an array the other way is you can

directly assign a value

here itself maybe you can give a square

bracket and you can assign the values

okay so this works in the same way the

other method works so we'll go with that

only

but again you can replace that with the

new array keyboard here so let's use

the empty square package this is another

way of getting an array now this

is your empty array so what we have done

earlier with the help of new array is

same as this one

both will give you an empty array okay

so when you empty it will not have any

values right how do we check that so

it's very simple you can just print the

values to verify right

so we can simply come back here and we

can say values and when you run this

code of course it will not print any

values because it's blank so yes it is

printing it's an array but we don't have

any values now how do we assign a value

of course there are multiple ways of

doing it so what if you know the values

already so in that case let's say the

values are 5 7 and 8 that's how you

assign the values so you can say 5 comma

7 comma 8

and you got an array with these three

values of course there is no compulsion

that they should only have numbers you

can also have string

or you can have other objects you can

have a function your choice

let's print this and you can see we got

an array with three values

that sounds cool right okay can we just

print the length so maybe i want to know

the length of this array so that's

simple you can simply come back here and

say length so values.length and it will

print the length of the array and the

length is three

okay so you have three values in this

array quite simple right so this is how

you create an array the same thing you

can do with new ad

it's just that new array will give you

empty array and you can assign the

values later

but how how do we assign the values

later so let's say i want

empty adder here and i want to assign

values

in that case you can use certain

functions maybe you can use

a function like push or you can say

methods because this thing actually

belongs to an object right

so i can say values dot i can say a

method which is push

now what this push will do is whatever

value you will assign here let's say

5 or this value 5 will be assigned

in this array okay so when you say push

it will add the element

let's see if that works uh let me just

remove this length i want to print the

actual values and let's see what happens

ah so you can see we got only one value

now which is five so initially it was an

empty array

but then you said hey i want to add one

value it's doing that

what if you repeat this what if you just

copy this and

add another value let's say seven and

what will happen now

so it will have five and seven and

likewise if you add some more values it

will

add that as well okay uh so that's how

you can push the values

but again i will see this later let me

just go with the predefined values here

which is five seven and eight okay so

when you print

the values it's quite simple right it

will simply print all the values but

what if

you want to fetch one particular value

let's say i want to

print the first value the second value

third value how do we do that

now we have seen this in objects right

in object what we do is if you want to

fetch a particular value

you ask for the key right so you

mentioned hey we have this value

i want to fetch that with the help of a

key but in this case we don't have a key

right we all have values here but then

as i mentioned before

maybe you can fetch this with the help

of numbers something like index numbers

so this 5 will have a number this 7 will

have some index number

8 will have some index number example

you know when you create a table

you have a column which is the first

column right serial numbers

right uh example the number of the line

number here so these are the index

numbers you can imagine

uh but for this value of phi what should

be the index value so what i will do is

uh first of all how do you measure index

value

uh the same way you whenever you mention

array it always represents with the help

of

a square bracket so you are saying hey i

want to fetch values

and i don't want to fetch all the values

i want to fetch the values

with the index number so i can say hey i

want to fetch the first one

so i will say one and let's see what

happens so when you mention

one and let's run this code oh oh we got

seven we wanted five but we got seven

now what went wrong here is

uh in computers basically whenever you

talk about index values

it always starts with zero so this five

here it

should be zero the index number is zero

here okay so we should start with zero

so when you say five is zero then seven

will be one

and eight as is at location two okay

let's run this and you can see we got

five

okay uh how about if i say one uh it's

quite simple now you know it should be

seven we have done that before and then

when you say two it will print eight

let's try two as well

and let's run this code and you can see

we got eight but what will happen if i

go for three because we have only three

values

and when you say i want to fetch the

element at index number three that means

we are trying to fetch the fourth value

we don't have a fourth value here what

will happen you will get undefined so

luckily you don't get others

in fact i am not a big fan of undefined

i believe we should get either that

there is no element outside three or

maybe you can you should get

something like in java you get other

index sort of bound but here we don't

have that you know

it's printing undefined uh but dad you

have to remember this whenever you have

the add a if you want to fetch a value

maybe you can

first check what's the length of the

array and then you can fetch the value

yeah so that's how you can create an

array and that's how you can fetch a

particular value

how do we add elements with the help of

index value that will say in the

next video so i hope you are enjoying

this video let me in the comment section

and do subscribe for the videos bye