What is the difference between this?

JavaScript
1

import captiz from “files”;
and
import * as bla from “captiz”;
Is it the same thing?

2

First one you are importing the default export from a module (a js file) called “files.js” and calling it “captiz”. For example

// files.js

// The thing you're exporting could be anything,
// In this case it's a function
function captiz () {
  return "hello";
}

export default captiz;

// In another file
import captiz from "files";

captiz()

If it’s the default you’re importing, you can call it whatever you want when you import it

// This is exactly the same, it will run that `captiz` function
import foobar from "files"

foobar();

The second one you are importing everything from a module (a JS file) called “captiz.js”, and giving everything it exports a namespace of bla. For example:

// captiz.js

export function foo() { return "foo"; }

export function bar() { return "bar"; }

// In another file
import * as bla from "captiz";

bla.foo();
bla.bar();

Edit note that you need to specify actual paths, for example if you have a module called “files.js” in the same directory as the file you’re importing it into:

import captiz from "./files";

Not

import captiz from "files";
3

In this case, if we have one more function in this with a name let’s say hello()
, can we import hello function individually but keeping the default same.

4

sure, it’s not often best practice but is useful in a number of situations.

// files.js

// whatever the deafult is, in this case a function
export default function () {
  return "I'm the default export"
}

export function hello() {
  return "hi";
}

or maybe

function captiz () {
  return "I'm the default export"
}

function hello() {
  return "hi";
}

function bye() {
  return "goodbye";
}

export default captiz;
export { hello, bye };

// in another file
import captiz, {hello} from "./files";

captiz() // returns "I'm the default export"
hello() // returns "hi"