javascript 인수

기본적인건데 이해가 잘안가서 질문 드립니다 ㅠ
function dist(p, q) {
var dx = q.x - p.x;
var dy = q.y - p.y;
return Math.sqrt(dx * dx+dy * dy);
}

var p1 = {x:1, y:1};
var p2 = {x:4, y:5};
var d = dist(p1,p2);

이렇게 쓰면 값이 5라고 나오는데 왜 저렇게 나오는지 이해가 안갑니다.

dist(p1, p2)를 넣으면 dist( )안에서 어떻게 동작을 하는거죠?

sqrt((4 - 1)^2 + (5 - 1)^2)5가 맞습니다.

변수를 함수 인자로 넘기다보니 헷갈릴 법 하네요:)

  1. 우선 p1과 p2에 할당한 값을 그대로 따라가보겠습니다.
// dist함수 호출
dist({x:1,y:1}, {x:4, y:5});
  1. dist함수 정의한 부분으로 넘어갑니다. 파라미터 각각의 위치에 함수 인자로 넘긴 값으로 대체해봅니다.
function dist({x:1.y:1},{x:4,y:5}){
      ...
}

p는 {x:1,y:1} 이고
q는 {x:4, y:5} 입니다.

  1. dx를 계산합니다.
// p는 {x:1,y:1}. p.x 는 1
// q는 {x:4, y:5}. q.x 는 4
var dx = q.x - p.x;
           4 -  1
// dx 값은 3

  1. dy 값을 계산합니다.
// p는 {x:1, y:1}. p.y는 1
// q는 {x:4, y:5}. p.y는 5
var dy  = q.y - p.y;
            5 - 1
// dy는 4
  1. 이제 Math.sqrt 값을 구합니다.
// dx 는 3, dy는 4

return Math.sqrt(dx*dx + dy*dy);
                  3*3  +  4*4
                   9   +  16
                       25
// Math.sqrt는 제곱근 값을 구하니 루트 25 => 루트 5^2 => 5 
// 결과는 5가 나옵니다