JavaScript Basic Concept Part2
Reduce function
Use it when: You have an array of amounts and you want to add them all up.
const euros = [29.76, 41.85, 46.5];
const sum = euros.reduce((total, amount) => total + amount);
How to use it:
- The calculation is repeated for each amount in the array, but each time the current value changes to the next number in the array, moving right.
- When there are no more numbers left in the array the method returns the total value.
Array push()
We use JavaScript array push method to push one or more values into an array. As you can see, the length of the array will be altered thanks to this function.
For example
// Example JavaScript push method
var array = [];
array.push(10, 20, 30, 40, 50, 60, 70);
console.log(array);
// Output: [10, 20, 30, 40, 50, 60, 70]
Array pop()
We use pop JavaScript to remove the last element in an array. Moreover, this function returns the removed element. At the same, it will reduce the length of the array by one. This function is the opposite of the JavaScript array push function.
// Example JavaScript pop() method
var names = [‘Blaire’, ‘Ash’, ‘Coco’, ‘Dean’, ‘Georgia’];
var remove = names.pop();
console.log(names);
//Output: [“Blaire”, “Ash”, “Coco”, “Dean”]
console.log(remove);
//Output: ‘Georgia’
try…catch
A try…catch is a commonly used statement in various programming languages. Basically, it is used to handle the error-prone part of the code. It initially tests the code for all possible errors it may contain, then it implements actions to tackle those errors (if occur). A good programming approach is to keep the complex code within the try…catch statements.try{
var a=2;
if(a==2)
document.write(“ok”);
}
catch(Error){
document.write(“Error found”+e.message);
}
finally{
document.write(“Value of a is 2 “);
}
Var Declarations and Hoisting
Variable declarations using var are treated as if they are at the top of the function (or global scope, if declared outside of a function) regardless of where the actual declaration occurs; this is called hoisting. For a demonstration of what hoisting does, consider the following function definition:
function getValue(condition) {
if (condition) {
var value = “blue”;
// other code
return value;
} else {
// value exists here with a value of undefined
return null;
}
// value exists here with a value of undefined
}
Class Expressions
These class expressions are designed to be used in variable declarations or passed into functions as arguments. Here’s the class expression equivalent of the previous examples:
let PersonClass = class {
// equivalent of the PersonType constructor
constructor(name) {
this.name = name;
}
// equivalent of PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
};
let person = new PersonClass(“Nicholas”);
person.sayName();
Class Declarations
Class declarations begin with the class keyword followed by the name of the class. The rest of the syntax looks similar to concise methods in object literals without requiring commas between them. For example, here’s the class equivalent of the previous example:
class PersonClass {
// equivalent of the PersonType constructor
constructor(name) {
this.name = name;
}
// equivalent of PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}
let person = new PersonClass(“Nicholas”);
person.sayName();
Named Class Expressions
The previous section used an anonymous class expression in the example, but you can also name class expressions just like you can name function expressions. To do so, include an identifier after the class keyword:
let PersonClass = class PersonClass2 {
// equivalent of the PersonType constructor
constructor(name) {
this.name = name;
}
// equivalent of PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
Arrow Function
Arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular functions. For example
This function
// function expression
let x = function(x, y) {
return x * y;
}
can be written as
// using arrow functions
let x = (x, y) => x * y;
Example
let greet = () => console.log(‘Hello’);
greet(); // Hello
Default Parameters
If a function in JavaScript is called with missing arguments (less than declared), the missing values are set to undefined.
Sometimes this is acceptable, but sometimes it is better to assign a default value to the parameter:
Example
function myFunction(x, y) {
if (y === undefined) {
y = 2;
}
}
spread operator
The spread operator is a new addition to the set of operators in JavaScript ES6. It takes in an iterable (e.g an array) and expands it into individual elements.