5 Most Important Things in Java Script

There are five most important things to know for a developer to learn JavaScript.

1. Variables and Data Types
2. Conditional Statement
3. Functions
4. Objects and Array Methods
5. Promises

Variables and Data Types

Variables are used to store and manipulate data. Here we show how to declare a variable and how to assign a value to a variable.

// using var:
var myVariable; // declare a variable in js
myVariable = "Hello, world!"; // assign a value to a variable

// Different methods to declare variable
let myNewVariable;
myNewVariable = "Hi, world!";

const myNewVariable = "Hey, world!";

Data Types

Variables can store different types of data, such as strings, numbers, booleans, objects, or arrays.

//Data Types
let myNumber = 34; // number
let myString = "Hello, World!"; //string
let myBoolean = true; //boolean

let myArray = [1, 2, 3]; // array
let myObject = { name: "Smith", age: 25 }; // object

let myNullValue = null;
let myUndefinedVariable;

Conditional Statements in JS

Conditional Statements help to make decisions and execute specific blocks of code. we use if-else and switch for conditional statements in JavaScript.

// Conditional Statement
let x = 10; // number
let result = "";
//By using if-else statement
if (x > 5) {
  result = "x is greater";
} else {
  result = "x is less";
}
console.log(result); // Output: 'x is greater'

// else if  statement
if (x > 10) {
  result = "x is greater";
} else if (x == 10) {
  result = "x is Equal";
} else {
  result = "x is less";
}
console.log(result); // Output: 'x is Equal'

// Ternary operator
let result = x > 15 ? "x is greater" : "x is less";
console.log(result); // Output: "x is less"

//Switch Statement
let dayOfWeek = "Monday";
switch (dayOfWeek) {
  case "Monday":
    console.log("Today is Monday");
    break;
  case "Tuesday":
    console.log("Today is Tuesday");
    break;
  default:
    console.log("Invalid day of the week");
}
// Output: 'Today is Monday'

Functions in JavaScript

Functions in JavaScript work as reusable blocks of code that can be invoked or called to perform a specific task.

//Functions
** Named Function
function addItems(item1, item2) {
  return item1 + item2;
}
console.log(addItems(2, 4)); // Output : 6

** Anonymous Function

let double = function (num) {
  return num * 3;
};
console.log(double(4)); // Output :8

** Arrow Function
let triple = (num) => {
  return num * 3;
};
console.log(triple(4)); // Output : 12

** Single Line Function
const f = (a, b) => a + b;
console.log(f(3, 4)); // Output: 7

** High Order Function
function createFunction() {
  function f(a, b) {
    const sum = a + b;
    return sum;
  }
  return f;
}

const f = createFunction();
console.log(3, 4); // 7

** Immediately Invoked Function Expression (IIFE)

const result = (function (a, b) {
  const sum = a + b;
  return sum;
})(3, 4);
console.log(result); // 7

Objects and Array Methods

Objects and arrays are two important data structures used for organizing and manipulating data.

Arrays are collections of values and it defined using square brackets [] and contain comma-separated values.
Array indices starting from 0 for the first element.
Arrays allow you to store multiple values of any data type in a sequential manner.

// Arrays

** Array Map Method
const arrMap = [1, 2, 3];
const doubled = arrMap.map((num) => num * 2);
console.log(doubled); // Output: [2,4,6]

** Array Filter Mathod
const arrFilter = [1, 2, 3, 4, 5];
const evens = arrFilter.filter((num) => num % 2 === 0);
console.log(evens); // Output: [2,4]

** Array Reduse Method
const arrReduce = [1, 2, 3, 4, 5];
const sum = arrReduce.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

** Array Slice Method
const arr = [1, 2, 3, 4, 5];
const sliced = arr.slice(1, 4);
console.log(sliced); // Output: [2,3,4]

** Array Concat Method
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

** Array ForEach Method
const nums = [1, 2, 3];
nums.forEach((num) => console.log(num * 2)); // Output: [2, 4, 6]

** Array IndexOf Method
const numb = [1, 2, 3, 2];
const index = numb.indexOf(2);
console.log(index); // Output: 1

** Array Sort Method
const arrSort = [3, 1, 4, 15, 9, 2, 6, 5, 3];
arrSort.sort();
console.log(arrSort); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

** Array Find Method
const arrFind = [1, 2, 3, 4, 5];
const even = arrFind.find((num) => num % 2 === 0);
console.log(even); // Output: 2

** Array Include Method
const arrInclude = [1, 2, 3];
const hasTwo = arrInclude.includes(2);
console.log(hasTwo); // Output: true

** Array Reverse Method
const arrReverse = [1, 2, 3];
arrReverse.reverse();
console.log(arrReverse); // Output: [3, 2, 1]

** Array Join Method
const arrJoin = [1, 2, 3];
const str = arrJoin.join("-");
console.log(str); // Output: "1-2-3"

** Array UnShift Method
const arrUnShift = [3, 4, 5];
const length = arrUnShift.unshift(1, 2);
console.log(lenght); // Output: 5
console.log(nums); // Output: [1, 2, 3 ,4, 5]

** Array Shift Method
const arrShift = [1, 2, 3];
const first = arrShift.shift();
console.log(first); // Output: 1
console.log(arrShift); // Output: [2, 3]

** Array Push Method
const arrPush = [1, 2];
const length = arrPush.push(3, 4);
console.log(length); // Output: 4
console.log(arrPush); // Output: [1, 2, 3, 4]

** Array  Pop Method
const arrPop = [1, 2, 3];
const last = arrPop.pop();
console.log(last); // Output: 3
console.log(arrPop); // Output: [1, 2]

** Array Splice Method
const arrSplice = [1, 2, 3, 4];
arrSplice.splice(1, 2, 5, 6);
console.log(arrSplice); // Output:[1, 5, 6, 4]

** Array Find Index Method
const arrFindIndex = [1, 2, 3, 4, 5];
const index = arrFindIndex.findIndex((num) => num % 2 === 0);
console.log(index); // Output: 1

** Array Every Method
const arrEvery = [2, 4, 6];
const isEven = arrEvery.every((num) => num % 2 === 0);
console.log(isEven); // Output: true

** Array Some Method
const arrSome = [1, 2, 3];
const hasEven = arrSome.some((num) => num % 2 === 0);
console.log(hasEven); // Output: true

Objects In JS
we represent objects in key-value pairs inside a curly braces {}. Keys are strings or symbols that serve as property names, and values can be of any data type.

// Objects

** Obiect Keys Method
const objKeys = { a: 1, b: 2, c: 3 };
console.log(Object.keys(objKeys)); // Output : ['a', 'b', 'c']

** Object Values Method
const objValues = { a: 1, b: 2, c: 3 };
console.log(Object.values(objValues)); // Output: [1,2,3]

** Object Entries Method
const objEntries = { a: 1, b: 2, c: 3 };
console.log(Object.entries(objEntries)); // Output [['a', 1],['b', 2],['c', 3]

** Object Assign Method
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(result); //  Output : {a: 1, b: 3,c: 4}

** Object freeze Method
const obj = { a: 1, b: 2 };
Object.freeze(obj);
obj.a = 3;
console.log(obj); // Output : {a: 1, b: 2}

** Object Seal Method
const obj = { a: 1, b: 2 };
Object.seal(obj);
obj.c = 3;
console.log(obj); // Output: {a: 1, b:2}

** Object hasOwnProperty Method
const obj = { a: 1 };
console.log(obj.hasOwnProperty("a")); // Output: true
console.log(obj.hasOwnProperty("toString")); // Output: false

** Object to Json String
const person = {
  name: "John",
  age: 30,
  city: "New York",
};
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // Output: {"name":"John","age":30,"city":"New York"}

** JSON to Object
const jsonStr = '{"name":"John","age":30,"city":"New York"}';
const person = JSON.parse(jsonStr);

console.log(person.name); // Output: John
console.log(person.age); // Output: 30
console.log(person.city); // Output: New York

Asynchronous operations in JavaScript using Promises

Asynchronous operations for handling tasks that involve network requests, file operations, or time-consuming operations and ensure efficient non-blocking code execution.

// Promise 
** Asynchronous operations in JavaScript using Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "John", age: 30 };
      if (data) {
        resolve(data);
      } else {
        reject(new Error("Data not found"));
      }
    }, 2000);
  });
}
fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

** fetch data using Promise method
fetch("https:/api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

** fetch data with async/await method
async function fetchData() {
  try {
    const response = await console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Conclusion
Mastering these 5 important things will provide a solid foundation for JavaScript development. You should learn these important things in JavaScript before going jump to frameworks and libraries of JavaScript.

Comments

[Rick Delpo]

Well done, now how bout a real live use case. In my example I use array.indexOf() and array.reduce() to group and sum product sales by month. Click here for more details, then click my codepen for the full code. Make this ur next Javascript project.
dev.to/rickdelpo1/how-to-populate-...

[usama-bin-ishaq]

very informative but sir I how to I solve real life problems by using these methods can you provide some live examples