Basics of JavaScript - Part 2

Hey Guys !👋 It’s me Daiyan. Today I’ll show you the most basics and beautiful features of JavaScript.

So Let’s Start !

Value

We store a value in a variable. Like 3 is a value. There are 2 kinds of values.

One is Object, and everything else are Primitive.

7 Primitive Types :-

1. String
2. Number
3. Boolean
4. Null
5. Undefined
6. Symbol (ES6)
7. BigInt (ES2020)

Data Types

We covered values. Right ? so every value has a data type. When we store a value in variable, It has a type.

Like string, number, Boolean etc.

const num = 6;
console.log(typeof num) // Number

Expressions

Expressions is when you write a code. It evaluated and print to the console. Like 3+3 = 6 is JavaScript Expression.

Hoisting

Hoisting is the default behavior of JavaScript moving all declarations to the top of the current scope (script or function).

let a = 3;
alert(`a is = ${a}, b is = ${b}`);
//result => a = 3, b is = undefined. 
let b = 4;

Closure

A closure gives you access to an outer function’s scope variable from an inner function.

function outer() {
  let num  = 5;
  return function() {
    return num + num
  }
}
const add = outer()
add() // 10

Error Handling

If we don’t able to catch errors in our code then we can use try-catch. There are 2 things, Try and Catch. If we don’t get any error, Catch block will be ignored. But if got an error, Catch block will be executed and rest of the try block will be ignored.

try {
  console.lo()
} catch(err) {
  console.log(err)
}
// Error: 'console.lo is not a function'

Destructuring

One of the most favorite feature of mine of ES6 is Destructuring. This helps to unpack values from arrays, or properties from objects, into distinct variables.

// Object
const person = {
name: ‘Jason Holder’,
age: 35
}
const { name, age } = person;
// Array
const friends = [‘Mashrafee’, ‘Shakib’, ‘Anas’]
const [ friend1, friend2 ] = friends;

Map, Filter, Find

We need to know some array methods to get into react. Map, filter and find is one of them. They are the features of ES5. I use those mostly for process data.

Example:
// Map
const numbers = [45, 65, 12, 59, 87]
numbers.map( num => num * 2 )
// Filter
numbers.filter(num => num < 70)
// Find
numbers.find(num => num < 70)

Spread Operator

This operator allows to extract iterable item into parts and pushed into areas that expect individual components

Example:
function sum(x, y, z) {
    return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(…numbers));

Default Parameters

It helps us when we don’t give any parameters in functions. before that, It shows error that parameter not found. That’s why It shows undefined. But now It makes our life easier :)

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}
greeting('mike') // Hello, mike!
greeting() // Hello, stranger!

IIFE (Immediately Invoked function expression)

An immediately invoked function expression is a JavaScript programming language syntax which we can use to call a function immediately.

const printName = (function () {
    const name = "shakib"; 
    return name; 
})(); 
printName; // shakib

For Of, For In

We can use for of for iterating objects. I mean String, array or array like objects. When we use for in, we get the index values of the iterable objects.

const arr = ['a', 'b', 'c'];
for (const element of arr) {
  console.log(element);
}
// "a", "b", "c"
const arr = [{name: 'daiyan'}, {name: 'daiyan'}, {name: 'daiyan'}];
for (const element in arr) {
  console.log(element);
}
// "0", "1", "2"

Class

Last but not least, Class. Those who are came from OOP(Object Oriented Programming) background they don’ understand js for weird behaviors. But now I think those will be happy. We can finally use class for JavaScript 🤩🤩.
Note: It’s a syntactic sugar of objects. Like templates for objects

class Customer {
   constructor(cId, cProduct) {
       this.id = cId
       this.product = cProduct
       this.place = "Chittagong"
   }
}
const customer1 = new Customer(4, "Sugar")
const customer2 = new Customer(5, "Egg")
console.log(customer1, customer2);
// Customer { id: 4, product: 'Sugar', place: 'Chittagong' } Customer { id: 5, product: 'Egg', place: 'Chittagong' }

So guys that’s it for today. We will talk about more interesting topics of JavaScript later. This is Daiyan, going for today 👋