DEV Community

Arjun Vijay Prakash
Arjun Vijay Prakash

Posted on โ€ข Edited on

14 2 5 2 4

Unexpected Behind The Scenes of console.log() ๐Ÿ˜ถโ€๐ŸŒซ

๐Ÿค” Have you ever thought about how console.log works and how it can handle many arguments at once?

If youโ€™ve worked with JavaScript, then you must have used the console.log method.

It's a function that can accept any number of arguments and print them in the console.

console.log(n1, n2, n3, n4.....n)
Enter fullscreen mode Exit fullscreen mode

๐Ÿ˜ฎ But have you wondered how it handles these variable number of arguments?

Well, such functions are also known as variadic functions and you can create them in JavaScript using the rest operator(...).

Let's consider an example of a function written to calculate the sum of n numbers.

First, you create a function using the rest operator to collect all arguments into an array.

This allows an unlimited number of arguments to the function.

(To be honest, there's always some limit, try finding out and comment below as a sign you read the article!)

let sum = (...args) => {
    console.log(args)
}

sum(1, 2, 3, 4, 5, 6);
sum(0);
sum(10, 20, 30);
Enter fullscreen mode Exit fullscreen mode

Image

When the function is called, observe this keyword args captures the arguments as an array.

Once you have this array of values you can continue writing the code to print the sum.

let calculateSum = (...numbers) => { 
    console.log(numbers.reduce((total, num) => total + num))
} 

calculateSum(1, 2, 3, 4, 5, 6); 
calculateSum(0); 
calculateSum(10, 20, 30);
Enter fullscreen mode Exit fullscreen mode

Image

Comment below the theories you thought were behind this functionality! (Believe it or not! I thought it was some kind of miracle ๐Ÿ˜‚)

I hope you liked the article! โค๏ธ

Connect with me: linktree

Happy Coding! ๐Ÿš€
Thanks for 14415! ๐Ÿค—

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (11)

Collapse
 
jameslivesey profile image
James Livesey โ€ข

Not to mention that arguments is a reserved word to get all the arguments passed to a function as an iterable object (including arguments already named) without having to use the spread operator in the function's parameters list:

function test(a, b, c) {
    console.log("All arguments:", arguments);

    // We must use the spread operator to use `forEach` as `arguments` is an object with other properties in it
    [...arguments].forEach(function(arg) {
        console.log(arg);
    });
}

test("hello", 123, "world", 456, null);
Enter fullscreen mode Exit fullscreen mode

Result:

All arguments: ["hello", 123, "world", 456, null]
hello
123
world
456
null
Enter fullscreen mode Exit fullscreen mode

(Notice how arguments contains extra arguments than explicitly specified with the named a, b and c parameters.)

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash โ€ข

This is amazing! Thanks for the info, James. ๐Ÿ™Œ

Collapse
 
best_codes profile image
Best Codes โ€ข

Great article! Browsers and even the simplest things in JS really are amazing. (For that matter, that we can turn sand into silicon and silicon into computers).
Keep up the good writing!

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash โ€ข

Thank you so much for your kind words!

I liked that reference to sand, silicon and computers, it greatly covers the fascinating hardware part.

Collapse
 
best_codes profile image
Best Codes โ€ข

No problem! You deserved some kindness for such awesome content!
Keep up the good work, and happy coding!

Collapse
 
anmolbaranwal profile image
Anmol Baranwal โ€ข

Didn't knew that :D

Thanks for the quick explanation.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash โ€ข

It's my pleasure!
Thanks for reading the article.
(i'd be grateful if you shared this with your friends)

Collapse
 
lexlohr profile image
Alex Lohr โ€ข

Arrays in JS have a maximum number of 2ยณยฒ-2 elements regardless if they are constructed via rest operator or otherwise.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash โ€ข

Thanks for sharing knowledge, buddy!

Collapse
 
alexroor4 profile image
Alex Roor โ€ข

Thanks for sharing your expertise on this matter. Your depth of knowledge shines through in every paragraph.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash โ€ข โ€ข Edited

Thanks, Alex!

I have to admit, I thought it was some kind of miracle ๐Ÿ˜‚

Well, every master was once a beginner!

Image of Docusign

๐Ÿ› ๏ธ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more