README.md

Lecture 5 - Array Operations - Imperative vs Declarative

Today’s Agenda

• Array Operations

  • Imperative traverse

    const numbers = [2, 5, 6, 7, 89, 100];
    
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
    	// console.log(numbers[i] * 2);
    	sum += numbers[i];
    }
    console.log(sum);

    Result:

    

    
    

    নিচের Array থেকে শুধু Number গুলা বের করতে হবে, কোন নতুন Array তৈরি করা যাবে না। এই সিস্টেমে করলে memory তে জায়গা কম লাগবে।

    let arr2 = [1, 2, 3, null, false, 6];
    
    count = 0;
    for (let i = 0; i < arr2.length; i++) {
    	for (let j = i; j < arr2.length - 1; j++) {
    		if (!arr2[j] || typeof arr2[j] !== 'number') {
    			arr2[j] = arr2[j + 1];
    			arr2[j + 1] = undefined;
    		}
    	}
    
    	if (arr2[i] == undefined) {
    		count++;
    	}
    }
    arr2.length -= count; //Array থেকে undefined গুলো বাদ দিলাম
    console.log(count, arr2);

    Result:

    

    
    

    Loop এর ভিতরের ঘটনা

    i=0 তে,

    যখন j=3 হবে, [1,2,3,false,undefined,6]

    যখন j=4 হবে, [1,2,3,false,6,undefined]

    new array [1,2,3,false,6,undefined]

    আবার

    i=1 তে,

    যখন j=3 হবে, [1,2,3,6,undefined,undefined]

    যখন j=4 হবে, [1,2,3,6,undefined,undefined]

    new array [1,2,3,6,undefined,undefined]

    আবার

    i=2 তে,

    যখন j=4 হবে, [1,2,3,6,undefined,undefined]

    new array [1,2,3,6,undefined,undefined]

    আবার

    i=3 তে,

    যখন j=4 হবে, [1,2,3,6,undefined,undefined]

    new array [1,2,3,6,undefined,undefined]

    আবার

    i=4 তে যখন j=4 হবে, [1,2,3,6,undefined,undefined]

    new array [1,2,3,6,undefined,undefined]

    আবার

    i=5 তে,

    j তে প্রবেশ করবে না, কারণ j=5 হওয়া সম্ভব না।

    Final Array

    [1,2,3,6,undefined,undefined]

    এই Array থেকে count বাদ দিলে আমাদের Final Result পাওয়া যাবে।

    [1,2,3,6]

    
    
    

    নতুন Array তৈরি করে উপরের কাজটা করা হল,এতে বেশি Memory লাগবে

    const arr = [1, 2, 3, null, false, 4, 5, '', 'test', 6, 7];
    
    /* const filteredArray = arr.filter((val) => typeof val === 'number');
    console.log(filteredArray); */
    
    const newArr = [];
    for (let i = 0; i < arr.length; i++) {
    	if (typeof arr[i] === 'number') {
    		newArr.push(arr[i]);
    	}
    }
    console.log(newArr);

    Result:

    

    
    
    

    Declerative way তে Travers করা [Built in method]

    let arr20 = [1, 2, 3, 4];
    arr20.forEach((value, index, arr) => {
    	console.log(`index:${index} value:${value} Array:${arr}`);
    });

    Result:

    

    forEach() এ argument আকারে যে function pass করা হয়, তার Parameter এ ৩ টি item pass করা যায়।

    প্রথমটাঃValue

    দ্বিতীয়টাঃindex

    তৃতীয়টাঃওই Array টা

    আমি যদি চাই value আর index বাদ দিয়ে শুধু Array টা show করাতে তখন value ও index এর জায়গায় Underscore( _ ) ব্যবহার করতে হবে। তবে arrow function এ পর পর ২ টা Underscore( _ ) ব্যবহার করলে এটা error throw korbe

    Underscore এর মাধ্যমে value ও index Skip করিছি

    arr20.forEach(function (_, _, arra) {
    	console.log(`Array:[${arra}]`);
    });

    Result:

    

    Error Show করবে কারণ forEach() এর Argument এ Arrow Function ব্যবহার করেছি।

    let arr404 = [1, 2, 3];
    arr404.forEach((_, _, arra) => {
    	console.log(
    		`Array:[${arra}]`
    	); /*SyntaxError: Duplicate parameter name not allowed in this context*/
    });

    
    
    

  • Update

    const arr = [
    	{ id: 1, value: 10 },
    	{ id: 2, value: 20 },
    	{ id: 3, value: 30 },
    	{ id: 4, value: 40 },
    	{ id: 5, value: 50 },
    ];
    
    const obj2 = arr[2];
    obj2.value = 300;
    console.log(obj2);
    
    /* const index = arr.findIndex(function (val) {
    	return val.id === 4;
    });
    
    arr[index].value = 400;
    
    console.log(arr); */

    Result:

    

    
    

    /*find() Method Mutable Way তে কাজ করে, কারণ এটা মুল Array কে
    change করে ফেলে।*/
    const obj = arr.find(function (val) {
    	return val.id === 4;
    });
    
    obj.value = 400;
    console.log(obj);

    Result:

    

    
    

    arr ও পরিবর্তন হয়ে গেছে

    console.log(arr);

    Result:

    

    
    
    

    console.log(arr[3] === obj);
    
    const a = { a: 10 };
    const b = { a: 10 };
    const c = a;
    console.log(a === c);

    
    

  • Delete

    const arr5 = [
    	{ id: 1, value: 10 },
    	{ id: 2, value: 20 },
    	{ id: 3, value: 30 },
    	{ id: 4, value: 40 },
    	{ id: 5, value: 50 },
    ];
    
    // splice -> mutable
    const index = arr5.findIndex((item) => item.id === 4);
    const arr1 = arr5.splice(index, 1); //একটা item Delete হয়ে যাবে
    console.log(arr5);

    Result:

    

    
    
    

    // filter -> immutable
    const arr8 = [
    	{ id: 1, value: 100 },
    	{ id: 2, value: 200 },
    	{ id: 3, value: 300 },
    	{ id: 4, value: 400 },
    	{ id: 5, value: 500 },
    ];
    const arr7 = arr8.filter((item) => item.id !== 4);
    console.log(arr7);

    arr7 Result:

    

    console.log(arr8);

    arr8 বা মুল Array এর কোন পরিবর্তন হয়নিঃ

    

    
    
    

  • Mutation

  • Map

  • Filter

  • Reduce

  • Deep copy vs Shallow copy

• Object Deep Dive

  • Object Operations

    // Object Literal
    const microphone = {
    	brand: 'Fifine',
    	indictor: true,
    	price: 8000,
    	color: 'Black',
    	startRecording() {
    		console.log('recording started');
    	},
    	stopRecording() {
    		console.log('recording stopped');
    	},
    };
    /* Object.freeze(microphone);
    microphone.newProperty = 'my new property';
    console.log(microphone); */
    
    // console.log(Object.keys(microphone));
    // console.log(Object.values(microphone));
    
    /**
     * There are two different parts in object
     * 1. Noun / Adjective (State/data/property/field)
     * 2. Verb (functionalities -> start, stop)
     */
    
    // Constructor function
    // const testObj = new Object();
    // testObj.name = 'Test Object';
    // testObj.time = new Date();
    // console.log(testObj);
    
    /* for (let k in microphone) {
    	console.log(k, microphone[k]);
    } */
    
    // dot notation microphone.brand
    // array notation microphone['brand']
    
    const empty = {};
    console.log(Object.keys(empty).length === 0);
    console.log(Object.entries(microphone));
    const arr = [
    	['brand', 'Fifine'],
    	['indictor', true],
    	['price', 8000],
    	['color', 'Black'],
    ];
    
    console.log(Object.fromEntries(arr));

  • Function vs Method

  • Brief discussion on Prototype

• Object as a Data Structure

  • Array Operations
  • Object Over Array

• Multi Dimensional Array

Important Links:

• Make Fun Of Javascript Array
• Class Overview

Task:

• How can we use object as a data structure? যে কাজগুলো আমরা array ব্যবহার করে করতে পারি সেগুলো কিভাবে object দিয়ে করতে পারি?