JavaScript/C2/Data-Types-and-Variables-in-JS/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script:Data Types and Variables

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, Data Types,Variables


Visual Cue
Narration
Slide: Title Hello and Welcome to the spoken tutorial on “Data Types and Variables in JS”.
Slide: Learning Objectives In this tutorial, we will learn about:
  • Variables and
  • Data Types in JS
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.51.1 (code editor)
  • Firefox web browser

However you may use any other browser of your choice.

Slide : Pre-requisites To practice this tutorial,
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practicing.
Slide: Data Types Data Types are mainly classified into two types
  • Primitive Data Types
  • Non-Primitive Data Types
Slide: Primitive Data Types Primitive Data Type consists of
  • Number
  • String
  • Boolean and
  • Undefined

Let us take an example of each of these and understand better.

Open Visual Studio Code editor. I will use Visual Studio Code editor for this demonstration.
[Editor]


Welcome Page ->

Open Folder ->

Practice-JS

In the Welcome page, click on the Open folder link at the top left corner.


Browse and locate the folder “Practice-JS ”.


Then click on the OK button at the top right corner.

[Editor] Click on


Explorer panel-> Practice-JS -> index.html

In the Explorer panel on the left, under Practice-JS click on the file named index.html


We had created this file earlier. The same is available in the Code files link for practice.

[Editor]

<!DOCTYPE html>

<html lang="en">

<head>

<title>Data Types & Variables</title>

</head>

<body>

<script src="main.js"></script>

</body>

</html>

In the index.html file, replace the code as shown.


In this code we have written a sample HTML code and linked the JS file.

Press: Ctrl + S Save the file.
Press: Alt + L and Alt + O


Now press the key combinations Alt + L and Alt + O.


The Live server gets started.

Show firefox The default browser will open automatically and a new tab opens.
[Firefox] Press Ctrl + Shift + I


Point to the Browser developer tools

Now press Ctrl + Shift + I keys together.


The Browser developer tools panel opens.

[Firefox] Click on the Console tab Now click on the console tab in the developer tools.
Switch to Editor Switch back to the editor.
[Editor] Click on


Explorer panel-> Practice-JS -> main.js

In the Explorer panel on the left, under Practice-JS click on the file named main.js
[Editor] Type:


var a = 10;

var b = "Spoken Tutorials!";

var c = true;

var d;


console.log(a);

console.log(typeof a);

console.log(b);

console.log(typeof b);

console.log(c);

console.log(typeof c);

console.log(d);

console.log(typeof d);

In the main.js file, replace the code as shown.
Press: Ctrl + S Save the file.


Let me explain the code now.

[Editor] Highlight:

var

var is a keyword which is used to declare variables.


var can hold any type of value.

[Editor] Highlight:


a = 10

a is a name of a variable, which is assigned value number 10.
Slide: Rules for variable name Rules for variable name:
  • Variable name can start with a letter or underscore (_) or dollar ($)
  • Variable name should not start with a period(.) or number
[Editor] Highlight:


var b = "Spoken Tutorials!";


Similarly b, is a variable name which is assigned a string value "Spoken Tutorials!"


Anything written in between single quotes or double quotes is of type strings.


It’s a good practice to use double quotes.

[Editor] Highlight:


var c = true;

c is a variable name which is assigned boolean value true.
[Editor] Highlight:


var d;

And d is a variable name which has no value assigned.
[Editor] Highlight:


console.log(a);

To display the value which the variable holds, just log the variable name.
[Editor] Highlight:


console.log(typeof a);

To display the type of the value that the variable holds, use the typeof keyword.
[Editor] Highlight:


console.log(b);

console.log(typeof b);

console.log(c);

console.log(typeof c);

console.log(d);

console.log(typeof d);

Similarly I have written code to display the other variables too.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


10

number

We can see the output in the console where value of a is 10 and the type of a is number.
[Browser] [Console Tab]:

Highlight:


Spoken Tutorials!

string

Similarly, the value of b is Spoken Tutorials! and the type of b is string.
[Browser] [Console Tab]

Highlight:


true

boolean

The value of c is true, and the type of c is boolean.
[Browser] [Console Tab]

Highlight:


undefined

undefined

For variable d, this is a special case in JS.


This variable is just declared and has no value assigned to it.


So, by default the value would be undefined and the type of d would also be undefined.

Slide: Non Primitive Data Types Next, let’s look at Non-Primitive Data Types.

Non-Primitive Data Type consists of

  • Objects and
  • Arrays

Let us take an example of each of these and understand better.

Switch to Editor Switch back to the editor.
[Editor] Type:


var f = {name: 'JS'}; // var f = new Object();

var g = [1,2, 'spoken', 'tutorials', 'js', true]; // var g = new Array();


console.log(f);

console.log(typeof f);

console.log(g);

console.log(typeof g);

console.log(f.name);

console.log(g[2]);

In the main.js file, replace the code as shown.



Only Narration Let me explain this code.
[Editor] Highlight:


var f = {name: 'JS'};

To create an object in JS, we have to use curly braces.


Object data structure holds property and value.


Here, name is the property and JS is its value.


Likewise, you can have any number of properties separated by commas.

[Editor] Highlight:


// var f = new Object();

The code written after // (double slash) is a comment, which would not be interpreted.


The code written in the comment is used to create an empty object.

[Editor] Highlight:


var g = [1,2, ‘spoken’, ‘tutorials’, ‘js’, true];

To create an array, we use square brackets.


The values in between the square brackets are array values.


In JS, the arrays can have any type of data.


It's not necessary to always contain data of the same data type.

[Editor] Highlight:


// var g = new Array();

The code written in this comment is used to create an empty array.
[Editor] Highlight:


console.log(f);

console.log(typeof f);

console.log(g);

console.log(typeof g);

Log statements are used to see the output.
[Editor] Highlight:


console.log(f.name);

To print the value that the property name holds we need to use a period.
[Editor] Highlight:


f.name

Variable name f.name will display the value which the property holds.
[Editor] Highlight:


console.log(g[2]);

To display the value of the nth index in an array, we need to pass the index.


Please note that the array index starts from 0.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]

Highlight:


Object { name: "JS" }

object

Here, the prototype of f is printed as an object along with the value assigned to it.


And the type of f is also printed as an object.

[Browser] [Console Tab]

Highlight:


Array(6) [ 1, 2, "spoken", "tutorials", "js", true ]

object

Here, the prototype of g is printed as an array along with the value assigned to it.


And the type of g is also an object.


Here, though the prototype is an array, the data structure is an object.

[Browser] [Console Tab]:

Expand the ▶ arrow icon and Highlight:


(6) […]

0: 1

1: 2

2: "spoken"

3: "tutorials"

4: "js"

5: true

length: 6

<prototype>: Array []

If we closely expand this, by clicking on the arrow icon in the console, we can understand the basic data structure.


Here, the array is also structured as property value pairs.


Whereas the property keys to the value are indexes.


We can even see that the array data structure has a property length.


We can access the length of the array using period just like we accessed in objects.

[Browser] [Console Tab]:

Highlight:


JS

Here, the value JS for name is printed using the period.
[Browser] [Console Tab]

Highlight:


spoken

Here, the value of g at index 2 is printed.
Switch to Editor Switch back to the editor.
Only Narration As we understood, the data structure of both array and object is an object.


We can access the property name in a variable f using square brackets.


And can even access the array length using period.

[Editor] Type:


var f = {name: ‘JS’}; // var f = new Object();

… …

……..

console.log(g[2]);

console.log(f["name"]);

console.log(g.length);

In the main.js file, type these two console statements.



[Editor] Highlight:


console.log(f[“name”]);

f within square brackets, within quotes name"


We are passing name property in quotes because the name is a string.

[Editor] Highlight:

console.log(g.length);

variable name g .(period) length will print the number of total values in the array.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:

JS

Here, the same value JS is printed as output.


This is another way of accessing the value of property in an object using an array.

[Browser] [Console Tab]:

Highlight: 6

Here, we see the length printed as 6.


This is because there are 6 values in the array.

Only Narration So, though the data types are different, the data structure is similar for both array and object.


This is the reason why we got the typeof g variable as an object.

Only narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Variables and Declaration
  • Primitive Data Types and
  • Non-Primitive Data Types in JS
Slide: Assignment As an assignment:
  • Open the file assignment.js which you have created earlier
  • Clear the existing code
  • Create an array with the name students
  • Add few student names in the array
  • Log all the values
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser’s console.
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum
Slide: Acknowledgement Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India
Slide: Thanks The script for this tutorial is contributed by Jayesh.

And this is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C2/Data-Types-and-Variables-in-JS/English&oldid=55275"