# JavaScript Full Course 2023 - [JavaScript Video](https://youtu.be/lGmRnu--iU8) - [Course Notes Slide PDF](slides.pdf) - [Advanced JavaScript Video](https://www.youtube.com/watch?v=gUUCmRJjVvo) - [Advanced JavaScript Notes](https://coderdost.github.io/) ### Note: More questions to be updated in 24 Hours. ## Chapter 1 (Data Types) ### Assignments **1.1:** Create a code to check difference between `null` and `undefined` data type. Also check their type using `typeof`. **1.2:** Which type of variables (var, let or const) must be **initialized** at the time of declaration? **1.3:** Guess the **Output** and Explain Why? _[From video lecture 1.5]_ ```js let languages = 'java javaScript python cSharp'; let result = languages.lastIndexOf('S'); console.log(result); ``` **1.4:** Guess the **Output** and Explain Why? _[From video lecture 1.8]_ ```js let variable = 'hello programmers'; let result = Number(variable); console.log(result); ``` **1.5:** Guess the **Output** and Explain Why? ```js let num1 = 32; let num2 = '32'; let result1 = num1 !== num2; let result2 = num1 != num2; console.log(result1, result2); ``` **1.6:** Guess the **Output** and explain Why? ```js let str = 'Hello Programmers'; let result = str.includes('r'); console.log(result); ``` **1.7:** Guess the **Output** and Explain Why? _[From video lecture 1.6]_ ```js let num1 = 2; let num2 = 5; let result = num1 ** num2 * 2; console.log(result); ``` **1.8:** Guess the **Output** and Explain Why? ```js let num1 = [1, 2, 4, 5]; let num2 = [6, 5, 8, 0]; let result = num1.concat(num2); console.log(result); ``` **1.9:** Guess the **Output** and Explain Why? ```js let a = 5; let b = 7; let c = 8; let result = a < b > c; console.log(result); ``` **1.10:** If your State is split into **four** equal parts such that in each part there are **1/4** number of people live. You have to find how many people would live in each part? which operators will you use ? _[From video lecture 1.6]_ ## Chapter 2 (Control Flow / Conditional) ### Assignments: **2.1:** Guess the **Output** And Explain Why? ```js let i = 4; for (let j = 0; i < 10; i++) { if (j === 1 || i === 6) { continue; } else { console.log(i, j); if (i === 7) { break; } } } ``` **2.2:** Guess the **Output** and Explain Why? ```js let i = 0; for (i; i < 5; i++) { console.log(i); } ``` **2.3:** Write a simple **Program** in which You have to print first **10** numbers in **descending** order (10...1)? **2.4:** Lets say `John` is looking a new `country` to live in. He want to live in a country that speaks `English`, has less than 10 million people. One of the `food` option between these two must present `Spanish food` OR `English food`. **Write** an if/else if statement to help john figure out Your country is right for him? _[From video lecture 2.4]_ **2.5:** Guess the **Output** And Explain Why? ```js for (let i = 0; i < 10; i++) { console.log(i); } console.log(i); ``` **2.6:** use **nested-if** statement to check your `age>18` than check your height `height > 5.10`. If **both** true show any message(**I can sit in exam**) in the console? **2.7:** Create two variables `grade` and `passingYear`.Check if your `grade == "A"` and `passingYear < 2020` with the help of **ternary** operator(Not allowed to use any logical operator).If both condition `true` print on console **Qualify**. Otherwise **Fail** _[From video lecture 2.9]_ ## Chapter 3 (Functions) ### Assignments **3.1:** Create a **function Declaration** called `describeYourState` Which take three parameters `Population`, `traditional food` and `historical place`. Based on this input function should return a `String` with this format. **My state population is ** Its traditional food is ** and historical place name is \_\_\_** **3.2:** Create a **function expression** which does the exact same thing as defined in **Question 1** **3.3:** Create function **addition** which takes two numbers as an argument And return the result of **sum of two numbers** **Important Note**: In the function call you are **not** passing any **parameter**. You can modify function to achieve this. _[From video lecture 3.2]_ ```js Example; function addition(num1, num2) { return num1 + num2; } console.log(addition()); //You are not allowed to modify this line any more ``` **3.4:** Identify which **type** of value passed below into the function **greet()**. What will be the return value of greet ? ```js let person = { name: 'john', age: 25, }; function greet(person) { person.name = `Mr ${person.name}`; return `Welcome ${person.name}`; } greet(person); ``` **3.5:** Create **higher** order function named as `transformer` which take `string` and `firstUpperCaseWord` function as an arguments. `firstUpperCaseWord` is function which make first word UpperCase from a given `String`. _[From video lecture 3.5]_ **3.6:** create function which will display Your name after every 5 seconds _[From video lecture 3.8]_ ```js input let yourName = "john"; output "john" after 5 second "john" after 5 second "john" after 5 second "john" after 5 second . . . and so on. ``` **3.7:** Guess the **Output** And Explain Why? _[From video lecture 3.4]_ ```js let arrowFunction = (name = 'Coders') => { `Welcome ${name}`; }; console.log(arrowFunction('Programmers')); ``` **3.8:** Create a JavaScript **Function** to find the area of a triangle where lengths of the three of its sides are 5, 6, 7. : **Area = Square root of√s(s - a)(s - b)(s - c)** where **s** is half the perimeter, or **(a + b + c)/2**. ```js input: area_of_triangle(5, 6, 7); output: 14.69; ``` **3.9:** Create a JavaScript **Function** to capitalize the first letter of each word of a given string. ```js input: capitalize('we are the champions'); output: 'We Are The Champions'; ``` ## Chapter 4 (Objects) ### Assignments **4.1:** Guess the **Output** And Explain ? ```js console.log(Math.round(Math.random() * 10)); ``` **4.2:** Create an object called `country` for a country of your choice, containing properties `name` , `capital`, `language`, `population` and `neighbors` 1. Increase the country population by two million using **dot** notation. 2. Decrease the country population by one million using **bracket** notation. 3. Make `language` value in Uppercase. _[From video lecture 4.1]_ **4.3:** Guess the **Output** and explain Why? ```js let car = { color: 'Blue', model: 2021, company: 'Toyota', }; let carColor = 'Blue'; console.log(car[carColor]); console.log(car.carColor); ``` **4.4:** Create a method **describeCar** inside `car` object in which you have to print like this in console using template literals _[From video lecture 4.3]_ **Company of my car is ** . It color is** And Model of my car is \_\_** **4.5:** Generate random numbers between 0 and 10 using **trunc** method of **MATH** object ```js Example getRandomNumbers(){ } Ouput value 0-10 ``` **4.6:** Guess the **Output** and Explain Why? _[From video lecture 4.4]_ ```js let arr = [1,2,3,4]; arr.forEach(elem =>{ if(elem == 1){ continue; } console.log(elem); }) ``` **4.7:** Guess the **Output** And explain Why? **Important Note**: if there is any error, How we can solve that **error**? _[From video lecture 4.7]_ ```js let airplane = { flightName: 'fly india', atacode: 'FI', ratings: 4.9, book(passenger, flightNum) { console.log( `${passenger} Booked flight in ${this.flightName} with flight Number ${this.atacode}${flightNum}` ); }, }; let bookMethod = airplane.book; bookMethod('john', 8754); ``` **4.8:** Guess the **Output** And Explain Why? _[From video lecture 4.9]_ ```js let arr = [1, 2, 3, 4]; for (let elem in arr) { console.log(elem); } ``` **4.9:** You have to create a **Shopping_Cart** array with following features : - **addItem(itemName)** : this function should add string itemName to cart - **removeItem(itemName)**: this function should remove any item which matches itemName. _Hint : search for index of itemName and then remove it_ - **cartSize()** : returns size of cart in terms of number of cart Items. ## Chapter 5 (DOM) ### Assignments **5.1:** Explain difference between **innerText** and **innerHTML** in the following example? _[From video lecture 5.4]_ **HTML** ```html

Hello Coders

``` **JavaScript** ```js let content = document.getElementById('content'); console.log(content.innerHTML); console.log(content.innerText); ``` ## Chapter 6 ( DOM - Forms ) ### Assignments **6.1:** Create regex for password with the following **validations**. 1. Length of password at least of 8 characters 2. contain at least one special character 3. contain at least one alphabet (a-z) character _[From video lecture 6.2]_ **HTML** ```html
``` **JavaScript** ```js let form = document.querySelector('.testForm'); let inputPassword = document.querySelector('.inputPass'); let requiredPasswordPattern = 'create your regex here'; form.addEventListener('submit', (e) => { e.preventDefault(); let password = inputPassword.value; let result = requiredPasswordPattern.test(password); if (result == true) { console.log('Your password validated successfully'); } else { console.log('try again with new password'); } }); ``` ## Chapter 7 (Array Methods) ### Assignments **7.1:** You have given array of **strings**. Your task is to obtain last **two** elements of given array using **slice** method? ```js Input; let admins = ['john', 'paul', 'Neha', 'harry']; Ouput[('Neha', 'harry')]; ``` **7.2:** You have given an array of **5** elements(1-5). Your task is defined as below. _[From video lecture 7.2]_ ```js const arr = [1, 4, 7, 6, 8]; ``` 1. You have to delete **2** elements starting from index **2**. 2. You have to add **3** new elements on index **1** choice. 3. Display the **2 deleted** elements in console (from step 1) **7.3:** What happens if we use **negative** number inside **slice** method? ```js const arr = [1, 4, 7, 6, 8]; ``` Example : arr.slice(-2); **7.4:** Write **three** different methods/approaches to get **last** element of the array? ```js const arr = [1, 4, 7, 6, 8]; ``` _[From video lecture 7.3]_ **7.5:** You have given an array of **nums**. Create new Array with the help of **nums** array. In new Array each element will be a result of **multiplication by 2** of the original array element ```js const arr = [1, 4, 7, 6, 8]; ``` _[From video lecture 7.4]_ ```js Example: Input; let nums = [1, 2, 3, 4, 5]; output; updatedNums = [2, 4, 6, 8, 10]; ``` **7.6** You have given an array of **scores** in which score of each student stored. Create a new array with the help of original **scores** array in which only those scores exist **greater** than 75% ```js const arr = [10, 40, 70, 60, 80]; ``` _[From video lecture 7.5]_ ```js let totalScore = 150; let scores = [55, 76, 35, 77, 88, 97, 120, 136, 140]; ``` **7.7:** You have given an array of numbers **nums**. You have to find **sum** of all array elements using **reduce** method? ```js let nums = [2, 3, 5, 7, 8, 4, 9]; ``` **7.8:** You have given an array of numbers **nums**. You have to find the index of value **8** using **built-in** method of array? ```js let nums = [2, 3, 5, 6, 8, 6, 4, 8]; ``` **7.9:** You have given an array of **objects** of users as below. Find the specified **user** with `name = "John" ` Also find the **position** `(index+1)` of that **user** inside the array? ```js let users = [ { name: 'Paul', age: 24, verified: true, }, { name: 'John', age: 21, verified: false, }, { name: 'Neha', age: 19, verify: true, }, ]; ``` **7.10:** Guess the **Output** and explain Why? ```js let nums = [1, 2, 4, 5, [6, [8]], [9, 0]]; let res1 = nums.flat(1); let res2 = nums.flatMap((elem) => elem); console.log(res1, res2); ``` **7.11:** You have given an array of `nums`. Write a program to `sort` the elements of array in `descending` order **using built-in** method of array. ```js Input; let nums = [5, 1, 4, 6, 8, 3, 9]; Output[(9, 8, 6, 5, 4, 3, 1)]; ``` **7.12:** Guess the **Output** and Explain Why? _[From video lecture 7.13]_ ```js let arr = [1, 2, 3, 4]; let result = arr.splice(1, 2).pop(); console.log(result); ``` **7.13:** You have given an array of numbers `nums` You have to check if all elements of the **array > 15** using **built-in** array method. return `true` or `false` _[From video lecture 7.9]_ ```js let nums = [16, 17, 18, 28, 22]; ``` ### More Practice Questions (Arrays) **Question 1:** Guess the **Output** And explain Why? ```js let strArray = [1, 2, 3, 4, 5]; let result = strArray.reverse(); console.log(result == strArray); ``` **Question 2:** You have **given** two **arrays** below as an example. Your task is to **combine** them into one By using array method ```js input; let arr1 = [1, 2, 3, 4, 5]; let arr2 = [6, 7, 8, 9, 10]; ouput[(6, 7, 8, 9, 10, 1, 2, 3, 4, 5)]; ``` **Question 3:** You have given an array of **letters** below. Convert that array into string of letters **Without Space** ```js input; let arr = ['a', 'b', 'h', 'i', 's', 'h', 'e', 'k']; output; ('abhishek'); ``` **Question 4:** Guess the **Output** and explain why? ```js let arr = [11, 62, 1, 27, 8, 5]; let sorted = arr.sort(); console.log(sorted); ``` **Question 5:** Create a function 'calcAverageHumanAge', which accepts an arrays of dog's ages ('ages'), and does the following thing in order: 1. Calculate the dog `age` in human years using the following formula: if the `dogAge <= 2 years` old, `humanAge = 2 \* dogAg`e. If the `dog is > 2 years` old, `humanAge = 16 + dogAge` ```js Test data let arr = [12,2,5,12,8,13,9]; ``` **Question 6:** Guess the **Output** and Explain Why? ```js let arr = [1, 2, 3, 4, 5, 6, 7, 8]; let elem = arr.at(-1); console.log(elem); ``` **Question 7:** Guess the **Output** and Explain why? ```js let arr = [1, 2, 3, 4, 5, 6, 7, 8]; let result = arr.slice(2, 5).splice(0, 2, 21).pop(); console.log(result, arr); ``` ## Chapter 8 (Date) ### Assignments **8.1:** How can we get current time in **millisecond** of current time? **8.2:** Guess the **Output** and Explain Why? _[From video lecture 8.2]_ ```js let currentDate = new Date(); let result1 = currentDate.getDay(); let result2 = currentDate.getDate(); console.log(result1, result2); ``` ## Chapter 9 (LocalStorage) ### Assignments **9.1:** Create two variables **myHobby** , **age** . Now **set** their value in local storage (according to your hobby and age). After setting also **get** value from local storage and display their values in **console**. _[From video lecture 9.2]_ ## Chapter 10 (OOP) ### Assignments **10.1:** Your tasks: 1. Use a **constructor** function to implement a `Bike`. A bike has a `make` and a `speed` property. The `speed` property is the current speed of the bike in km/h 2. Implement an `accelerate` method that will increase the bike's speed by **50**, and log the new speed to the console 3. Implement a `brake` method that will decrease the bike's speed by **25**, and log the new speed to the console 4. Create **2** 'Bike' objects and experiment with calling `accelerate` and `brake` multiple times on each of them **Sample Data** Data car 1: `bike1` going at 120 km/h Data car 2: `bike` going at 95 km/h **10.2:** Re-create **Question 1** But this time using **ES6** class. _[From video lecture 10.4]_ **10.3:** Guess the **Output** And Explain Why? _[From video lecture 10.2]_ ```js function Person(name) { this.name = name; } let me = new Person('John'); console.log(me.__proto__ == Person.prototype); console.log(me.__proto__.__proto__ == Object.prototype); ``` **10.4:** Create **constructor** function inside **Car** class with three properties **color** , **model** , **company** ```js class Car {} ``` **10.5:** **Identify** all **mistakes** in the following class ```js class Car = { constructor(){ }, engineMethod = function(){ console.log("This is engine method of Car class"); } } ``` **10.6:** Guess the **Output** and explain Why? And **if** there is any **error** How we can remove that error? _[From video lecture 10.6]_ ```js function Person(name, age) { this.name = name; this.age = age; this.brainMethod = function () { console.log('This is brain method of Person'); }; } Person.heartMethod = function () { console.log('This is heart method of Person'); }; let me = new Person('john', 34); me.brainMethod(); me.heartMethod(); ``` **10.7:** Create a new class `Dog` (which will be child class) inherited from `Animal` class. In Addition in `Dog` class add some additional properties like **breedType** _[From video lecture 10.7]_ **Question 8:** Guess the **Output** And Explain Why? ```js class Car { constructor() {} } let car = new Car(); console.log(Car.prototype.isPrototypeOf(Car)); console.log(Car.prototype.isPrototypeOf(car)); ``` ### More Practice Questions (OOP) **Question 1:** Guess the **Output** and Explain Why? ```js function carObject(name, model) { let car = Object.create(constructorObject); car.name = name; car.model = model; this.engineMethod = function () { console.log('This is engine method of car'); }; return car; } let constructorObject = { speak: function () { return 'This is my car'; }, }; let myCar = carObject('Audi', 2023); console.log(myCar.__proto__); ``` **Question 2:** You have given an example of **OOP** Code. Your task is to explain the use of `super` keyword in `Dog` class. And you have to **change** the code again after removing `super` keyword from the `Dog` class (You have remove those lines/statements which are not **necessary** after **removing** super **keyword**) ```js class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; } } class Dogs extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; } } let newDog = new Dogs('Clara', 33, 'indigo'); console.log(newDog); ``` **Question 3:** What are the advantages of using **getter** and **setter** method in OOP? **Question 4:** You have OOP code below. And there is **single** error in this code? Your task is to **remove that error**. **Important Note**: To solve this error You need to know about **method chaining** concept. ```js class Car { constructor(id) { this.id = id; } setMake(make) { this.make = make; } setModel(model) { this.model = model; } setFuelType(fuelType) { this.fuelType = fuelType; } getCarInfo() { return { id: this.id, make: this.make, model: this.model, fuelType: this.fuelType, }; } } console.log( new Car(233) .setMake('Honda') .setModel('Civic') .setFuelType('Petrol') .getCarInfo() ); ``` **Question 5:** What is difference between ** proto** and prototype property of Object? Try with **Example**? **Question 6:** create class of `Person` with properties `name`, `age`. Your main task is to add `static` method in that class of your choice ( e.g brainMethod) ```js class Person { constructor(name, age) { this.name = name; this.age = age; } } let me = new Person('abhishek', 25); console.log(me); ``` ## Chapter 11( Async Js ) ### Assignments **11.1:** Guess the **Output** And Explain Why? _[From video lecture 11.7]_ **Html Code** ```html JavaScript-CoderDost