What’s the difference between import and require in javascript?

JavaScript require vs import

I was asked this question in one of my front-end interviews and answered it incorrectly, which inspired me to write this blog post.

We use either require or import to use code/data defined in other files(such as helpers.js, data.json ) in the current file.

Differences

1. import is part of ES6 spec whereas require is old school

2. With require, you can’t select what you need even if you don't need some part of it. but import allows you to selectively choose.

3. Loading is synchronous (step by step) for require on the other hand import can be asynchronous(without waiting for previous import) so it can perform a little better than require.

4. You can call require anywhere in your file but import needs to be called at top.

5. In react, you can use the required to dynamically import other components which in turn reduces the chunk size on the first load.