Creating Array and Fetching Elements in JavaScript
Summary
TLDRIn 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
📚 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.
🔍 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.
Mindmap
Keywords
💡JavaScript
💡Arrays
💡Objects
💡Primitive Types
💡Constructor Function
💡Index
💡Push Method
💡Length Property
💡Undefined
💡Index Out of Bounds
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
5.0 / 5 (0 votes)