DEV Community

loading...

Object-Oriented JavaScript — Parameters and Built-in Functions

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

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}`)
}
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

Then we get:

'Fog Level: 0 and spark level: 100'
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

This replaces the old way, which is:

const min = Math.min.apply(undefined, [1, 2, 3]);
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

Then week is:

["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

And we get 123.45 .

isNaN checks if a value is NaN .

So if we have:

isNaN(NaN)
Enter fullscreen mode Exit fullscreen mode

We get true .

isFinite checks if a value is a finite number.

So we can write:

isFinite(Infinity)
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

and we get:

'http://www.example.com/foo?bar=this%20and%20that'
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

and we get:

'http%3A%2F%2Fwww.example.com%2Ffoo%3Fbar%3Dthis%20and%20that'
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide