DEV Community: karthika jasinska

Javascript Array sort method challenges

karthika jasinska — Sun, 05 Jul 2026 10:36:08 +0000

Numeric Sort
By default, the sort() function sorts values as strings.

This works well for strings ("Apple" comes before "Banana").

If numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1".

Because of this, the sort() method will produce incorrect result when sorting numbers.

You can fix this by providing a compare function:

const points = [40, 100, 1, 5, 25, 10];
let res=points.sort((a, b)=>{return a - b});
console.log(res);//ascending order
let res1=points.sort((a, b)=>{return b - a});
console.log(res1);//descending order

//output:
//[1,5,10,25,40,100]
//[100,40,25,10,5,1]

The Compare Function
The purpose of the compare function is to define an alternative sort order.

The compare function should return a negative, zero, or positive value, depending on the arguments:

function(a, b){return a - b}

The sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.
If the result is negative, a is sorted before b.
If the result is positive, b is sorted before a.
If the result is 0, no changes are done with the sort order of the two values.

JavaScript Array Methods

karthika jasinska — Sun, 05 Jul 2026 10:00:31 +0000

An Array is an object type designed for storing data collections.
Key characteristics of JavaScript arrays are:
Elements: An array is a list of values, known as elements.
Ordered: Array elements are ordered based on their index.
Zero indexed: The first element is at index 0, the second at index 1, and so on.
Dynamic size: Arrays can grow or shrink as elements are added or removed. Why Use Arrays? If you have a list of items (a list of car names, for example), storing the names in single variables could look like this:

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
//instead of this we can use array
const cars = [ "Saab","Volvo","BMW"];

You can also create an empty array, and provide elements later:

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

Converting an Array to a String
The JavaScript method toString() converts an array to a string of (comma separated) array values.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
//output:Banana,Orange,Apple,Mango

JavaScript Array length:
The length property of an array returns the number of elements in the array. It automatically updates as elements are added or removed.

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.length);//output:4

JavaScript Array join() Method:
This join() method creates and returns a new string by concatenating all elements of an array. It uses a specified separator between each element in the resulting string.

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.join('|'));
//output:HTML|CSS|JS|React

JavaScript Array delete Operator:
The delete operator is used to delete the given value which can be an object, array, or anything.

let emp = { 
    firstName: "Riya", 
    lastName: "Kaur", 
    salary: 40000
} 

console.log(delete emp.salary); 
console.log(emp);
//output:
//true 
//{"firstName":"Riya","lastName":"Kaur"}

JavaScript Array concat() Method:
The concat() method is used to concatenate two or more arrays and it gives the merged array.

let a1 = [11, 12, 13];
let a2 = [14, 15, 16];
let a3 = [17, 18, 19];

let newArr = a1.concat(a2, a3);
console.log(newArr);
//output:[11,12,13,14,15,16,17,18,19]

JavaScript Array flat() Method:
The flat() method is used to flatten the array i.e. it merges all the given array and reduces all the nesting present in it.

const a1 = [['1', '2'], ['3', '4', '5',['6'], '7']];
const a2 = a1.flat(Infinity);
console.log(a2);
//output:["1","2","3","4","5","6","7"]

Explanantion:The code defines a multilevel (nested) array 'a1' and uses the flat(Infinity) method to flatten it completely into a single-level array.
JavaScript Array.push() Method:
The push() method is used to add an element at the end of an Array. As arrays in JavaScript are mutable objects, we can easily add or remove elements from the Array.

let a = [10, 20, 30, 40, 50];
a.push(60);
a.push(70, 80, 90);
console.log(a);
//output:[10,20,30,40,50,60,70,80,90]

JavaScript Array.unshift() Method:
The unshift() method is used to add elements to the front of an Array.

let a = [20, 30, 40];
a.unshift(10, 20);
console.log(a);
//output:[10,20,20,30,40]

JavaScript Array.pop() Method:
The pop() method is used to remove elements from the end of an array.

let a = [20, 30, 40, 50];
a.pop();
console.log(a);
//output:[20,30,40]

JavaScript Array.shift() Method:
The shift() method is used to remove elements from the beginning of an array

let a = [20, 30, 40, 50];
a.shift();
console.log(a);
//output:[30,40,50]

JavaScript Array.splice() Method:
The splice() method is used to Insert and Remove elements in between the Array.

let a = [20, 30, 40, 50];
a.splice(1, 3);
a.splice(1, 0, 3, 4, 5);
console.log(a);
//output:[20,3,4,5]

Explanation:
The first a.splice(1, 3) removes 3 elements (30, 40, 50) starting at index 1. The array becomes [20].
The second a.splice(1, 0, 3, 4, 5) inserts 3, 4, and 5 at index 1 without removing anything. The array becomes [20, 3, 4, 5].

JavaScript Array.slice() Method:
The slice() method returns a new array containing a portion of the original array, based on the start and end index provided as arguments.

const a = [1, 2, 3, 4, 5];
const res = a.slice(1, 4);
console.log(res); 
console.log(a)
//output:
//[2,3,4] 
//[1,2,3,4,5]

Explanation:
The slice() method creates a new array by extracting elements from index 1 to 3 (exclusive of 4) from the original array.
The original array remains unchanged, and the result is [2, 3, 4].

JavaScript Array some() Method:
The some() method checks whether at least one of the elements of the array satisfies the condition checked by the argument function.

const a = [1, 2, 3, 4, 5];
let res = a.some((val) => val > 4);
console.log(res);
//output:true

JavaScript Array every() Method:
The every() method checks every elements of the array satisfies the condition checked by the argument function.

const a = [1, 2, 3, 4, 5];
let res = a.every((val) => val > 4);
console.log(res);
//output:false

JavaScript Array map() Method:
The map() method creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method.

let a = [4, 9, 16, 25];
let mul = a.map((x)=>x*2);
console.log(mul);
//output:[8,18,32,50]

** JavaScript Array filter() method:**
The filter() method in JavaScript creates a new array with all elements that pass the test implemented by the provided function. It does not modify the original array.

let a1 = [1, 2, 3, 4, 5]
let a2 = a1.filter((num) => num > 1)
console.log(a2);
console.log(a1);
//output:[2,3,4,5]
    //[1, 2, 3, 4, 5]

JavaScript Array reduce() Method:
The reduce() method is used to reduce the array to a single value and executes a provided function for each value of the array (from left to right) and the return value of the function is stored in an accumulator.

let a = [88, 50, 25, 10];
let sub = a.reduce(geeks);

function geeks(total, num) {
    return tot - num;
}
console.log(sub);
//output:3

Explanation:which subtracts each element (num) from the running total (total)-is consider the first element.
In real time using for calculate
*Student marks total
*employee salary total

JavaScript Array reverse() method:
The reverse() method is used to reverse the order of elements in an array. It modifies the array in place and returns a reference to the same array with the reversed order.

let a = [1, 2, 3, 4, 5];
a.reverse();
console.log(a);
//output:[5,4,3,2,1]

JavaScript Array values() method
The values() method returns a new Array Iterator object that contains the values for each index in the array.

const a = ["Apple", "Banana", "Cherry"];
const res = a.values();

for (const value of res) {
    console.log(value);
}
//output:Apple 
//Banana 
//Cherry

The values() method returns an iterator object that allows iterating over the values of the 'a' array.
The for...of loop is used to iterate over the iterator and log each fruit ("Apple", "Banana", "Cherry") to the console.

JavaScript Object Constructor

karthika jasinska — Sat, 04 Jul 2026 22:14:26 +0000

Object Constructor Functions
Sometimes we need to create many objects of the same type.

To create an object type we use an object constructor function.

It is considered good practice to name constructor functions with an upper-case first letter.

Example:

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");
console.log(myFather);
Output:
Person {firstName: 'John', lastName: 'Doe', age: 50, eyeColor: 'blue'}

Adding a Property to a Constructor:
To add a new property, you must add it to the constructor function prototype:

Person.prototype.nationality = "Tamil";
console.log(myFather.nationality);
output:
Tamil

Adding a Method to an Object
Adding a method to a created object is easy,The new method will be added to myMother. Not to any other Person Objects

// Constructor function for Person Objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add a Name Method
myMother.changeName = function (name) {
  this.lastName = name;
}

// Change Name
myMother.changeName("Deo");
console.log(myMother.lastName)

Output:
Deo

JavaScript Object Methods

karthika jasinska — Sat, 04 Jul 2026 22:01:51 +0000

What are Object Methods?
Methods are actions that can be performed on objects.
Methods are functions stored as property values.
In a method, 'this' refers to the owner object.

Syntax:
objectName.methodName()
// Object creation

Example:

let student = {
name: "Karthika",
class: "12th",
section: "A",

studentDetails: function () {
    return this.name + " " + this.class
        + " " + this.section + " ";
}
};

// Display object data
console.log(student.studentDetails());
Output:
Karthika 12th A
If we given methodname without()brackets,its return the function definition,
console.log(student.studentDetails);
Output:
[Function: studentDetails]

Explanation:"this" Keyword
In the example above, this refers to the student object.

this.name means the name property of the student object.
this.class means the class property of the student object.
this.section means the section property of the student object.

Using Object.values()
Object.values() creates an array from the property values:

const person = {
  name: "Karthi",
  age: 30,
  city: "New York"
};

// Create an Array from the Properties
const myArray = Object.values(person);
let text = myArray.toString();//we will discuss later
console.log(text);

Output:Karthi,30,New York

JAVASCRIPT OBJECTS

karthika jasinska — Sat, 04 Jul 2026 21:33:55 +0000

Why do we use objects in JS?
We use objects in JavaScript because they allow us to group related data and functionalities together into a single, organized structure using key-value pairs.
Without Objects (Messy & Hard to Manage)
With Objects (Clean & Organized)
In Javascript Objects are king,If we undersatnd Objects meant understand Javascript.
Object structure:
An object literal is a list of property key:values inside curly braces
{ }.
Example:
const car = {
type: "Fiat",
model: "500",
color: "white"
};

Create a new JavaScript object using new Object():
Example:
const person = new Object({
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
});

In objects Properties can be changed, added, and deleted.
Example:
const car = {
type: "Fiat",
model: "500",
color: "white"
};
Accessing property value,
You can access object properties in these ways:

Dot notation
Bracket notation
Expression

console.log(car.type);//output:Fiat
console.log(car["type"]);//output:Fiat
*Output:Fiat *

To change value,
car.type="Masda";
console.log(car.type)
Output:Masda

Adding new Property
car.year=2000;
Output:
{type: 'Fiat', model: '500', color: 'white', year: 2000}

Deleting property
delete car.color;
console.log(car);
{type: 'Fiat', model: '500', year: 2000}

Check if a Property Exists:
Use the in operator to check if a property exists in an object:return boolean value
const person = {
firstName: "Karthika",
lastName: "Jasinska"
};

let result = ("firstName" in person);
console.log(result)
Output:
true

Javascript Functions

karthika jasinska — Thu, 18 Jun 2026 18:24:25 +0000

Purpose of Function in Javascript:

1. 1. Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. They can take inputs, perform actions, and return outputs.
2. 2. We can Call the functions wherever we want.
3. Functions help us use one of fundamental software design principle — DRY (Don’t repeat yourself).
We can pass the parameters in functions too.

Function Syntax:

Function name in Camel case(Ex:functionName).
All of the function name must be unique. We can call the function by function name with () ( Ex:functionName(); )

Understanding Parameters in function:

In functions, parameters are placeholders defined in the function, while arguments are the actual values you pass when calling the function.

**Example:

function greet(name) { // 'name' is a parameter
console.log("Hello " + name);
}

greet("Karthika"); // "Karthika" is the argument**

Parameter: name (placeholder inside the function).
Argument: "Karthika" (real value given at call time).

Default Parameters:
Default parameters are used when no argument is provided during the function call.
If no value is passed, the function automatically uses the default value.
Example:
function greet(name = "Guest") {
console.log("Hello, " + name);
}

greet();
greet("Karthi");

Output:

Hello, Guest

Hello, Karthi

Return Statement

The return statement is used to send a result back from a function.
When return executes, the function stops running at that point.
The returned value can be stored in a variable or used directly.

Example:
function add(a, b) {
return a + b; // returns the sum
}
console.log(add(5,5));//directly give argument here
Output:
10
Or
function add(a, b) {
return a + b; // returns the sum
}

let result = add(5, 10);//can assign variable to store value
console.log(result);
Output:
10

Types of Functions:

Here we will see some type of functions below,

1. Named Function
A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

Example:

function greet() {
return "Hello!";
}
console.log(greet());
Output: Hello!

2. Anonymous Function

An anonymous function is a function defined without an explicit name.
It is commonly used as a callback or assigned to a variable.

Example:

const greet = function() {
return "Hi there!";
};
console.log(greet());
Output: Hi there!

Function Expression A function expression is a function created as part of an expression and assigned to a variable or passed to another function. It can be named or anonymous function.

Example:

const add = function(a, b) {
return a + b;
};
console.log(add(2, 3));
Output: 5

Arrow Function (ES6) A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

Example:

const add =(a, b)=>a + b;
console.log(add(2, 3));
Output: 5

Immediately Invoked Function Expression (IIFE) Immediately Invoked Function Expressions (IIFE) are JavaScript functions that are executed immediately after they are defined. They are typically used to create a local scope for variables to prevent them from polluting the global scope.

Example:

(function () {
console.log("This runs immediately!");
})();
Output:This runs immediately!

6.Callback function

A callback function is a function that is passed as an argument to another function and executed later.
A function can accept another function as a parameter.
Callbacks allow one function to call another at a later time.
A callback function can execute after another function has finished.

Example:

function greet(name, callback) {
console.log("Hello, " + name);
callback();
}

function sayBye() {
console.log("Goodbye!");
}

greet("Karthi", sayBye);

Output:
Hello, Karthi

Goodbye!
Note:Here, sayBye() is passed as a callback to greet(), which executes after the greeting.

Uses:

Handling Asynchronous Operations
Callbacks in Functions Handling Operations
Callbacks in Event Listeners(TBD)

Example:

console.log("Start");

setTimeout(function () {
console.log("Inside setTimeout");
}, 3000);

console.log("End");

Output:
Start

End

Inside setTimeout

Explanantion:

setTimeout() is an asynchronous function that takes a callback to execute after 3 seconds.
The rest of the code continues executing without waiting.

Mock Interview Frontend

karthika jasinska — Tue, 09 Jun 2026 18:07:33 +0000

What Is Ternary Operator In JavaScript & Why Should We Use?

While binary means two, ternary means three. Just like its name, ‘Ternary Operator’ has three components. If you are into JavaScript it is good idea to use ‘Ternary Operator’ to replace simple if else statements.Also this is,

Straight Forward
Clear Code
Saves Time
Less Typing, Five lines of code in one (Who does not like that?)
Professional

Replacing with ‘Ternary Operator’

Ternary Operator definitely has many advantages for simpler if else statements but it is not advisable to use on complex & multiple options conditional statements.

Difference between var, let and const keywords in JavaScript?

JavaScript provides three ways to declare variables: var, let, and const, but they differ in scope, hoisting behaviour, and re-assignment rules.

var: Declares variables with function or global scope and allows re-declaration and updates within the same scope.
let: Declares variables with block scope, allowing updates but not re-declaration within the same block.
const: Declares block-scoped variables that cannot be reassigned after their initial assignment.

JavaScript Data Types?

Mutability vs Immutability in JavaScript?

Mutability:
If a data type is mutable, that means that you can change it. Mutability allows you to modify existing values without creating new ones.

Immutability:
Immutability is the state where values are immutable (that is, not able to be changed). A value is immutable when altering it is impossible. Primitive data types are immutable.

JavaScript Switch Statement?

Switch Control Flow:
Based on a condition, switch selects one or more code blocks to be executed.

switch executes the code blocks that matches an expression.

switch is often used as a more readable alternative to many if...else if...else statements, especially when dealing with multiple possible values.
Example:
const expr = "Papayas";
switch (expr) {
case "Oranges":
console.log("Oranges are $0.59 a pound.");
break;
case "Mangoes":
case "Papayas":
console.log("Mangoes and papayas are $2.79 a pound.");
default:
console.log(Sorry, we are out of ${expr}.);
}

// Expected output: "Mangoes and papayas are $2.79 a pound."

Break Statement:

When JavaScript reaches a break keyword, it breaks out of the switch block.

This will stop the execution inside the switch block.

No more statements in the switch block will be executed.

It is not necessary to break the last case. The switch ends (breaks) there anyway.

Default Statement:

The default keyword specifies a block of code to run if there is no case match.

The default keyword is optional.

CSS Padding vs Margin?

Padding: Adds space inside an element, between its content and border.
Margin: Adds space outside an element, creating gaps between elements.

Difference between CSS Grid and Flexbox?

CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.

he CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;

JavaScript Operators

karthika jasinska — Wed, 03 Jun 2026 20:14:49 +0000

JavaScript operators are special symbols that perform operations on one or more operands (values),
JavaScript Operator Types:

Arithmetic Operators
Assignment Operators
Comparison Operators
Logical Operators
Bitwise Operators(TBD)
String Operators(TBD)
Miscellaneous Operators(TBD)

Arithmetic Operators:

Addition 3 + 4 // 7
Subtraction 5 - 3 // 2
Multiplication 2 * 3 // 6 / Division 4 / 2 // 2 % Remainder 5 % 2 // 1 ++ Increment (increments by 1) ++5 or 5++ // 6 (pre and post increments) -- Decrement (decrements by 1) --4 or 4-- // 3 (pre and post decrements) ** Exponentiation (Power) 4 ** 2 // 16

Examples:

let x = 5;

// addition operator
console.log("Addition: x + 3 = ", x + 3);

// subtraction operator
console.log("Subtraction: x - 3 =", x - 3);

// multiplication operator
console.log("Multiplication: x * 3 =", x * 3);

// division operator
console.log("Division: x / 3 =", x / 3);

// remainder operator
console.log("Remainder: x % 3 =", x % 3);

// increment operator
console.log("Increment: ++x =", ++x);

// decrement operator
console.log("Decrement: --x =", --x);

// exponentiation operator
console.log("Exponentiation: x ** 3 =", x ** 3);
same like as --> math.pow(x,3) function

Increment and decrement Operators:

a = 5
++a; // a becomes 6
a++; // a becomes 7
--a; // a becomes 6
a--; // a becomes 5

Adding Strings and Numbers:(Challenges)
Adding two numbers, will return the sum as a number like
console.log( 5 + 5) = 10.

Adding a number and a string, will return the sum as a concatenated string console.log(5 + "5") = "55".

Assignment Operators::
Assignment operators assign values to JavaScript variables.
Given that x = 10 and y = 5, the table below explains the assignment operators:

(:)-->TBD

Comparison Operators:
Comparison operators are used to compare two values.

Comparison operators always return true or false.

Logical Operators:

We use logical operators to perform logical operations on boolean expressions.

References:
https://www.programiz.com/javascript/operators
https://www.w3schools.com/js/js_operators.asp

JAVASCRIPT

karthika jasinska — Tue, 02 Jun 2026 22:30:43 +0000

What Can JavaScript Do?
JavaScript is the programming language of the web.

It can calculate, manipulate and validate data.

It can update and change both HTML and CSS.
JavaScript printing statement:

console.log(50)
output:50

Comments:
Single line comments start with // .
Multi-line comments start with /* and end with */.
JavaScript variables are containers for data.

JavaScript variables can be declared in 4 ways:

Modern JavaScript
Using let
Using const
Older JavaScript
Using var (Not Recommended)
Automatically (Not Recommended)

JavaScript Identifiers:
Variables are identified with unique names called identifiers.

Names can be short like x, y, z.

Names can be descriptive age, sum, carName.

The rules for constructing names (identifiers) are:

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter, a $ sign or an underscore (_).
Names are case sensitive (X is different from x).
Reserved words (JavaScript keywords) cannot be used as names.

JavaScript has 8 Datatypes:
A JavaScript variable can hold 8 types of data:

Type---- Description
String--- A text of characters enclosed in quotes
Number---A number representing a mathematical value
Bigint--- A number representing a large integer
Boolean--- A data type representing true or false
Object--- A collection of key-value pairs of data
Undefined--- A primitive variable with no assigned value
Null--- A primitive value representing object absence
Symbol--- A unique and primitive identifier

The let keyword was introduced in ES6 (2015)

Variables declared with let have Block Scope

Variables declared with let must be Declared before use

Variables declared with let cannot be Redeclared in the same scope

The const keyword was introduced in ES6 (2015)

Variables defined with const cannot be Redeclared

Variables defined with const cannot be Reassigned

Variables defined with const have Block Scope

Frontend Development

karthika jasinska — Mon, 25 May 2026 10:27:51 +0000

What is Frontend?👩‍💻🧑‍💻

Front-end is the part that is accessible to the user only, It should be self-explanatory and must be user-friendly and designed. so to achieve this we have some basic languages which can be used to create interactive web pages.It is the creation of a user interface using some markup languages and other tools.
Front-end development is the process of building the visual and interactive user interface of a website or application using HTML, CSS, and JavaScript.

What is HTML?

HTML stands for HyperText Markup Language. It is the foundational coding language used to create and structure the content of all web pages.
Basic HTML Tags for Document Structure.

What is Javascript?

JavaScript (JS) is a high-level, text-based programming language used primarily to create interactive and dynamic content on websites.
It makes the webpage smart and reactive, controlling multimedia, calculating data, and responding to user actions

***Tags vs Elements vs Attributes in HTML:*

Tags are the starting and ending parts of an HTML element.
They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags. Example:

HTML elements:

Element consists of both the opening and closing tags as well as what’s inside those tags.
It normally consists of some structure that’s used to define the respective tags. -There are many types of tags for using audio,video,images and documents attaching and table creating,map..etc...

Example:below element has opening tag,closing tag ans content.

HTML Attributes:

HTML Attributes is used to define the character of an HTML element.
It always placed in the opening tag of an element. It generally provides additional styling (attribute) to the element.

Example: starting and ending tag with extra CSS attributes.

What is CSS?

CSS is the language we use to style a Web page.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS we can relate with HTML elements by Inline,Internal and External links. We can add color,underline,fonts and decoration,etc... by using CSS

TYPES OF CSS: