1.Using arrow function:
const first = ()=>{
const greet='Hi';
const second = ()=>{
const name='john';
console.error(greet);
}
return second;
}
const newFunc =first();
Notes:
here do call the function of first have to assign const variable and call that as variable name (Example:newFunc();)
2.Closures
Example:
function createGreeter(greeting) {
return function(name) {
alert(greeting + ', ' + name);
}
}
const sayHello = createGreeter('Hello');
output:
sayHello('Joe');
// Hello, Joe
example2:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<p>Counting with a local variable.</p>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo">0</p>
<script>
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
</script>
</body>
</html>
The variable add is assigned to the return value of a self-invoking function.
The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.
This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.
This is called a JavaScript closure. It makes it possible for a function to have "private" variables.
The counter is protected by the scope of the anonymous function, and can only be changed using the add function.
3.
If you want to extract properties under a different name, you can specify them using the following format
const obj = {
name: 'Joe',
food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.error(myName, myFood);
output:
Joe cake
const obj = {
name: 'Joe',
food: 'cake'
}
const { food: myName,name: myFood } = obj;
alert(myName, myFood,obj);
output:
cake Joe {name: 'Joe', food: 'cake'}
4.
In the following example, destructuring is used to cleanly pass the person object to the introduce function. In other words, destructuring can be (and often is) used directly for extracting parameters passed to a function. If you’re familiar with React, you probably have seen this before!
const person = {
name: 'Eddie',
age: 24
}
function introduce({ name, age }) {
console.log(`I'm ${name} and I'm ${age} years old!`);
}
introduce(person);
5.
const oldarr = [4, 6, -1, 3, 10, 4];
const newarr = new Set(oldarr);
alert(newarr);
alert(oldarr);
const arr1 = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr1);
alert(max);
output:
Set(5) { 4, 6, -1, 3, 10 }
[ 4, 6, -1, 3, 10, 4 ]
10
Array Methods
1.Map Methods
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]
2.Filter Methods
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]
3.Reduce Methods
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21
4. Find Methods
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6
note that while everything after 5 meets the criteria, only the first matching element is returned.
This is actually super helpful in situations where you would normally break a for loop when you find a match!
5.findIndex
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1
6.indexOf
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1
push, pop, shift, unshift
7.push()
push() adds new items to the end of an array:
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5
8.
unshift()
adds new items to the beginning of an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon", "Pineapple");
document.getElementById("demo").innerHTML = fruits;
output:
Lemon,Pineapple,Banana,Orange,Apple,Mango
9.shift()
removes the first item of an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
document.getElementById("demo").innerHTML = fruits;
output:
Orange,Apple,Mango
10. pop()
removes the last element of an array
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
document.getElementById("demo").innerHTML = fruits;
output:
Banana,Orange,Apple
11.Remember self-invoking functions(closure function)
closure function
The variable add is assigned to the return value of a self-invoking function.
The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.
This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.
This is called a JavaScript closure. It makes it possible for a function to have "private" variables.
The counter is protected by the scope of the anonymous function, and can only be changed using the add function.
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
14.anonymous function
function(){
//body
}
(()=>{
//body
})();
Call is a function that helps you change the context of the invoking function. In layperson's terms, it helps you replace the value of this inside a function with whatever value you want.
Apply is very similar to the call function. The only difference is that in apply you can pass an array as an argument list.
Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.