DEV Community: vineethsagar

Introduction to reference types in JavaScript with examples

vineethsagar — Wed, 18 Nov 2020 15:35:32 +0000

In this article, we try to understand the reference types in JavaScript. This article is for beginners only.

In the previous article, we looked into primitive types I would recommend you to read it here before going through this article.

The basic difference between primitive and reference types is that in primitive types the values are stored in the variable whereas in reference types the reference/address to that variable is stored in the variable. Let us understand the difference between both using an example.

Example:


//  primitive

let x = "JS";
let y = x;

console.log(y);  // "JS"

x = "Java";

console.log(x);  // "Java"
console.log(y);  // "JS"


//  reference

let a = {language:"JavaScript"};
let b = a;

console.log(b);  // {language:"JavaScript"}

a.language = "Java";

console.log(a);  // {name:"Java"}
console.log(b);  // {name:"Java"}

primitive

reference

Another difference between primitive and reference types is that primitive types are stored in the stack whereas reference types are stored in a heap as their size varies dynamically.

In primitive types we use typeof operator to find whether a given datatype is primitive or not, whereas in reference types we use instanceof operator to find whether the given type is a reference type or not.

JavaScript has 3 reference data types, we will understand each one with an example.

1. Arrays
2. Functions
3. Objects

Arrays

In JavaScript, if you assign an array to a variable it is the reference to the array that the variable holds not the value so any changes to the array will reflect on the original array lets us look at an example to understand better

Example


let languages = ["c","c++","java"];
let lang = languages;

languages[2] = "javascript";


console.log(lang);  // ["c","c++","javascript"]

Functions

In functions when you pass primitive type data, any changes only happen to formal arguments but doesn't reflect on actual arguments. Let us look at an example.


function foo(val){
  val+="script";
}

let lang = "java";
let result = foo(lang);

console.log(lang);  // java
console.log(result); // javascript

In the above example, you can see that changes in the formal arguments are not reflected in actual arguments.

However, in reference types when you can pass an object to a function you can modify its properties but not the object. Look at the example below to understand better

// Example 1
function modifyProperty(obj){
   obj.value = 10;
}


let x = {
   value : 1;
  }

modifyProperty(x);
console.log(x); // { value : 10}


// Example 2
function modifyObject(obj){
   obj = {
      value = 20;
    }
}

ley y = { value: 2 };
modifyObject(y);


console.log(y);  // {value:2}

Objects

In JavaScript, a variable that stores an object is accessed by its reference instead of value.

Refer to the first example to get a better understanding.

Thank you for reading the article please give your feedback and suggestions below in the comments.

Introduction to Primitive types in JavaScript with examples

vineethsagar — Tue, 17 Nov 2020 07:43:14 +0000

In this article, we will try to understand the primitive types in javascript.
This article is for beginners only.

A primitive value or data type is something that is not an object and has no methods associated with it. In other words, primitive data is simple data with no additional methods and properties.

There are 7 primitive data types in JavaScript.

1. boolean
2. null
3. undefined
4. number
5. string
6. symbol
7. bigint

We can use typeof (value) operator to know the data type of any given value.

Example


typeof 1;         // number
typeof "dev.to;"  // string
typeof null;      // object
typeof undefined; // undefined
typeof true;      // boolean
typeof 1n;        // bigint

let sym = Symbol("key");
typeof key;       // symbol

1.boolean

A boolean is a data type that can only take two values, which are, true and false.

A boolean value is commonly used in comparison and conditional operations.

We can use Boolean() constructor to create a boolean object. However, this is generally considered a bad practice and should be avoided.


let x = new Boolean(true);

typeof  x;  // boolean

Don't confuse a boolean primitive type with a Boolean object.

2.null

The value null represents the absence of the object.

Example


let boo = null;
typeof boo; //null

In the above example, the variable boo exists but it doesn't have any value associated with it.

3. undefined

undefined is a value that is automatically assigned to variables that have been declared

Example

var x;
typeof x;  // undefined

4. number

A number data type contains numerical values. You can define positive, decimal (floating point), and negative values. It also has a positive and negative Infinite value.

We can use Number() constructor to initialize an object of number datatype.

Example

var num = 123;
typeof num;   // number

// using constructor

var boo = new Number(123)
typeof boo;   // object
typeof boo.valueOf();  // number

5. string

A string is a data type that consists of a character or sequence of characters in single quotes('example') or double quotes("example") or in back-tick quotes.

We can use the String() constructor function to build an object of type string.

Example

let string1 = "Double quotes";
let string2 = 'Single quotes';


typeof string1;  // string 

let string4 = new String("string constuctor");
typeof string4;  // object
typeof string4.valueOf();  // stirng

6. symbol

A symbol is a datatype that provides an anonymous, unique value that can be used as an object property.

Symbols are introduced in ES6.

A symbol doesn't have a constructor so we cannot create a symbol object using the new keyword.

Example


let sym1  = new Symbol('a'); // TypeError

let sym2 = Symbol('a');  // symbol is created
let sym3 = Symbol('a');  // symbol is created

sym2  === sym3;  // false

The last sentence is false because both sym2 and sym3 are unique keys.

refer this page for more details about symbols.

7. bigint

bigint primitive datatype is introduced in ES10.

Before ES10, the maximum value of a number in JavaScript is 9007199254740991 or Number.MAX_SAFE_INTEGER. In order to overcome this limitation bigint were introduced.

The maximum value of bigint is 2^51 -1.

A bigint contains n as a suffix to a number.

Example

let x = 1;
let y = 1n;

typeof x;  // number
typeof y;  // bigint

Thankyou for reading the article please provide your valuable feedback in the comments.

JS events explained with examples

vineethsagar — Tue, 27 Oct 2020 10:16:28 +0000

This article is a summary(with examples) of the events page on MDN web docs if you want to study in-depth you can refer here

1.What is an Event?
2.Add and remove an eventlistener
3.Types of events

What is an Event?

Events are actions that happen in a system. The system fires a signal when an event occurs and provides a mechanism to perform a task or activity automatically.

Example of event

hovering over an element, clicking, scrolling, etc.

Each event has an event handler that executes a block of code when an event is fired.

There are two types of events, Browser events, and Synthetic events.

Browser events are built-in, predetermined, and are executed by the browser when an action occurs

Examples of browser events are

resize - When a browser window has resized this event it is triggered and the layout is adjusted.

onmousemove - This event is fired when the mouse pointer is moved to calculate the new coordinate values of the mouse pointer.

Synthetic events - Events created and dispatched by the programmer are called synthetic events. These are custom events.

Synthetic events are created using the Event
constructor. The syntax for synthetic events is as follows

Code - custom event

Output - custom event

Add and remove an event listener

For an element in order to respond to various action you need to add an event listener to that element.

addEventListener() method is used to add an event listener

Code - add event listener

Output - add event listener

removeEventListener() method is used to remove an event listener

Both the above methods have the same syntax. It takes two parameters first is the event name and the second parameter is the callback function that needs to be executed.

Types of events.

There are many types of DOM events, some of them are network events, form events, storage events, etc. The most important of them are keyboard events and mouse events. We will look into these both using some examples.

Keyboard events :

There are three events in this category

keydown - when the key is pressed.
keypress- when the key is pressed continuously (except shift, fn, and capslock)
Keyup - When the key is released.

Code - keyboard events

Output - keyboard events

In the example, you can notice that when I hold
ctrl-left the keydown event is triggered when I release the ctrl-left keyup is triggered. The keypress is not triggered because it's not a continuous action, however, when I press A all the events are triggered.

You can refer to all other events here

I would recommend checking Event bubbling and capture
on the MDN web docs it is very well explained.

Thank You for reading this article. Please give your feedback in the comments.

JavaScript DOM explained with examples

vineethsagar — Sun, 25 Oct 2020 12:01:51 +0000

What is DOM?
Why is DOM important?
DOM nodeTypes
Properties of DOM
Accessing/Modifying Elements

What is DOM?

When you open a website in your browser, the browser builds something call Document Object Module (referred to as DOM ).

DOM is a tree-like structure of an HTML page. All the tags in an HTML page are represented as nodes in the DOM tree. The browser uses this DOM to draw a page on the screen.

Definition: DOM is an object-oriented representation of a webpage, which can be modified with a scripting language such as JavaScript.

HTML Code

Output

DOM Tree Structure

Why is DOM important?

JavaScript and other scripting languages use this DOM to read and modify pages. Whenever there is a change on DOM it is immediately reflected on the page.DOM is very important for building interactive and dynamic webpages.

DOM nodeTypes

Nodes in the document are referred to as elements although not all nodes are elements. Each DOM node has a nodeType which contains a code that identifies the type of the node.

For example :
if you run document.nodeType in your browser console (ctrl+shift+j in chrome) on HTML page you get 9 as output. Which is the nodeType value of document.

more node type values can be found here

Properties of DOM

JavaScript provides you with links using which you can traverse through the tree. JS provides many properties to traverse the DOM. Some of them are explained with examples below.

Siblings: Using nextElementSibiling and previousElementSibiling we can access the previous and next siblings of the node respectively.

Code - siblings

Output

Children: Using properties lastElementChild, firstElementChild and children we can get the required child of the current node

Code - children

Output

There are many other properties such as nodeValue, baseURI, etc which you can refer to here

(Note: Using nextSibling or lastChild will give text output because the whitespace between the lines of code is treated as a text element. So it's better to use nextElementSibiling or lastElementChild )

Accessing/Modifying Elements

Using JavaScript we can add, modify, or delete elements of the HTML and its attributes.

Accessing Elements: The element in the DOM can be accessed using the following methods

getElementById(): returns an element with the given Id. Each element has a unique id so it only returns one element always.
getElementsByTagName(): returns the total number of elements present with the given tag.

3.getElementsByClassName(): returns the total number of elements present with the given class name.

4.querySelector(): returns only the first element present with the given query name.

5.querySelectorAll(): returns the total number of elements present with the given query name.

In querySelector parameters should be passed as follows

tag - 'tag'
class - '.name'
id - '#id"

Code - elements

Output

Adding Elements:
In order to add elements to the DOM you first need to create an element using createElement() method.
After creating an element we append using the appendChild() to the parent element to which we want to add the created element.

Code

Output

(PS: This is my first article any feedback is very helpful to me, so please take a few seconds to give feedback. If there are any mistakes please post in the comments. Thank You.)

DEV Community: vineethsagar

Introduction to reference types in JavaScript with examples

primitive

reference

Arrays

Example

Functions

Objects

Introduction to Primitive types in JavaScript with examples

Example

1.boolean

2.null

Example

3. undefined

Example

4. number

Example

5. string

Example

6. symbol

Example

7. bigint

Example

JS events explained with examples

Table of Contents

What is an Event?

Example of event

Code - custom event

Output - custom event

Add and remove an event listener

Code - add event listener

Output - add event listener

Types of events.

Keyboard events :

Code - keyboard events

Output - keyboard events

JavaScript DOM explained with examples

Table of Contents

What is DOM?

HTML Code

Output

DOM Tree Structure

Why is DOM important?

DOM nodeTypes

Properties of DOM

Code - siblings

Output

Code - children

Output

Accessing/Modifying Elements

Code - elements

Output

Code

Output