Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
Subscribe to my email list now at http://jauyeung.net/subscribe/
JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at various kinds of functions and parameters.
Default Parameters
We can set default parameters in a function.
To do that, we just assign a value to a parameter.
We can write:
function render(fogLevel = 0, sparkLevel = 100) {
console.log(`Fog Level: ${fogLevel} and spark level:
${sparkLevel}`)
}
We have a render function with the fogLevel and sparkLevel parameters.
And we set their default to 0 and 100 respectively.
Then if we have:
render()
Then we get:
'Fog Level: 0 and spark level: 100'
Default parameters have their own scope.
The scope is sandwich between the outer functina and the inner function scope.
So if we have:
let scope = "outer";
function scoper(val = scope) {
let scope = "inner";
console.log(val);
}
scoper();
Then val would be 'outer' since it takes scope from outside of the function.
Rest Parameters
Rest parameters let us get an arbitrary number of arguments from a function.
For instance, we can write:
function getTodos(...todos) {
console.log(Array.isArray(todos));
console.log(todos)
}
Then we get the first console log is true .
And the 2nd is [“eat”, “drink”, “sleep”] .
todos is an array because we have a rest operator before it.
This makes it gets the arguments and put them all in the todos array.
And we get all of them with the 2nd console log.
Spread Operators
The spread operator lets us spread array entries as arguments of a function.
We can also use it to spread values in an array.
For instance, we can write:
const min = Math.min(...[1, 2, 3]);
This replaces the old way, which is:
const min = Math.min.apply(undefined, [1, 2, 3]);
The spread operator is easier to understand and it’s shorter.
1, 2 and 3 are the arguments of Math.min .
We can also use the spread operator to merge array items into another array.
For instance, we can write:
const midweek = ['Wed', 'Thu'];
const weekend = ['Sat', 'Sun'];
const week = ['Mon', 'Tue', ...midweek, 'Fri', ...weekend]
Then week is:
["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
Predefined Functions
There’s a number of predefined functions in JavaScript.
They’re:
-
parseInt() -
parseFloat() -
isNaN() -
isFinite() -
encodeURI() -
decodeURI() -
encodeURIComponent() -
decodeURIComponent() -
eval()
parseInt parses a non-number value to an integer.
For instance, we can use parseInt by writing:
parseInt('123')
parseFloat parses a non-number value to a floating-point number.
And we get 123 .
For instance, we can use parseFloatby writing:
parseFloat('123.45')
And we get 123.45 .
isNaN checks if a value is NaN .
So if we have:
isNaN(NaN)
We get true .
isFinite checks if a value is a finite number.
So we can write:
isFinite(Infinity)
and we get false .
We can encode a string to a URI with encodeURI .
For instance, if we have:
const url = 'http://www.example.com/foo?bar=this and that';
console.log(encodeURI(url));
and we get:
'http://www.example.com/foo?bar=this%20and%20that'
And we can decode a URI string with decodeURI .
encoudeURIComponent and decodeURIComponent can do the same thing for part of a URI.
If we write:
const url = 'http://www.example.com/foo?bar=this and that';
console.log(encodeURIComponent(url));
and we get:
'http%3A%2F%2Fwww.example.com%2Ffoo%3Fbar%3Dthis%20and%20that'
eval lets us run code from a string. This is one we shouldn’t use because anyone can pass in a malicious string to it.
And code in strings can’t be optimized.
Conclusion
Default parameters let us set default values for parameters if they aren’t set with arguments.
JavaScript comes with some predefined functions we can use.
The rest and spread operator are handy for handling arguments.
Top comments (0)