What's the difference between setting up headers for a fetch with new Headers() object, like so.

const headers = new Headers()
headers.set('User','Bob')

Versus assigning the desired headers with less code and not using the new Header() class.

const headers = { User: 'Bob'}

When performing a fetch in JavaScript.
And if both harvest a similar result which one is best practice when fetching data?

What's the difference between setting up headers for a fetch with new Headers() object, like so.

const headers = new Headers()
headers.set('User','Bob')

Versus assigning the desired headers with less code and not using the new Header() class.

const headers = { User: 'Bob'}

When performing a fetch in JavaScript.
And if both harvest a similar result which one is best practice when fetching data?

• javascript
• http-headers
• fetch-api

• 2 You've probably noticed that your fetch works either way. There are differences between the litteral and the instance of Header (the instance has useful methods), but why do you care ? Why is it a problem ? – Touffy Commented Jan 20, 2021 at 19:40
• I was curious which way is best practice to use because people use both ways interchangeably, so I thought to ask. I also thought other new developers might find this useful in the future, even though some thought it was a dumb question. I also think a lot xD – user2373368 Commented Jan 21, 2021 at 3:54
• I am confused why this was downvoted. When learning this stuff it is sometimes helpful to get a high-level overview to determine importance. This instance being that in JS you can create the same thing in different ways - but more importantly that Headers is just a simple object! :) – Taylor A. Leach Commented Feb 3, 2021 at 22:12
• I would suggest using an object literal because that's easier to read which equals best practice. – PHP Guru Commented Dec 30, 2024 at 9:40

2 Answers 2

The Headers object behaves similar to a Map except the key difference is that the header keys are case insensitive.

headers:

var headers = new Headers();

headers.set('CONTENT-tYpE', 'text/html');

console.log(headers.get('content-type')); // text/html

map:

var headers = new Map();

headers.set('CONTENT-tYpE', 'text/html');

console.log(headers.get('content-type')); // undefined

object:

var headers = {};

headers['CONTENT-tYpE'] = 'text/html';

console.log(headers['content-type']); // undefined

(when passed to fetch or a http request, all header names are normalized regardless of data type)

I'm so tired of people trying to define a single "best practice" for everything in JavaScript. The answer here is that there is no "better" way as far as the fetch API is concerned.

Depending on what you do before calling fetch, the litteral object or the instance of Headers may seem nicer. For example, getting hardcoded headers from a JSON configuration, it would be a waste of code to instantiate a Headers ; on the other hand, if you need to write some logic to generate the headers and select which ones to include, Headers has more explicit and case-insensitive (i.e. safer) methods.

But that's only my opinion about what I think are clear-cut examples. I'm sure there are people out there who would remend always using litterals because they want immutability, and others who'd say Headers is more expressive and better typed. Either way, that's not what StackOverflow is for.