[TIL / JavaScript] compareFunction, 화살표 함수

sort()

---

• sort() 메소드는 배열의 요소를 정렬한 후 그 배열을 반환한다.
• 매개변수가 제공되지 않으면 요소를 문자열로 변환하고 유니코드 순서로 문자열이 정렬된다.

const numbers = [10, 3, 8, 4, 1];
number.sort();

console.log(numbers);   // [1, 10, 3, 4, 8]

compareFunction

---

• 매개변수로 compareFunction 파라미터를 선언하면 compareFunction이 반환하는 값을 기준으로 정렬한다.

1. 반환값 < 0 : a가 b보다 앞에 있어야 한다.
2. 반환값 < 0 : a와 b의 순서를 바꾸지 않는다.
3. 반환값 > 0 : b가 a보다 앞에 있어야 한다.

이러한 매커니즘을 바탕으로 아래 코드를 작성할 수 있다.

const numbers = [10, 3, 8, 4, 1];
function compare(a, b){
	return a - b;
}
number.sort(compare);
console.log(numbers);   // [1, 3, 4, 8, 10]

compare라는 파라미터 함수를 만들고 인자로 받는 a에서 b를 뺀 값을 반환한 후, 만약 a가 1이고 b가 3이면 -2를 sort 메소드에게 전달한다. 그리고 sort는 compare 함수가 보낸 값이 음수인 것을 확인하고 1을 3 앞에 위치시킨다.

• 내림차순 정렬을 할 때는 a - b를 b - a로 바꾸어 실행한다.

단순한 계산의 경우 아래와 같은 익명 함수를 더 많이 사용한다.

numbers.sort(function(a, b){
	return a - b;
});

화살표 함수를 이용하면 더 간결하게 표현할 수 있다.

numbers.sort((a, b) => a - b;);

화살표 함수

---

• 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x } // single line block
x => x * x            // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있다.

() => { return { a: 1 }; }
() => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {          // multi line block.
  const x = 10;
  return x * x;
};

• 화살표 함수는 익명 함수로만 사용하기 때문에 호출하기 위해서 함수 표현식을 사용한다.

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

P.S.

아직 모르는 문법이 많다 보니 다른 사람이 쓴 코드를 읽는 게 다소 어렵다😅 하지만 다른 사람이 쓴 코드를 새로운 문법을 찾아볼 기회로 삼는 것도 나쁘지 않은 것 같다. 조급해하지 말고 꾸준히 성장할 수 있도록 노력하자😇

참고 문서

---

• Array.prototype.sort() by MDN Web Docs
• JavaScript sort()함수 톺아보기 by swimjiy
• 화살표 함수 by PoiemaWeb