adding new Javascript problems and techniques

Author: rohan-paul

Javascript/ES6-Array-Helper-Methods/Destructuring_Geneal.md

@@ -0,0 +1,73 @@
+### General Object Destructuring Example
+
+```js
+let myObj = {
+    name: "Luke",
+    age: 25,
+    hobbies: "music"
+};
+
+let { name, age, hobbies } = myObj;
+
+console.log(name, age, hobbies);    // => Luke 25 music
+```
+
+Now the variables listed in between the curly braces are assigned the value of their respective properties in myObj.
+
+### The order in which the variables are listed in the curly braces doesn’t matter. Additionally, we don’t have to list all the properties of an object if we only need one or two.
+
+```js
+console.log(age, name, hobbies);    // => 25 'Luke' 'music'
+
+console.log(hobbies, name, age);    // => music Luke 25
+
+console.log(hobbies, name);    // => music Luke
+
+```
+
+### General Array Destructuring Example
+
+```js
+let arr = [‘Jim’, ‘Bob’, ‘Sarah’, ‘Cassie’];
+
+let [ jim, bob, sarah, cassie ] = arr;
+
+console.log(jim, bob, sarah, cassie); //outputs: Jim Bob Sarah Cassie
+```
+
+## Unlike objects, the name we give the variables doesn’t matter. Let’s change the above example:  So, each of the variable names will ONLY count for the index-positions I fetch.
+
+```js
+let arr = [‘Jim’, ‘Bob’, ‘Sarah’, ‘Cassie’];
+
+let [ var1, var2, var3, var4] = arr;
+
+console.log(var1, var2, var3, var4); //outputs: Jim Bob Sarah Cassie
+```
+
+### If I include less variables then there are indexes in the arrays, then just like in Object-destructuring, only that many array element will be included in the returned array, starting from zero-index position and AGAIN without giving any meaning to the the name I give to the variables. So, each of the variable names will ONLY count for the index-positions I fetch.
+
+let arr = [‘Jim’, ‘Bob’, ‘Sarah’, ‘Cassie’];
+
+let [ jim, bob, cassie ] = arr;
+
+console.log(jim, bob, cassie); //outputs: Jim Bob Sarah
+
+## Using Spread operator -  It is often used for splitting out a part of an object, but keeping the remaining properties in another object.
+
+```js
+let myObj = {
+
+    name: "Luke",
+    age: 25,
+    hobbies: "music"
+
+};
+
+let { hobbies, ...rest } = myObj;  // => Luke 25 music
+
+console.log(hobbies, rest)  // => music { name: 'Luke', age: 25 }
+
+console.log(hobbies, rest.age)  // => music 25
+
+```

Javascript/ES6-Array-Helper-Methods/create-class-in-ES6.js

@@ -0,0 +1,14 @@
+class User {
+
+	constructor (name, age) {
+		this.name = name;
+		this.age = age;
+	}
+
+	getUserData() {
+		console.log(this.name + " is " + this.age + " years old.");
+	}
+}
+
+let user = new User('paul', 18)
+user.getUserData()

Javascript/ES6-Array-Helper-Methods/destructuring.js

@@ -0,0 +1,49 @@
+//Destructuring Example-1
+/*  Destructuring allows us to extract data from arrays and objects into separate variables.
+
+Destructuring can also be used for passing objects into a function, allowing you to pull specific properties out of an object in a concise manner. It is also possible to assign default values to destructured arguments, which can be a useful pattern if passing in a configuration object. */
+
+let jane = { firstName: 'Jane', lastName: 'Doe'};
+let john = { firstName: 'John', lastName: 'Doe', middleName: 'Smith' }
+
+// the below pattern that I always use in React
+let sayName = ({firstName, lastName, middleName = "N/A"}) => {
+    console.log(`Hello ${firstName} ${lastName} ${middleName}`);
+}
+
+// sayName(jane); // -> Hello Jane N/A Doe
+// sayName(john)  // -> Hello John Doe Smith
+
+// Examples of array destructuring for function parameters:
+function foo ( [x, y] ) {
+    console.log(x, y);
+}
+
+// foo([1,2]);  // -> 1 2
+// foo([2]);    // -> 2 undefined
+// foo([])      // -> undefined undefined
+
+
+// Examples of Object destructuring for parameters in function declaration:
+
+function foo ( { x, y } ) {
+    console.log(x, y);
+}
+
+foo({y: 1, x: 2})  // -> 2 1
+
+foo({y: 1})  // -> undefined 1
+
+foo({})  // -> undefined undefined
+
+/* This technique is an approximation of named arguments, in that the properties on the object map to the destructured parameters of the same names. That also means that we get optional parameters (in any position) for free, as you can see leaving off the x "parameter" worked as we'd expect. */
+
+
+//Destructuring Example-2
+
+let full_name =['John','Deo'];
+
+let [first_name,last_name]=full_name;
+
+console.log(first_name,last_name);
+// outputs John Deo

Javascript/ES6-Array-Helper-Methods/every-method-of-Array.js

@@ -0,0 +1,14 @@
+/*every:
+
+callback is a predicate - it should return a truthy or falsy value
+callback answers: does this item meet your criteria?
+callback gets these arguments: item, index, list
+final return value: false after the first item that failed to meet your criteria, else true
+note: stops iterating once it receives a falsy value from your callback.
+example use case:*/
+
+const allPositiveNumbers = [1 , 2, 3].every((item) => {
+	return item > 0;
+})
+
+console.log(allPositiveNumbers);

Javascript/ES6-Array-Helper-Methods/filter-implement.js

@@ -0,0 +1,68 @@
+// Problem-1 Filter even numbers
+
+let numberArray = [1,2,3,4,5,6,7,8,9,10];
+
+let evenNumbers = [];
+
+for (let i = 0; i < numberArray.length; i++) {
+	if (numberArray[i] % 2 === 0) {
+		evenNumbers.push(numberArray[i]);
+	}
+}
+// console.log(evenNumbers);
+
+let evenNumbersWithFilter = numberArray.filter((item) => (item % 2 === 0));
+
+// console.log(evenNumbersWithFilter);
+
+
+// Problem 2:- Filter objects with tags javascript
+
+var persons = [
+  {id : 1, name : "John", tags : "javascript"}, 
+  {id : 2, name : "Alice", tags : "javascript"}, 
+  {id : 3, name : "Roger", tags : "java"},
+  {id : 4, name : "Adam", tags : "javascript"},
+  {id : 5, name : "Alex", tags : "java"}
+];
+
+let jsTags = persons.filter((item) => (item.tags === "javascript"))
+
+// console.log(jsTags);
+
+// Problem 2 with indexOf
+let jsTags2 = persons.filter((item) => (item.tags.indexOf("javascript") > -1));
+
+// console.log(jsTags2);
+
+// Other example - traverses an array and inserts non-duplicate elements into a new array. That is, if an element is duplicated, then only insert that element once into the final newArray
+
+function findNonDuplicates (array) {
+	let models = [];
+	for(var i = 0; i < array.length; i++) {
+    if(array.indexOf(array[i]) === i) {
+        models.push(array[i]);
+   		 }
+	}
+	return models;
+}
+
+let arr = [1, 2, 3, 4.4, 2];
+// console.log(findNonDuplicates((arr)));
+
+// using filter
+function findNonDuplicatesFilter (array) {
+	return array.filter((elem, index, arr) => {
+		return array.indexOf(elem) === index;
+	})
+}
+
+// console.log(findNonDuplicatesFilter(arr));
+
+// Write a function that returns the number of zeros in a given array?
+noOfZeros = arr => {
+	return arr.filter(zero => (zero === 0)).length 
+}
+
+console.log(noOfZeros([1, 2, 0, 0, 5]));
+

Javascript/ES6-Array-Helper-Methods/find-method.js

@@ -0,0 +1,67 @@
+/*
+
+find () - arguments explanation
+
+callback is a predicate - it should return a truthy or falsy value
+callback answers: is this item what you’re looking for?
+callback gets these arguments: item, index, list
+final return value: the item you’re looking for, or undefined
+note: stops iterating once it receives a truthy value from your callback.
+example use case
+
+
+findIndex:
+
+callback is a predicate - it should return a truthy or falsy value
+callback answers: is this item what you’re looking for?
+callback gets these arguments: item, index, list
+final return value: the index of the item you’re looking for, or -1
+note: stops iterating once it receives a truthy value from your callback.
+example use case:*/
+
+
+// Examaple to find negaive number
+function findNegativeNum (elem) {
+	return elem < 0;
+}
+
+let myArr = [1, 20, false, -2];
+
+// find method returns first negative number found
+// console.log(myArr.find(findNegativeNum));  // -2
+
+// findIndex method returns index of first negative number located
+// console.log(myArr.findIndex(findNegativeNum)); // 3
+
+// example function to find non-numeric array values
+function findNonNum(elem) {
+	return typeof elem !== 'number'	;
+}
+
+let myArr1 = [2, 27, 33.45, 'apple', 'yes', 0, 3.14];
+
+// find method returns value of first non-numeric element
+// console.log(myArr1.find(findNonNum));
+// findIndex returns location of first non-numeric element
+// console.log(myArr1.findIndex(findNonNum));
+
+// another example array to search for non-numeric values
+let myArr3 = [1, 2, 3, 4.4];
+
+// console.log(myArr3.find(findNonNum)); // returns undefined
+// console.log(myArr3.findIndex(findNonNum)); // returns -1
+
+
+const objects = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
+
+const findIdWithb = objects.find((item) => {
+	return item.id === 'b'
+});
+
+console.log(findIdWithb);
+
+const findIdIndexWithb = objects.findIndex((item) => {
+	return item.id === 'b'
+});
+
+console.log(findIdIndexWithb);

Javascript/ES6-Array-Helper-Methods/map-Implementation-On-Objects.js

@@ -0,0 +1,61 @@
+// The map() method creates a new array with the results of calling a provided function on every element in this array.
+
+// Problem - 1 We’ve an array of products, that has two properties: `id` and `name`. I want to get all ids, wih map() method:
+
+let products = [
+{
+  id: 0,
+  name: 'Product 1'
+},
+{
+  id: 1,
+  name: 'Product 2'
+}
+];
+
+let productsIds = products.map((item) => {
+	return item.id;
+})
+
+// console.log(productsIds);
+
+/* Problem-2
+
+The map() mehod's syntax is as below
+
+let newArr = oldArr.map((val, index, arr) => {
+  // return element to new Array
+});
+
+newArr — the new array that is returned
+oldArr — the array to run the map function on
+val — the current value being processed
+index — the current index of the value being processed
+arr — the original array
+
+Create an object from a given array and the given array is as below 
+[1,2,3,4];
+
+*/
+
+let arr = [1,2,3,4];
+
+let obj = arr.map((val, index, arr) => {
+		return {
+			VALUE : val,
+			INDEX: index
+		}
+	})
+
+// console.log(obj);
+
+// Problem-2 - Using map() return full name  from the given array
+var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];
+
+let newArr = [];
+
+oldArr.map((item, index) => {
+	item.full_name = [item.first_name, item.last_name].join(' ');
+	return item;
+});
+console.log(oldArr);