5 Most Important Things in Java Script
Tags: javascript, programming, webdev, react
Published: 2023-05-18 10:12:59

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.