We occasionally send e newsletters to our subscribers about many amazing things. You can subscribe it from here
The most clear justification for learning JavaScript is on the off chance that you have any desires for turning into a web designer. Regardless of whether you haven't got your heart set on a tech vocation, being capable in JavaScript will empower you to develop sites without any preparation—a lovely helpful expertise to have in the present occupation market!
Here I'll tell you about 13 important JavaScript methods, tricks and tips respectively.
JavaScript important methods must know
Some important and fundamentals method you should know as you'll use them frequently in your projects.
-
slice(): The slice() method returns a shallow copy of a portion of an array into a new array object selected and end represent from start to end (end not included) where start and end represent the index of items in that array. Read more -> Slice method
arr.slice([start[, end]])
// start - Zero based index at which to start extraction
// end - Zero based index before which to end extraction
-
forEach(): The forEach() method executes a provided function once for each array element.
Syntax:
const array = ['a', 'b', 'c'];
array.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"
-
map(): The map() method is used to apply a function on every element in an array and then return a new array.
Syntax:
let Array = array.map( (v, i, a) => {
// return element to Array
});
// Array - the new array that is returned
// array - the array to run the map function on
// v - the current value being processed
// i - the current index of the value being processed
// a - the original array
-
includes: The include method returns true if the element in present and false if it's not.
const array = [1, 2, 3];
console.log(array.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false
-
reduce(): The reduce() method is used to apply a function to each element in the array to reduce the array to a single value.
let result = array.reduce((acc, v, i, a) => {
// return the new value to the result variable
}, initVal);
// result - the single value that is returned.
// array - the array to run the reduce function on.
// acc - the accumulator accumulates all of the returned values.
// v - the current value being processed
// i - the curret index of the value being processed
// a - the original array
// initVal - an optionally supplied initial value.
// If the initial value is not supplied,
// the 0th element is used as the initial value.
-
some: The some() method tests whether at least one of the elements in the array passes the test implemented by the provided function. The result of the some() method is a boolean.
const new = array.some(( v, i, a) => {
// return boolean
});
// newArray - the new array that is returned
// array - the array to run the map function on
// v - the current value being processed
// i - the current index of the value being processed
// a - the original array
-
filter(): The filter() method creates a new array filled with all the elements of the old array that pass a certain test, provided as a function.
let new = array.filter((v, i, a) => {
// return element to new if condition are met
// skip element if conditions are not met
});
// new - the array that is returned
// array - the array to run the filter function on
// v - the current value being processes
// i - the current index of the value being processed
// a - the original array
-
concat(): This method makes two strings into new one
const array = ['1', '2', '3'];
const array1 = ['4', '5', '6'];
const array2 = array.concat(array1);
console.log(array2);
// Output => [ "1", "2", "3", "4", "5", "6" ]
-
flat(): The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
const someArray = [bmw, [lambo, mustang], [car4, car5]]
someArray.flat()
//Output: [bmw, lambo, mustang, car4, car5]
-
pop(): The pop method removes the last element from the end of the given array.
const numbers = [bmw, bulldog, dane];
numbers.pop();
console.log(numbers); // [ bmw, bulldog ]
Tips and Tricks🤩
- Transform arguments objects into an array :
var Array = Array.prototype.slice.call(arguments); - Empty the array :
var Array = [69, 79, 89];
Array.length = 0; // Array will be equal to []
- Disable right click on your website:
<body oncontextmenu="return false">
<div></div>
</body>
- Before declaring the object, assign a dynamic property
const dynamic = 'color';
var item = {
brand: 'Mustang',
[dynamic]: 'Fuchsia'
}
console.log(item);
// { brand: "Mustang", color: "Fuchsia" }
- Making the conditions short
if (coffee) {
spilled();
}
// Another way
coffee && spilled()
``
- convert string to number : We've used the `+` operator. Be careful with it as it only works with `string numbers`.
javascript
string = "6969";
console.log(+string);
// 6969
string = "hello";
console.log(+string);
// NaN
- convert number to string: We just faked javascript 😂, we just have used concatenation operator with an empty set of quotation
javascript
var converted = 9 + "";
console.log(converted);
// 9
console.log(typeof converted);
// STRING
- merging arrays: Using the `array.concat()` function will lower the consumption of memory.
javascript
// good for small arrays
var array = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array.concat(array2));
// for merging large arrays we can use
Array.push.apply(array, array2)
--------
**Being mindful is undeniably more significant than being proficient**.
Thank You for Reading this post 🤩
> We occasionally send newsletters to our subscribers about many amazing things. You can subscribe it from [here](https://www.devintro.com)
Top comments (0)