질문이요

1.
아래 두 함수를 비교해 보세요.

function sayHello(name, age, job) {
    console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}, 직업은 ${job}입니다.`);
}

이 경우, 호출할 때 sayHello('김미미', 20, '학생'); 이렇게 인자의 순서를 맞춰서 호출해야 결과가 정확히 나오겠죠? 만약 실수로 sayHello(20, '김미미', '학생'); 이렇게 순서를 잘못 넣어 호출했다면 콘솔에는
안녕하세요, 제 이름은 20이고 나이는 김미미, 직업은 학생입니다. 이렇게 나오겠지요~

반면에, 매개변수를 객체(Object)로 처리하면
function sayHello(obj) {
    console.log(`안녕하세요, 제 이름은 ${obj.name}이고 나이는 ${obj.age}, 직업은 ${obj.job}입니다.`);
}

이 경우에는 호출할 때
sayHello({ age: 20, name: '김미미', job: '학생' });
이런 식으로 객체의 속성에 값을 넣으면 되기 때문에, 순서가 상관이 없습니다.
매개변수 개수가 엄청 많이 필요한 함수일수록 이런 방식이 유용하겠지요~

2.
바로 위에서 설명한, 매개변수를 객체로 이용한 것입니다. 1번의 예시에서는 인자로 객체를 받을 매개변수 이름을 obj라고 한 것이고, 말씀하신 부분에서는 변수 이름을 info라고 한 것 뿐이지요. 매개변수는 우리가 만드는 변수이기 때문에 이름을 직접 마음대로 지을 수 있습니다.

3.
x좌표는 가로 위치이기 때문에 left만 지정해 준 것입니다. y좌표도 필요하다면 top도 함께 설정해주면 되겠지요~

4.
인스턴스는 우리가 직접 사용할 객체이기 때문에, 필요한 곳 어디에서는 만들어질 수 있습니다.
꼭 어디에 위치해야한다, 이런 규칙이 있기는 어렵습니다. 언제 어디서 필요할지는 만드는 기능에 따라 달라지는 것이니까요. 우리 예제처럼 클릭할 때마다 만들어질 수도 있고, 특정 데이터 로드가 끝나면 만들어질 수도 있고.. 그냥 페이지가 로드되면 자동으로 몇개를 만들 수도 있고.. 그런거지요~