[D+41] 이벤트와 메시지, sort의 원리

 

 

국비지원 D+41

-  이벤트와 메시지, sort의 원리 -

 

---

 

이벤트와 메시지

• 이벤트

- 이벤트는 상태가 바뀌는 사건을 의미한다.

- 웹은 이벤트 덩어리인데 우리가 이벤트가 발생되었다고 순간에 인식하지 못하는 것은 그만큼 컴퓨터 속도가 빠르다는 것을 의미한다.

- 이벤트는 발생할때마다 해당되는 메시지가 튀어 나온다.

ex) event : 마우스를 움직인다 → message : 마우스를 움직이는 위치에 대한 좌표값

 

• 메시지

- 이벤트가 발생하면서 나오는 값을 메시지라고 하는데 메시지값을 기반으로 웹이 돌아간다.

 

예들들어 설명하자면, 만약 A사이트에 있는 3번째 버튼을 클릭하고 싶다.

그래서 마우스를 클릭하면 마우스를 클릭한 이벤트가 발생하게 되고 이벤트가 발생되는 동시에 마우스 좌표값에 대한 메시지가 나온다.

이때 단순히 화면에 대한 좌표값이 나오는게 아니라 내가 클릭한게 어느사이트고 사이트에서 어떤 버튼인지에 대한 정보를 알려줘 브라우저가 동작되게 된다.

 

마우스클릭이벤트를 통해 온 메시지가 오면 가장상위 window객체에서부터 차례차례들어가서 목표지점까지 도달하는 원리이며, 이를 통해 내가 클릭한 부분만 이벤트가 걸리는 것이 아니라 계층적으로 메시지가 라우팅된다는 것을 알 수 있다.

 

---

sort의 원리

• sort란?

데이터가 기준에 따라서 자기의 위치를 찾는 절차이다.

=> 순서대로만 정렬하는 것이 정렬이 아니라 자기 위치를 찾아가는것이 정렬이 되는 것이다.

 

• 원리

sort를 사용할 때 array.sort()로만 사용하면 해당 메소드는 유니코드를 기반으로 정렬하기 때문에  내가 원하는 오름차순이나 내림차순을 표현할 수 없다.

 

array.sort(비교함수);

이를 해결하기 위해서 정렬에는 종류가 많지만 모든 정렬의 기준은 "비교"이다.

그렇기 때문에 sort 메소드 안에 두 값을 기준에 맞게 비교하는 compare함수를 넣어서 값을 비교할 수 있다.

 

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

comapre함수는 함수의 반환 값에 따라 두 값이 정렬되는 것으로 두 값 a와 b를 비교했을 때 조건에서 a가 b보다 낮은 인덱스 값을 가져야할 땐 -1리턴을, 높은 인덱스 값을 가져야 할 때에는 1을 리턴하고 그 외의는 0을 리턴하는 방식으로 compare함수를 표현할 수 있다.

 

function compareNumbers(a, b) {
  return a - b;
}

또한 비교함수를 축약해서 위의 코드로도 표현할 수 있으며, 해당 코드는 오름차순정렬을 표현한 것이다.

 

// 내림차순 정렬하되 value 99인 놈은 앞으로 보내기
const data = [
	{
		id: 'abc1',
		vlaue : 150
	}, 
	{
		id: 'abc2',
		vlaue : 99
	}, 
	{
		id: 'abc3',
		vlaue : 99
	}, 
	{
		id: 'abc4',
		vlaue : 500
	}, 
	{
		id: 'abc5',
		vlaue : 48
	}
];

const compare = function(a, b)
	{
		if(a.vlaue === 99)
		{
			return -1;
		}
		else if (b.vlaue === 99)
		{
			return 1;
		}
		else
		{
			return b.vlaue - a.vlaue;
		}
	};

data.sort(compare);

console.log(data);

이밖에도 정렬은 단순히 숫자의 크기순으로 나열하는 것이 아니라 특정 조건을 만들어 값을 나열할 수도 있다.