DEV Community: Maryam hosseini

Methods and primitive type in JS

Maryam hosseini — Wed, 19 Nov 2025 04:08:06 +0000

JavaScript is designed on an object-based paradigm.
An object is a collection of properties.
Method is a property of an object that contains a function definition.So methods are actions that can be performed on object.
The question that arises here is:

How we use methods on primitives type🤔?
How does JavaScript handle them?

Let's go deep into it.🤗✌️

Primitive values
All types except Object define immutable values represented directly at the lowest level of the language. We refer to values of these types as primitive values.
We have 7 primtives type in JS:

null
undefined
string
number
bigint
boolean
symbol

For example:

let message="hello";
console.log(message.toUpperCase());

We said methods are actions that can be performed on object.

But string is a primitive type so the JS engine highly optimize this process:

JavaScript automatically boxes primitives into relevant objects when it encounters method calls on them.(Boxing)
That method runs and returns a new value.

const message=new String("hello");

The special object is destroyed, leaving the primitive string alone.(UnBoxing)

The "object wrappers" are different for each primitive type and are called: String, Number, Boolean, Symbol and BigInt. Thus they provide different sets of methods.

Null and undefined have no methods
The special primitives null and undefined are exceptions. They have no corresponding “wrapper objects” and provide no methods. In a sense, they are “the most primitive”.

Memory Leaks in JavaScript

Maryam hosseini — Sun, 10 Aug 2025 22:54:12 +0000

JavaScript automatically allocates memory when objects are created and frees it when they aren't used anymore(Garbage Collection).

Memory leak in JavaScript is a part of the memory that no longer, but is still kept by the program and is not released by the Garbage Collector. This makes the program consumption more and more and eventually slows down or even crashing the program.

Allocation in JavaScript

JavaScript will automatically allocate memory when values are initially declared.

Allocates memory for a number

const num=567;

2.Allocates memory for a string

const text="description";

3.Allocates memory for an object and contained values

const person={
name:"maryam",
age:30
}

4.Allocates memory for the array

const colors=["red","green","blue"];

5.Allocates memory for a function

function sum(a,b){
return a+b;
}

6.Allocates memory for an eventListener

divElement.addEventListener("click",()=>{
divElement.style.backgroundColor="blue";
})

7.Allocates memory for a Date object

const dateNow=new Date();

Reason for Memory Leak

In JavaScript, the Garbage Collector only releases an object when there is no refrence.
If you unintentionally hold the refers to an object, that object will never be released.
1.Global variables unwanted

function foo() {
  leakVar = "I am leaked"; // without let/const/var → global
}
foo();

This variable remains in the entire life of the program.

2.References in Closures

function createLeak () {
let Bigdata = New Array (1000000) .fill ("Leak");  
return function () {
console.log (Bigdata [0]);  
}; 
 } 
const leaky = createLeak ();  // Bigdata is still holding

Because Closure still refers to Bigdata, memory is not released.

3.Events uninvited Listener

function Attach () {
   consting instant = document.getElementById ("BTN");
   element.addEventListener ("click", () => console.log ("click!");
   // If the element is deleted but the listener is not erased → leak
 }

Even after eliminating the Element from the DOM, the memory will not be released if the Listener is not erased.

4.Objects stored in data structures (such as Map/Set) that are not deleted

const cache = new map ();  function addCache (Key, Value) {
cache.set (key, value);  // If the Keys are not deleted → leak
}

Ways to prevent Memory Leak

1.Limit the Global variables (always use let, const or var).

2.Wipe the Event Listener after use:

element.removeEventListener("click", handler); //Null or delete in time.

3.In data stations like MAP and SET, delete it if data is no longer necessary.

4.For temporary data, use weakmap and weakset that automatically release memory.

Use & in css

Maryam hosseini — Thu, 03 Apr 2025 11:23:25 +0000

Hey everyone👋
When we want to create our web pages we use HTML.It describes the structure of a web page and consists of a series of elements.
Css is a stylesheet language used to describes how elements should be rendered on screen, on paper etc.
We can use of & nesting selector to set style for our elements.
There are different ways to use of it, such as:

Set style for whole document The & nesting selector set style for all of elements in document.(when we didn't use of class name before or after that). For example:

&{
   font-size:16px;
   color:blue;
}

2.Set style for parent and child elements
When we want to set style for the below example:

<p class="parent">
  This is a 
  <span class="child">
    simple example
  </span>
</p>

Maybe we use this syntax:

.parent{
   color:black;
   font-size:18px;
}
.parent .child{
   color:white;
   font-weight:800;
}

but with uses nested css styling, we write:

.parent{
  color:black;
  font-size:18px;
  & .child{
      color:white;
      font-weight:800;
  }
}

Note:
Whitespace is very important in this syntax.
If we set whitespace between & and .child(& .child)it sets styles for all child elements with child class name but when we remove whitespace(&.child)it means set styles for the element with both class name, parent and child, For example:

<p class="parent child">
    This is a 
    <span>simple example</span>
</p>

In addition to using personal classes we can use & with pseudo-class and compound selectors, like this:

.parent{
  color:black;
  font-size:18px;
  &:hover{
      color:white;
      font-weight:800;
  }
}

Till now we've added & at the begining of the class name, that's while we can add it after the class name, for example:

.parent{
  color:black;
  font-size:18px;
  .child &{
      color:white;
      font-weight:800;
  }
}

It will compiled:

.parent{
  color:black;
  font-size:18px;
}
.child .parent{
   color:white;
   font-weight:800;
}

Note
We can add multi & in this syntax

.parent{
  color:black;
  font-size:18px;
  .child & & &{
      color:white;
      font-weight:800;
  }
}

It will compiled:

.parent{
  color:black;
  font-size:18px;
}
.child .parent .parent .parent{
   color:white;
   font-weight:800;
}

Conclusion
All of the examples produce the same output.Some of them are normal css styles that we usually use in our projects and the other one uses the & nesting selector.